记住密码和账号的功能和后台无关,是由前端进行操作的
<div class="count"> <div class="user"> <span class="iconfont iconzhanghao"></span> <el-input placeholder="请输入账号" v-model="ruleForm.username"> </el-input> </div> <div class="pass"> <span class="iconfont iconmima"></span> <el-input placeholder="请输入密码" v-model="ruleForm.password" type="password"> </el-input> </div> <div class="remember"> <el-checkbox v-model="remember">记住密码</el-checkbox> </div> <!-- 登录按钮 --> <div class="login_btn"> <el-button class="btn" type="primary" @click="login" round>主要按钮</el-button> </div> </div>
逻辑代码:
<script> export default { data() { return { remember: false, // 利用cookie 实现记住密码的功能 ruleForm: { username: "", password: "", }, }; }, methods: { // 登录 login() { var reg = /^[^\u4e00-\u9fa5]{0,}$/; console.log(this.ruleForm); if ( this.ruleForm.username.trim() == "" || this.ruleForm.password.trim() == "" ) { this.$message.warning("请填写用户名密码!"); return false; } // 用户名和密码不能相等 if (this.ruleForm.username.trim() == this.ruleForm.password.trim()) { this.$message.warning("用户名和密码不能一致!"); return false; } if (!reg.test(this.ruleForm.password.trim())) { this.$message.warning("密码中不能含有中文!"); return false; } //判断复选框是否被勾选 勾选则调用配置cookie方法 if (this.remember == true) { console.log("remember == true"); // debugger; //传入账号名,密码,和保存天数3个参数 this.setCookie(this.ruleForm.username, this.ruleForm.password, 3); } else { console.log("清空Cookie"); //清空Cookie this.clearCookie(); } this.$message.success("登录"); }, //设置cookie setCookie(c_name, c_pwd, exdays) { var exdate = new Date(); //获取时间 exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数 //字符串拼接cookie window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString(); window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString(); }, //读取cookie getCookie: function () { if (document.cookie.length > 0) { console.log("获取cookie document.cookie", document.cookie); var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下 for (var i = 0; i < arr.length; i++) { var arr2 = arr[i].split("="); //再次切割 console.log("arr2", arr2); //判断查找相对应的值 if (arr2[0] == "userName") { this.ruleForm.username = arr2[1]; //保存到保存数据的地方 } else if (arr2[0] == "userPwd") { this.ruleForm.password = arr2[1]; } } } if (this.ruleForm.username != "" && this.ruleForm.password != "") { this.remember = true; } else { this.remember = false; } }, //清除cookie clearCookie: function () { this.setCookie("", "", -1); //修改2值都为空,天数为负1天就好了 }, }, computed: {}, created() {}, mounted() { this.getCookie(); }, }; </script>
style样式(less语法)
.count { width: 80%; margin: 0 auto; margin-top: 30px; padding: 0 26px; box-sizing: border-box; .user, .pass { border-bottom: 1px solid #ccc; height: 80px; line-height: 100px; .iconfont { color: #b0b6b2; font-size: 24px; } display: flex; .el-input { border: none; /deep/.el-input__inner { border: none !important; } } } .remember { text-align: right; margin-top: 20px; color: #b0b6b2; } .login_btn { text-align: center; margin-top: 70px; width: 100%; .btn { width: 100%; height: 50px; font-size: 18px; color: white; text-align: center; border-radius: 30px; background: linear-gradient( 90deg, rgba(136, 196, 101, 0.9), rgba(29, 170, 99, 0.9) ); .el-button { /deep/.el-button--primary { border-color: transparent !important; } } } } }