验证码demo(简单实现)

前言

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

成果展示

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

失败则提示

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

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

相关文章

【前端学习——js篇】6.事件模型

具体见&#xff1a;https://github.com/febobo/web-interview 6.事件模型 ①事件与事件流 事件(Events) 事件是指页面中发生的交互行为&#xff0c;比如用户点击按钮、键盘输入、鼠标移动等。在js中&#xff0c;可以通过事件来触发相应的操作&#xff0c;例如执行函数、改变…

dump文件分析OOM及线程堆栈

OutOfMemoryError (OOM) 如果项目报错&#xff1a; OutOfMemoryError: Java heap space&#xff0c;说明堆内存空间&#xff08;Heap Space&#xff09;中没有足够的空间来分配对象了。 一旦发生 OOM&#xff0c;系统有可能不可用&#xff0c;或者频繁重启。属于非常严重的问题…

基于springboot实现校园管理系统项目【项目源码+论文说明】

基于springboot实现校园管理系统演示 摘要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;校园管理系统当然也不能排除在外。校园管理系统是以实际运用为开发背景&#xff0c…

数据仓库——大维度问题

大维度 大维度很深&#xff0c;有很多记录。大维度很宽&#xff0c;有很多属性。满足任何一种情况&#xff0c;都可以说这是个大维度。 由于数据量很大&#xff0c;很多包含大维度的数据仓库功能可能会很慢&#xff0c;效率很低&#xff0c;需要设计有效的方法&#xff0c;原则…

【数学】积性函数(以 P2303 为例)

定义&#xff1a; 若函数 f ( x ) f(x) f(x) 满足 ∀ gcd ⁡ ( a , b ) 1 , f ( a b ) f ( a ) f ( b ) \forall \gcd(a,b)1, f(ab)f(a)f(b) ∀gcd(a,b)1,f(ab)f(a)f(b)&#xff0c;则函数 f f f 为积性函数。 函数&#xff1a; 莫比乌斯函数 μ ( x ) \mu(x) μ(x) 为…

修改 RabbitMQ 默认超时时间

MQ客户端正常运行&#xff0c;突然就报连接错误&#xff0c; 错误信息写的很明确&#xff0c;是客户端连接超时。 不过很疑虑&#xff0c;为什么会出现连接超时呢&#xff1f;代码没动过&#xff0c;网络也ok&#xff0c;也设置了心跳和重连机制。 最终在官网中找到了答案&am…

windows-MySQL5.7安装

1.安装包下载 https://downloads.mysql.com/archives/community/&#xff08;社区版下载链接&#xff09; 选择Archives可以下载历史包&#xff0c;此处使用5.7.43 2.解压文件 解压文件到你指定安装的目录&#xff1a;解压完成后在mysql-5.7.43-winx64下新建文件my.ini和d…

企业引入“四力平衡”理念,激励员工工作积极性

—— 如何激励业务人员的工作积极性&#xff1f;【所属行业】生产制造业【问题类型】业务人员绩效考核【客户背景】J公司成立于1985年&#xff0c;目前主要从事机床、工具及相关产品的进出口贸易和国内营销业务&#xff0c;自1990年以来&#xff0c;一直属于全国最大的500家外贸…

如何备考2024年AMC10:吃透2000-2023年1250道真题(限时免费送)

有家长朋友问&#xff0c;有没有适合初中学生参加的奥数类比赛&#xff1f;我推荐AMC10美国数学竞赛&#xff0c;在国内可以方便地参加&#xff0c;而且每年全国各省市参加的初中生越来越多。关于AMC10详细的介绍和常见问题解答&#xff0c;可以联系我获得。 那么如何在AMC10竞…

正大国际:黄金投资稳定与保值的避险之选

黄金作为备受投资者追捧的贵金属&#xff0c;在金融市场中扮演着重要的角色。黄金作为一种避险资产具有稳定性和保值特性&#xff0c;能够在市场动荡时提供投资者的资金保护&#xff0c; 正大召煮4/26/12 xiaoccsw 避险需求:当股票市场、货币市场或其他资产类别表现不佳时&a…

浅谈交直流混合微电网能量管理系统关键技术研究综述

摘要&#xff1a;为了提升交直流混合微电网健康有效发展&#xff0c;提高直流互联微电网中分布式电源的能源使用效率&#xff0c;提升区域微电网稳定发展&#xff0c;对交直流混合微电网能量管理系统关键技术进行分析和研究很有必要。文章主要从交直流混合微电网能量管理系统架…

浅谈数据治理之道 数据分析(三)

1. 写在前面 1.1前言 在数据治理中&#xff0c;只有通过深入的数据分析&#xff0c;才能挖掘数据的真正价值&#xff0c;否则数据就发挥不了其作用。数据分析是数据治理环节之一&#xff0c;意在通过收集、整理、处理和解释数据&#xff0c;以获取有价值的信息和洞察力的过程…

cephadm安装reef版本ceph集群

环境 操作系统 Rocky Linux 9.2 minimal 三个节点节点名称 ipmipub ipclus ipceph1192.168.255.8192.168.120.10ceph2192.168.255.9192.168.120.20ceph3192.168.255.10192.168.120.30 所有节点 yum -y install dmidecode vim wget lvm2 chrony epel-release yum-utils dev…

LEETCODE 44. 反转字符串

class Solution { public:void swap(int l,int r,vector<char>& s){char tmps[l];s[l]s[r];s[r]tmp;}void reverseString(vector<char>& s) {int left0;int rights.size()-1;while(left<right){swap(left,right,s);left1;right-1;}} };

印度尼西亚国家出口发展局局长一行莅临锐捷网络,共话数字经济未来

第四届中国跨境电商交易会举办期间,印度尼西亚国家出口发展局局长迪迪苏梅迪一行莅临锐捷网络参观交流,宣传推介印度尼西亚市场资源,挖掘中印尼双方企业合作机遇。福州市商务局副局长潘文等领导共同参与活动。锐捷网络副总裁、数据中心事业部总经理林东豪接待。 印度尼西亚国家…

cesium加载.tif格式文件

最近项目中有需要直接加载三方给的后缀名tif格式的文件 <script src"https://cdn.jsdelivr.net/npm/geotiff"></script> 或者 yarn add geotiff npm install geotiff 新建tifs.js import GeoTIFF, { fromBlob, fromUrl, fromArrayBuffer } from geotif…

android——【封装】使用建造者方式封装一个类

前言 在Kotlin中&#xff0c;使用建造者模式来封装一个类有以下几个好处&#xff1a; 简化对象的创建过程&#xff1a;使用建造者模式可以将复杂的对象创建过程分解为多个简单的步骤&#xff0c;使得代码更加清晰易读。通过链式调用&#xff0c;可以按需设置对象的属性&#xf…

HBase的Python API(happybase)操作

一、Windows下安装Python库&#xff1a;happybase pip install happybase -i https://pypi.tuna.tsinghua.edu.cn/simple 二、 开启HBase的Thrift服务 想要使用Python API连接HBase&#xff0c;需要开启HBase的Thrift服务。所以&#xff0c;在Linux服务器上&#xff0c;执行如…

香港高才通计划abc类的申请材料各不同,附官方续签攻略!

香港高才通计划abc类的申请材料各不同&#xff0c;附官方续签攻略&#xff01; 作为香港“史上最快获批签证”&#xff0c;高才通计划受到内地精英的热烈欢迎&#xff0c;香港高才通于2022年12月28日开放申请&#xff0c;截至2023年12月31日&#xff0c;香港高才通计划已接获62…

android 11 SystemUI 状态栏打开之后的界面层级关系说明之一

比如WiFi 图标的父layout为&#xff1a; Class Name: ButtonRelativeLayout Class Name: QSTileView Class Name: TilePage Class Name: PagedTileLayout Class Name: QSPanel Class Name: NonInterceptingScrollView Class Name: QSContainerImpl Class Name: FrameLayout Cl…