验证码生成--kaptcha-编程知识

验证码生成--kaptcha

验证码生成与点击重新获取验证码

如图所示，本文档仅展示了验证码的生成和刷新显示。

在这里插入图片描述

1. 概述

系统通过生成随机验证码图像和文本。

2. 代码分析

2.1. Maven依赖

<dependency><groupId>com.github.penggle</groupId><artifactId>kaptcha</artifactId><version>2.3.2</version>
</dependency>

作用：引入kaptcha库，用于生成验证码图像。

2.2. CaptchaController

@Controller
public class CaptchaController {// 处理首页请求，生成验证码图像并返回页面@GetMapping("/")public String index(HttpSession session, Model model) throws IOException {// 生成验证码图像byte[] captchaImageBytes = CaptchaUtil.generateCaptchaImage(session);// 将验证码图像转换为Base64编码字符串String captchaImageBase64String = Base64.getEncoder().encodeToString(captchaImageBytes);// 从会话中获取验证码文本String captchaText = session.getAttribute("captchaText").toString();// 将验证码图像和文本添加到模型中model.addAttribute("captchaImage", captchaImageBase64String);model.addAttribute("captchaText", captchaText);// 返回首页模板return "index";}// 处理获取验证码请求，返回验证码图像和文本@GetMapping("/getCaptcha")@ResponseBodypublic R getCaptcha(HttpSession session) throws IOException {// 生成验证码图像byte[] captchaImageBytes = CaptchaUtil.generateCaptchaImage(session);// 从会话中获取验证码文本String captchaText = session.getAttribute("captchaText").toString();// 返回JSON格式数据，包含验证码图像和文本return R.ok().put("captchaImageBytes", captchaImageBytes).put("captchaText", captchaText);}
}

作用：CaptchaController处理与验证码相关的HTTP请求。
index方法：
- GET请求"/"：生成验证码图像，并将图像的Base64编码字符串和验证码文本添加到模型中，最后返回到前端页面。
getCaptcha方法：
- GET请求"/getCaptcha"：与index方法类似，生成验证码图像并返回其Base64编码字符串和验证码文本，但以JSON格式返回给前端页面。

2.3. 前端页面

<body><!-- 显示验证码图像 --><img id="captchaImg" th:src="'data:image/jpeg;base64,' + ${captchaImage}" alt="Mountains" style="width:100px;height:50px;"><!-- 显示验证码文本 --><h2 id="captchaText" th:text="${captchaText}"></h2>
</body><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>var captchaImg = document.getElementById("captchaImg");var captchaText = document.getElementById("captchaText");captchaImg.addEventListener("click", function () {// 点击验证码图像时，发送GET请求获取新的验证码$.ajax({url: "/getCaptcha",type: "GET",success: function (data) {// 更新验证码图像和文本captchaImg.src = "data:image/png;base64," + data.captchaImageBytes;captchaText.innerHTML = data.captchaText;}});})
</script>