最新最全实现一个12306的图片验证功能

前言：自己做一个毕设，在做到登录功能的时候，发现还落下一个图片验证的功能实现，自己想了想，干脆自己实现一下吧。

1.功能的设计

话不多说，先上uml图

 2.数据库的实现

在这里解释一下字段的意思：

id：这个就不用解释了

img_url:图片的地址（图片我都放在nginx下了）

img_type：图片类型

接下来，我们就需要将图片的地址放入数据库中（懒得写后台上传，后面会写的，写了再更新博问吧，兄弟们）

 录入后的结果如下：

 3.后端实现

到现在终于到我们后端了，我们来一起实现吧

首先创建一个javaBean类，兄弟们

 不要问我为什么不使用注解，因为我电脑带不动

然后配置mybatis的sql，在这里我们需要sql语句进行随机读取

 试试测一下：

 成功读取结果

4.接下来我们就写前端页面了

因为我自己写的是前后端分离，我前端使用的是Vue全家桶+饿了么

话不多说，先创建一个组件

写好组键后由登陆页面调用，效果图如下：

 在前端写了两个url接口，第一个是传输后端传输过来的图片信息，第二个是用户操作后提交的信息，操作流程如下图所示：

1.点击图片验证

 弹出图片选者框

 选择后点击确定

 验证失败，系统更新图片信息，并且要求我重新输入

 验证成功。