验证码生成--kaptcha

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

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

1. 概述

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

2. 代码分析

2.1. Maven依赖
xml 复制代码
<dependency>
	<groupId>com.github.penggle</groupId>
	<artifactId>kaptcha</artifactId>
	<version>2.3.2</version>
</dependency>
  • 作用:引入kaptcha库,用于生成验证码图像。
2.2. CaptchaController
java 复制代码
@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. 前端页面
html 复制代码
<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>
  • 作用:前端页面通过Thymeleaf模板引擎渲染验证码图像和文本,使用jQuery监听验证码图像的点击事件。
  • 点击事件:当验证码图像被点击时,通过AJAX请求"/getCaptcha"获取新的验证码图像和文本,并更新到页面上。

3. 总结

验证码生成与验证系统通过后端生成验证码图像和文本,并通过前端页面呈现给用户。本文档展示了验证码的生成和刷新显示。

4.源码 源码git

相关推荐
Fireworkitte4 小时前
Apache POI 详解 - Java 操作 Excel/Word/PPT
java·apache·excel
weixin-a153003083164 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
DCTANT5 小时前
【原创】国产化适配-全量迁移MySQL数据到OpenGauss数据库
java·数据库·spring boot·mysql·opengauss
Touper.5 小时前
SpringBoot -- 自动配置原理
java·spring boot·后端
黄雪超5 小时前
JVM——函数式语法糖:如何使用Function、Stream来编写函数式程序?
java·开发语言·jvm
ThetaarSofVenice5 小时前
对象的finalization机制Test
java·开发语言·jvm
望获linux6 小时前
【实时Linux实战系列】CPU 隔离与屏蔽技术
java·linux·运维·服务器·操作系统·开源软件·嵌入式软件
JosieBook7 小时前
【Java编程动手学】使用IDEA创建第一个HelloJava程序
java·开发语言·intellij-idea
Thomas_YXQ7 小时前
Unity3D DOTS场景流式加载技术
java·开发语言·unity
summer夏1237 小时前
2025.07 做什么
java·android studio