总结
- img大小自适应的方法.
- 选项卡的切换
- Container布局容器 顶栏固定,在页面上加入侧边栏!! 点击侧边栏上的菜单,在右边显示对应的内容.
- Layout布局 "el-row el-col" 宽度100%?
- 在elementPlus的按钮中使用icon图标
- 表单的使用
- "输入框失去焦点时"表单字段的校验 + "点击登陆按钮时"主动整体校验 + "点击发送短信验证码按钮时"主动的表单字段校验
- 重置按钮
- 侧边栏的使用
- 默认激活菜单 弄成动态的,以适应刷新
- 侧边栏开启router功能
- 去掉侧边栏的边框
- 滚动条
- axios请求
- token写入vuex+localStorage持久化+跳转+状态展示,即显示哪个用户登录啦
- 全局导航守卫
- axios拦截器
- 表写在哪个app里,设计方案
- jwt的原理及实现
- 业务逻辑中返回code 0 -1 -2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
容易忽略的点
- 字段钩子中使用ser.validated_data报错,但可以使用ser.initial_data
- 字段自身校验不通过,ser.errors的值像这个样子:
{'mobile': [ErrorDetail(string='该字段不能为空。', code='blank')],
'password': [ErrorDetail(string='该字段不能为空。', code='blank')]}
后端通过Response处理后返回给前端,前端拿到的是 {'mobile': ['该字段不能为空。'], 'password': ['该字段不能为空。']}
- field = []
字段类型的类变量一定包含在里面(有些类变量是重写)!! 里面还可以写啥?"db匹配创建字段对象"的源码里规定了得写ORM表中的字段名!!
- 点击登陆按钮的整体校验 proxy.$refs.smsRef.validate((valid) => {})
点击发送验证码时,前端主动对手机号字段进行校验 proxy.$refs.smsRef.validateField("mobile", (valid) => {})
- 前端注册时,重复密码的校验 可以使用自定义校验规则,该规则是一个函数!
const regRules = reactive({
pwdConfirm: [{validator: validatePass, trigger: 'blur'},],
})
- import {getCurrentInstance} from 'vue'
const {proxy} = getCurrentInstance()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16