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

验证码demo(简单实现)

news 文章来源：https://blog.csdn.net/qiuqiushuibx/article/details/137100408 2024/11/6 21:29:44

前言

我们注意到我们登录网站的时候经常会用到网络验证码,今天我们就简单实现一个验证码的前后端交互问题,做一个小demo

准备

我们这里并不需要依靠原生的java来实现,而是只需要引入一个maven依赖,使用现成的封装好的即可,这是我使用的是hutool工具包

网址:Hutool🍬一个功能丰富且易用的Java工具库，涵盖了字符串、数字、集合、编码、日期、文件、IO、加密、数据库JDBC、JSON、HTTP客户端等功能。

参考文档:入门和安装 (hutool.cn)

注意:这里我们去maven仓库去寻找的时候,一定不要去找最新版本的

我们可以先去使用一下这里的验证码,先会用,不必先理解原理

当我么执行完这类代码就会发现,对应的文件夹出现了类似于这样的图片

后端

首先我们得先设计接口

我们这里第一个接口负责以流的方式写入数据给web客户端

第二个接口负责检查输入的验证码与实际的验证码是否一致

至于页面的跳转,我们交给前端即可

现在开始写接口

我们将需要设置的常量放在配置文件中,使用一个对象进行注入即可

  spring:application:name: Captcha//验证码的长宽captcha:width: 200height: 100//验证码设置的时间(为了设置过期时间)
//key为了保存验证码的值session:key: captcha_session_keydate: captcha_session_date//个人喜好server:port: 9090

这些常量都是无状态的,我们将其交给Spring管理

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

我们将刚刚测试的代码改一改就可以将验证码图片写入web网站上

首先创建验证码对象,然后将验证码写入其输出流即可

然后为了多线程的问题,我们不可以将验证码属性提出成公共属性,以防被修改,我们可以使用session保存验证码和生成验证码的时间

获取验证码

@RequestMapping("/captcha")
@RestController
public class CaptchaController {
//过期时间为一分钟private final static long session_valid_timeout = 60 * 1000;
//对象注入@Autowiredprivate CaptchaProperties captchaProperties;@RequestMapping("/get")public void getCaptcha(HttpSession session, HttpServletResponse response){
//获取验证码对象LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(captchaProperties.getWidth(), captchaProperties.getHeight());try {
//写入输出流lineCaptcha.write(response.getOutputStream());
//将验证码设置到session中,方便验证session.setAttribute(captchaProperties.getSession().getKey(), lineCaptcha.getCode());session.setAttribute(captchaProperties.getSession().getDate(), new Date());} catch (IOException e) {throw new RuntimeException(e);}}

下面我们开始设计检查验证码的逻辑

注:后端代码最好是写一点检查一点,这样方便排除错误

 检查验证码

首先需要一个输入的input获取输入框的数据,从而和session中的数据进行比较,注意先判空

 @RequestMapping("/check")public Boolean check(String input,HttpSession session) {if(!StringUtils.hasLength(input)) {return false;}String savedCode = (String) session.getAttribute(captchaProperties.getSession().getKey());Date savedDate = (Date) session.getAttribute(captchaProperties.getSession().getDate());if(input.equalsIgnoreCase(savedCode)) {if(savedDate!=null && System.currentTimeMillis()  - savedDate.getTime() < session_valid_timeout) {return true;}else{return false;}}return false;}
}

前端

前端书写大致了解会写就行

主要逻辑就是获取输入框中的文本交给后端的接口即可

注:这里的图片地址建议加上一个时间戳,防止浏览器缓存

<!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:{input:$("#inputCaptcha").val(),},success:function(result){if(result) {location.href="success.html"}else{alert("验证码错误或超时")}}});});</script>
</body></html>

成果展示

成功则跳转,另一个网页随便写写就行

失败则提示

相关文章：

验证码demo(简单实现)

前言 我们注意到我们登录网站的时候经常会用到网络验证码,今天我们就简单实现一个验证码的前后端交互问题,做一个小demo 准备 我们这里并不需要依靠原生的java来实现,而是只需要引入一个maven依赖,使用现成的封装好的即可,这是我使用的是hutool工具包 网址:Hutool&#x1f36c;…...

编程日记 2024/4/3 2:39:27

C#面：虚函数和抽象函数的区别

C#中的虚函数和抽象函数都是实现多态性的重要概念&#xff0c;但它们有一些区别。 定义方式&#xff1a; 虚函数&#xff1a;在基类中使用 virtual 关键字定义&#xff0c;可以在派生类中被重写。抽象函数&#xff1a;在抽象类或接口中使用abstract 关键字定义&#xff0c;必…...

编程日记 2024/4/3 2:32:21

Vidmore Video Fix for Mac 视频修复工具

Vidmore Video Fix for Mac是一款功能强大且易于使用的视频修复工具&#xff0c;专为Mac用户设计。它凭借先进的视频修复技术&#xff0c;能够帮助用户解决各种视频问题&#xff0c;如视频文件损坏、无法播放、格式不支持等。 软件下载&#xff1a;Vidmore Video Fix for Mac v…...

编程日记 2024/4/3 2:22:11

Docker容器与虚拟化技术：OpenEuler 部署 Docker UI

目录 一、实验 1.环境 2.OpenEuler 部署 docker-compose-ui 2.OpenEuler 部署 docker ui 3.使用cpolar内网穿透 二、问题 1.docker run -w 的作用 一、实验 1.环境 &#xff08;1&#xff09;主机 表1 主机 系统架构版本IP备注LinuxopenEuler22.03 LTS SP2 192.168…...

编程日记 2024/4/3 2:15:05

328——二维矩阵值变为1最小操作次数 next、nextInt、nextLine

一、next、nextInt、nextLine区别 1.next() next()不光是接收键盘输入的内容&#xff0c;而且还进行分割。例如默认分隔符为空格 Scanner sc new Scanner(System.in);while (true){String str sc.next();System.out.println(str "A");}// 输出结果 input&#…...

编程日记 2024/4/3 2:13:03

HarmonyOS 应用开发之同步任务开发指导 (TaskPool和Worker)

同步任务是指在多个线程之间协调执行的任务&#xff0c;其目的是确保多个任务按照一定的顺序和规则执行&#xff0c;例如使用锁来防止数据竞争。 同步任务的实现需要考虑多个线程之间的协作和同步&#xff0c;以确保数据的正确性和程序的正确执行。 由于TaskPool偏向于单个独…...

编程日记 2024/4/3 2:07:58

基于MiniExcel的三种常用导出Excel方法(固定列导出、动态列导出、按模板导出)

为了方便代码编写和测试&#xff0c;把很多代码都放在一个class里面&#xff0c;实际开发根据需要放到对应的目录下即可。 1.使用nuget下载安装miniexcel&#xff1b; 2.编写对应的测试接口&#xff0c;具体代码如下: using Microsoft.AspNetCore.Authorization; using Micr…...

编程日记 2024/4/3 2:06:56

MATLAB科研绘图与学术图表绘制从入门到精通

&#x1f482; 个人网站:【 摸鱼游戏】【神级代码资源网站】【工具大全】&#x1f91f; 一站式轻松构建小程序、Web网站、移动应用&#xff1a;&#x1f449;注册地址&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交…...

编程日记 2024/4/3 2:02:52

C++核心高级编程 --- 1、内存分区模型 2、引用

文章目录 第一章&#xff1a;1.内存分区模型1.1 程序运行前1.2 程序运行后1.3 new操作符 第二章&#xff1a;2.引用2.1 使用2.2 注意事项2.3 做函数参数2.4 做函数返回值2.5 本质2.6 常量引用 第一章&#xff1a; 1.内存分区模型 4个区域&#xff1a; 代码区&#xff1a;存放…...

编程日记 2024/4/3 1:57:49

winform日历控件_进度条控件

在 Windows Forms 应用程序中使用日历控件 (如 MonthCalendar 或 DateTimePicker) 和进度条控件 (如 ProgressBar) 是一个很好的练习&#xff0c;以了解这些控件的工作方式。以下是一些基本的步骤来实践这些控件&#xff1a; 日历控件&#xff1a; 添加 MonthCalendar 控件&am…...

编程日记 2024/4/3 1:52:45

Java进阶-反射的详解与应用

本文深入探讨了Java反射机制的核心概念、应用实例及其在现代Java开发中的重要性。文章首先介绍了反射的基本原理和能力&#xff0c;包括在运行时动态获取类信息、操作对象字段和方法的能力。随后&#xff0c;通过具体代码示例&#xff0c;展示了如何利用反射进行字段访问、方法…...

编程日记 2024/4/3 1:50:43

蓝桥杯算法题——暴力枚举法

先估算这个数小于3的50次方 cnt0 for i in range(50):for j in range(50):for k in range(50):a3**ib5**jc7**kif a*b*c<59084709587505:cnt1 print(cnt-1)#当ijk都为0时&#xff0c;a*b*c1不是幸运数字所以要减去...

编程日记 2024/4/3 1:47:40

【教程】Kotlin语言学习笔记（六）——泛型

写在前面&#xff1a; 如果文章对你有帮助&#xff0c;记得点赞关注加收藏一波&#xff0c;利于以后需要的时候复习&#xff0c;多谢支持&#xff01; 【Kotlin语言学习】系列文章 第一章 《认识Kotlin》 第二章 《数据类型》 第三章 《数据容器》 第四章 《方法》 第五章 《L…...

编程日记 2024/4/3 1:43:38

【中文视觉语言模型+本地部署 】23.08 阿里Qwen-VL：能对图片理解、定位物体、读取文字的视觉语言模型 (推理最低12G显存+)

项目主页&#xff1a;https://github.com/QwenLM/Qwen-VL 通义前问网页在线使用——&#xff08;文本问答&#xff0c;图片理解&#xff0c;文档解析&#xff09;&#xff1a;https://tongyi.aliyun.com/qianwen/ 论文v3. : 一个全能的视觉语言模型 23.10 Qwen-VL: A Versatile…...

编程日记 2024/4/3 1:42:37

【Qt 学习笔记】Qt 背景介绍

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Qt 背景介绍 文章编号&#xff1a;Qt 学习笔记 / 01 文章目录 Qt 背景…...

编程日记 2024/4/3 1:38:34

C++递推算法

数塔问题 #include<bits/stdc.h> using namespace std; void f(int,int,int); int a[100][100]; int n; int main() {cin>>n;for(int i0;i<n;i){for(int j0;j<1i;j){cin>>a[i][j];}}for(int in-2;i>0;i--){for(int j0;j<i1;j){a[i][j]a[i][j]ma…...

编程日记 2024/4/3 1:36:32

Go项目结构整洁实现｜GitHub 3.5k

一、前言 hi&#xff0c;大家好&#xff0c;这里是白泽。今天给大家分享一个GitHub &#x1f31f; 3.5k 的 Go项目&#xff1a;go-backend-clean-arch https://github.com/amitshekhariitbhu/go-backend-clean-architecture 这个项目是一位老外写的&#xff0c;通过一个 HTT…...

编程日记 2024/4/3 1:31:27

Python读取PDF文字 去掉页眉页脚

使用PyMuPDF&#xff08;即fitz&#xff09;读取PDF中的text时&#xff0c;会把页码也读进来。所以&#xff0c;有时候就需要让程序忽略页眉和页脚&#xff0c;或者直接删除页眉和页脚。 根据fitz的文档&#xff1a;Page - PyMuPDF 1.24.0 documentation get_text的clip参数可…...

编程日记 2024/4/3 1:30:26

Linux：入门篇

文章目录 前言1. Linuxd的安装环境2.Linux的简单介绍2.1 新建目录2.2 新建文件 3.指令到底是什么&#xff1f;4.shell命令以及运行原理5.总结 前言 很多人对于Linux的学习总是感觉无法下手&#xff0c;不知道从何开始学习&#xff0c;相信这篇文章将会为你提供一个清晰的思路。…...

编程日记 2024/4/3 1:29:25

NSSCTF Round#20 Basic 真亦假，假亦真 CSDN_To_PDF V1.2 出题笔记 （附wp+源码）

真亦假&#xff0c;假亦真 简介&#xff1a;java伪造php一句话马。实则信息泄露一扫就出&#xff0c;flag在/flag里面。 题目描述&#xff1a;开开心心签个到吧&#xff0c;祝各位师傅们好运~ 静态flag&#xff1a;NSS{Checkin_h4v3_4_g00D_tINNe!} /路由显示 <?php e…...

编程日记 2024/4/3 1:26:22

处理关于 React lazy 白屏的两种方案

这篇文章是今天在阅读 React 官方文档的时候看到的一个关于 处理 lazy 体验问题的小技巧&#xff0c;在这里记录一下 当我们使用 React.lazy 去懒加载一个路由组件&#xff0c;在不做任何其他处理的情况下从其他页面首次进入到这个懒加载的路由页面时&#xff0c;肯定会出现白屏…...

编程日记 2024/4/3 1:23:19

Nginx 基础

文章目录 Nginx概念安装下载上传安装包执行准备条件指定安装位置编译和安装启动服务创建启动脚本 linux文件目录nginx运行原理nginx配置域名概念和原理域名配置 Nginx 概念 Nginx 是一个高性能的HTTP和反向代理web服务器&#xff0c;同时也提供了IMAP/POP3/SMTP服务。Nginx是…...

编程日记 2024/4/3 1:22:18

C++完美转发（适合小白）

我们知道&#xff0c;C中有左值引用和右值引用&#xff0c;首先我们要知道什么是左值什么是右值。 左值&#xff1a;表达式结束后依然存在的持久对象。左值可以出现在赋值语句的左边或右边。例如&#xff0c;变量和函数返回的引用都是左值。左值通常有持久的地址&#xff0c;可…...

编程日记 2024/4/3 1:13:09

如何创建自己的 Spring Boot Starter 并为其编写单元测试

当我们想要封装一些自定义功能给别人使用的时候&#xff0c;创建Spring Boot Starter的形式是最好的实现方式。如果您还不会构建自己的Spring Boot Starter的话&#xff0c;本文将带你一起创建一个自己的Spring Boot Starter。 快速入门 创建一个新的 Maven 项目。第三方封装的…...

编程日记 2024/4/3 1:09:05

C++ ：STL中deque的原理

deque的结构类似于哈希表&#xff0c;使用一个指针数组存储固定大小的数组首地址&#xff0c;当数据分布不均匀时将指针数组内的数据进行偏移&#xff0c;桶不够用的时候会像vector一样扩容然后将之前数组中存储的指针拷贝过来&#xff0c;从原理可以看出deque的性能是非常高的…...

编程日记 2024/4/3 1:07:59

AttributeError: ‘Namespace‘ object has no attribute ‘EarlyStopping‘

报错原因 这个报错信息表明在Python脚本train.py中尝试访问命令行参数args.EarlyStopping时出错&#xff0c;具体错误是AttributeError: Namespace对象没有名为EarlyStopping的属性。 在Python的argparse模块中&#xff0c;当我们通过命令行传递参数并解析时&#xff0c;解析…...

编程日记 2024/4/3 1:03:56

深度学习pytorch——卷积神经网络（持续更新）

计算机如何解析图片&#xff1f; 在计算机的眼中&#xff0c;一张灰度图片&#xff0c;就是许多个数字组成的二维矩阵&#xff0c;每个数字就是此点的像素值&#xff08;图-1&#xff09;。在存储时&#xff0c;像素值通常位于[0, 255]区间&#xff0c;在深度学习中&#xff0…...

编程日记 2024/4/3 0:59:52

【edge浏览器无法登录某些网站，以及迅雷插件无法生效的解决办法】

edge浏览器无法登录某些网站&#xff0c;以及迅雷插件无法生效的解决办法 edge浏览器无法登录某些网站&#xff0c;但chrome浏览器可以登录浏览器插件无法使用&#xff0c;比如迅雷如果重装插件重装浏览器重装迅雷后仍然出现问题 edge浏览器无法登录某些网站&#xff0c;但chro…...

编程日记 2024/4/3 0:58:48

OpenHarmony无人机MAVSDK开源库适配方案分享

MAVSDK 是 PX4 开源团队贡献的基于 MavLink 通信协议的用于无人机应用开发的 SDK&#xff0c;支持多种语言如 C/C、python、Java 等。通常用于无人机间、地面站与通信设备的消息传输。 MAVLink 是一种非常轻量级的消息传递协议&#xff0c;用于与无人机&#xff08;以及机载无…...

编程日记 2024/4/3 0:55:46

模型训练----parser.add_argument添加配置参数

现在需要配置参数来达到修改训练的方式&#xff0c;我现在需要新建一个参数来开关wandb的使用。 首先就是在def parse_option():函数里添加上你要使用的变量名 parser.add_argument("--open_wandb",type bool,defaultFalse,helpopen wandb) 到config文件里增加你的…...

编程日记 2024/4/3 0:54:45

天元建设集团有限公司重庆分公司/东莞seo黑帽培训

前言 随着业务和大数据技术的发展&#xff0c;越来越多的公司需要在后端架设Hbase数据库&#xff0c;而原有的业务则需要从各种RDBMS数据库中迁移到Hbase当中。Appach的sqoop&#xff08;发音&#xff1a;[skup]&#xff09;就是基于这样的需求而诞生的&#xff0c;本文详细记…...

编程日记 2024/11/6 14:10:39

北京免费网站建设模板下载/谷歌seo靠谱吗

经常遇到的面试题&#xff0c;一个类继承另一个类然后问输出的结果是什么。个人觉得就是考类的输出问题&#xff08;亲测&#xff09; 第一&#xff1a;单一的类执行顺序 package Test; public class person { static{ System.out.println("父类的静态块"); } per…...

编程日记 2024/11/6 13:34:49

wordpress simple主题/优化营商环境工作总结

如果你只是不想要你插入到文档中的图片的某一小部分&#xff0c;试问你应该怎么办呢&#xff1f;其实很简单&#xff0c;你可以删除图片的背景哦&#xff01;在Word2013中是可以这么做的&#xff0c;不信的话你就来试试吧。操作步骤如下&#xff1a;1、用Word2013打开一篇文档&…...

编程日记 2024/11/6 13:12:27

wordpress建设的是模板网站吗/网站seo排名优化工具

idle connect ( 已经建立完成了TCP三次握手 ) open sent open confirm establish connect 和 active 都是 TCP 连接阶段, active 是发起方, connect 是应答方 Idle State 1 BGP 通常以 Idle State 开始( 此时拒绝接收所有入连接 )。当一个开始事件出现, BGP 过程初始化所…...

编程日记 2024/11/6 11:57:15

网站权重分散/百度号注册官网

1、接收参数是Date类型 接收参数前边加一个DateTimeFormat(pattern "yyyy-MM-dd") RequestMapping("/updateDate") public String updateDate(DateTimeFormat(pattern "yyyy-MM-dd") Date newDate) {return "redirect:list.do"; }…...

编程日记 2024/11/6 11:56:13

wordpress 商城id连续/今日热搜

介绍 数据库是构建软件系统的重要组成部分&#xff0c;用于有效地存储和读取数据。在这里&#xff0c;我们将使用早期版本的SQLite讨论数据库实现的一些体系结构细节。 SQLite是一个小型数据库应用程序&#xff0c;用于数百万个软件和设备。SQLite是由D.Richard Hipp于2000年…...

编程日记 2024/11/6 10:34:13