兰州网站建设设计,848给我做一下88网站,it运维工程师证书,黄冈工程建设标准造价信息网目录
1. 生成验证码
2. 将本地验证码发布成 URL
3. 后端返回验证码的 URL 给前端
4. 前端将用户输入的验证码传给后端
5. 后端验证验证码 1. 生成验证码
使用hutool 工具生成验证码.
1.1 添加 hutool 验证码依赖
!-- 验证码 --
dependencygroupId…目录
1. 生成验证码
2. 将本地验证码发布成 URL
3. 后端返回验证码的 URL 给前端
4. 前端将用户输入的验证码传给后端
5. 后端验证验证码 1. 生成验证码
使用hutool 工具生成验证码.
1.1 添加 hutool 验证码依赖
!-- 验证码 --
dependencygroupIdcn.hutool/groupIdartifactIdhutool-all/artifactIdversion5.8.16/version
/dependency
1.2 创建验证码的控制器
RestController
public class CaptchaController {Value(${imagepath})private String imagepath; // 验证码的本地路径RequestMapping(/getcaptcha)public Object getCaptcha1(){// 1.生成验证码到本地//定义图形验证码的长和宽 (这个验证码的大小需要和自己前端的验证码的大小匹配)LineCaptcha lineCaptcha CaptchaUtil.createLineCaptcha(128, 50);String uuid UUID.randomUUID().toString().replace(-,);// 图形验证码写出可以写出到文件也可以写出到流lineCaptcha.write(imagepath uuid .png);return AjaxResult.success(imagepathuuid.png);}
}
application.propertities 中添加验证码保存路径 (末尾一定要带斜杆)
# 验证码保存路径
imagepathD:/image/
【注意】
如果项目中配置了拦截器, 那么一定要记得再拦截规则中给验证码的路由放行!!使用 UUID 每次生成不同地址的验证码 1.3 前端关键代码
div classrow stylemargin-bottom: 20px;span验证码/spaninput idcheckCode stylewidth: 66px;nbsp;nbsp;img onclickloadCode() idcodeimg srcstyleheight: 50px;width: 128px;
/div
浏览器直接访问接口 : 127.0.0.1:8080/getcaptcha 再查看本地路径也确实生成了对应的验证码 : 2. 将本地验证码发布成 URL
2.1 配置映射图片路径
Configuration
public class AppConfig implements WebMvcConfigurer {Value(${imagepath})private String imagepath;/*** 映射图片路径* param registry*/Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler(/image/**).addResourceLocations(file: imagepath /);}
}使用网络路径 /image/** 映射到本地验证码路径, 注意 file: imagepath / 这最后可能要加上一个斜杆才能生效. (因人而异)
2.2 使用映射后的网络路径访问验证码
浏览器输入: 127.0.0.1:8080/image/b1306474838b4b0e9f8a6ac7606567cb.png 成功访问到了!!
3. 后端返回验证码的 URL 给前端
后端不仅要返回验证码给前端, 还需要返回一个 验证码的 key 给前端. 后端返回验证码的 URL 给前端可以理解, 前端需要展示给用户看; 那么验证码的 key 是啥呢 ??? 后端需要将验证码存储 redis, 因为验证码在某一时间内可以生成很多, 而用户输入的正确与否, 需要在后端进行判断, 后端进行判断时, 就得把生成的验证码存储 redis (快), 而存储 redis 我们可以借着前面的 UUID , 把 UUID 作为 key, 验证码作为 value 去存储. 然后再将 key 去传给前端, 前端就可以带着输入的验证码和 key 一起传给后端, 后端就可以拿着 key 去查 redis 得到一个验证码, 然后与前端传过来的作比较即可. 3.1 完善后端 CaptchaController.java 代码
RestController
public class CaptchaController {Value(${imagepath})private String imagepath; // 验证码的本地路径Resourceprivate RedisTemplate redisTemplate; // 将存储验证码的 key - uuidRequestMapping(/getcaptcha)public Object getCaptcha(){// 1.生成验证码到本地//定义图形验证码的长和宽 (这个验证码的大小需要和自己前端的验证码的大小匹配)LineCaptcha lineCaptcha CaptchaUtil.createLineCaptcha(128, 50);String uuid UUID.randomUUID().toString().replace(-,);// 图形验证码写出可以写出到文件也可以写出到流lineCaptcha.write(imagepathuuid.png);// 验证码的网络地址String url /image/uuid.png;// 将验证码存储到 redisredisTemplate.opsForValue().set(uuid,lineCaptcha.getCode());HashMapString,String result new HashMap();result.put(codeurl,url);result.put(codekey,uuid);return AjaxResult.success(result);}
}
4. 前端将用户输入的验证码传给后端
4.1 前端加载验证码
script// 验证码keyvar codeKey ;// 获取并显示验证码function loadCode() {jQuery.ajax({url: /getcaptcha,type: GET,data: {},success: function (res) {if (res.code 200 res.data ! null res.data ! ) {// 获取验证码成功codeKey res.data.codekey;jQuery(#codeimg).attr(src, res.data.codeurl);}}});}loadCode();
/script
效果图 4.2 前端将验证码和 key 传给后端
jQuery.ajax({url:/user/reg,type:post,data:{username:username.val(),password:password.val(),checkCode:checkCode.val(),codeKey:codeKey},success:function(body) {if(body.code200 body.data!null) {alert(恭喜,注册成功!);if(confirm(是否要去登录页面 ?)) {location.href login.html;}} else if(body.code -1) {alert(抱歉, 注册失败, 请重新注册! body.msg);} else {alert(该用户名已被使用, 请重新输入!);}}
});
5. 后端验证验证码
5.1 注册功能中验证验证码
RequestMapping(/reg)
public Object reg(UserInfoVo userInfoVo) {// 1. 非空效验// 省去具体代码....// 2.检查验证码是否正确String redisCodeValue (String) redisTemplate.opsForValue().get(userInfoVo.getCodeKey());if(!StringUtils.hasLength(redisCodeValue) ||!redisCodeValue.equals(userInfoVo.getCheckCode())) {// 验证码不正确return AjaxResult.fail(-1, 验证码错误!);}// .....// .... 其他业务逻辑return AjaxResult.success(result);
}
登录功能的后端验证验证码其实是一样的方法, 照猫画虎即可~ 此处的验证码功能是针对之前的博客 - SSM - 博客系统 来做的一个扩展功能, 有兴趣的可以去实现一下~~
