由于之前没时间,现在重新写一份
好吵啊,游戏人的吼叫声,嗓门太大了
有钱了买个好的耳机
详细视频讲解:https://www.bilibili.com/video/BV1HT4y1d7oA?spm_id_from=333.788.player.switch&vd_source=886219f6fb49f459fbfc8b80a8b39f3f&p=2
登录
基本思路
后端生成表达式 1+1=2
1+1=?@2
1+1=?转成图片,传到前端进行展示
2存入Redis



输入 4 传到后台与Redis存入的数据进行对比,如果对比结果相同则验证码通过
业务流程
找到登录界面

初始化的时候获取验证码

找到位置,ctrl+左键点击找到方法

生成图片传到前端

生成uuid传到前端,前端发送请求,通过uuid在Redis中找到验证码的正确值

获取验证码的方法

通过f12打开的开发者者工具可以发现,前端发送了请求获取了图片的地址和uuid

进入Request方法内部,java或者vue内并没有封装好的Request方法,通常使用ajax或者axios进行请求发送

内部的Request方法执行了axios进行请求发送

url公共请求部分位置

验证码请求的url组合

http://localhost/dev-api/captchaImage 这是请求前端的
后端链接的链接为

Vue获取图片,理论上应该请求后端去获取,但现在请求前端却获取了后端的图片,这里做了反向代理
反向代理:url请求前端,进行代理,映射到后端
原因:为了解决跨域问题,前端是80端口,后端是8080端口
代理

前端请求 http://localhost/dev-api/captchaImage
将/dev-api替换为空,再映射到 http://localhost:8080
实际后端请求为http://localhost:8080/captchaImage