“原生 js + SpringBoot + hutool 工具” 实现浏览器验证码功能，点击可刷新。

文章目录

    • 一、理解 “ 服务器 / 浏览器 ”沟通流程（3步）
    • 二、开发前准备：
    • 三、 代码实现
    • 四、“点击验证码图片自动刷新” 是如何实现的 ？
    • 五、最终效果

一、理解 “ 服务器 / 浏览器 ”沟通流程（3步）

  • 第1步：浏览器使用标签请求特定 Controller 路径。
  • 第2步：服务器 Controller 返回图片的二进制数据。
  • 第3步：浏览器接收到数据，显示图片。

二、开发前准备：

  • Spring Boot开发常识
  • hutool工具（hutool是一款Java辅助开发工具，利用它可以快速生成验证码图片，从而避免让我们编写大量重复代码，具体使用请移至官网）
<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 src="/test/code" id="code" onclick="refresh();"></form></body><script>function refresh() {document.getElementById("code").src = "/test/code" /> + new Date().getTime();}</script></html>

【SpringBoot后端】

@RestController@RequestMapping("test")public class TestController {@AutowiredHttpServletResponse response;@AutowiredHttpSession 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 规范规定，在