(ˉ▽ˉ)

中级SpringBoot项目MyBatis技术栈MySQL数据库开发练手项目前后端开发(带完整源码)

全方位全步骤手把手教学

2.5、常用配置如下直接在yml里配置即可可适当忽略上面那么多配置下面这些是最常用的

3、验证码项目正式编写

注验证码生成大多由前端负责但由于各位后端程序员不太懂前端又想学习验证码的生成和验证所以作者编写了这篇基本由后端负责的验证码案例

Kaptcha来实现.

此处我们使用的这个Kaptcha是适配SpringBoot进行二次开发后的使用极其简单Kaptcha

是Google的⼀个⾼度可配置的实⽤验证码⽣成⼯具官方文档https://code.google.com/archive/p/kaptcha/⽹上有很多⼈甚⾄公司基于Google的kaptcha进⾏了⼆次开发.

开源项⽬GitHub

dependencygroupIdcom.oopsguy.kaptcha/groupIdartifactIdkaptcha-spring-boot-starter/artifactIdversion1.0.0-beta-2/version

/dependency2.3、生成验证码

第一种参考官方文档即可有点麻烦此处不再介绍仅通过配置⽂件来⽣成验证码(超级简单推荐)

2.4、Kaptcha详细配置如下

com.oopsguy.kaptcha.autoconfigure.KaptchaProperties

kaptcha.items

2.5、常用配置如下直接在yml里配置即可可适当忽略上面那么多配置下面这些是最常用的

kaptcha:image:width:

http://XXXX:port/home/captcha即可⽣成验证码

3、验证码项目正式编写

dependencygroupIdcom.oopsguy.kaptcha/groupIdartifactIdkaptcha-spring-boot-starter/artifactIdversion1.0.0-beta-2/version

/dependency

key引入该配置后它会自动帮我们把验证码内容(已转换成字符串)设置到session中名称为key后面的内容date通常设置为验证码过期时间

友情提示我这里只写了部分配置能满足上面我展示图片的要求若你想配置更多样式可以查看我上面的配置大全这里不过多介绍

3.3.3、后端返回验证码

注该配置引入后不需要写其他代码他会自动创建/admin/captcha接口访问该接口即显示验证码这个工作是该配置以及引入的依赖包自动帮我们完成的

3.3.4、验证码校验

org.springframework.util.StringUtils;

import

org.springframework.web.bind.annotation.RequestMapping;

import

org.springframework.web.bind.annotation.RestController;import

javax.servlet.http.HttpSession;

import

java.util.Date;RequestMapping(/admin)

RestController

HOME_KAPTCHA_SESSION_KEY;private

static

HOME_KAPTCHA_SESSION_DATE;//验证码的有效时间:msprivate

static

比对前端传递的验证码和Session中存储的是否一样*/RequestMapping(/check)public

Boolean

(!StringUtils.hasLength(captcha)){return

saveCaptcha

(String)session.getAttribute(KAPTCHA_SESSION_KEY);Date

saveDate

(Date)session.getAttribute(KAPTCHA_SESSION_DATE);//比对验证码if

(captcha.equals(saveCaptcha)){//比对日期if

(saveDatenull

saveDate.getTime()SESSION_TIMEOUT){return

true;}}return

先判断验证码是否为空若为空直接返回false不为空往下走从session中获取验证码和过期时间比对验证码是否正确且是否过期如果有任意一个不符合条件返回false如果都符合条件返回true

3.4、实现前端代码带完整源码

charsetutf-8title验证码/titlestyle#inputCaptcha

{height:

}#verificationCodeImg{vertical-align:

middle;

srchttp://127.0.0.1:8080/admin/captcha

stylecursor:

srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js/scriptscript$(#verificationCodeImg).click(function(){//

/admin/captcha?dt

Date().getTime()).fadeIn();$(this).hide().attr(src,

http://127.0.0.1:8080/admin/captcha?dt

new

Date().getTime()).fadeIn();});$(#checkCaptcha).click(function

{$.ajax({type:

$(#inputCaptcha).val()},success:function(result){if(result){location.href

success.html;//

和上面这句一样也是页面跳转}else{alert(验证码错误);}}});//

/body/html

前端代码就不在这里过多解释了会的不用解释不会的解释两下还是不明白建议丢给gpt

​​​​!DOCTYPE

initial-scale1.0title验证成功页/title

/head

本项目部署在本地默认是本地ip地址也就是127.0.0.1或localhost

正常来说

都可以但是博主自己验证包括找了些其他博主验证localhost:8080/index.html

访问的话是存在些许bug的后端取session可能为空原因是session没有设置

但127.0.0.1不会有这个问题跨域访问ip也不会有问题所以只要不用localhost即可请问放心使用

欢迎您于百忙之中阅读这篇博客希望这篇博客给您带来了一些帮助祝您生活愉快