Vue + Element UI + JSEncrypt实现简单登录页面

安装依赖

npm install jsencrypt --save

局部引入

import JSEncrypt from 'jsencrypt/bin/jsencrypt';

登录页面index.vue

<template><div class="loginbody"><div class="logindata"><div class="logintext"><h2>Welcome</h2></div><div class="formdata"><el-form ref="form" :model="form" :rules="rules"><el-form-item prop="username"><el-input v-model="form.username" clearable placeholder="请输入账号"></el-input></el-form-item><el-form-item prop="password"><el-input v-model="form.password" clearable placeholder="请输入密码" show-password></el-input></el-form-item></el-form></div><div class="tool"><el-checkbox v-model="checked" @change="remember">记住密码</el-checkbox></div><div class="butt"><el-button type="primary" @click.native.prevent="login('form')">登录</el-button></div></div></div></div>
</template><script>import JSEncrypt from 'jsencrypt/bin/jsencrypt';export default {data() {return {form: {username: "",password: "",},pbkey: "",checked: true,rules: {username: [{required: true,message: "请输入用户名",trigger: "blur"}],password: [{required: true,message: "请输入密码",trigger: "blur"}],},};},mounted() {// 是否记住密码if (localStorage.getItem("emisLoginInfo")) {this.form = JSON.parse(localStorage.getItem("emisLoginInfo"))this.checked = true;}},methods: {// 点击登录按钮login(form) {this.$refs[form].validate((valid) => {if (valid) {// 表单校验通过this.$api.getPublicKey(({data}) => {this.pbkey = data;this.doLogin();})} else {return false;}});},// 登录获取tokendoLogin() {let loginData = {userName: this.form.userName,passWord: this.encrypt(this.form.password)}this.$api.login(loginData, ({data}) => {localStorage.setItem("emisToken", data);this.$router.push({path: '/home'});})},// 加密encrypt(pwd) {const encrypt = new JSEncrypt();encrypt.setPublicKey(this.pbkey); //设置公钥return encrypt.encrypt(pwd);},// 解密 decrypt(pwd) {const encrypt = new JSEncrypt();encrypt.setPrivateKey(privateKey); //设置私钥return encrypt.decrypt(pwd);},// 记住密码remember(data) {this.checked = data;if (this.checked) {localStorage.setItem("emisLoginInfo", JSON.stringify(this.form))} else {localStorage.removeItem("emisLoginInfo")}},},};
</script><style scoped lang="scss">@import "index.scss";
</style>

样式index.scss

.loginbody {width: 100%;height: 100%;min-width: 1000px;background: url("~@/assets/images/login/bg.png") no-repeat center/cover;overflow: auto;background-repeat: no-repeat;position: fixed;line-height: 100%;padding-top: 300px;box-sizing: border-box;.logintext {margin-bottom: 20px;line-height: 50px;text-align: center;font-size: 60px;font-weight: bolder;color: white;text-shadow: 2px 2px 4px #000;}.logindata {width: 400px;height: 300px;transform: translate(-50%);margin-left: 50%;}.tool {color: #606266;}.butt {text-align: center;margin: auto;}
}

背景图:
在这里插入图片描述
实现页面:
在这里插入图片描述

参考文章:vue+element ui实现好看的登录界面

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/866246.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Uncaught (in promise) RangeError: Offset is outside the bounds of the DataView

问题 通常发生在Failed to load resource: the server responded with a status of 404 (Not Found) 后&#xff0c;资源读取错误导致的问题。 解决 Failed to load resource: the server responded with a status of 404 (Not Found)_unity webgl failed to load resource:…

宝塔面板Nginx的https301跳转http

宝塔面板Nginx的https301跳转http&#xff1a; 登录宝塔面板&#xff1a;进入你的宝塔面板管理界面。 选择网站管理&#xff1a;在左侧菜单中&#xff0c;点击“网站”&#xff0c;然后选择你需要进行重定向的网站。 配置网站设置&#xff1a;在所选网站的管理界面中&#x…

Docker 容器网络互连 自定义网络 程序互相访问

介绍 在开发时候SpirngBoot应用需要连接Mysql数据库 &#xff0c;两个都在容器内&#xff0c;而容器都是独立的&#xff0c;这时需要配置容器内的网络互联。一旦两个容器加入了自定义网络就可以使用容器名互相访问。 Docker虚拟网卡 在安装Docker时候他会默认安装一个虚拟网…

LVS-DR群集

LVS-DR集群 LVS-DR(Linux Virtual Server DIrector Server)工作模式&#xff0c;是生产环境中最常用的一种工作模式。 LVS-DR工作原理 LVS-DR模式&#xff0c;Director Server作为群集的访问入口&#xff0c;不作为网关使用&#xff0c;节点DirectorServer与Real Server需要…

TensorRT-Int8量化详解

int8量化是利用int8乘法替换float32乘法实现性能加速的一种方法 对于常规模型有&#xff1a;y kx b&#xff0c;此时x、k、b都是float32, 对于kx的计算使用float32的乘法 对于int8模型有&#xff1a;y tofp32(toint8(k) * toint8(x)) b&#xff0c;其中int8 * int8结果为in…

2024.06.27 校招 实习 内推 面经

绿*泡*泡VX&#xff1a; neituijunsir 交流*裙 &#xff0c;内推/实习/校招汇总表格 1、提前批 | 禾赛科技2025届校招/提前批招聘 提前批 | 禾赛科技2025届校招提前批招聘 2、提前批 | CVTE2025校园招聘/提前批正式启动&#xff08;内推&#xff09; 提前批 | CVTE2025校园…

Python列表创建使用心得详解

概要 列表是Python中最常用的数据结构之一,它用于存储有序的元素集合。Python提供了多种方式来创建和操作列表,使得列表在数据处理、存储和操作中非常灵活。本文将详细介绍Python列表创建的各种技巧,包括基础创建方法、列表推导式、内置函数和高级创建技巧,并包含具体的示…

锁定依赖的秘诀:npm shrinkwrap命令深度解析

&#x1f512; 锁定依赖的秘诀&#xff1a;npm shrinkwrap命令深度解析 &#x1f512; 在JavaScript项目开发中&#xff0c;依赖管理是确保项目稳定性和可重复构建的关键环节。npm作为Node.js的包管理器&#xff0c;提供了npm shrinkwrap命令&#xff0c;用于锁定项目依赖的确…

什么是 qobject_cast?

前言 在 C++ 中,类型转换是一项常见的操作,比如将 int 转换为 char 或将 QString 用于 QMessageBox。但是,为什么我们需要将一个类转换为另一个类呢?本文将解释 qobject_cast 是什么,它的作用以及为什么需要类型转换。 dynamic_cast 和 qobject_cast 的概述 什么是 dyn…

初出茅庐的小李博客之C语言文件操作

C语言文件操作 在C语言中&#xff0c;文件操作主要是通过标准库函数来实现的。 今天有时间就来学习下一些常用的文件操作函数&#xff1a; C 语言提供了一个 FILE 数据结构&#xff0c;记录了操作一个文件所需要的信息。该结构定义在头文件stdio.h&#xff0c;所有文件操作函…

python库(3):Cerberus库

1 Cerberus简介 Cerberus 是一个Python数据验证库&#xff0c;设计用于验证数据结构的有效性和一致性。它提供了一种简单而强大的方式来定义和应用验证规则&#xff0c;特别适用于处理用户输入的验证、配置文件的检查以及API的参数验证等场景。下面将详细介绍 Cerberus 的特点…

伦敦金价格走势图的资金管理怎么进行?

要成熟地交易伦敦金价格走势图&#xff0c;其实并不是一件容易的事情。其一&#xff0c;我们在很多广告或者周边朋友的宣传之下&#xff0c;觉得它能够帮助我们很快之内实现很多的财富增值&#xff0c;其二&#xff0c;很多投资者觉得伦敦金交易虽然不错&#xff0c;但是风险好…

salesforce 批量下载文件为 attachment 时需要最后保存

future(callouttrue) public static void processCaseLinks(String caseId) {// 提取描述中的链接Case caseRecord [SELECT Id,Description FROM Case WHERE Id:caseId];List<String> links extractLinks(caseRecord.Description);List<Attachment> attachmentsT…

对象被优化以后才是高效的C++编程

课程总目录 文章目录 一、对象会调用哪些方法、对象优化的三个原则二、CMyString的代码问题三、四、添加带右值引用参数的拷贝构造和赋值函数五、CMyString在vector上的应用六、move移动语义和forward类型完美转发七、再聊vector容器使用对象过程中的优化 一、对象会调用哪些方…

Python从0到100(三十六):字符和字符集基础知识及其在Python中的应用

1. 字符和字符集概述 字符(Character)是构成书面语言的基本元素&#xff0c;它包括但不限于各国家的文字、标点符号、图形符号和数字。字符集(Character set)则是一个包含多个字符的系统&#xff0c;用于统一管理和编码不同的字符。 常见字符集 ASCII&#xff1a;最早的字符…

Qt windeployqt 打包的Qt动态库介绍

前言 在 Windows 平台&#xff0c;通常使用 Qt 的工具 windeployqt 将可执行文件的相关 Qt 依赖项部署到当前路径下。 Windows windeployqt 部署工具 Windows 部署工具 windeployqt 旨在自动化创建一个可部署文件夹的过程&#xff0c;该文件夹包含运行应用程序所需的 Qt 相关…

SpringBoot 启动流程一

SpringBoot启动流程一 我们首先创建一个新的springboot工程 我们不添加任何依赖 查看一下pom文件 我们创建一个文本文档 记录我们的工作流程 我们需要的是通过打断点实现 我们首先看一下启动响应类 package com.bigdata1421.start_up;import org.springframework.boot.Spr…

音视频流媒体视频平台LntonAIServer视频监控平台工业排污检测算法

在当今社会&#xff0c;环境保护和可持续发展已成为全球关注的焦点。工业生产作为经济发展的重要支柱&#xff0c;其对环境的影响不容忽视。因此&#xff0c;如何有效地监控和管理工业排污&#xff0c;成为了一个亟待解决的问题。LntonAIServer工业排污检测算法应运而生&#x…

开发电商ERP系统需要接入哪些平台API?

跟随全渠道发展趋势&#xff0c;很多实体商家开设电商店铺&#xff0c;为消费者提供便捷的购物体验&#xff0c;增强消费者的满意度&#xff0c;同时也提升了企业自身的市场竞争力。为了满足商家业务拓展需求&#xff0c;很多原本主要服务于实体商贸企业的ERP服务商&#xff0c…

CSS filter(滤镜)属性,并实现页面置灰效果

目录 一、filter&#xff08;滤镜&#xff09;属性 二、准备工作 三、常用的filter属性值 1、blur(px) 2、brightness(%) 3、contrast(%) 4、grayscale(%) 5、opacity(%) 6、saturate(%) 7、sepia(%) 8、invert(%) 9、hue-rotate(deg) 10、drop-shadow(h-shadow v…