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

网址https://doc.hutool.cn/pages/index/
使用HuTool实现验证码认证
导入HuTool的依赖(在网址中有详细的教程)

导入的时候需要注意一个问题,就是这个版本号,如果是在网址复制的,没有带版本号,这里需要自己加版本号,我一开始没注意,搞了半天才发现这个问题
在HuTool的官网上,找一个自己喜欢的,这里我选择了扭曲干扰
代码核心逻辑
具体代码



代码讲解

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

这里的代码是直接在HuTool上复制的,只要导入了相应的依赖,再导入一下包,然后调用createcode就可以随机生成验证码
思考一下,由于这个验证码的宽度,高度,针对的个体不同,所以我们可以把他写成一个对象到yml文件中,这样既可以解耦和,也会方便很多

Yml配置文件

使用类接收

点开createcode可以看到,里面提供了很多种构造方法,width表示宽度height表示高度,codecount表示的是验证码的个数,thickness代表的是干扰的宽度
- 生成完之后,就需要返回数据给前端,所以我们需要调用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就会从新发送不会存在缓存的问题,后端甚至都不会读取这个数据,这个只是为了防止缓存存在的,拿到新的之后就逐渐显示,丝滑转场

这个思想很妙,细细体会
成果展示


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