springboot vue 异地登录(vue+springboot实现登录验证码)
类别:编程学习 浏览量:184
时间:2022-01-23 02:23:46 springboot vue 异地登录
vue+springboot实现登录验证码本文实例为大家分享了vue+springboot实现登录验证码的具体代码,供大家参考,具体内容如下
先看效果图
在login页面添加验证码html
在后端pom文件添加kaptcha依赖
<dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> </dependency>
创建KaptchaConfig工具类
package com.brilliance.module.system.controller.util; import com.google.code.kaptcha.impl.DefaultKaptcha; import com.google.code.kaptcha.util.Config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import java.util.Properties; @Configuration public class KaptchaConfig { @Bean public DefaultKaptcha getDefaultKaptcha() { DefaultKaptcha defaultKaptcha = new DefaultKaptcha(); Properties properties = new Properties(); // 图片宽 properties.setProperty("kaptcha.image.width", "180"); // 图片高 properties.setProperty("kaptcha.image.height", "50"); // 图片边框 properties.setProperty("kaptcha.border", "yes"); // 边框颜色 properties.setProperty("kaptcha.border.color", "105,179,90"); // 字体颜色 properties.setProperty("kaptcha.textproducer.font.color", "blue"); // 字体大小 properties.setProperty("kaptcha.textproducer.font.size", "40"); // session key properties.setProperty("kaptcha.session.key", "code"); // 验证码长度 properties.setProperty("kaptcha.textproducer.char.length", "4"); // 字体 properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑"); Config config = new Config(properties); defaultKaptcha.setConfig(config); return defaultKaptcha; } }
Controller中,生成的验证码存储在了redis中, 用于以后作校验(redis的配置以及依赖自行百度)
@RestController @RequestMapping("/api/user") @Api(tags = "系统用户管理") public class SysUserController extends AbstractController{ @Autowired private SysUserService sysUserService; @Autowired private DefaultKaptcha defaultKaptcha; @Autowired RedisTemplate redisTemplate; @GetMapping("/createImageCode") public void createImageCode(HttpServletRequest request, HttpServletResponse response) throws IOException { response.setHeader("Cache-Control", "no-store, no-cache"); response.setContentType("image.jpg" alt="springboot vue 异地登录(vue+springboot实现登录验证码)" border="0" />
生成之后,在登录界面输入验证码需要进行校验输入的是否正确
在登录按钮外层加一次请求判断,验证输入的验证码是否正确,根据返回值提示错误信息
@PostMapping("/compareCode") public RESULT compareCode(@RequestBody String verificationCode) { if(!redisTemplate.hasKey("imageCode")) { return RESULT.error(500,"验证码已过期"); } String code = redisTemplate.opsForValue().get("imageCode").toString(); if(StringUtils.equals(verificationCode,code)) { return RESULT.ok(); } else { return RESULT.error(500,"验证码输入错误"); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue3函数详解(手把手教你用vue3开发一个打砖块小游戏)
- 使用vue-cli构建electron项目(MAC+PyCharm+Flask+Vue.js搭建系统)
- vue验证码怎么用(vue验证码组件使用方法详解)
- vue的弹框怎么用(vue自定义弹框效果确认框、提示框)
- 数组循环遍历展示vue(Vue中foreach数组与js中遍历数组的写法说明)
- vue接收网络请求数据类型配置(vue中对接Graphql接口的实现示例)
- vue编程加入购物车(vuex实现简单的购物车功能)
- vuex中action的值怎么接(vuex中Getter的用法详解)
- vue中怎么触发复选框的点击事件(vue点击弹窗自动触发点击事件的解决办法模拟场景)
- vue.js入门教学第15讲(Vue.js 使用AntV X6的示例步骤)
- vue项目部署到服务器的nginx(Nginx部署vue项目和配置代理的问题解析)
- vue 计算一段时间的月份和天数(vue实现指定日期之间的倒计时)
- vuephp后台开发框架(Vue+thinkphp5.1+axios实现文件上传)
- vue中如何判断请求状态码(关于VUE的编译作用域及slot作用域插槽问题)
- vue2.0自定义指令(vue2实现provide inject传递响应式)
- django框架教程第100讲(详解Django+Vue+Docker搭建接口测试平台实战)
- 英语难学吗(初中英语难学吗)
- 如何追女孩子(如何追女孩子的技巧和方法)
- 是不是快乐全被你拿走了(而是你得到的)
- 世界上只有妈妈好(世界上只有妈妈好的歌词)
- 为什么现在社会越来越卷了(现在社会为什么发展那么快呢)
- 直播带货能赚到很多钱吗(直播带货能赚到很多钱吗现在)
热门推荐
- 用python查看运行进程(在Python运行时动态查看进程内部信息的方法)
- 云服务器是什么技术(云服务器系统选择的依据是什么?)
- css如何制作动画效果(CSS制作三角形广告引导文字效果)
- pythondict排序原理(Python标准库使用OrderedDict类的实例讲解)
- win10下安装mysql8.0.23 及 “服务没有响应控制功能”问题解决办法(win10下安装mysql8.0.23 及 “服务没有响应控制功能”问题解决办法)
- ftp可能出现的问题(FTP长时间不操作假死的原因及解决)
- python如何解压加密zip文件(python读取有密码的zip压缩文件实例)
- docker下运行python3(使用Docker+jenkins+python3环境搭建超详细教程)
- dedecms5.7后台内链如何制作(DEDECMS教程之loop循环标签的使用详解)
- vue中什么时候需要set属性(Vue.set和this.$set使用和区别)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9