网站开发模版百度推广关键词价格查询
目
🌲实现说明
🎄Hutool介绍
🌳准备工作
🌴约定前后端交互接口
🚩接口定义
🚩实现服务器后端代码
🚩前端代码
🚩整体测试
🌲实现说明
随着安全性的要求越来越⾼,⽬前项⽬中很多都使⽤了验证码,验证码的形式也是多种多样,更复杂的图形验证码和⾏为验证码已经成为了更流⾏的趋势
验证码的实现⽅式很多,可以前端实现,也可以后端实现.⽹上也有⽐较多的插件或者⼯具包可以使⽤, 咱们选择使⽤Hutool提供的⼩⼯具来实现
🎄Hutool介绍
咱们课程中验证码的实现,使⽤Hutool提供的⼩⼯具来实现
Hutool是⼀个Java⼯具包类库，对⽂件、流、加密解密、转码、正则、线程、XML等JDK⽅法进⾏封 装，组成各种Util⼯具类
Hutool是⼀个⼩⽽全的Java⼯具类库，通过静态⽅法封装，降低相关API的学习成本，提⾼⼯作效 率，使Java拥有函数式语⾔般的优雅，让Java语⾔也可以"甜甜的"
Hutool官⽹: https://hutool.cn/
Hutool参考⽂档: https://hutool.cn/docs/#/
Hutool源码: GitHub - dromara/hutool: 🍬A set of tools that keep Java sweet.
我们不需要知道这个工具中实现这些功能的代码是如何实现的，我们只需要调用它的API即可。
使用方法：
- 第一步：导包，需要什么就导什么包，也可导入该工具中所有的包(此处就导验证码的包)
- 第二步：查看验证码接口，实现类，方法介绍说明
- 第三步：查看代码及注释(部分代码实现，具体各种验证码查看官网)
- 第四步：代码具体实现
- 运行项目，发送请求，查看line.png文件；后端还打印了该验证码，此处不在展示
小结：Hutool工具有各种各样的验证码，以及实现方法，当前不在一一展示，可自行浏览官网。
🌳准备工作
界⾯如下图所⽰
1. ⻚⾯⽣成验证码
2. 输⼊验证码,点击提交,验证⽤⼾输⼊验证码是否正确,正确则进⾏⻚⾯跳转
创建项⽬,引⼊SpringMVC的依赖包,把前端⻚⾯放在项⽬中
index.html代码如下：
success.html代码如下：
前端代码验证：
🌴约定前后端交互接口
🚩接口定义
接口一：生成验证码
请求：
GET /captcha/get
响应：图片内容
浏览器给服务器发送⼀个 GET /captcha/get 这样的请求,服务器返回⼀个图⽚,浏览器显⽰在⻚⾯上
接口二：校验验证码是否正确
请求:
/cpatcha/check
响应：
true/false
根据⽤⼾输⼊的验证码,校验验证码是否正确true:验证成功.false:验证失败
🚩实现服务器后端代码
首先在pom文件中引入依赖
图片生成代码：
测试：
由于我们学习了SpringBoot的配置，我们可以把图片的高度和宽度放在配置中
代码：
验证码校验：
注意：若使用Hutool工具中的接口来校验验证码的话，就需要把上述图片生成代码中的ICaptcha接口提到成员变量上，但是这只适用于单线程的时候，若是多线程的情况下，用多个客户端访问时只有这一个对象，那很显然是不合适的，所以这个方法是不适合的。
此时就可以借助前面学习的Session了，既然有不同的客户端，我们就可以通过Session来进行存储，每个客户端存储的是自己的Session，即在校验的时候，我们取的是自己的Session信息
代码：
测试：
生成验证码：
正确校验验证码：
错误校验验证码：
🚩前端代码
通过ajax请求数据
代码：
🚩整体测试
正确校验：
错误校验：