今日目标
-
完善基于前后端分离用户验证码登录功能;
-
理解验证码生成流程,并使用postman测试;
-
掌握Swagger+Yapi使用
-
理解并实现国内大盘数据展示功能;
-
理解并实现国内板块数据展示功能;
-
理解后端接口调试和前后端联调的概念;
第一章 验证码登录功能
1、前后端分离状态识别问题
1.1 前后端分离存在的问题
单体架构基于session-cookie机制实现验证码流程:
对于前后端分离的架构会存在跨域问题,这会导致请求无法携带Cookie,而Session机制是基于Cookie的,所以会导致session失效;
同时对于后端服务后期如果要搭建集群,则还需要解决单点session共享的问题;
1.2 解决Session和Cookie失效问题
-
cookie失效问题
-
我们可在后端生成一个sessionId,并将sessionId作为key,校验码作为value保存在redis下(redis代替session),之后借鉴cookie思路再将sessionId作为参数响应给前端;
-
-
Session过期失效问题
-
我们借助redis的过期失效机制来模拟Session过期失效的行为;
-
2、验证码功能流程分析
我们可使用分布式缓存redis模拟session机制,实现验证码的生成和校验功能,核心流程如下:
注意事项:需要保证SessionId的唯一性,否则可能会出现用户输入了正确的校验码,但是依旧可能会校验失败的问题;
2.1 验证码生成接口说明
功能描述:验证码生成功能
请求路径:/api/captcha 请求参数:无 请求方式:get 响应数据格式:
{
"code": 1,
"data": {
"imageData": "iVBORw0KGgoAAAANSUh...省略...AAAPoAAAAoCAYAAADX=", //base64格式图片
"sessionId": "1479063316897845248" //保存在redis中验证码对应的key,模拟sessioinId
}
}
说明:前端图片验证码以base64数据格式展示:
<img src="data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAAoCAYAAADXGucZAAAEoElEQVR42u2cWWhUVxjHfZBSoUV8qAihT4Xii7Y1BIptKRQE8dkHN2yhi0JE02SapUUU4zJZjKZWEtNJYkJ2kpjUzNyZO5OZyUxW40iCCOJDCwpiSzeUWqttv8535Z650+SOE9tS7jf/hx935txzXmb4neU73znLotEomTyz17Mo1joAAOexLJtKdh0AOgUABIm+FNABAJADogMAIDoAAKIDACA6AACiAwAgOgAQ3cTrj1F14zQVHU3Qrk/maYdr3ngWH0vQyaZp0gJjon6AP08sV+TSH3+r5HkFRFiIb91+hTjRz/dMJKWeo23F87bsLp0z6kF0iA7R/zsK8vP+NdJEH7wYo52uzJKbbC+ZN+pDdIgO0R02ope6LyuR3y2bo/rmKQroj2XWArHk9+m00f7QqVmIDtEhupNE53W5KTCvye1G6+6BibR6wdAYRIfoEN0poje2TymBD9ZlHqnLq2dVXU/nBESH6BDdKaKz3Cl5JzM2aOqYtEzfL4kXPTbqp+8bNtKjqufoQe1qutFTDNEFEO4cJv39WtI2lpLv1SLjGSw6QxGfLld014nU+rx7YDxjg97BcVWXt9wkiz4eukg/f/GKen/bswUjugCCFY1pIlvxb/qMIiMBmaLzlpkp72g487qb31uDdlJFnwgO0d3P16p3N9u2Y+ougNCRFlvJlezbjssU3bqtlk0jsy63kyj6lN5P90+9qMq/6fgAa3QB8LTcl/+xEljbfJDCnn6KhCMUTTJ6ppv873y6QHwxolv3yJciOkfepYk+o3XQg5NrVNmNXheCcVJG88OetCl6NBBa2Bkkp+3aW2UyRecEGIi+nBIj5+i32heMz3+4n6Vr/YcQdXcw8W8/TEPfU6jkDVW12XcIlS0yRedc9qcRndtJEv1h9Ur1+X5dHsXCOkQXhPa6S8nLI7ftFH/QJ1P098oRjFsMaQG4XBfdt/5AVvLyml2k6Nb014HheMYGfUOp7TXelpMk+q/JUfzqBTc9rFmlyi57myF6jokudh+dE19MeZu7MifMcDacpHx3q+jxkNcou95bpsru1r9M0UgYoksQvaAkNXUf9meOzksUfSny8nuzLqfOSt1H/+nsBlX+deceiC6AwC53Khh3tNU+GFfdLlN0vkzCjLxzJL1vKG47bbdG6PkwjFTRZ/xd9Lt7hVHOz2l/N0R3+vbasdbUHvqbZYsH5AIhY+tN7DHViprZtMsl+JiqeZsMH1fl79YMOl7XSz+myoky5rsfz+ZDdKcnzOgh0t4oTe2lv11Oo6c7jeAbEz7XRxpLblnLixN94Kt4VpdOmBlxOXHxRHJtfu/0S+o9r90lil6ytSMNybJz9tuTUmD1j+pkXyXV0Db5xFtmeFRv782dq6QS3i9T++w1q2gyeEH8iP538aV1AMYa/LUi+0MtWlC26MyIFqOqhhnaX3lFJdLw80Blwrg00ufPvcshb7VuVXXuNG3K2am7XQfgxE4g3O+lYGH943TX5FSdk2n0ffWyj6kC8E+RPguA6AAsoQPAbwLRAQAQHQAA0f8nfvjlO/wOAKJDdgAgOkQHAKJDdgAgOgAgK/4C6NwFT1SohhYAAAAASUVORK5CYII=">
2.2.项目集成redis
在stock_backend工程引