Vue考试系统的后台管理功能开发示例解读_javascript技巧_

data() { return { logining: false, rememberpwd: false, ruleForm: { loginAccount: "", password: "" }, rules: { loginAccount: [ { required: true, message: "请输入账号", trigger: "blur" } ], password: [{ required: true, message: "请输入密码", trigger: "blur" }] } }; },

// 键盘enter注册事件 loginIn(){ let keyCode = window.event.keyCode; console.log(this.$route.path,"登录path") if(keyCode == 13 && this.$route.path=="/login"){ this.$refs.ruleForm.validate(valid => { if (valid) { this.logining = true; this.loginFun(); } else { this.$message.error("请输入用户名密码！"); this.logining = false; return false; } }); }else{ return; } },

methods: { // 获取用户名密码 getuserpwd() { // 如果缓存里面有记录，就直接获取登录 if (getCookie("user") != "" && getCookie("pwd") != "") { this.ruleForm.loginAccount = getCookie("user"); this.ruleForm.password = getCookie("pwd"); this.rememberpwd = true; } }, // 登录方法封装 async loginFun() { const res = await login(this.ruleForm); console.log(res, "res登录"); if (res.code == 200) { if (this.rememberpwd == true) { //保存帐号到cookie，有效期7天 setCookie("user", this.ruleForm.loginAccount, 7); //保存密码到cookie，有效期7天 setCookie("pwd", this.ruleForm.password, 7); } else { delCookie("user"); delCookie("pwd"); } setTimeout(() => { this.logining = false; this.$router.push("/first/first"); this.$message({ message: "登录成功", type: "success" }); }, 1000); } else { this.$message.error(res.msg); this.logining = false; return false; } }, submitForm(ruleForm) { this.$refs[ruleForm].validate(valid => { if (valid) { this.logining = true; // 调用登录接口 this.loginFun(); } else { this.$message.error("请输入用户名密码！"); this.logining = false; return false; } }); }, // 键盘enter注册事件 loginIn(){ let keyCode = window.event.keyCode; console.log(this.$route.path,"登录path") if(keyCode == 13 && this.$route.path=="/login"){ this.$refs.ruleForm.validate(valid => { if (valid) { this.logining = true; this.loginFun(); } else { this.$message.error("请输入用户名密码！"); this.logining = false; return false; } }); }else{ return; } }, },

created() { this.getuserpwd(); },

mounted(){ window.addEventListener('keydown',this.loginIn); }, destroyed(){ window.removeEventListener('keydown',this.loginIn,false); }

import { login } from "../api/userMG";

import { setCookie, getCookie, delCookie } from "../utils/utils";

/** * 设置cookie **/ function setCookie(name, value, day) { let date = new Date(); date.setDate(date.getDate() + day); document.cookie = name + '=' + value + ';expires=' + date; }; /** * 获取cookie **/ function getCookie(name) { let reg = RegExp(name + '=([^;]+)'); let arr = document.cookie.match(reg); if (arr) { return arr[1]; } else { return ''; } }; /** * 删除cookie **/ function delCookie(name) { setCookie(name, null, -1); };