考试系统后台管理项目介绍：
技术选型：Vue2.0 Elemenu-ui
项目功能介绍：
- 账户信息模块：菜单权限、角色权限设置、角色权限分配、账号设置、公司分组
- 考试管理模块：新增/编辑/删除考试试题、成绩查看、阅卷评分、成绩记录、成绩导出
- 题库管理模块：批量导入考题、批量删除考题、编辑录入考题、新增/编辑/删除考试分类
登录界面
- 利用cookie实现，实现记住密码功能，下次打开页面自动补全，设置有效期为7天；
- 账号、密码验证；
- 点击登录调用接口跳转后台首页
login.vue组件代码：
<template>
<div class="login-wrap">
<h2 class="title" style="color:#fff">考试系统后台管理</h2>
<el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px"
class="demo-ruleForm login-container">
<h3 class="title">用户登录</h3>
<el-form-item prop="loginAccount">
<el-input type="text" v-model="ruleForm.loginAccount" auto-complete="off" placeholder="账号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="密码"></el-input>
</el-form-item>
<el-checkbox class="remember" v-model="rememberpwd">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button type="primary" style="width:100%;" @click="submitForm('ruleForm'),loginIn('ruleForm')" :loading="logining">登录</el-button>
</el-form-item>
</el-form>
<div class="copyright">版权********</div>
</div>
</template>data定义数据：
rules定义账号密码验证规则，可自定义规则
data() {
return {
logining: false,
rememberpwd: false,
ruleForm: {
loginAccount: "",
password: ""
},
rules: {
loginAccount: [
{ required: true, message: "请输入账号", trigger: "blur" }
],
password: [{ required: true, message: "请输入密码", trigger: "blur" }]
}
};
},methods方法：
添加点击键盘Enter的判断，点击之后触发登录，调用登录接口
// 键盘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;
}
},可以手动点击登录调用登录接口，也可以使用Enter键调用登录
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();
},键盘Enter事件监听：
mounted(){
window.addEventListener('keydown',this.loginIn);
},
destroyed(){
window.removeEventListener('keydown',this.loginIn,false);
}登录接口引入：
import { login } from "../api/userMG";封装的cookie方法引入：
import { setCookie, getCookie, delCookie } from "../utils/utils";utils.js公共方法：
/**
* 设置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);
};到此这篇关于Vue考试系统的后台管理功能开发示例解读的文章就介绍到这了,更多相关Vue考试系统内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！