网站设计协议,佛山营销网站建设咨询,网站流量图怎么做的,收费的电影网站怎么做目录
一、需求
二、准备工作
三、约定前后端交互接口
1、需求分析
2、接口定义
四、Hutool工具介绍
1、引入依赖
2、测试使用Hutool生成验证码
五、实现服务器端代码
代码解读#xff1a;
六、调整前端页面代码
七、运行测试 随着安全性的要求越来越高#xff0c…目录
一、需求
二、准备工作
三、约定前后端交互接口
1、需求分析
2、接口定义
四、Hutool工具介绍
1、引入依赖
2、测试使用Hutool生成验证码
五、实现服务器端代码
代码解读
六、调整前端页面代码
七、运行测试 随着安全性的要求越来越高目前项目中很多都使用了验证码验证码的形式也是多种多样的更复杂的图形验证码和行为验证码已经成为了更流行的趋势。 验证码的实现方式有很多可以前端实现也可以后端实现。网上也有很多的插件或者工具包可以使用这里选择使用Hutool提供的小工具来实现。
一、需求 界面如下图所示 1、页面生成验证码 2、输入验证码点击提交验证用户输入的验证码是否正确正确则进行页面跳转。 二、准备工作 创建Spring Boot项目引入SpringMVC的依赖包把前端页面放在项目中 index.html代码
!DOCTYPE html
html langenheadmeta charsetutf-8title验证码/titlestyle#inputCaptcha {height: 30px;vertical-align: middle; }#verificationCodeImg{vertical-align: middle; }#checkCaptcha{height: 40px;width: 100px;}/style
/headbodyh1输入验证码/h1div idconfirminput typetext nameinputCaptcha idinputCaptchaimg idverificationCodeImg src/admin/captcha stylecursor: pointer; title看不清换一张 /input typebutton value提交 idcheckCaptcha/divscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js/scriptscript$(#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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title验证成功页/title
/head
bodyh1验证成功/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 paraminputCode returntrue / false响应 四、Hutool工具介绍 这里验证码的实现是使用Hutool提供的小工具来实现的。 Hutool是一个Java工具包类库对文件、流、加密解密、转码、正则、线程、XML等JDK方法进行封装组成各种Util静态工具类。 Hutool是一个小而全的Java工具类库通过静态方法进行封装降低相关API的学习成本提高工作效率使Java拥有函数式语言般的优雅让Java语言也可以 甜甜的。 Hutool官方https://hutool.cn/ 参考文档简介 | Hutool
源码https://github.com/dromara/hutool/ githubhttps://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 --dependencygroupIdcn.hutool/groupIdartifactIdhutool-captcha/artifactIdversion5.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 langenheadmeta charsetutf-8title验证码/titlestyle#inputCaptcha {height: 30px;vertical-align: middle; }#verificationCodeImg{vertical-align: middle; }#checkCaptcha{height: 40px;width: 100px;}/style
/headbodyh1输入验证码/h1div idconfirminput typetext nameinputCaptcha idinputCaptchaimg idverificationCodeImg src/captcha/get stylecursor: pointer; title看不清换一张 /input typebutton value提交 idcheckCaptcha/divscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js/scriptscript$(#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 页面如下 输入错误的验证码提示错误如图 输入正确的验证码跳转界面界面如下 都看到这了点个赞再走吧谢谢谢谢谢
