vue和elementul做后台管理系统，登录功能和键盘监听回车登录功能

<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。