透过验证码看若依前后端交互和封装

透过验证码看若依前后端部分交互和封装

参考视频：https://www.bilibili.com/video/BV1HT4y1d7oA?p=2

一、验证码的前端实现

1、初看流程

后端生成表达式6*7=?@42 (@起分隔效果，42存在redis中）

后端生成6*7=?的图片传给前端，在前端界面上显示，用户在前端界面上输入用户名、密码、验证码并点击“登录”按钮，前端将表单发送给后端，后端将发送来的验证码和redis中的数据进行比较，若不同则重新输入验证码。

注意：redis中key、value对应，后端向前端发送一个隐藏域信息（uuid即k）来保证kv的对应。

2、再看层层封装

Vue和SpringBoot交互用axios，将Ajax封装成axios来交互

2.1 从前端的登陆界面看getCode()

页面都存在views文件夹中，查看其中的login.vue
页面初始化方法存在created()当中

2.2 看getCodeImg

@：当前根目录，即src

2.3 看src/api/login

至此可以清楚地看出ajax请求格式

2.4 看请求详情

打开前端界面可看到该请求详情（google浏览器）

2.5 进一步深入request查看

在这看到axios

VUE_APP_BASE_API的值在配置文件中定义，三个配置文件如下

其中的baseURL为公共部分，在配置文件（开发、生产、测试）中找

点开开发配置文件可见下图

2.6 看替换

将dev-api替换为’',映射到 http://localhost:8080

结果：从http://localhost/dev-api/captchaImage映射到http://localhost:8080/captchaImage

3、Vue获取图片

http://localhost/dev-api/captchaImage

看上去vue是向前端请求（默认端口是80），但实际上是向后端请求（图片在后端生成）

为了解决跨域问题，使用了反向代理，url请求前端，进行反向代理，将请求映射到后端

代理
把dev-api替换成’'，再映射到http://localhost:8080

二、验证码的后端实现

从前端找后端代码，从capchaImage入手，巧用全局搜索

controller这里没加requestnappling 8080可以直接找到capchaImage

在redis里面可以看到capchaEnabled的键值为true，此时是开启验证码的状态

打断点

第一个断点

第二个断点

第三个断点
存入redis

刷新一下 看redis里面有记录

把图片和对应的uuid放入ajax中即可

对应地来看前端，存入图片和uuid

最后：
tips:全局搜索：find in path

学着打断点