SpringBoot可刷新图片验证码精简版

今晚哒老虎

已于 2023-11-24 16:20:24 修改

阅读量217

点赞数 1

于 2023-11-24 15:13:49 首次发布

本文链接：https://blog.csdn.net/guo__hang/article/details/134599468

版权

SpringBoot 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

1. 导入Hutool工具类

<dependency>
   <groupId>cn.hutool</groupId>
   <artifactId>hutool-captcha</artifactId>
   <version>5.8.5</version>
</dependency>

2. 编写控制器

@RestController
public class CodeController {

 @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());
 }
}

3. 前端调用

<!DOCTYPE html>
<html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>首页</title>
 </head>
 <body>
     <h1>验证码</h1>
     <img src="/test/code" id="code" onclick="refresh();">
 </body>
 <script>
     <!-- “点击验证码图片，自动刷新” 脚本 -->
         function refresh() {
         document.getElementById("code").src = "/test/code?time" + new Date().getTime();
    }
</script>
</html>

关注博主即可阅读全文