当前位置： 首页 > news >正文

vue element-plus后台管理系统项目-登录、记住密码功能

news 来源：原创 2024/11/16 5:41:31

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

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

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

  • 技术选型：Vue3.0+element-plus
  • 功能介绍：
  1. 登录、记住密码功能实现
  2. 登录账号、密码添加规则验证
  3. 记住密码，默认保存7天，有效期内下次可直接跳转首页，非有效期需要重新输入账号、密码进行登录

element-plus安装使用 

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

 main.js引入：

// element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'


// 中文
import locale from "element-plus/lib/locale/lang/zh-cn";

//导入所有element icon图标
import * as ElIconModules from '@element-plus/icons-vue';

 登录界面

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

login.vue组件代码：

<template>
  <div class="login-wrap">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleFormRef"
      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="ruleForm.rememberpwd">记住密码</el-checkbox>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click="submitForm('ruleFormRef')" :loading="ruleForm.logining">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

vue3.0模块引入：

  • 采用按需引入方式，引入需要用到的模块、element-plus组件
  • login接口引入
import { login } from "../api/userMG"
  • setCookie, getCookie, delCookie方法封装的引入
import { setCookie, getCookie, delCookie } from "../utils/util";
import {
  reactive,
  getCurrentInstance,
  onMounted,
  onUnmounted,
} from "vue";
import {useRouter} from 'vue-router';
import { useStore } from "vuex";
import { login } from "../api/userMG";
import { setCookie, getCookie, delCookie } from "../utils/util";
import {ElMessage} from "element-plus";

setup使用事项： 

  • setup函数是 Composition API（组合API）的入口
  • setup是启动页面后会自动执行的一个函数
  • 项目中定义的所有变量，方法等都需要在setup中
  • 在setup函数中定义的变量和方法最后都需要 return 出去， 否则无法在视图层中使用

定义数据： 账号、密码ruleForm 存储

    const {ctx} = getCurrentInstance();
    const router = useRouter();
    const store = useStore();
    // 定义的数据
    const ruleForm = reactive({
        logining: false,
        rememberpwd: false,
        loginAccount: "",
        password: ""
    })

 定义验证规则：loginAccount、password规则定义

    // 规则
    const rules = reactive({
      loginAccount: [
        { required: true, message: "请输入账号", trigger: "blur" }
      ],
      password: [{ required: true, message: "请输入密码", trigger: "blur" }]
    })

cookie记住密码功能：

如果缓存里面有记录，就直接获取登录

const getuserpwd = () =>{
      // 如果缓存里面有记录，就直接获取登录
      if (getCookie("user") != "" && getCookie("pwd") != "") {
        ruleForm.loginAccount = getCookie("user");
        ruleForm.password = getCookie("pwd");
        ruleForm.rememberpwd = true;
      }
}

 点击登录验证、调用登录接口：

const submitForm = (formName) => {
      ctx.$refs[formName].validate(valid => {
        if (valid) {
          ruleForm.logining = true;
          // 调用登录接口
          loginFun();
        } else {
          ElMessage.error("请输入用户名密码！");
          ruleForm.logining = false;
          return false;
        }
      });
}

 loginFun登录方法：登录成功后可对登录信息存储以及token的保存、跳转系统首页

const loginFun = () =>{
      let {loginAccount,password} = {...ruleForm};
      login({loginAccount,password}).then((res)=>{
        if(res.code == 200){
          if (ruleForm.rememberpwd == true) {
            //保存帐号到cookie，有效期7天
            setCookie("user", ruleForm.loginAccount, 7);
            //保存密码到cookie，有效期7天
            setCookie("pwd", ruleForm.password, 7);
          } else {
            delCookie("user");
            delCookie("pwd");
          }

          console.log(res,"res");
          // store.dispatch("actUserInfo",res.data);
          store.commit("login",res.data);
          router.push({path: '/first/first'});
          ElMessage.success("登录成功");
        }else{
          ruleForm.logining = false;
          ElMessage.error("登录失败");
        }
      })
}

onMOunted生命周期中调用：

进入页面，就直接读取登录信息

onMounted(()=>{
  getuserpwd();
})

最后记得return返回：

return {
      ruleForm,
      rules,
      loginFun,
      submitForm,
      getuserpwd,
      loginIn
}

cookie方法封装

新建utils/util.js 

设置cookie方法、获取cookie方法、删除cookie方法

/**
 * 设置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);
};

完整代码：

<script>
import {
  reactive,
  getCurrentInstance,
  onMounted,
  onUnmounted,
} from "vue";
import {useRouter} from 'vue-router';
import { useStore } from "vuex";
import { login } from "../api/userMG";
import { setCookie, getCookie, delCookie } from "../utils/util";
import {ElMessage} from "element-plus";
export default {
  setup() {
    const {ctx} = getCurrentInstance();
    const router = useRouter();
    const store = useStore();
    // 定义的数据
    const ruleForm = reactive({
        logining: false,
        rememberpwd: false,
        loginAccount: "",
        password: ""
    })
    // 规则
    const rules = reactive({
      loginAccount: [
        { required: true, message: "请输入账号", trigger: "blur" }
      ],
      password: [{ required: true, message: "请输入密码", trigger: "blur" }]
    })

    // 方法
    const getuserpwd = () =>{
      // 如果缓存里面有记录，就直接获取登录
      if (getCookie("user") != "" && getCookie("pwd") != "") {
        ruleForm.loginAccount = getCookie("user");
        ruleForm.password = getCookie("pwd");
        ruleForm.rememberpwd = true;
      }
    }
    const loginFun = () =>{
      let {loginAccount,password} = {...ruleForm};
      login({loginAccount,password}).then((res)=>{
        if(res.code == 200){
          if (ruleForm.rememberpwd == true) {
            //保存帐号到cookie，有效期7天
            setCookie("user", ruleForm.loginAccount, 7);
            //保存密码到cookie，有效期7天
            setCookie("pwd", ruleForm.password, 7);
          } else {
            delCookie("user");
            delCookie("pwd");
          }

          console.log(res,"res");
          // store.dispatch("actUserInfo",res.data);
          store.commit("login",res.data);
          router.push({path: '/first/first'});
          ElMessage.success("登录成功");
        }else{
          ruleForm.logining = false;
          ElMessage.error("登录失败");
        }
      })
    }
    const submitForm = (formName) => {
      ctx.$refs[formName].validate(valid => {
        if (valid) {
          ruleForm.logining = true;
          // 调用登录接口
          loginFun();
        } else {
          ElMessage.error("请输入用户名密码！");
          ruleForm.logining = false;
          return false;
        }
      });
    }


    // 生命周期
    onMounted(()=>{
      getuserpwd();
    })
    onUnmounted(()=>{
      
    })
    return {
      ruleForm,
      rules,
      loginFun,
      submitForm,
      getuserpwd,
      loginIn
    }
  }
};
</script>

 项目持续迭代.......

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

相关文章：

  • DW做注册网站/网页优化包括什么
  • 如何维护企业电子商务网站建设/在哪里推广自己的产品
  • 网站建设横条/上海排名seo公司
  • 个人网站设计步骤/百度竞价推广教程
  • 东莞网站设计讯息/营销公司
  • 上海开办企业一窗通/南宁百度seo排名价格
  • kali工具熟悉——存活主机识别
  • 项目中使用到的Spring注解及其作用
  • vue3+Echart
  • Azure DevOps Server 2022新功能：导入和导出到CSV文件，实现批量修改工作项
  • 程序环境和预处理
  • （14）目标检测_SSD训练代码基于pytorch搭建代码
  • 【AI】Hill Climbing 爬山算法
  • 【甄选靶场】Vulnhub百个项目渗透——项目三十三：Money-Heist-catch-me-if-you-can（密码学）
  • 02_MySQL环境搭建
  • codeblock 常见问题
  • 网络版本计算器(再谈“协议“)
  • C++类和对象详解（下篇）