-
SpringBoot图片验证码
“原生 js + SpringBoot + hutool 工具” 实现浏览器验证码功能，点击可刷新。
一、理解 “ 服务器 / 浏览器 ”沟通流程（3步）
- 第1步：浏览器使用
二、开发前准备：
- Spring Boot开发常识
- hutool工具（hutool是一款Java辅助开发工具，利用它可以快速生成验证码图片，从而避免让我们编写大量重复代码，具体使用请移至官网）
<dependency> <groupId>cn.hutoolgroupId> <artifactId>hutool-captchaartifactId> <version>5.8.5version> dependency>- 1
- 2
- 3
- 4
- 5
- 6
三、 代码实现
【 index.html 】页面
DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>验证码页面title> head> <body> <form action="#" method="post"> <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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
【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()); } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
四、“点击验证码图片自动刷新” 是如何实现的 ？
HTML 规范规定，在
<img src="/test/code" id="code" onclick="refresh();"> ...... <script> function refresh() { document.getElementById("code").src = "/test/code?time" + new Date().getTime(); } script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
五、最终效果
- 第1步：浏览器使用
-
相关阅读:
从零玩转系列之微信支付开篇
vue使日历组件点击时间渲染到时间输入框
MSYS2 介绍、下载与安装、Pacman常用命令
python-文件操作常用功能-2
【寻路】超级简单的A星寻路算法实现
Mysql常见日志作用
[npm]npm包的分类
Java笔记——控制台模拟“双色球”福利彩票游戏
linux添加一条到中间路由器的路由
最近身边一个技术负责人裸辞了...
- 原文地址：https://blog.csdn.net/qq_35760825/article/details/126308778
