一、最终结果展示
二、前端代码
2.1 index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>验证码</title><style>#inputCaptcha {height: 30px;vertical-align: middle;}#verificationCodeImg{vertical-align: middle;}#checkCaptcha{height: 40px;width: 100px;}</style>
</head><body>
<h1>输入验证码</h1>
<div id="confirm"><input type="text" name="inputCaptcha" id="inputCaptcha"><img id="verificationCodeImg" src="/captcha/get" style="cursor: pointer;" title="看不清？换一张" /><input type="button" value="提交" id="checkCaptcha">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>//点击图片, 重新加载$("#verificationCodeImg").click(function(){$(this).hide().attr('src', '/captcha/get?dt=' + new Date().getTime()).fadeIn();});$("#checkCaptcha").click(function () {$.ajax({type: "post",url: "/captcha/check",data:{captchaCode: $("#inputCaptcha").val()},success:function(result){if(result){location.href = "success.html";}else{alert("验证码错误!!");}}});});</script>
</body></html>2.2 success.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>验证成功页</title>
</head>
<body><h1>验证成功</h1>
</body>
</html>三、后端代码
3.1 引入依赖
<dependency><groupId>cn.hutool</groupId><artifactId>hutool-captcha</artifactId><version>5.8.22</version></dependency>3.2 配置yml
captcha:width: 100height: 40session:code: CAPTCHA_SESSION_CODEdate: CAPTCHA_SESSION_DATE3.3 CaptchaController.java
package com.example.captchademo.controller;import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.ICaptcha;
import com.example.captchademo.model.CaptchaProperties;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.io.IOException;/*** Created with IntelliJ IDEA.* Description:* User: * Date: 2024-07-24* Time: 21:40*/@RequestMapping("/captcha")
@RestController
public class CaptchaController {@Autowiredprivate CaptchaProperties captchaProperties;private static long VALID_TIME = 60*1000;@RequestMapping("/get")public void getCaptcha(HttpSession session, HttpServletResponse response){ICaptcha captcha = CaptchaUtil.createLineCaptcha(captchaProperties.getWidth(), captchaProperties.getHeight());try {captcha.write(response.getOutputStream());//禁止缓存response.setHeader("Prama", "No-cache");//设置返回的格式response.setContentType("image/jpeg");//打印验证码System.out.println(captcha.getCode());//存储Sessionsession.setAttribute(captchaProperties.getSession().getCode(), captcha.getCode());session.setAttribute(captchaProperties.getSession().getDate(), System.currentTimeMillis());//Servlet的OutputStream记得自行关闭哦！response.getOutputStream().close();} catch (IOException e) {throw new RuntimeException(e);}}@RequestMapping("/check")public Boolean check(String captchaCode,HttpSession session){System.out.println("接收captchaCode:"+captchaCode);//参数校验//判断用户输入的验证码是否和session中存储的一致//是否在有效期内if (!StringUtils.hasLength(captchaCode)){return false;}String sessionCode = (String)session.getAttribute(captchaProperties.getSession().getCode());Long sessionDate = (Long)session.getAttribute(captchaProperties.getSession().getDate());if (captchaCode.equalsIgnoreCase(sessionCode)&& sessionDate!=null&& (System.currentTimeMillis() - sessionDate) < VALID_TIME){return true;}return false;}
}3.4 CaptchaProperties.java
package com.example.captchademo.model;import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.Configuration;/*** Created with IntelliJ IDEA.* Description:* User: * Date: 2024-07-24* Time: 22:16*/@Configuration
@ConfigurationProperties(prefix = "captcha")
@Data
public class CaptchaProperties {private Integer width;private Integer height;private Session session;@Datapublic static class Session {private String code;private String date;}
}前端代码可放置在“captcha-demo\src\main\resources\static”路径下，然后启动项目，在浏览器输入URL：http://127.0.0.1:8080/index.html 即可。
