引入依赖包: 创建生成验证码的控制器,这里使用了png类型的验证码,并将验证码类型设为字符串和数字混合的类型,验证码长度为4位,使用uuid为生成的验证码设置了key,并将key和验证码存入redis,设置1分钟后过期。 生成验证码的Controller 其他各种类型的验证码,可以自行尝试 验证码的字符类型,只对SpecCaptcha和GifCaptcha类型的验证码有效 前端form表单代码,为图片设置了点击事件用于刷新验证码。 form表单代码 前端axios获取验证码,将获得的key存入form的key属性,随表单提交至后端用于验证验证码。刷新验证码只需要再次执行获取验证码的方法即可。 axios获取验证码 前端也可以设置一个captchaImage状态来动态绑定后端返回的验证码 img的src属性动态绑定captchaImage 根据后端结果修改captchaIm的值 后端根据前端提交信息进行校验,如果redis中拿不到验证码,则返回验证码失效信息,如果redis中的验证码与提交的信息不一致,则返回验证码错误信息。 校验验证码 参考:https:gitee。comhostsugarEasyCaptcha