Vue考試系統(tǒng)的后臺管理功能開發(fā)示例解讀

更新時間：2022年09月07日 10:24:09 作者：船長在船上

這篇文章主要介紹了Vue考試系統(tǒng)后臺管理項目的登錄、記住密碼功能具體實現(xiàn)流程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

考試系統(tǒng)后臺管理項目介紹：

技術(shù)選型：Vue2.0+Elemenu-ui

項目功能介紹：

賬戶信息模塊：菜單權(quán)限、角色權(quán)限設(shè)置、角色權(quán)限分配、賬號設(shè)置、公司分組
考試管理模塊：新增/編輯/刪除考試試題、成績查看、閱卷評分、成績記錄、成績導出
題庫管理模塊：批量導入考題、批量刪除考題、編輯錄入考題、新增/編輯/刪除考試分類

登錄界面

利用cookie實現(xiàn)，實現(xiàn)記住密碼功能，下次打開頁面自動補全，設(shè)置有效期為7天；
賬號、密碼驗證；
點擊登錄調(diào)用接口跳轉(zhuǎn)后臺首頁

<template>
  <div class="login-wrap">
    <h2 class="title" style="color:#fff">考試系統(tǒng)后臺管理</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">版權(quán)********</div>
  </div>
</template>

data定義數(shù)據(jù)：

rules定義賬號密碼驗證規(guī)則，可自定義規(guī)則

data() {
    return {
      logining: false,
      rememberpwd: false,
      ruleForm: {
        loginAccount: "",
        password: ""
      },
      rules: {
        loginAccount: [
          { required: true, message: "請輸入賬號", trigger: "blur" }
        ],
        password: [{ required: true, message: "請輸入密碼", trigger: "blur" }]
      }
    };
  },

methods方法：

添加點擊鍵盤Enter的判斷，點擊之后觸發(fā)登錄，調(diào)用登錄接口

// 鍵盤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;
      }
    },

可以手動點擊登錄調(diào)用登錄接口，也可以使用Enter鍵調(diào)用登錄

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;
          // 調(diào)用登錄接口
          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;
      }
    },
  },

點擊記住密碼方法調(diào)用：進入到頁面進行讀取

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

鍵盤Enter事件監(jiān)聽：

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公共方法：

/**
 * 設(shè)置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);
};

到此這篇關(guān)于Vue考試系統(tǒng)的后臺管理功能開發(fā)示例解讀的文章就介紹到這了,更多相關(guān)Vue考試系統(tǒng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: