vue考试系统后台管理项目-登录记住密码功能

Posted 2022-09-05 船长在船上

⭐️⭐️⭐️  作者：船长在船上
🚩🚩🚩  主页：来访地址船长在船上的博客
🔨🔨🔨  简介：CSDN前端领域优质创作者，资深前端开发工程师，专注前端开发，在CSDN总结工作中遇到的问题或者问题解决方法以及对新技术的分享，欢迎咨询交流，共同学习。

🔔🔔🔔   感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主。如有疑问可以留言、评论，看到后会及时回复。

本项目会耗时一周到两周来完成，最近要又要辛苦加班了，项目给的时间不多，程序员太不容易了，做完项目调休好好休息一下！

此时此刻，记录一下项目实现。

考试系统后台管理项目介绍：

技术选型：Vue2.0+Elemenu-ui

项目功能介绍：

• 账户信息模块：菜单权限、角色权限设置、角色权限分配、账号设置、公司分组
• 考试管理模块：新增/编辑/删除考试试题、成绩查看、阅卷评分、成绩记录、成绩导出
• 题库管理模块：批量导入考题、批量删除考题、编辑录入考题、新增/编辑/删除考试分类

 登录界面

1. 利用cookie实现，实现记住密码功能，下次打开页面自动补全，设置有效期为7天；
2. 账号、密码验证；
3. 点击登录调用接口跳转后台首页

 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);
;

到此结束 

👉👉👉  欢迎来访船长在船上的博客，文章持续更新；项目功能持续迭代，项目开发测试完成会把完整代码上传码云，请及时收藏关注，方便查看。