一、最终结果展示
二、前端代码
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: 100
height: 40
session:
code: CAPTCHA_SESSION_CODE
date: 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 {
@Autowired
private 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());
//存储Session
session.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;
@Data
public static class Session {
private String code;
private String date;
}
}前端代码可放置在“captcha-demo\src\main\resources\static”路径下，然后启动项目，在浏览器输入URL：http://127.0.0.1:8080/index.html 即可。
