<template >
<div class="wrap">
<el-row type="flex" justify="center">
<el-card class="box-card">
<!-- 标题 -->
<div slot="header">
<h2 class="title">管理系统</h2>
</div>
<!-- 账号密码验证部分 -->
<el-form label-width="80px" :model="from" :rules="rules" ref="ruleForm">
<el-form-item label="账号" prop="username">
<el-input v-model.trim="from.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model.trim="from.password" type="password" ></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width:100%" @click="login">登录</el-button>
</el-form-item>
</el-form>
</el-card>
</el-row>
</div>
</template>
<script>
import {post} from "@/utils/http.js"
import {setToken} from "@/utils/auth"
export default {
data(){
//验证账号正则
var validatePass = (rule, value, callback) => { //三个参数:规则,值,回调
const reg=/^\w{4,8}$/
if(reg.test(value)){
callback()
}else{
callback(new Error("必须是4到8位数字字母组合"))
}
};
return{
//双向绑定
from:{
username:"",
password:""
},
//验证条件
rules:{
username:[
{validator: validatePass, trigger: 'blur'},
{required:true,message:"账号不能为空",trigger: 'blur'}
],
password:[
{required:true,message:"密码不能为空",trigger: 'blur'}
]
}
}
},
created(){
//页面加载完全局监听键盘事件,然后调用函数
document.addEventListener("keyup",this.watchEnter)
},
destroyed(){
//页面跳转销毁全局监听事件
document.removeEventListener("keyup",this.watchEnter)
},
methods:{
//登录验证
login(){
//用$refs找到dom元素,验证是否通过。
this.$refs.ruleForm.validate((boolean)=>{
//验证通过发请求
if(boolean){
post("/login",this.from).then((res)=>{
//把token和昵称存到本地,方便后续守卫验证令牌,可以从本地调用昵称显示在另一个页面。
setToken(res.token);
sessionStorage.setItem("nickname",res.nickname);
//跳转到主页
this.$router.push("/")
}).catch((err)=>{
console.log(err);
})
}
})
},
watchEnter(e){
//按键判断:e.which返回当前按键的键值,然后if判断键值是否等于13,13是回车键的键值。如果是调用登录请求
let keyNum=e.which;
if(keyNum==13){
this.login()
}
}
}
};
</script>
<style lang="less" scoped>
.box-card {
width: 480px;
margin-top: 200px;
background: url(../assets/mao.gif) no-repeat center;
.title {
text-align: center;
}
}
.wrap{background: #3e3a61;height: 100vh;width: 100%;}
</style>
回车登录跳转功能:添加回车事件,调用判断方法,方法用事件源e来获取当前的which(按键值)是否为13(回车的按键值),如果是就调用登录验证功能。在生命周期中created(创建后)创建一个全局监听键盘事件,调用判断键值的方法。同时加一个destoryde(销毁后,也就是页面跳转后)把全局监听事件删除,免得其他页面出现bug。