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

PHP中文网 • 2025年3月7日 01:01:03 • 编程技术 • 阅读 1

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

第1步：浏览器使用%E6%A0%87%E7%AD%BE%E8%AF%B7%E6%B1%82%E7%89%B9%E5%AE%9A%20controller%20%E8%B7%AF%E5%BE%84%E3%80%82

%E7%AC%AC2%E6%AD%A5%EF%BC%9A%E6%9C%8D%E5%8A%A1%E5%99%A8%20Controller%20%E8%BF%94%E5%9B%9E%E5%9B%BE%E7%89%87%E7%9A%84%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%95%B0%E6%8D%AE%E3%80%82

%E7%AC%AC3%E6%AD%A5%EF%BC%9A%E6%B5%8F%E8%A7%88%E5%99%A8%E6%8E%A5%E6%94%B6%E5%88%B0%E6%95%B0%E6%8D%AE%EF%BC%8C%E6%98%BE%E7%A4%BA%E5%9B%BE%E7%89%87%E3%80%82

二、开发前准备：

Spring Boot开发常识

hutool工具（hutool是一款Java辅助开发工具，利用它可以快速生成验证码图片，从而避免让我们编写大量重复代码，具体使用请移至官网）

    cn.hutool    hutool-captcha    5.8.5

登录后复制

三、代码实现

【 index.html 】页面

        验证码页面                  function refresh() {        document.getElementById("code").src =           "https://www.php.cn/test/code?time" + new Date().getTime();    }

登录后复制

【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 规范规定，在标签中，每当 src 路径发生变化时，浏览器就会自动重新请求资源。所以我们可以编写一个简单的 js 脚本，只要验证码图片被点击，src 路径就会被加上当前【时间戳】，从而达到改变 src 路径的目的。

 ......    function refresh() {        document.getElementById("code").src =           "https://www.php.cn/test/code?time" + new Date().getTime();    }

登录后复制