使用Vue写一个登陆页面并在管理页面查看和修改
注册页面
代码如下
html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>注册</title> 6 <link rel="stylesheet" href="css/register.css"> 7 <link rel="stylesheet" href="lib/bootstrap-3.3.7.css"> 8 <script src="lib/vue-2.4.0.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 13 <div class="container"> 14 <div class="center-block"> 15 <form class="form-signin input-group-lg col-lg-5 col-md-offset-3" @submit="checkForm"> 16 17 <h2 class="form-signin-heading">用户注册</h2> 18 19 <label for="username"></label> 20 <input type="text" id="username" class="form-control" placeholder="用户名" v-model="username"> 21 22 <label for="email" class="sr-only">邮件</label> 23 <input type="email" id="email" class="form-control" placeholder="邮件地址" v-model="email"> 24 25 <label for="password" class="sr-only">密码</label> 26 <input type="password" id="password" class="form-control" placeholder="密码" v-model="password"> 27 28 <label for="telephone" class="sr-only">电话</label> 29 <input type="text" id="telephone" class="form-control" placeholder="请输入你的电话" v-model="telephone"> 30 31 <div class="checkbox"> 32 <label> 33 <input type="checkbox" value="remember-me"> 记住我 34 </label> 35 </div> 36 <button class="btn btn-lg btn-primary btn-block" type="submit button" @click="addUserInfo">注册</button> 37 </form> 38 </div> 39 40 </div> 41 <div id="error" class="container col-md-offset-4"> 42 <p v-if="errors.length"> 43 <b>错误的结果:</b> 44 <ul> 45 <li v-for="error in errors">{{ error }}</li> 46 </ul> 47 </p> 48 </div> 49 50 <!--<div v-if="userInfo.length === 0">--> 51 52 <!--</div>--> 53 <!--<div id="jieshou" class="container col-md-offset-4" v-else>--> 54 <!--<ul v-for="(item,index) in userInfo">--> 55 <!--<li>用户名：{{item.username}}</li>--> 56 <!--<li>密码：{{item.password}}</li>--> 57 <!--<li>电话：{{item.telephone}}</li>--> 58 <!--<li>邮件:{{item.email}}</li>--> 59 <!--</ul>--> 60 </div> 61 62 </div> 63 </body> 64 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>注册</title> 6 <link rel="stylesheet" href="css/register.css"> 7 <link rel="stylesheet" href="lib/bootstrap-3.3.7.css"> 8 <script src="lib/vue-2.4.0.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 13 <div class="container"> 14 <div class="center-block"> 15 <form class="form-signin input-group-lg col-lg-5 col-md-offset-3" @submit="checkForm"> 16 17 <h2 class="form-signin-heading">用户注册</h2> 18 19 <label for="username"></label> 20 <input type="text" id="username" class="form-control" placeholder="用户名" v-model="username"> 21 22 <label for="email" class="sr-only">邮件</label> 23 <input type="email" id="email" class="form-control" placeholder="邮件地址" v-model="email"> 24 25 <label for="password" class="sr-only">密码</label> 26 <input type="password" id="password" class="form-control" placeholder="密码" v-model="password"> 27 28 <label for="telephone" class="sr-only">电话</label> 29 <input type="text" id="telephone" class="form-control" placeholder="请输入你的电话" v-model="telephone"> 30 31 <div class="checkbox"> 32 <label> 33 <input type="checkbox" value="remember-me"> 记住我 34 </label> 35 </div> 36 <button class="btn btn-lg btn-primary btn-block" type="submit button" @click="addUserInfo">注册</button> 37 </form> 38 </div> 39 40 </div> 41 <div id="error" class="container col-md-offset-4"> 42 <p v-if="errors.length"> 43 <b>错误的结果:</b> 44 <ul> 45 <li v-for="error in errors">{{ error }}</li> 46 </ul> 47 </p> 48 </div> 49 50 <!--<div v-if="userInfo.length === 0">--> 51 52 <!--</div>--> 53 <!--<div id="jieshou" class="container col-md-offset-4" v-else>--> 54 <!--<ul v-for="(item,index) in userInfo">--> 55 <!--<li>用户名：{{item.username}}</li>--> 56 <!--<li>密码：{{item.password}}</li>--> 57 <!--<li>电话：{{item.telephone}}</li>--> 58 <!--<li>邮件:{{item.email}}</li>--> 59 <!--</ul>--> 60 </div> 61 62 </div> 63 </body> 64 </html>
javascript
1 <script> 2 3 var vm = new Vue({ 4 el: '#app', 5 data: { 6 errors: [], 7 username: null, 8 email: null, 9 password: null, 10 telephone: null, 11 userInfo: JSON.parse(localStorage.getItem('userInfo')) || [] 12 }, 13 methods: { 14 checkForm: function (e) { 15 if (this.username && this.email && this.password && this.telephone) { 16 return true; 17 } 18 19 this.errors = []; 20 21 if (!this.username) { 22 this.errors.push('请输入用户名'); 23 } else if (!this.vaildUsername(this.username)) { 24 this.errors.push('请输入4-16个英文大小写和数字的组合'); 25 } 26 27 if (!this.email) { 28 this.errors.push('请输入邮件'); 29 } else if (!this.vaildEmail(this.email)) { 30 this.errors.push('邮件格式为xx@xx.com'); 31 } 32 33 if (!this.password) { 34 this.errors.push('请输入密码'); 35 } else if (!this.vaildPassword(this.password)) { 36 this.errors.push('密码有误'); 37 } 38 39 if (!this.telephone) { 40 this.errors.push('请输入手机号'); 41 } else if (!this.vaildTelephone(this.telephone)) { 42 this.errors.push('手机号为11个纯数字组合') 43 } 44 45 e.preventDefault(); 46 }, 47 48 vaildUsername: function (username) { //用户名表单效验 49 var re = /^[a-zA-Z0-9_-]{4,16}$/; 50 return re.test(username); 51 }, 52 53 vaildEmail: function (email) { //表单邮件的效验 54 var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 55 return re.test(email); 56 }, 57 58 vaildPassworld: function (password) { //表单密码的效验 59 var re = /^[a-zA-Z0-9_-]{4,16}$/; 60 return re.test(password); 61 }, 62 63 vaildTelephone: function (telephone) { //表单电话的效验 64 var re = /^\d{11,20}$/; 65 return re.test(telephone); 66 }, 67 68 addUserInfo() { 69 if (this.username && this.password && this.email && this.telephone) { 70 var obj = { 71 username: this.username, 72 password: this.password, 73 email: this.email, 74 telephone: this.telephone 75 } 76 this.userInfo.push(obj) 77 localStorage.setItem('userInfo', JSON.stringify(this.userInfo)) 78 this.username = '' 79 this.password = '' 80 this.email = '' 81 this.telephone = '' 82 } 83 window.open('management.html') 84 } 85 86 } 87 }) 88 </script>
1 <script> 2 3 var vm = new Vue({ 4 el: '#app', 5 data: { 6 errors: [], 7 username: null, 8 email: null, 9 password: null, 10 telephone: null, 11 userInfo: JSON.parse(localStorage.getItem('userInfo')) || [] 12 }, 13 methods: { 14 checkForm: function (e) { 15 if (this.username && this.email && this.password && this.telephone) { 16 return true; 17 } 18 19 this.errors = []; 20 21 if (!this.username) { 22 this.errors.push('请输入用户名'); 23 } else if (!this.vaildUsername(this.username)) { 24 this.errors.push('请输入4-16个英文大小写和数字的组合'); 25 } 26 27 if (!this.email) { 28 this.errors.push('请输入邮件'); 29 } else if (!this.vaildEmail(this.email)) { 30 this.errors.push('邮件格式为xx@xx.com'); 31 } 32 33 if (!this.password) { 34 this.errors.push('请输入密码'); 35 } else if (!this.vaildPassword(this.password)) { 36 this.errors.push('密码有误'); 37 } 38 39 if (!this.telephone) { 40 this.errors.push('请输入手机号'); 41 } else if (!this.vaildTelephone(this.telephone)) { 42 this.errors.push('手机号为11个纯数字组合') 43 } 44 45 e.preventDefault(); 46 }, 47 48 vaildUsername: function (username) { //用户名表单效验 49 var re = /^[a-zA-Z0-9_-]{4,16}$/; 50 return re.test(username); 51 }, 52 53 vaildEmail: function (email) { //表单邮件的效验 54 var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 55 return re.test(email); 56 }, 57 58 vaildPassworld: function (password) { //表单密码的效验 59 var re = /^[a-zA-Z0-9_-]{4,16}$/; 60 return re.test(password); 61 }, 62 63 vaildTelephone: function (telephone) { //表单电话的效验 64 var re = /^\d{11,20}$/; 65 return re.test(telephone); 66 }, 67 68 addUserInfo() { 69 if (this.username && this.password && this.email && this.telephone) { 70 var obj = { 71 username: this.username, 72 password: this.password, 73 email: this.email, 74 telephone: this.telephone 75 } 76 this.userInfo.push(obj) 77 localStorage.setItem('userInfo', JSON.stringify(this.userInfo)) 78 this.username = '' 79 this.password = '' 80 this.email = '' 81 this.telephone = '' 82 } 83 window.open('management.html') 84 } 85 86 } 87 }) 88 </script>
管理页面
html代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <script src="lib/vue-2.4.0.js"></script> 8 <link rel="stylesheet" href="lib/bootstrap-3.3.7.css"> 9 <body> 10 11 <div id="app"> 12 13 <div class="panel panel-primary"> 14 <div class="panel-heading"> 15 <h3 class="panel-title">添加用户</h3> 16 </div> 17 <div class="panel-body form-inline"> 18 <label> 19 用户名: 20 <input type="text" class="form-control" v-model="id"> 21 </label> 22 <label> 23 密码: 24 <input type="text" class="form-control" v-model="pass"> 25 </label> 26 <label> 27 邮件: 28 <input type="text" class="form-control" v-model="Email"> 29 </label> 30 <label> 31 电话: 32 <input type="text" class="form-control" v-model="tel"> 33 </label> 34 35 <input type="button" value="添加" class="btn btn-primary" @click="add()"> 36 37 <label> 38 搜索关键字: 39 <input type="text" class="form-control" v-model="keywords"> 40 </label> 41 </div> 42 </div> 43 44 45 <table class="table table-hover table-border table-striped"> 46 <thead> 47 <tr> 48 <th>用户名</th> 49 <th>密码</th> 50 <th>邮件</th> 51 <th>电话</th> 52 </tr> 53 </thead> 54 <div v-if="userInfo.length === 0"> 55 56 </div> 57 <div v-else> 58 <tr v-for="(item,index) in userInfo"> 59 <td>{{ item.username }}</td> 60 <td>{{ item.password }}</td> 61 <td>{{ item.email}}</td> 62 <td>{{ item.telephone}}</td> 63 <td> 64 <a href="#" @click="dellocal">删除</a> 65 </td> 66 </tr> 67 </div> 68 69 <tbody v-for="item in search(keywords)" :key="item.id"> 70 <tr> 71 <td>{{ item.id }}</td> 72 <td>{{ item.pass }}</td> 73 <td>{{ item.Email}}</td> 74 <td>{{item.tel}}</td> 75 <td> 76 <a href="#" @click.prevent="del(item.id)">删除</a> 77 </td> 78 </tr> 79 </tbody> 80 </table> 81 82 </div> 83 </body> 84 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <script src="lib/vue-2.4.0.js"></script> 8 <link rel="stylesheet" href="lib/bootstrap-3.3.7.css"> 9 <body> 10 11 <div id="app"> 12 13 <div class="panel panel-primary"> 14 <div class="panel-heading"> 15 <h3 class="panel-title">添加用户</h3> 16 </div> 17 <div class="panel-body form-inline"> 18 <label> 19 用户名: 20 <input type="text" class="form-control" v-model="id"> 21 </label> 22 <label> 23 密码: 24 <input type="text" class="form-control" v-model="pass"> 25 </label> 26 <label> 27 邮件: 28 <input type="text" class="form-control" v-model="Email"> 29 </label> 30 <label> 31 电话: 32 <input type="text" class="form-control" v-model="tel"> 33 </label> 34 35 <input type="button" value="添加" class="btn btn-primary" @click="add()"> 36 37 <label> 38 搜索关键字: 39 <input type="text" class="form-control" v-model="keywords"> 40 </label> 41 </div> 42 </div> 43 44 45 <table class="table table-hover table-border table-striped"> 46 <thead> 47 <tr> 48 <th>用户名</th> 49 <th>密码</th> 50 <th>邮件</th> 51 <th>电话</th> 52 </tr> 53 </thead> 54 <div v-if="userInfo.length === 0"> 55 56 </div> 57 <div v-else> 58 <tr v-for="(item,index) in userInfo"> 59 <td>{{ item.username }}</td> 60 <td>{{ item.password }}</td> 61 <td>{{ item.email}}</td> 62 <td>{{ item.telephone}}</td> 63 <td> 64 <a href="#" @click="dellocal">删除</a> 65 </td> 66 </tr> 67 </div> 68 69 <tbody v-for="item in search(keywords)" :key="item.id"> 70 <tr> 71 <td>{{ item.id }}</td> 72 <td>{{ item.pass }}</td> 73 <td>{{ item.Email}}</td> 74 <td>{{item.tel}}</td> 75 <td> 76 <a href="#" @click.prevent="del(item.id)">删除</a> 77 </td> 78 </tr> 79 </tbody> 80 </table> 81 82 </div> 83 </body> 84 </html>
管理页面的javascript代码
1 <script> 2 3 var vm = new Vue({ 4 el: '#app', 5 data: { 6 id: '', 7 pass: '', 8 Email: '', 9 tel: '', 10 11 username: null, 12 email: null, 13 password: null, 14 telephone: null, 15 keywords: '',//搜索的关键字 16 userInfo: JSON.parse(localStorage.getItem('userInfo')) || [], 17 list: [ 18 {id: 222222, pass: '222222', Email: '5656561@qq.com', tel: '18959290335'}, 19 {id: 333333, pass: '333333', Email: '5656561@qq.com', tel: '18959290335'}, 20 {id: 444444, pass: '444444', Email: '5656561@qq.com', tel: '18959290335'}, 21 {id: 555555, pass: '555555', Email: '5656561@qq.com', tel: '18959290335'}, 22 {id: 666666, pass: '666666', Email: '5656561@qq.com', tel: '18959290335'}, 23 ] 24 }, 25 methods: { 26 add() { 27 var user = {id: this.id, pass: this.pass, Email: this.Email, tel: this.tel} 28 this.list.push(user) 29 this.id = this.pass = this.Email = this.tel = '' 30 }, 31 search(keywords) { //根据关键字,进行搜索 32 var newList = [] 33 this.list.forEach(item => { 34 if (item.pass.indexOf(keywords) != -1) { 35 newList.push(item) 36 } 37 }) 38 return newList 39 }, 40 dellocal(){//删除localStorage数据 41 localStorage.clear(); 42 }, 43 del(id) {//根据id删除数据 44 this.list.some((item, i) => { 45 if (item.id === id) { 46 this.list.splice(i, 1) 47 return true; 48 } 49 }) 50 }, 51 } 52 }) 53 54 55 </script>
1 <script> 2 3 var vm = new Vue({ 4 el: '#app', 5 data: { 6 id: '', 7 pass: '', 8 Email: '', 9 tel: '', 10 11 username: null, 12 email: null, 13 password: null, 14 telephone: null, 15 keywords: '',//搜索的关键字 16 userInfo: JSON.parse(localStorage.getItem('userInfo')) || [], 17 list: [ 18 {id: 222222, pass: '222222', Email: '5656561@qq.com', tel: '18959290335'}, 19 {id: 333333, pass: '333333', Email: '5656561@qq.com', tel: '18959290335'}, 20 {id: 444444, pass: '444444', Email: '5656561@qq.com', tel: '18959290335'}, 21 {id: 555555, pass: '555555', Email: '5656561@qq.com', tel: '18959290335'}, 22 {id: 666666, pass: '666666', Email: '5656561@qq.com', tel: '18959290335'}, 23 ] 24 }, 25 methods: { 26 add() { 27 var user = {id: this.id, pass: this.pass, Email: this.Email, tel: this.tel} 28 this.list.push(user) 29 this.id = this.pass = this.Email = this.tel = '' 30 }, 31 search(keywords) { //根据关键字,进行搜索 32 var newList = [] 33 this.list.forEach(item => { 34 if (item.pass.indexOf(keywords) != -1) { 35 newList.push(item) 36 } 37 }) 38 return newList 39 }, 40 dellocal(){//删除localStorage数据 41 localStorage.clear(); 42 }, 43 del(id) {//根据id删除数据 44 this.list.some((item, i) => { 45 if (item.id === id) { 46 this.list.splice(i, 1) 47 return true; 48 } 49 }) 50 }, 51 } 52 }) 53 54 55 </script>
