透过验证码看若依前后端部分交互和封装
参考视频: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
学着打断点