使用HuTool实现验证码

使用工具HuTool,一个免费开源的工具

网址https://doc.hutool.cn/pages/index/

使用HuTool实现验证码认证

导入HuTool的依赖(在网址中有详细的教程)

导入的时候需要注意一个问题,就是这个版本号,如果是在网址复制的,没有带版本号,这里需要自己加版本号,我一开始没注意,搞了半天才发现这个问题

在HuTool的官网上,找一个自己喜欢的,这里我选择了扭曲干扰

代码核心逻辑

具体代码

代码讲解

这里是HuTool对这部分的详解。

这里的代码是直接在HuTool上复制的,只要导入了相应的依赖,再导入一下包,然后调用createcode就可以随机生成验证码

思考一下,由于这个验证码的宽度,高度,针对的个体不同,所以我们可以把他写成一个对象到yml文件中,这样既可以解耦和,也会方便很多

Yml配置文件

使用类接收

点开createcode可以看到,里面提供了很多种构造方法,width表示宽度height表示高度,codecount表示的是验证码的个数,thickness代表的是干扰的宽度

  1. 生成完之后,就需要返回数据给前端,所以我们需要调用HttpServeletRespose这个类去返回数据

在写方法的时候,需要思考到因为要返回数据,所以要调用这个HSP去返回数据

这样才能调用数据,调用完之后打印日志,同时记得关闭流对象

思考一下,这样是否会存在一个问题,由于http的通信是无状态的,假设现在有两个请求同时要验证码,完蛋,咋办?

使用Session

使用session,把每次会话的记录下来,这样每个人的sessionid都不一样,就不会出现前面的情况,完美解决了验证码混乱的情况

新的疑问不知道你有没有产生?

为啥这里选着使用static修饰,去掉会怎么样吗?

不可以去掉,因为session是内部静态类,他依赖外部的对象存在,如果去掉的话,就必须把他单独写出来变成一个类,需要把他独立出来交给spring进行管理然后在需要使用的时候注入即可

时效性

即然是验证码,总得有个时效性吧,总不可能拿前朝的剑斩本朝的官吧,在这里我把时间设置成一分钟,只要在一分钟之内输入,就算你成功

清理缓存

首先我们知道在传输的过程中,我们需要指明传输的格式是什么,否则客户端接收可能会报错,其次因为这个是验证码,每次我们都希望前端进行请求,而不是缓存下来,所以我们需需要设置Pragma为no-cache

总结

这段代码的核心主要就是先考虑到我们这个是给前端返回请求的,所以需要使用响应的格式,并且为了确保互不影响的情况需要使用session,接着指明传输的格式为图片类型,这样确保我们传输不会出现解析错误的问题,然后因为我们这个是验证码,所以不允许缓存(验证码缓存也没有用),之后就可以使用我们调用的HuTool工具了,创建验证码,接着需要把他返回到前端,然后session存储验证码和时间,接着关闭流对象

检查验证码

这部分的代码就比较见到,如果data为空或者key为空就直接报错,接着只需要把前端传回来的数据,根据sessionid进行查找并比较,就可以,内容一样和时间不超时就返回true。

使用postman进行测试

获取验证码正确

测试检查功能
提交功能正常

连接前端

前端的代码很简答,只是在img的地方,把我们的验证码插入,当点击提交的时候,触发ajax,把输入往后端传输,如果成功就跳转,失败就弹窗提示,这里的核心是this那里,翻译成人话就是当点击图片的时候,就先把图片隐藏,然后马上向后端请求然后加一个?dt=加一个时间戳,这样虽然请求的url没变慢但是加时间戳,就会导致url每次都在变刷新url就会从新发送不会存在缓存的问题,后端甚至都不会读取这个数据,这个只是为了防止缓存存在的,拿到新的之后就逐渐显示,丝滑转场

这个思想很妙,细细体会

成果展示

成功就跳转,失败就弹窗提示

相关推荐
sunnyday04262 小时前
Spring Boot 项目中使用 Dynamic Datasource 实现多数据源管理
android·spring boot·后端
幽络源小助理4 小时前
SpringBoot+Vue攀枝花水果在线销售系统源码 | Java项目免费下载 – 幽络源
java·vue.js·spring boot
SadSunset4 小时前
关于springAOP的总结
java·后端·spring
计算机学姐4 小时前
基于SpringBoot的演出购票系统【2026最新】
java·vue.js·spring boot·后端·spring·tomcat·intellij-idea
Java水解4 小时前
Spring Boot Starter自定义开发 构建企业级组件库
spring boot·后端
源码获取_wx:Fegn08955 小时前
基于springboot + vue健康茶饮销售管理系统
java·vue.js·spring boot·后端·spring
小帅学编程5 小时前
Spring(侧重注解开发)
java·学习·spring
雅俗共赏zyyyyyy5 小时前
SpringBoot集成配置文件加解密
java·spring boot·后端
慕容雪_5 小时前
springboot jar注册windows服务(WinSW版)
windows·spring boot·jar·服务