第2章 客户端开发 - 前端接口开发&数据校验

2-1 登录鉴权开发前置回顾

image.pngimage.png
image.pngimage.png

2-2 前端项目Veevalidate3X

  1. ncu #查看本地依赖和可以升级的内容。ncu -u更新

2-3 Veevalidate3X升级-本地化&配置自定义消息

2-4 Veevalidate结合vuei18n

2-5 封装Axios请求（拦截器）

2-6 axios封装进阶-业务示例、逻辑代码、配置

axios文档
withCredentials：- 跨域请求的时候是不是把凭证(Cookie)带上来
image.png

2-7 图片验证码存储&校验机制设计

原理：用一个唯一标识作为验证码的key，在redis中存储验证码及其时效；在请求验证码的时候，带上标识
uuid
image.png

2-8 前台veevalidate登录校验&接口请求设计

第3章

3-1 JWT鉴权方式：koa-jwt集成

koa-jwt：已经集成鉴权
jsonwebtoken
npm-run-all：执行多个package.json中的脚本

  1. import JWT from 'koa-jwt'

3-2 服务端登录逻辑&业务代码调试

3-3 服务端koa统一错误处理

  1. netstat -ano | findstr "端口号" #查看端口是否被占用
  1. export default (ctx, next) => {
  2.   return next().catch((err) => {
  3.     if (401 === err.status) {
  4.       ctx.status = 401;
  5.       ctx.body = {
  6.         code: 401,
  7.         msg: 'Protected resource, use Authorization header to get access\n'
  8.       }
  9.     } else {
  10.       ctx.status = err.status || 500
  11.       ctx.body = Object.assign({
  12.           code: 500,
  13.         msg: err.message,
  14.       }, process.env.NODE_ENV === 'development' ? 
  15.          {stack: err.stack} : {})
  16.     }
  17.   })
  18. }

3-4 VSCode对配置alias的支持

3-5 使用Chrome调试服务端应用

3-6 登录功能小结&联调测试

image.png

第4章 vue自定义组件

4-1 前端数据校验及交互设计的两种方法

4-2 Vue自定义Alert组件

  1. flex-flow: column nowrap;    // 竖向排列不要换行
  2. background :darken($btn-main, 10%); // 变深10%

4-3 Vue自定义Confirm组件

4-4 前端数据校验交互一：自定义弹窗

4-5 前端数据校验交互二：veevalidate服务端检验

第5章 前后端联调—注册接口及接口联调

5-1 前端注册业务开发

5-2 注册接口Mock数据

5-3 注册接口开发&前后联调

5-4 登录鉴权总结

image.png