原理:

        验证码在前端显示,但是是在后端生成, 将生成的验证码存入redis,待登录时,前端提交验证码,与后端生成的验证码比较.   

详细解释:

         图形验证码的原理(如下图代码).前端发起获取验证码的请求后,

        1 后端接收请求,生成一个键key(随机的键)   然后生成一个验证码作为map的value.将key value set到HashMap(键不能重复)中,

        2然后将此key,value存储到redis中,设置过期时间为5分钟.随后将map中的键值对返回到前端,注意此map有效时间是根据redis的有效时间而定.

-------html

--------js    3 前端获取到该map如下图

将后端获取到的value显示到前端,然后将key保存到form中,当点击登陆时,此时将form中的用户自己输入的验证码的值,和后端传递回来的key还有账户,密码传递到后端,后端拿到这个自己曾经传递回来的key和redis中的key进行寻找,然后将用户输入的value与redis对应的key相比较,如若成功,则成功进行下一步,进行数据库交互,比较账户密码.

写一个5分钟自动换验证码的方法

钩子函数调用即可

相关依赖

 效果图

如图所示,图形验证码,将图形验证码的函数写在钩子函数中,加载页面即显示,