验证码的作用
防止恶意注册，自动化程序批量注册。防止暴力破解。
1、这里我们使用goole的验证码生成器
由于直接在maven中引入依赖，没有找到。所以只能直接去下载jar包了。
链接：https://pan.baidu.com/s/1KANhJKI4sQCfkiroTVr0WA?pwd=29iv 提取码：29iv 这里是我下载好的，kaptcha-2.3.2.jar 下载好之后，将它添加到本地仓库
mvn install:install-file -Dfile=${下载jar包路径} -DgroupId=com.google.code.kaptcha -DartifactId=kaptcha -Dversion=2.3.2 -Dpackaging=jar
参考：一个Maven实现的验证码模块_Zachary1994的博客-CSDN博客
添加到本地仓库后，我们就可以在pom.xml中引入依赖了：
2、接下来就是配置了
applicationContext.xml
代码语言：javascript复制<!--Kaptcha 配置-->
<bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha"> <!--定义bean-->
<property name="config"> <!--设置bean属性config-->
<bean class="com.google.code.kaptcha.util.Config"><!--定义Config的bean，它是kaptcha的配置类-->
<constructor-arg> <!--设置`Config`bean的构造参数-->
<props> <!--定义一个属性列表，包含多个属性键值对-->
<prop key="kaptcha.border">no</prop> <!--设置验证码图片的边框是否显示-->
<prop key="kaptcha.image.width">200</prop><!--设置验证码图片的宽度-->
<prop key="kaptcha.image.height">50</prop><!--设置验证码图片的高度-->
<prop key="kaptcha.textproducer.char.string">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890</prop><!--设置验证码字符的取值范围-->
<prop key="kaptcha.textproducer.char.length">4</prop><!--设置验证码的字符长度-->
<prop key="kaptcha.textproducer.font.size">40</prop><!--设置验证码文字的字体大小-->
<prop key="kaptcha.textproducer.font.color">black</prop><!--设置验证码文字的字体颜色-->
<prop key="kaptcha.textproducer.char.space">5</prop><!--设置验证码字符之间的间距-->
<prop key="kaptcha.noise.color">black</prop><!--设置验证码干扰线的颜色-->
</props>
</constructor-arg>
</bean>
</property>
</bean>springmvc的基础配置，前端控制器等就不说了
然后写controller
代码语言：javascript复制@Controller
public class CaptchaController {
@Autowired
private Producer captchaProducer;
@GetMapping("/captcha")
public void getCaptcha(HttpServletRequest request, HttpServletResponse response) throws Exception {
// 生成验证码文本
String captchaText = captchaProducer.createText();
// 将验证码文本存储在 Session中
HttpSession session = request.getSession();
session.setAttribute("captcha", captchaText);
// 生成验证码图片
BufferedImage captchaImage = captchaProducer.createImage(captchaText);
// 将验证码图片输出到响应
ServletOutputStream outputStream = response.getOutputStream();
//该方法将验证码图像以JPG格式写入输出流
ImageIO.write(captchaImage, "jpg", outputStream);
outputStream.flush();
outputStream.close();
}
@RequestMapping("/verification")
@ResponseBody
public String verification(String verification,HttpSession session){
String captcha = (String) session.getAttribute("captcha");
// System.out.println(captcha "_" verification);
if(!verification.equals(captcha)){
return "false";
}else{
return "true";
}
}
}一个方法是生成验证码并相应到客户端，一个方法是后台验证(这里前端我是使用的ajax)
前端
代码语言：javascript复制<div class="form-row">
<input type="text" id="verification" name="verification" required><span class="verification-icon"></span>
<img src="${pageContext.request.contextPath}/captcha" alt="验证码" id="ka"/><img src="${pageContext.request.contextPath}/status/images/reset.png" id="reset" alt="刷新" title="刷新"/>
</div>代码语言：javascript复制这里使用img标签的src属性直接请求controller将验证码显示。后面是一个刷新图片，要实现刷新验证码功能，这里使用JQuery为它绑定点击事件，通过更新src属性实现刷新
// 获取刷新图片元素
let resetImage = $("#reset");
// 绑定点击事件
resetImage.on("click", function() {
refreshCaptcha();
});
// 刷新验证码函数
function refreshCaptcha() {
// 获取验证码图片元素
let captchaImage = $("#ka");
// 生成新的验证码URL
let captchaUrl = contextPath "/captcha?" new Date().getTime();
// 更新验证码图片的src属性
captchaImage.attr("src", captchaUrl);
}至于验证码验证，我上面controller已经写好了验证方法，我是在验证码文本框失去焦点时使用ajax请求对验证码进行验证。这里可以通过自己的想法去调整更改。
