验证码生成--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>
  • 作用:前端页面通过Thymeleaf模板引擎渲染验证码图像和文本,使用jQuery监听验证码图像的点击事件。
  • 点击事件:当验证码图像被点击时,通过AJAX请求"/getCaptcha"获取新的验证码图像和文本,并更新到页面上。

3. 总结

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

4.源码 源码git

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/835757.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JAVA基础--File

文件 为什么要知道文件 在计算机磁盘中&#xff0c;文件是一个非常重要的存在&#xff0c;大家知道我们数据都是保存在计算机磁盘&#xff0c;而磁盘以文件为载体&#xff0c;将信息存储在磁盘文件中&#xff0c;接下来我们学习的IO流也主要是对文件中的数据进行读写操作&…

第四百九十九回

文章目录 1. 概念介绍2. 使用方法2.1 固定样式2.2 自定义样式 3. 示例代码4. 内容总结 我们在上一章回中介绍了"GetMaterialApp组件"相关的内容&#xff0c;本章回中将介绍使用get显示SnackBar.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在介…

毕业论文凑字数——关于IVR自动语音应答交互式电话导航自动总机等等概念的一些剖析

目录 IVR毕业论文的讨巧思路IVR自动语音应答IVR的使用流程IVR的各种应用IVR的基本配置 一个小朋友的毕业论文要凑字数&#xff0c;所以推荐她讲一讲IVR&#xff0c;因为IVR可以翻译的名字很多&#xff0c;比如交互式语音应答&#xff0c;自动语音应答&#xff0c;自动语音服务&…

C语言例题36、判断一个数是否是回文数

题目要求&#xff1a;输入一个5位数&#xff0c;判断它是不是回文数。即12321是回文数 #include <stdio.h>int main() {int x;int ge, shi, qian, wan;printf("请输入一个5位数&#xff1a;");scanf("%d", &x);ge x % 10; //个sh…

Xshell连接提示“SSH服务器拒绝了密码”

原因1&#xff1a;数字锁没有打开 没有打开NumLock&#xff08;数字小键盘上面有一个【Num】按键&#xff09;&#xff0c;需要按键开启。 注意要检查NumLock灯是否亮起。 或者改成用字母键上面的数字键输入就好了。 原因2&#xff1a;root密码设置错误&#xff08;这个是比较常…

fatal error: ros/ros.h: 没有那个文件或目录

解决方法&#xff1a; 在出错的文件的包下的CMakeLists.txt文件里&#xff0c;加上 find_package(catkin REQUIRED COMPONENTSroscpp )include_directories(include ${catkin_INCLUDE_DIRS} )【ROS-解决问题】 fatal error: ros/ros.h: 没有那个文件或目录-CSDN博客

GO语言核心30讲 实战与应用 (第三​部分)

原站地址&#xff1a;Go语言核心36讲_Golang_Go语言-极客时间 一、io包中的接口和工具

设计模式-09 - 享元模式 flyweight pattern

设计模式-09 - 享元模式 flyweight pattern 1.定义 享元模式是一种设计模式&#xff0c;它使用共享对象来减少内存使用和提高性能。它通过存储共享的对象实例池来实现&#xff0c;这些实例可以被多个客户端同时使用。 享元模式定义了一个接口&#xff0c;使客户端可以访问共…

安全关闭Tcp连接

close与shutdwon int close(int sockfd);关闭sokcet&#xff0c;这里注意&#xff1a;当程序调用close关闭socket的时候,如果缓冲区中仍然有数据的话,协议栈会发送RST包代替FIN包&#xff0c;丢弃缓冲的数据&#xff0c;强行关闭连接 int shutdown(int sockfd, int howto);该…

【Rollup】用rollup从0到1开发一个js插件并发布到npm

Rollup 是一个 JavaScript 模块打包器&#xff0c;专注于打包 ES6 模块将其编译回多种模块化格式&#xff0c;尤其适合打包库和框架&#xff0c;因为它可以生成更小、更高效的代码&#xff0c;并且特别适合将代码打包成可在浏览器中使用的库。 从0到1开发js插件 1.创建文件夹…

es终止快照恢复进程的方法

方法1、删除索引可以终止&#xff0c;恢复进程。 DELETE index_* // 按通配符删除以index_开头的索引 DELETE _all // 删除全部索引 POST *,-.*/_close 关闭索引 POST *,-.*/_open 打开索引 DELETE *,-.* 删除全部索引方法2、强制重启es 集群也可也终…

安全狗入选福建省网信系统2024年度网络安全技术支撑单位

近日&#xff0c;福建省委网信办会同国家互联网应急中心福建分中心确定并公示了福建省网信系统2024年度网络安全技术支撑单位名单。 作为国内云原生安全领导厂商&#xff0c;安全狗也成功入选。 据悉&#xff0c;此次遴选工作依据《中华人民共和国网络安全法》《国家网络安全事…

如何通过AI技术实现员工培训的革命性变革

AI个性化培训&#xff1a;开启员工潜力的新篇章 在当今这个信息爆炸的时代&#xff0c;人工智能&#xff08;AI&#xff09;技术的影响力已经渗透到社会的各个层面&#xff0c;包括教育与培训行业。AI技术正在彻底改变我们获取知识与技能的方式&#xff0c;特别是在员工培训领域…

IDEA使用技巧2—发布web项目

作者&#xff1a;私语茶馆 1.War包类型 发布Web项目有两种模式&#xff1a;war和war exploded&#xff0c; war模式&#xff1a;将WEB工程以包的形式上传到服务器 &#xff1b;war exploded模式&#xff1a;将WEB工程以当前文件夹的位置关系上传到服务器&#xff1b; war ex…

已解决java.lang.NoClassDefFoundError: 找不到类定义错误的正确解决方法,亲测有效!!!

已解决java.lang.NoClassDefFoundError: 找不到类定义错误的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 目录 问题分析 报错原因 解决思路 解决方法 检查类路径 确认类文件和库的位置 检查类加载器配置 确认依赖库的存在和版本 总结 问题…

解决NullPointerException at org.apache.hive.hcatalog.data.schema.HCatSchema.get问题

解决在org.apache.hive.hcatalog.data.schema.HCatSchema.get遇到NullPointerException 在使用hive sqoop import过程中遇到NullPointerExcetption at org.apache.hive.hcatalog.data.schema.HCatSchema.get 这大概率是导入hive的目标表结构与同步的column选项不匹配造成的。 …

c# 针对internal的类 如何写测试类

在C#中&#xff0c;internal 关键字意味着一个类型或成员只能在定义它的程序集中访问。这通常用于封装那些不应该被外部程序集直接访问的实现细节。但是&#xff0c;在编写单元测试时&#xff0c;我们可能希望测试这些internal类和方法。有几种方法可以实现这一点&#xff1a; …

用于视频识别的快慢网络

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 摘要Abstract文献阅读&#xff1a;用于视频识别的快慢网络1、文献摘要2、提出方法2.1、SlowFast模型2.2、SlowFast 提出思想 3、相关方法3.1、时空间卷积3.2、基于光…

golang中变量交换的2种方式

变量的交换在我们对数据进行排序时是必须要用到的技术&#xff0c; 今天就给大家介绍2种go语言中交换变量的方式。 1. 使用传统方式定义一个中间变量来进行变量的交换 // 文件名 demo1.go package demo01import "fmt"func ExampleDemo02() {//常规方式进行变量交换…

词令蚂蚁庄园今日答案如何在微信小程序查看蚂蚁庄园今天问题的正确答案?

词令蚂蚁庄园今日答案如何在微信小程序查看蚂蚁庄园今天问题的正确答案&#xff1f; 1、打开微信&#xff0c;点击搜索框&#xff1b; 2、打开搜索页面&#xff0c;选择小程序搜索&#xff1b; 3、在搜索框&#xff0c;输入词令搜索点击进入词令微信小程序&#xff1b; 4、打开…