vue实战——登录【详解】(含自适配全屏背景，记住账号--支持多账号，显隐密码切换，登录状态保持）

2023-11-28 04:30
文章标签 javascript 实战 详解 登录 vue 切换 支持 密码 状态 frontend 背景 记住 账号 适配 保持 全屏 显隐 含自

本文主要是介绍vue实战——登录【详解】(含自适配全屏背景，记住账号--支持多账号，显隐密码切换，登录状态保持），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果预览

在这里插入图片描述

技术要点——自适配全屏背景

https://blog.csdn.net/weixin_41192489/article/details/119992992

技术要点——密码输入框

自定义图标切换显示隐藏
https://blog.csdn.net/weixin_41192489/article/details/133940676

技术要点——记住账号（支持多账号）

核心需求和逻辑

  • 勾选“记住账号”，一旦登录成功过，下次登录能在账号输入框的输入推荐建议列表中，选择该账号

在这里插入图片描述

  • 未勾选“记住账号”，登录成功后，清除对该账号的存储

相关代码

页面加载时，获取记住的账号

  mounted() {this.accountList = JSON.parse(localStorage.getItem("accountList")) || [];},

使用带输入建议的输入框

          <el-autocompleteclearableclass="inputStyle"v-model="formData.account":fetch-suggestions="queryAccount"placeholder="请输入账号"@select="chooseAccount"></el-autocomplete>

根据输入内容，从记住的账号中，过滤出最接近的已记住的账号

    queryAccount(queryString, cb) {let accountList = JSON.parse(JSON.stringify(this.accountList));accountList = accountList.map((item) => {return {value: item,};});var results = queryString? accountList.filter(this.createFilter(queryString)): accountList;cb(results);},createFilter(queryString) {return (restaurant) => {return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===0);};},

根据输入建议下拉选择中，选择已记住的账号时，自动勾选记住账号，并清空表单校验

    chooseAccount(newAccount) {if (this.accountList.includes(newAccount.value)) {this.remember = true;}this.$nextTick(() => {this.$refs.formRef.clearValidate();});},

登录成功后，根据是否勾选记住账号，存入新账号或移除已记住的账号。

                this.$message({offset: 150,message: "登录成功！",type: "success",});let account = this.formData.account;// 勾选-记住账号if (this.remember) {// 没记住过if (!this.accountList.includes(account)) {// 存入localStoragethis.accountList.push(account);localStorage.setItem("accountList",JSON.stringify(this.accountList));}} else {// 未勾选-记住账号removeItem(this.accountList, account);localStorage.setItem("accountList",JSON.stringify(this.accountList));}

用到的工具函数

// 普通数组移除指定元素
function removeItem(arr, item) {let targetIndex = arr.findIndex((itemTemp) => itemTemp === item);if (targetIndex !== -1) {arr.splice(targetIndex, 1);}
}

技术要点——登录后维持登录状态

this.$store.commit("set_token", res.data.data.token);
this.$store.commit("set_isLogin", true);
this.$store.commit("set_userInfo", res.data.data);

完整范例代码

<template><div class="bg loginPage"><div><div><div class="hello">Hi，你好！</div><div class="hello2">欢迎进入观光车调度系统</div></div><div class="logoBox"><imgclass="logoBox"src="@/assets/images/login/login_logo.png"alt=""/></div></div><div class="loginBox"><div class="welcomeLogin">欢迎登录</div><el-form ref="formRef" :model="formData" label-width="0px"><el-form-itemprop="account":rules="{ required: true, message: '请输入账号' }"><div class="formLabel">账号</div><el-autocompleteclearableclass="inputStyle"v-model="formData.account":fetch-suggestions="queryAccount"placeholder="请输入账号"@select="chooseAccount"></el-autocomplete></el-form-item><el-form-itemprop="password":rules="{ required: true, message: '请输入密码' }"><div class="formLabel">密码</div><el-inputplaceholder="密码"v-model="formData.password":type="showPassword ? 'text' : 'password'"><i slot="suffix" @click="switchPassword"><imgv-if="showPassword"class="input_icon"src="@/assets/icons/password_show.png"/><imgv-elseclass="input_icon"src="@/assets/icons/password_hide.png"/></i></el-input></el-form-item></el-form><el-checkbox v-model="remember">记住账号</el-checkbox><el-button class="loginBtn" type="primary" @click="login">立即登录</el-button></div></div>
</template><script>
import { api_login } from "@/APIs/login.js";export default {data() {return {accountList: [],remember: false,// 是否显示密码showPassword: false,formData: {},};},mounted() {this.accountList = JSON.parse(localStorage.getItem("accountList")) || [];},methods: {chooseAccount(newAccount) {if (this.accountList.includes(newAccount.value)) {this.remember = true;}this.$nextTick(() => {this.$refs.formRef.clearValidate();});},queryAccount(queryString, cb) {let accountList = JSON.parse(JSON.stringify(this.accountList));accountList = accountList.map((item) => {return {value: item,};});var results = queryString? accountList.filter(this.createFilter(queryString)): accountList;cb(results);},createFilter(queryString) {return (restaurant) => {return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===0);};},switchPassword() {this.showPassword = !this.showPassword;},gotoIndex() {this.$router.push("/");},login() {this.$refs.formRef.validate((valid) => {if (valid) {this.loading = this.$loading({text: "登录中",spinner: "el-icon-loading",background: "rgba(0, 0, 0, 0.7)",lock: true,});api_login({...this.formData,}).then((res) => {if (res.data.code === 200) {this.$store.commit("set_token", res.data.data.token);this.$store.commit("set_isLogin", true);delete res.data.data["token"];this.$store.commit("set_userInfo", res.data.data);this.$message({offset: 150,message: "登录成功！",type: "success",});let account = this.formData.account;// 勾选-记住账号if (this.remember) {// 没记住过if (!this.accountList.includes(account)) {// 存入localStoragethis.accountList.push(account);localStorage.setItem("accountList",JSON.stringify(this.accountList));}} else {// 未勾选-记住账号removeItem(this.accountList, account);localStorage.setItem("accountList",JSON.stringify(this.accountList));}this.gotoIndex();} else {this.$message({offset: 150,message: res.data.msg,type: "warning",});}this.loading.close();}).catch(() => {this.loading.close();});}});},},
};// 普通数组移除指定元素
function removeItem(arr, item) {let targetIndex = arr.findIndex((itemTemp) => itemTemp === item);if (targetIndex !== -1) {arr.splice(targetIndex, 1);}
}
</script><style scoped>
.input_icon {cursor: pointer;width: 24px;padding-top: 8px;padding-right: 6px;
}.bg {background-image: url("~@/assets/images/login/login_bg.png");background-size: 100% 100%;position: fixed;top: 0px;width: 100%;height: 100%;
}.loginBox {width: 390px;height: 492px;background: #ffffff;padding: 40px;box-sizing: border-box;
}
.loginPage {display: flex;justify-content: space-around;align-items: center;padding: 0px 90px;box-sizing: border-box;
}
.logoBox {width: 439px;height: 341px;
}
.hello {height: 63px;font-size: 45px;font-family: PingFangSC, PingFang SC;font-weight: 600;color: #ffffff;line-height: 63px;
}
.hello2 {height: 44px;font-size: 32px;font-family: PingFangSC, PingFang SC;font-weight: 600;color: #ffffff;line-height: 44px;margin-bottom: 46px;margin-top: 12px;
}
.welcomeLogin {height: 25px;font-size: 18px;font-family: PingFangSC, PingFang SC;font-weight: 600;color: #2b2d31;line-height: 25px;text-align: center;margin-bottom: 26px;
}
.formLabel {margin-top: 20px;height: 21px;font-size: 15px;font-family: PingFangSC, PingFang SC;font-weight: 400;color: #2b2d31;line-height: 21px;margin-bottom: 10px;
}.loginBtn {height: 51px;background: #3e6ff6;border-radius: 6px;width: 100%;margin-top: 50px;
}
.inputStyle {width: 100%;
}
</style>

配图素材

在这里插入图片描述

在这里插入图片描述

这篇关于vue实战——登录【详解】(含自适配全屏背景，记住账号--支持多账号，显隐密码切换，登录状态保持）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/429058。

相关文章

Java利用@SneakyThrows注解提升异常处理效率详解

Java利用@SneakyThrows注解提升异常处理效率详解

《Java利用@SneakyThrows注解提升异常处理效率详解》这篇文章将深度剖析@SneakyThrows的原理,用法,适用场景以及隐藏的陷阱,看看它如何让Java异常处理效率飙升50%,感兴趣的... 目录前言一、检查型异常的“诅咒”：为什么Java开发者讨厌它1.1 检查型异常的痛点1.2 为什么说
阅读更多...
MySQL的配置文件详解及实例代码

MySQL的配置文件详解及实例代码

《MySQL的配置文件详解及实例代码》MySQL的配置文件是服务器运行的重要组成部分,用于设置服务器操作的各种参数,下面：本文主要介绍MySQL配置文件的相关资料,文中通过代码介绍的非常详细,需要... 目录前言一、配置文件结构1.[mysqld]2.[client]3.[mysql]4.[mysqldum
阅读更多...
springboot2.1.3 hystrix集成及hystrix-dashboard监控详解

springboot2.1.3 hystrix集成及hystrix-dashboard监控详解

《springboot2.1.3hystrix集成及hystrix-dashboard监控详解》Hystrix是Netflix开源的微服务容错工具,通过线程池隔离和熔断机制防止服务崩溃,支持降级、监... 目录Hystrix是Netflix开源技术www.chinasem.cn栈中的又一员猛将Hystrix熔
阅读更多...
Java调用Python脚本实现HelloWorld的示例详解

Java调用Python脚本实现HelloWorld的示例详解

《Java调用Python脚本实现HelloWorld的示例详解》作为程序员,我们经常会遇到需要在Java项目中调用Python脚本的场景,下面我们来看看如何从基础到进阶,一步步实现Java与Pyth... 目录一、环境准备二、基础调用：使用 Runtime.exec()2.1 实现步骤2.2 代码解析三、
阅读更多...
python之uv使用详解

python之uv使用详解

《python之uv使用详解》文章介绍uv在Ubuntu上用于Python项目管理,涵盖安装、初始化、依赖管理、运行调试及Docker应用,强调CI中使用--locked确保依赖一致性... 目录安装与更新standalonepip 安装创建php以及初始化项目依赖管理uv run直接在命令行运行pytho
阅读更多...
Springboot项目构建时各种依赖详细介绍与依赖关系说明详解

Springboot项目构建时各种依赖详细介绍与依赖关系说明详解

《Springboot项目构建时各种依赖详细介绍与依赖关系说明详解》SpringBoot通过spring-boot-dependencies统一依赖版本管理,spring-boot-starter-w... 目录一、spring-boot-dependencies1.简介2. 内容概览3.核心内容结构4.
阅读更多...
Spring Boot 整合 SSE(Server-Sent Events)实战案例(全网最全)

Spring Boot 整合 SSE(Server-Sent Events)实战案例(全网最全)

《SpringBoot整合SSE(Server-SentEvents)实战案例(全网最全)》本文通过实战案例讲解SpringBoot整合SSE技术,涵盖实现原理、代码配置、异常处理及前端交互,... 目录Spring Boot 整合 SSE（Server-Sent Events）1、简述SSE与其他技术的对
阅读更多...
MySQL中REPLACE函数与语句举例详解

MySQL中REPLACE函数与语句举例详解

《MySQL中REPLACE函数与语句举例详解》在MySQL中REPLACE函数是一个用于处理字符串的强大工具,它的主要功能是替换字符串中的某些子字符串,：本文主要介绍MySQL中REPLACE函... 目录一、REPLACE()函数语法：参数说明：功能说明：示例：二、REPLACE INTO语句语法：参数
阅读更多...
redis数据结构之String详解

redis数据结构之String详解

《redis数据结构之String详解》Redis以String为基础类型,因C字符串效率低、非二进制安全等问题,采用SDS动态字符串实现高效存储,通过RedisObject封装,支持多种编码方式（如... 目录一、为什么Redis选String作为基础类型？二、SDS底层数据结构三、RedisObject
阅读更多...
MyBatis-Plus 与 Spring Boot 集成原理实战示例

MyBatis-Plus 与 Spring Boot 集成原理实战示例

《MyBatis-Plus与SpringBoot集成原理实战示例》MyBatis-Plus通过自动配置与核心组件集成SpringBoot实现零配置,提供分页、逻辑删除等插件化功能,增强MyBa... 目录 一、MyBATis-Plus 简介 二、集成方式（Spring Boot）1. 引入依赖 三、核心机制
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2