Vue登录页面

Posted 2020-11-21 wangyawei

技术选型：vue+element-ui+axios+webpack

1.页面的基本结构

1. <div class="login-wrap">
2.     <div class="ms-title">登录页面</div>
3.     <div class="ms-login">
4.         <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
5.             <el-form-item prop="username">
6.                 <el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
7.             </el-form-item>
8.             <el-form-item prop="password">
9.                 <el-input type="password" placeholder="密码" v-model="ruleForm.password" @keyup.enter.native="submitForm(‘ruleForm‘)"></el-input>
10.             </el-form-item>
11.             <!-- `checked` 为 true 或 false -->
12.             <el-checkbox v-model="checked">记住密码</el-checkbox>
13.             <br>
14.             <br>
15.             <div class="login-btn">
16.                 <el-button type="primary" @click="submitForm(‘ruleForm‘)">登录</el-button>
17.             </div>
18.         </el-form>
19.     </div>
20. </div>

2.用mockjs模拟后端接口

1. import Mock from ‘mockjs‘; //es6语法引入mock模块
2.  
3. export default Mock.mock(‘http://test.advance.ai/login‘, { //输出数据
4.  
5.     ‘username‘: ‘17610603706‘,
6.  
7.     ‘password‘: ‘123456‘
8.  
9.     //还可以自定义其他数据
10. });

3.在created生命周期函数里边请求后端数据

1. //data和method已经初始化，DOM还没有渲染出来，适合请求数据
2.    created(){
3.      //请求模拟的后端地址，返回用户名和密码
4.      axios.get(‘http://test.advance.ai/login‘)
5.        .then(res => {
6.            if(res){
7.               console.log(res.data.username);
8.               this.loginName=res.data.username;
9.               this.loginPassword=res.data.password;
10.            }
11.        })
12.    },

表单验证,手机号要写正则表达式验证

1. rules: {
2.               username: [{
3.                   required: true,
4.                   trigger: ‘blur‘,
5.                   validator: validPhone //手机号校验规则
6.               }],
7.               password: [{
8.                   required: true,
9.                   message: ‘请输入密码‘,
10.                   trigger: ‘blur‘
11.               }]
12.           }

手机号正则表达式验证，validPhone变量

1. //校验手机号
2. var validPhone=(rule, value,callback)=>{
3.       if (!value){
4.           callback(new Error(‘请输入电话号码‘))
5.       }else if (!isvalidPhone(value)){
6.         callback(new Error(‘请输入正确的11位手机号码‘))
7.       }else {
8.           callback()
9.       }
10.   }
11. function isvalidPhone(str) {
12.     //验证手机号的正则表达式
13.      const reg = /^1[3|4|5|7|8][0-9]d{8}$/
14.      return reg.test(str)
15.   }

4.登录事件，登录之前先验证表单

1. submitForm(formName) {
2.               const self = this;
3.               self.$refs[formName].validate((valid) => {
4.                   if (valid) {
5.                       //判断复选框是否被勾选 勾选则调用配置cookie方法
6.                       if (self.checked == true) {
7.                           console.log("checked == true");
8.                           //传入账号名，密码，和保存天数3个参数
9.                           self.setCookie(self.ruleForm.username, self.ruleForm.password, 7);
10.                       }else {
11.                         console.log("清空Cookie");
12.                         //清空Cookie
13.                         self.clearCookie();
14.                       }
15.                       if(self.loginName==self.ruleForm.username&&self.loginPassword==self.ruleForm.password){
16.                            console.log("登陆成功");
17.                            alert("登录成功");
18.                       }else{
19.                            alert("登录失败，请重新登录");
20.                       }
21.  
22.                   } else {
23.                       console.log(‘error submit!!‘);
24.                       return false;
25.                   }
26.               });
27.           },

5.设置和获取cookie

1. //设置cookie
2.            setCookie(c_name, c_pwd, exdays) {
3.                var exdate = new Date(); //获取时间
4.                exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
5.                //字符串拼接cookie
6.                window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
7.                window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
8.            },
9.            //读取cookie
10.            getCookie: function() {
11.                if (document.cookie.length > 0) {
12.                    var arr = document.cookie.split(‘; ‘); //这里显示的格式需要切割一下
13.                    for (var i = 0; i < arr.length; i++) {
14.                        var arr2 = arr[i].split(‘=‘); //再次切割
15.                        //判断查找相对应的值
16.                        if (arr2[0] == ‘userName‘) {
17.                            this.ruleForm.username = arr2[1]; //保存到保存数据的地方
18.                        } else if (arr2[0] == ‘userPwd‘) {
19.                            this.ruleForm.password = arr2[1];
20.                        }
21.                    }
22.                }
23.            },