SpringBoot+hutool实现图片验证码
作者：ThinkStu 时间：2021-06-17 02:55:27
一、理解 “ 服务器 / 浏览器 ”沟通流程（3步）
第1步：浏览器使用<img src="/test/controller”>标签请求特定 Controller 路径。
第2步：服务器 Controller 返回图片的二进制数据。
第3步：浏览器接收到数据，显示图片。
二、开发前准备：
Spring Boot开发常识
hutool工具（hutool是一款Java辅助开发工具，利用它可以快速生成验证码图片，从而避免让我们编写大量重复代码，具体使用请移至官网）
<!-- pom 导包：hutool 工具 -->
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-captcha</artifactId>
<version>5.8.5</version>
</dependency>
三、 代码实现
【 index.html 】页面
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>验证码页面</title>
</head>
<body>
<form action="#" method="post">
<!-- img标签负责向服务器 Controller 请求图片资源 -->
<img src="/test/code" id="code" onclick="refresh();">
</form>
</body>
<!-- “点击验证码图片，自动刷新” 脚本 -->
<script>
function refresh() {
document.getElementById("code").src =
"/test/code?time" + new Date().getTime();
}
</script>
</html>
【SpringBoot后端】
@RestController
@RequestMapping("test")
public class TestController {
@Autowired
HttpServletResponse response;
@Autowired
HttpSession session;
@GetMapping("code")
void getCode() throws IOException {
// 利用 hutool 工具，生成验证码图片资源
CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 5);
// 获得生成的验证码字符
String code = captcha.getCode();
// 利用 session 来存储验证码
session.setAttribute("code",code);
// 将验证码图片的二进制数据写入【响应体 response 】
captcha.write(response.getOutputStream());
}
}
四、“点击验证码图片自动刷新” 是如何实现的 ？
HTML 规范规定，在 <img src=“xxx”> 标签中，每当 src 路径发生变化时，浏览器就会自动重新请求资源。所以我们可以编写一个简单的 js 脚本，只要验证码图片被点击，src 路径就会被加上当前【时间戳】，从而达到改变 src 路径的目的。
<img src="/test/code" id="code" onclick="refresh();">
......
<!-- “点击验证码图片，自动刷新” 脚本 -->
<script>
function refresh() {
document.getElementById("code").src =
"/test/code?time" + new Date().getTime();
}
</script>
五、最终效果
来源：https://blog.csdn.net/qq_35760825/article/details/126308778
标签：SpringBoot,图片验证码
0
投稿猜你喜欢
C#逐行读取文件的方法
2023-05-16 23:53:02
深入c# GDI+简单绘图的具体操作步骤(二)
2022-01-31 12:43:49
java实现登录窗口
2023-11-24 18:09:31
C语言中的指针以及二级指针代码详解
2022-09-04 21:40:28
实例讲解Android中的AutoCompleteTextView自动补全组件
2022-05-10 15:35:10
JAVA实现对阿里云DNS的解析管理
2023-11-24 13:25:15
C#获取真实IP地址实现方法
2022-01-05 11:35:49
IDEA部署JavaWeb项目到Tomcat服务器的方法
2023-11-02 23:21:22
spring boot 2整合swagger-ui过程解析
2021-08-08 22:57:35
Android开发之Wifi基础教程
2023-04-07 13:10:50
SpringBoot实现接口等幂次校验的示例代码
2022-01-21 10:49:00
C#及WPF获取本机所有字体和颜色的方法
2022-12-23 01:23:13
设置Android设备WIFI在休眠时永不断开的代码实现
2022-08-26 09:03:00
java反射拼接方法名动态执行方法实例
2022-12-07 00:44:28
C#实现批量更改文件名称大小写或扩展名
2023-03-25 02:20:50
springboot集成es详解
2021-08-21 01:13:53
完美实现ExpandableListView二级分栏效果
2021-07-18 20:04:13
手把手带你了解Java-Stream流方法学习及总结
2023-11-25 19:30:15
SpringMvc+Mybatis+Pagehelper分页详解
2021-08-13 14:15:11
java 对称加密算法实现详解
2021-07-29 22:34:57
