1. 导入Hutool工具类
<dependency><groupId>cn.hutool</groupId><artifactId>hutool-captcha</artifactId><version>5.8.5</version>
</dependency>
2. 编写控制器
@RestController
public class CodeController {@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());}
}
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>
