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,"验证码输入错误"); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue-cli请求数据的方式(vue-cli配置使用Vuex的全过程记录)
- vue怎么配置到idea(idea编译器vue缩进报错问题场景分析)
- vue按需引入elementui组件(vue ElementUI实现异步加载树)
- vue中的定时函数(vue计时器的实现方法)
- vue实现聊天(Vue+ssh框架实现在线聊天)
- vue轮播图代码(vue实现无缝轮播效果跑马灯)
- vue切换图片效果(Vue.js实现图片切换功能)
- vue实现添加购物车小球(Vue实现简易购物车案例)
- vue改数组和对象值(vue $set 实现给数组集合对象赋值)
- 面试问vue掌握程度如何回答(面试最常问的13种Vue修饰符)
- 详解Vue3中Teleport的使用(详解Vue3中Teleport的使用)
- vue element admin接口(Vue-Element-Admin集成自己的接口实现登录跳转)
- vuecli打包项目(使用vue-cli创建项目并webpack打包的操作方法)
- vueaxios使用教程交流(Vue使用axios图片上传遇到的问题)
- vuex数据持续化(Vuex数据持久化实现的思路与代码)
- vuejs filter过滤器的使用(Vue过滤器filter实现及应用场景详解)
- 按这几方面养护佛肚竹盆景,保证枝叶繁茂,造型优美(按这几方面养护佛肚竹盆景)
- 冰岛旅游攻略(冰岛旅游攻略及花费八日游)
- 寒假旅游攻略(成都寒假旅游攻略)
- 菲律宾旅游攻略(菲律宾旅游攻略地图)
- 清华大学难考吗(清华大学考研录取分数线)
- 观花盆栽佛肚竹盆景制作及养护(观花盆栽佛肚竹盆景制作及养护)
热门推荐
- css在ie中怎么显示不正常(IE6和IE7中行内元素后的浮动元素被折行的问题解决)
- CSS3 border-radius实现边框圆角
- ipython命令行查看文件夹(对IPython交互模式下的退出方法详解)
- 云服务器弹性体现在哪些方面(云服务器的性能表现在哪些方面?)
- docker安装教程图解(Docker在线、离线安装及其常用命令操作)
- python时间序列模式识别(Python时间序列处理之ARIMA模型的使用讲解)
- apache和php如何配置(Apache2与PHP5 for WinXP简单配置技巧)
- thinkphp怎么整合微信支付(ThinkPHP框架实现的微信支付接口开发完整示例)
- python 多进程读取文件(Python实现的多进程拷贝文件并显示百分比功能示例)
- mybatis 一对多条件查询(mybatis collection 多条件查询的实现方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9