“原生 js + SpringBoot + hutool 工具” 实现浏览器验证码功能，点击可刷新。
文章目录
一、理解 “ 服务器 / 浏览器 ”沟通流程（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 】页面
<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="UTF-8"><title>验证码页面</title></head><body><formaction="#"method="post"><!-- img标签负责向服务器 Controller 请求图片资源 --><imgsrc="/test/code"id="code"onclick="refresh();"></form></body><!-- “点击验证码图片，自动刷新” 脚本 --><script>functionrefresh(){
document.getElementById("code").src ="/test/code?time"+newDate().getTime();}</script></html>
【SpringBoot后端】
@RestController@RequestMapping("test")publicclassTestController{@AutowiredHttpServletResponse response;@AutowiredHttpSession session;@GetMapping("code")voidgetCode()throwsIOException{// 利用 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 路径的目的。
<imgsrc="/test/code"id="code"onclick="refresh();">
......
<!-- “点击验证码图片，自动刷新” 脚本 --><script>functionrefresh(){
document.getElementById("code").src ="/test/code?time"+newDate().getTime();}</script>
五、最终效果
本文转载自: https://blog.csdn.net/qq_35760825/article/details/126308778
版权归原作者 ThinkStu 所有， 如有侵权，请联系我们删除。
版权归原作者 ThinkStu 所有， 如有侵权，请联系我们删除。