橙色营销网站/147seo工具

橙色营销网站,147seo工具,无锡网站优化,企业为什么要建站点呢目录 一、需求 二、准备工作 三、约定前后端交互接口 1、需求分析 2、接口定义 四、Hutool工具介绍 1、引入依赖 2、测试使用Hutool生成验证码 五、实现服务器端代码 代码解读: 六、调整前端页面代码 七、运行测试 随着安全性的要求越来越高&#xff0c…

目录

一、需求

二、准备工作

三、约定前后端交互接口

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 ,页面如下:

        输入错误的验证码,提示错误,如图:

        输入正确的验证码,跳转界面,界面如下:


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

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

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

相关文章

软件体系结构论述

一、软件危机 1.软件成本日益增长 2.开发进度难以控制 3.软件质量差 4.软件维护困难 软件危机的原因 1.用户需求不明确 2.缺少正确的理论 3.软件规模大 4.软件复杂度高 如何克服软件危机 用工程&#xff0c;科学&#xff0c;数学的原则和方法…

Linux 第二十八章

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C&#xff0c;linux &#x1f525;座右铭&#xff1a;“不要等到什么都没有了…

欢乐钓鱼大师攻略,怎么获取道具?

在《欢乐钓鱼大师》的游戏世界中&#xff0c;道具是提升钓鱼体验、解锁新功能以及完成挑战的关键。通过多种方式获取道具&#xff0c;能够帮助玩家更好地探索游戏世界、挑战自我&#xff0c;以及与其他玩家展开竞争。以下是关于如何获取道具的详细攻略&#xff0c;让你能够在游…

proteus示波器不弹出来

运行后示波器没有弹出来 点击调试&#xff08;Debug&#xff09;在点击Digital Oscilloscope 完成

Flutter-加载中动画

效果 考察内容 AnimationControllerTweenAnimatedBuilderTransformMatrix4 实现 ///源码&#xff1a;https://github.com/yixiaolunhui/flutter_xy class LoadingView extends StatefulWidget {const LoadingView({Key? key}) : super(key: key);overrideState<LoadingV…

探索循环购模式:消费返利与积分机制的创新融合

大家好&#xff0c;我是吴军&#xff0c;今天非常荣幸能与大家分享一种别具一格的商业模式——循环购模式。这种商业模式在近年来逐渐崭露头角&#xff0c;受到了广大消费者的热烈追捧。或许您之前听说过消费满额即送现金的活动&#xff0c;但循环购模式不仅仅局限于此&#xf…

基于机器学习的网络流量识别分类(完整资源收米)NetFlow-Sentry

项目介绍 这是一个名为NetFlow-Sentry的项目&#xff0c;项目实现了对网络流量的实时检测&#xff0c;特征抓取&#xff0c;内置了基于Pytorch的深度学习模型来进行流量分类。该项目除可以进行实时特征提取&#xff0c;还提供了网络流量数据的输入口&#xff0c;可以直接识别分…

【Arduino】ESP32/ESP8266 JSON格式解析

目录 1、JSON 2、JSON语法格式 基本概念&#xff1a; 语法规则&#xff1a; 数据类型&#xff1a; 示例&#xff1a; 3、JSON解析 单一对象JSON解析&#xff08;无嵌套&#xff09; JSON数组解析 使用ArduinoJson官网在线工具解析JSON信息 ESP8266闪存存储的JSON解析…

MySQL性能优化(提升数据库性能的措施)

万物皆有裂痕&#xff0c;那是光照进来的地方。大家好&#xff0c;今天给大家分享一下关于MySQL性能优化&#xff0c;在处理大型数据集和高负载情况下&#xff0c;MySQL数据库的性能优化是至关重要的。通过合理的调优策略&#xff0c;可以有效提高数据库的响应速度和稳定性。本…

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-13-按键实验

前言&#xff1a; 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM&#xff08;MX6U&#xff09;裸机篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…

xhci 寄存器学习

xhci 寄存器介绍 查看linux 代码&#xff1a; 1733 /* There is one xhci_hcd structure per controller */ 1734 struct xhci_hcd { 1735 struct usb_hcd *main_hcd; 1736 struct usb_hcd *shared_hcd; 1737 /* glue to PCI and HCD framework */ 1738 stru…

实操专区-第11周-课堂练习专区-图的标记线和标记点

下载安装ECharts&#xff0c;完成如下样式图形。 代码和截图上传 完成 3.1.3.5 图的标记线和标记点 中的任务点 在一些折线图或柱状图当中&#xff0c;可以经常看到图中对最高值和最低值进行了标记。 在ECharts中&#xff0c;标记点&#xff08;markPoint&#xff09;常用于表示…

自定义实现 Java17+SpringBoot3+OpenAPI+Knife4j Starter

文章目录 前言正文1 创建starter项目1.1 依赖文件1.2 配置信息 2 自定义starer代码开发2.1 配置字段的定义2.2 自动配置类 3 验证starter3.1 测试项目的配置3.2 功能配置 application.yml3.3 测试代码3.3.1 实体类3.3.2 控制器13.3.2 控制器2 4 效果展示4.1 主页4.2 实体类列表…

Windows快速部署DCNv4(成功版)

文章目录 一、介绍二、编译DCNv42.1 下载源码2.2 编译DCNv4 三、报错提示3.1 Cuda is not available3.2 需要Microsoft Visual C 14.0 一、介绍 论文链接&#xff1a;[https://arxiv.org/pdf/2401.06197.pdf] (https://arxiv.org/pdf/2401.06197.pdf)   在这篇文章中介绍了一…

【Android】Kotlin学习之Kotlin方法的声明和传参

方法声明 普通类的方法 静态类的方法 不需要构建实例对象, 可以通过类名直接访问静态方法 : NumUtil.double(1) companion object 伴生类的方法 使用companion object 在普通类里定义静态方法 参数 括号内传入方法 : 当参数是方法时, 并且是最后一个参数 , 可以使用括号外…

Linux -- > vim

vi和vim是什么 vi和vim是两款流行的文本编辑器&#xff0c;广泛用于Unix和类Unix系统中。它们以其强大的功能和灵活的编辑能力而闻名&#xff0c;特别是在编程和系统管理中非常受欢迎。 vi&#xff08;Visual Interface&#xff09; vi是最初的文本编辑器之一&#xff0c;由…

外观模式详解

外观模式 1 概述 有些人可能炒过股票&#xff0c;但其实大部分人都不太懂&#xff0c;这种没有足够了解证券知识的情况下做股票是很容易亏钱的&#xff0c;刚开始炒股肯定都会想&#xff0c;如果有个懂行的帮帮手就好&#xff0c;其实基金就是个好帮手&#xff0c;支付宝里就…

【智能算法】最优捕食算法(OFA)原理及实现

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献5.代码获取 1.背景 2017年&#xff0c;GY Zhu受到动物行为生态学理论启发&#xff0c;提出了最优捕食算法&#xff08;Optimal Foraging Algorithm, OFA&#xff09;。 2.算法原理 2.1算法思想 OFA灵感来源…

Lab4: traps

RISC-V assembly Which registers contain arguments to functions? For example, which register holds 13 in mains call to printf? 根据RISC-V函数调用规范&#xff0c;函数的前8个参数使用a0-a7寄存器传递。 当main函数调用printf函数时&#xff0c;a2寄存器保存13 …

MVCC 详解

介绍 MVCC&#xff0c;全称 Multi-Version Concurrency Control&#xff0c;即多版本并发控制 MVCC的目的主要是为了提高数据库并发性能&#xff0c;用更好的方式去处理读-写冲突&#xff0c;做到即使有读写冲突时&#xff0c;也能做到不加锁。 这里的多版本指的是数据库中同时…