验证码生成--kaptcha

news2024/11/15 11:11:49

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

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

在这里插入图片描述

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")
    @ResponseBody
    public 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>