前言:自己做一个毕设,在做到登录功能的时候,发现还落下一个图片验证的功能实现,自己想了想,干脆自己实现一下吧。
1.功能的设计
话不多说,先上uml图
2.数据库的实现
在这里解释一下字段的意思:
id:这个就不用解释了
img_url:图片的地址(图片我都放在nginx下了)
img_type:图片类型
接下来,我们就需要将图片的地址放入数据库中(懒得写后台上传,后面会写的,写了再更新博问吧,兄弟们)
录入后的结果如下:
3.后端实现
到现在终于到我们后端了,我们来一起实现吧
首先创建一个javaBean类,兄弟们
不要问我为什么不使用注解,因为我电脑带不动
然后配置mybatis的sql,在这里我们需要sql语句进行随机读取
试试测一下:
成功读取结果
4.接下来我们就写前端页面了
因为我自己写的是前后端分离,我前端使用的是Vue全家桶+饿了么
话不多说,先创建一个组件
写好组键后由登陆页面调用,效果图如下:
在前端写了两个url接口,第一个是传输后端传输过来的图片信息,第二个是用户操作后提交的信息,操作流程如下图所示:
1.点击图片验证
弹出图片选者框
选择后点击确定
验证失败,系统更新图片信息,并且要求我重新输入
验证成功。