怎么使用SpringBoot hutool实现图片验证码

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

第1步：浏览器使用b532149fb5244d3ff6b5c43f30c881bf标签请求特定 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 】页面

76c82f278ac045591c9159d381de2c57
e50fd76c890a16356472f13b52f09dcd
93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    b2386ffb911b14667cb8f0f91ea547a7验证码页面6e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
  
6a7d1053252a905467ae2da05defc569
  
  	e5093fc6b00e67ee26865a4224590e34
    8c6b84b966e89671ac1b45cd45daf518
  
f5a47148e367a6035fd7a2faa965022e
  
36cc49f0c466276486e50c850b7e4956

437ffbb6d15e8f84ac756bf5ac56ec8c
3f1c4e4b6b16bbbd69b2ee476dc4f83a
    function refresh() {
        document.getElementById("code").src = 
          "/test/code?time" + new Date().getTime();
    }
2cacc6d41bbb37262a98f745aa00fbf0
73a6ac4ed44ffec12cee46588e518a5e

【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 规范规定，在 6c16d01957f07bf4a9f70aa3dc9669aa 标签中，每当 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>

五、最终效果

以上是怎么使用SpringBoot hutool实现图片验证码的详细内容。更多信息请关注PHP中文网其他相关文章！