当前位置： 首页 > news >正文

综合性练习（验证码案例）

news 文章来源：https://blog.csdn.net/cool_tao6/article/details/138676957 2025/5/21 12:08:32

目录

一、需求

二、准备工作

三、约定前后端交互接口

1、需求分析

2、接口定义

四、Hutool工具介绍

1、引入依赖

2、测试使用Hutool生成验证码

五、实现服务器端代码

代码解读：

六、调整前端页面代码

七、运行测试

        随着安全性的要求越来越高，目前项目中很多都使用了验证码，验证码的形式也是多种多样的，更复杂的图形验证码和行为验证码已经成为了更流行的趋势。

        验证码的实现方式有很多，可以前端实现，也可以后端实现。网上也有很多的插件或者工具包可以使用，这里选择使用Hutool提供的小工具来实现。

一、需求

        界面如下图所示：

        1、页面生成验证码

        2、输入验证码，点击提交，验证用户输入的验证码是否正确，正确则进行页面跳转。

二、准备工作

        创建Spring Boot项目，引入SpringMVC的依赖包，把前端页面放在项目中：

        index.html代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>验证码</title><style>#inputCaptcha {height: 30px;vertical-align: middle; }#verificationCodeImg{vertical-align: middle; }#checkCaptcha{height: 40px;width: 100px;}</style>
</head><body><h1>输入验证码</h1><div id="confirm"><input type="text" name="inputCaptcha" id="inputCaptcha"><img id="verificationCodeImg" src="/admin/captcha" style="cursor: pointer;" title="看不清？换一张" /><input type="button" value="提交" id="checkCaptcha"></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>$("#verificationCodeImg").click(function(){$(this).hide().attr('src', '/admin/captcha?dt=' + new Date().getTime()).fadeIn();});$("#checkCaptcha").click(function () {alert("验证码校验");});</script>
</body></html>

        success.html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>验证成功页</title>
</head>
<body><h1>验证成功</h1>
</body>
</html>

        启动项目，在浏览器查看这两个页面。

        index.html：浏览器访问：127.0.0.1:8080/index.html，页面如下：

        

        success.html：浏览器访问：127.0.0.1:8080/success.html，页面如下：

        

三、约定前后端交互接口

1、需求分析

        后端生成验证码图片，发送到前端页面，前端根据图片输入内容，点击提交，校验验证码是否正确，正确切换登录页面，错误提示验证码错误。

        后端需要提供两个服务：

1、生成验证码图片，返回给前端

2、校验验证码是否正确。

2、接口定义

（1）生成验证码

请求URL：/captcha/getCaptcha

param：无

return：图片（响应）

（2）校验验证码

请求URL：/captcha/check

param：inputCode

return：true / false（响应）

四、Hutool工具介绍

        这里验证码的实现，是使用Hutool提供的小工具来实现的。

        Hutool是一个Java工具包类库，对文件、流、加密解密、转码、正则、线程、XML等JDK方法进行封装，组成各种Util（静态）工具类。

        Hutool是一个小而全的Java工具类库，通过静态方法进行封装，降低相关API的学习成本，提高工作效率，使Java拥有函数式语言般的优雅，让Java语言也可以 "甜甜的"。

Hutool官方：https://hutool.cn/ ，参考文档：简介 | Hutool 

源码：https://github.com/dromara/hutool/ （github）https://gitee.com/dromara/hutool/（gitee）

        在参考文档中找到图形验证码，如图：

         

        上面会介绍怎么使用Hutool生成验证码，非常详细，如图：

        

        地址：概述 | Hutool

1、引入依赖

        在官方文档中，官方建议使用下面这个版本，如图：

        那我们也使用这个版本，可以在这里直接复制，粘贴到我们项目的pom.xml文件中，也可以去maven的中央仓库找，如图：中央仓库地址：https://mvnrepository.com/

  

        

        它的地址：Maven Repository: cn.hutool » hutool-captcha » 5.8.16 (mvnrepository.com)

        选择你想使用的版本。这里我使用5.8.16版本，因为这里只需要使用验证码功能，所以就只用含有验证码功能的，不选all全部，然后官方文档也推荐这个，所以就使用它吧，在pom.xml文件添加下面内容：

		<!-- https://mvnrepository.com/artifact/cn.hutool/hutool-captcha --><dependency><groupId>cn.hutool</groupId><artifactId>hutool-captcha</artifactId><version>5.8.16</version></dependency>

        如图：

        这里报黄线不管它，我们能用就行。

2、测试使用Hutool生成验证码

        在test包（这个包也是专门给后端人员进行测试代码用的）路径下创建CaptchaTest类，进行测试，使用官方文档给我们提供的代码：

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.LineCaptcha;
import cn.hutool.core.lang.Console;
public class CaptchaTest {public static void main(String[] args) {//定义图形验证码的长和宽LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(200, 100);//图形验证码写出，可以写出到文件，也可以写出到流lineCaptcha.write("d:/line.png");//输出codeConsole.log(lineCaptcha.getCode());//验证图形验证码的有效性，返回boolean值lineCaptcha.verify("1234");//重新生成验证码lineCaptcha.createCode();lineCaptcha.write("d:/line1.png");//新的验证码Console.log(lineCaptcha.getCode());//验证图形验证码的有效性，返回boolean值lineCaptcha.verify("1234");}
}

        运行main方法后发现，在D盘下，有两个图片，如图：

        打开看看：

        是两张不同的验证码图片，其余代码就不演示了，具体参考官方文档。

        控制台输出的内容：

        可以看到和上面两个验证码符号匹配。

        其他内容就不具体展示了，具体参考官方文档，比较简单，看一下就明白了。

五、实现服务器端代码

yml配置内容：

captcha:width: 200height: 100session:key: captcha_session_keydate: captcha_session_date

        把配置项挪到配置文件中，把生成的验证码存储在Session中，校验时使用配置项。

验证码配置项对应的Java对象：

@Component
@ConfigurationProperties(prefix = "captcha")
@Data
public class CaptchaProperties {private Integer width;private Integer height;private Session session;@Datapublic static class Session {private String key;private String date;}
}

Controller代码：

@RequestMapping("/captcha")
@RestController
public class CaptchaController {@Autowiredprivate CaptchaProperties captchaProperties;public static final long session_valid_timeout = 60 * 1000;//1分钟//验证码页面@RequestMapping("/get")public void getCaptcha(HttpSession session, HttpServletResponse response) {//定义图形验证码的长和宽LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(captchaProperties.getWidth(), captchaProperties.getHeight());//设置返回类型response.setContentType("image/jpeg");//禁止缓存response.setHeader("Progma", "No-cache");//图形验证码写出，可以写出到文件，也可以写出到流try {lineCaptcha.write(response.getOutputStream());//存储Sessionsession.setAttribute(captchaProperties.getSession().getKey(), lineCaptcha.getCode());session.setAttribute(captchaProperties.getSession().getDate(), new Date());response.getOutputStream().close();} catch (IOException e) {throw new RuntimeException(e);}}//校验验证码@RequestMapping("/check")public Boolean check(String inputCode, HttpSession session) {//验证码生成的内容，和用户输入的内容进行比较if(!StringUtils.hasLength(inputCode)) {return false;}//从Session获取信息String saveCode = (String)session.getAttribute(captchaProperties.getSession().getKey());Date saveDate = (Date)session.getAttribute(captchaProperties.getSession().getDate());if(inputCode.equals(saveCode)) {//如果时间超过1分钟，验证码就失效if(saveDate != null && (System.currentTimeMillis() - saveDate.getTime()) < session_valid_timeout) {return true;}}return false;}
}

代码解读：

        这里使用到了读取配置文件的内容，因为验证码的宽度、长度、Session的key和date字符串也是不变的，所以可以把它们放到配置文件中。先定义它们的值，然后创建对象，把配置文件放到对象中，再使用@Autowired注解注入依赖，CaptchaController类就可以读取到配置文件中的内容了。

        验证码的界面，如果有多个用户同时登录，那么就要考虑多线程的问题了，不同的用户返回的验证码也要不同，也符合Session的要求，所以我们使用Session存储用户页面的验证码内容，虽然设置字符串的参数一样，但每个用户在服务器存储的Session是不同的对象，会根据SessionId对应不同用户的Session，而验证码也在Session，刚好也可以传给客户端这边。

        验证码图片是以流的方式传给用户界面，要记得close关掉文件描述符表，不然资源可能会随着请求的增多，把文件描述符表使用完。

        时间可以用当前时间和设置Session时的时间相减，就能知道过去的多久，然后在设置1分钟验证码过期就好了。

        我们还要设置返回类型，和禁止缓存，因为验证码不能一直都是一样的，会变化，为了防止浏览器缓存，就要设置一下。

六、调整前端页面代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>验证码</title><style>#inputCaptcha {height: 30px;vertical-align: middle; }#verificationCodeImg{vertical-align: middle; }#checkCaptcha{height: 40px;width: 100px;}</style>
</head><body><h1>输入验证码</h1><div id="confirm"><input type="text" name="inputCaptcha" id="inputCaptcha"><img id="verificationCodeImg" src="/captcha/get" style="cursor: pointer;" title="看不清？换一张" /><input type="button" value="提交" id="checkCaptcha"></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>$("#verificationCodeImg").click(function(){$(this).hide().attr('src', '/captcha/get?dt=' + new Date().getTime()).fadeIn();});$("#checkCaptcha").click(function () {$.ajax({url: "/captcha/check",type: "post",data: {inputCode: $("#inputCaptcha").val()},success: function(result) {if(result) {location.href = "success.html";} else {alert("验证码错误或过期");}}});});</script>
</body></html>

代码解读：

        用户界面如果验证码看不清，还要可以进行更换验证码图片，就要设置点击图片再去后端拿验证码。

       点击图片就会消失，然后去后端重新拿验证码，/captcha/get 后面的 "dt=?" 是为了防止浏览器缓存，让每次请求的参数都不一样（根据时间获得的参数）。

七、运行测试

        浏览器输入：127.0.0.1:8080/index.html ，页面如下：

        输入错误的验证码，提示错误，如图：

        输入正确的验证码，跳转界面，界面如下：

都看到这了，点个赞再走吧，谢谢谢谢谢

相关文章：

综合性练习（验证码案例）

目录 一、需求 二、准备工作 三、约定前后端交互接口 1、需求分析 2、接口定义 四、Hutool工具介绍 1、引入依赖 2、测试使用Hutool生成验证码 五、实现服务器端代码 代码解读&#xff1a; 六、调整前端页面代码 七、运行测试 随着安全性的要求越来越高&#xff0c…...

编程日记 2024/5/12 22:09:03

实用的Chrome命令 帮你打开Chrome浏览器的隐藏功能

前言 Chrome作为主力浏览器&#xff0c;支持相当丰富的第三方扩展&#xff0c;其实浏览器本身也内置了大量实用的命令。许多实用的功能并没有直接显示在Chrome的菜单上。在这篇文章中&#xff0c;我们将介绍几个实用的chrome:// commands。 通过下面整理的 Chrome 命令&#x…...

编程日记 2024/5/12 22:05:59

Linux提权--定时任务--打包配合 SUID(本地)文件权限配置不当(WEB+本地)

免责声明:本文仅做技术交流与学习... 目录 定时任务 打包配合 SUID-本地 原理: 背景: 操作演示: 分析: 实战发现: 定时任务 文件权限配置不当-WEB&本地 操作演示: 定时任务 打包配合 SUID-本地 原理: 提权通过获取计划任务执行文件信息进行提权 . 1、相对路径和…...

编程日记 2024/5/12 22:04:58

CSS-盒子模型

盒子模型的重要组成部分 内容区域content&#xff1a;width , height 内边距&#xff1a;内边框和内容区域的距离Padding边框线&#xff1a;Border外边距&#xff1a;Margin Border (边框线) 属性&#xff1a;Border 属性值&#xff1a;边框线粗细px 线条样式 颜色(不区分…...

编程日记 2024/5/12 22:02:56

WPF之页的使用

1,Page介绍。 Page直接从FrameworkElement中派生出来&#xff0c;WIndow从ContentControl中派生。 [Localizability(LocalizationCategory.Ignore)]public class Window : ContentControl, IWindowService{....} [ContentProperty("Content")]public class Page : Fr…...

编程日记 2024/5/12 22:01:55

【FFmpeg】Filter 过滤器 ② ( 裁剪过滤器 Crop Filter | 裁剪过滤器语法 | 裁剪过滤器内置变量 | 裁剪过滤器常用用法 )

文章目录 一、裁剪过滤器1、裁剪过滤器简介2、裁剪过滤器语法3、裁剪过滤器内置变量4、裁剪过滤器示例5、裁剪过滤器应用6、裁剪过滤器图示 二、裁剪过滤器常用用法1、裁剪指定像素的视频区域2、裁剪视频区域中心正方形 - 默认裁剪3、裁剪视频区域中心正方形 - 手动计算4、裁剪…...

编程日记 2024/5/12 22:00:54

thinkphp5 中控制器的创建和使用方法

在 ThinkPHP 5 中&#xff0c;控制器&#xff08;Controller&#xff09;是用于处理请求、执行逻辑操作并返回响应的类。以下是在 ThinkPHP 5 中创建和使用控制器的基本方法&#xff1a; 1. 创建控制器 在 ThinkPHP 5 中&#xff0c;控制器通常位于 application/index/contro…...

编程日记 2024/5/12 21:59:53

[Linux] 常用服务器命令(持续更新)

文件操作 # 显示文件系统的磁盘空间使用情况 df -h全局查找文件 find / -type f -iname "java"find / -name libncurses*拷贝整个文件夹 cp -r /home/a/ /home/b/ 解压&#xff0c;撤销解压 撤销zip解压 zipinfo -1 path/xx.zip | xargs rm -rf 撤销tar解压 tar …...

编程日记 2024/5/12 21:58:52

编译官方原版的openwrt并加入第三方软件包

最近又重新编译了最新的官方原版openwrt-2305&#xff08;2024.3.22&#xff09;&#xff0c;此处记录一下以待日后参考。 目录 1.源码下载 1.1 通过官网直接下载 1.2 映射github加速下载 1.2.1 使用github账号fork源码 1.2.2 创建gitee账号映射github openwrt 2.编译准…...

编程日记 2024/5/12 21:53:46

PC适配移动端

**手机端适配** 媒体查询 组件统一样式 媒体查询写四套样式 手机 屏幕宽小于768px 平板 屏幕宽 大于等于768px 小于992px 桌面显示器 屏幕宽大于等于992px 小于1200px 大屏幕 屏幕宽大于等于1200px **页面整体及页面内容** 页面看是需要主PC还是主移动端 主移动端的话…...

编程日记 2024/5/12 21:52:44

springboot+vue+mybatis灵活就业服务平台+PPT+论文+讲解+售后

随着网络科技的不断发展以及人们经济水平的逐步提高&#xff0c;网络技术如今已成为人们生活中不可缺少的一部分&#xff0c;而微信小程序是通过计算机技术&#xff0c;针对用户需求开发与设计&#xff0c;该技术尤其在各行业领域发挥了巨大的作用&#xff0c;有效地促进了灵活…...

编程日记 2024/5/12 21:51:43

Android 13 系统自定义安全水印

效果 源码实现 frameworks/base/services/core/java/com/android/server/am/ActivityManagerService.java public final void showSafeModeOverlay() {View v LayoutInflater.from(mContext).inflate(com.android.internal.R.layout.safe_mode, null);WindowManager.Layout…...

编程日记 2024/5/12 21:50:42

C# WCF服务（由于内部错误，服务器无法处理该请求。）

由于内部错误&#xff0c;服务器无法处理该请求。有关该错误的详细信息&#xff0c;请打开服务器上的 IncludeExceptionDetailInFaults (从 ServiceBehaviorAttribute 或从 <serviceDebug> 配置行为)以便将异常信息发送回客户端&#xff0c;或打开对每个 Microsoft .NET …...

编程日记 2024/5/12 21:48:39

利用github pages建立Serverless个人博客

利用github pages建立Serverless个人博客 概述 使用github pages&#xff0c;可以在github上部署静态网站。利用这个功能&#xff0c;可以很方便地实现个人博客的发布托管。 比如我的个人博客&#xff1a;Buttering’s Blog 对应代码仓库&#xff1a;buttering/EasyBlog: 自…...

编程日记 2024/5/12 21:47:38

Spring Boot 集成 sa-token 实践教程

Spring Boot 集成 sa-token 实践教程 sa-token 是一个轻量级且功能强大的权限认证框架&#xff0c;它基于Java语言&#xff0c;专为Java开发者设计&#xff0c;以简化权限管理的复杂性。在Spring Boot项目中集成sa-token&#xff0c;可以快速实现会话管理、权限控制等功能。本文…...

编程日记 2024/5/12 21:46:37

CSS：盒子模型

目录 ▐ box—model概述 ▐ 盒子的组成 ▐ 内容区 ▐ 内边距 ▐ 边框 ▐ 外边距 ▐ 清除浏览器默认样式 ▐ box—model概述 • CSS处理网页时&#xff0c;它认为每个标签都包含在一个不可见的盒子里. • 如果把所有的标签都想象成盒子&#xff0c;那么我们对网…...

编程日记 2024/5/12 21:45:36

django中的cookie与session

获取cookie request.COOKIE.GET 使用cookie response.set-cookie views.py from django.http import HttpResponse from django.shortcuts import render# Create your views here. def cookie_test(request):r HttpResponse("hello world")r.set_cookie(lan, py…...

编程日记 2024/5/12 21:44:34

环形链表（判断链表中是否有环）的讲解

一&#xff1a;题目 二&#xff1a;思路讲解 1&#xff1a;采用快慢指针的方法&#xff0c;一个fast指针一次移动两个节点&#xff0c;一个slow指针一次移动一个节点。 2&#xff1a;两个指针从头指针开始往后遍历&#xff0c;如果fast指针或者fast->next 有一个为空&…...

编程日记 2024/5/12 21:42:32

NLP(14)--文本匹配任务

前言 仅记录学习过程&#xff0c;有问题欢迎讨论 步骤&#xff1a; * 1. 输入问题 * 2. 匹配问题库&#xff08;基础资源,FAQ&#xff09; * 3. 返回答案文本匹配算法&#xff1a; 编辑距离算法(缺点) 字符之间没有语义相似度; 受无关词/停用词影响大; 受语序影响大 Jaccar…...

编程日记 2024/5/12 21:41:30

MySQL——系统变量

使用 #最大连接用户数 select MAX_CONNECTIONS; #临时存放构成每次事务的SQL的缓冲区长度 select BINLOG_CACHE_SIZE; #SQL Server的版本信息 select VERSION; 查询结果...

编程日记 2024/5/12 21:40:29

「 网络安全常用术语解读 」漏洞利用预测评分系统EPSS详解

1. 概览 EPSS&#xff08;Exploit Prediction Scoring System&#xff0c;漏洞利用预测评分系统&#xff09; 提供了一种全新的高效、数据驱动的漏洞管理功能。EPSS是一项数据驱动的工作&#xff0c;使用来自 CVE 的当前威胁信息和现实世界的漏洞数据。 EPSS 模型产生 0 到 1&…...

编程日记 2024/5/12 21:38:27

理解python中的Iterator 和 Iterable 迭代器和可迭代对象

为什么有些对象可以用for … in 循环 我们先看一段代码&#xff1a; list [1, 2, 3, 4, 5]for i in list:logger.info(i)这代码定义了1个数组object list, 然后用 for … in 来遍历这个list 看起来合理没什么值得注意 但其实 for … in 后面对象还可以是个String for i in …...

编程日记 2024/5/12 21:37:25

C语言实现动态加载.so动态库，使用，错误捕获以及卸载

动态库 概述 动态库的扩展名是.so。 动态库是被加载&#xff0c;调用的时候是根据内存地址去调用&#xff0c;而不是将代码复制到文件中。 动态库可以同时被多个进程使用。 实战案例&#xff1a;构建 libmath.so 动态库 准备源文件 calc.h 定义加法&#xff1a;int add…...

编程日记 2024/5/12 21:36:24

《动手学深度学习》V2（11-18）

文章目录 十一、二 模型选择与过拟合和欠拟合1、模型的选择2、过拟合和欠拟合3、估计模型容量4、线性分类器的VC维5、过拟合欠拟合的代码实现 :fire:①生成数据集②定义评估损失③定义训练函数④三阶多项式函数拟合⑤线性函数拟合(欠拟合)⑤高阶多项式函数拟合(过拟合) 十三、权…...

编程日记 2024/5/12 21:35:22

web前端之excel转pdf、小黄人发送请求、base64、jspdf、xlsx

MENU 前言方案一方案二结束语 前言 在前端将Excel转换为PDF有多种方案&#xff0c;本文介绍两种简单方案。 方案一 使用jspdf库&#xff0c;先将Excel文件转成Base64格式&#xff0c;然后再使用jspdf库将其转换为PDF格式&#xff0c;最后使用saveAs函数下载PDF文件。 步骤一: 安…...

编程日记 2024/5/12 21:34:21

【面试题】音视频流媒体高级开发（2）

面试题6 衡量图像重建好坏的标准有哪些&#xff1f;怎样计算&#xff1f; 参考答案 SNR&#xff08;信噪比&#xff09; PSNR10*log10((2n-1)2/MSE) &#xff08;MSE是原图像与处理图像之间均方误差&#xff0c;所以计算PSNR需要2幅图像的数据&#xff01;&#xff09; SSIM…...

编程日记 2024/5/12 21:33:20

数据与结构--堆

堆 堆的概念 堆&#xff1a;如果有一个关键码的集合K{k0,k1,k2,…,kn-1}&#xff0c;把它的所有元素按完全二叉树的顺序存储方式存储在一个一维数组中&#xff0c;并满足ki<k2i1且ki<k2i2&#xff08;或满足ki>k2i1且ki>k2i2&#xff09;&#xff0c;其中i0,1,2,…...

编程日记 2024/5/12 21:32:19

Github的使用教程（下载项目、寻找开源项目和上传项目）

根据『教程』一看就懂&#xff01;Github基础教程_哔哩哔哩_bilibili 整理。 1.项目下载 1&#xff09;直接登录到源码链接页或者通过如下图的搜索 通过编程语言对搜索结果进一步筛选。 如何去找开源项目&#xff1a;(Github 新手够用指南 | 全程演示&个人找项目技巧放…...

编程日记 2024/5/12 21:31:18

Linux-线程概念

1. 线程概念 线程&#xff1a;轻量级进程&#xff0c;在进程内部执行&#xff0c;是OS调度的基本单位&#xff1b;进程内部线程共用同一个地址空间&#xff0c;同一个页表&#xff0c;以及内存中的代码和数据&#xff0c;这些资源对于线程来说都是共享的资源 进程&#xff1a;…...

编程日记 2024/5/12 21:29:15

js的桶排序

桶排序&#xff08;Bucket Sort&#xff09;是一种分布式排序算法&#xff0c;它将元素分散到一系列桶中&#xff0c;然后对每个桶中的元素进行排序&#xff0c;并将所有的桶合并起来得到最终的排序结果。桶排序适用于输入的元素均匀分布在一个范围内的情况&#xff0c;它的时间…...

编程日记 2024/5/12 21:28:14