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

 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>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

今晚哒老虎

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值