1.*项目总结（开发前、中）

1.项目效率提高总结

非同类文件夹只包含一个文件，其他都为文件夹,readme.md

1.0.1项目之前

具体应用场景（投影仪、宽屏）
兼容性
浏览器窗口缩放事件
宽高适配（自适应）
权限
登录：手机号一键登录、第三方、小程序授权、账号密码
用户类型、同一类型级别 eg:高级、低级 用户角色权限重叠
何处会进入这个页面，返回、操作之后返回、其他页面进入、刷新、直接路由进入 当前页面数据当前页面请求
body--header--content--footer 自上而下（整体）、自左到右（局部）、找到所有存在处，找出区别，设为传参
全局组件
表单验证 eg：表单验证方式大量、极少、无表单（弹框优先、红字）文字对齐方式
数据格式化 eg：日期
字典 eg：男 女
初始化数据、按钮请求数据
对数据进行操作时，在数据使用、提交之前
template少用判断 使用具体值
多情况时，先分析有几种情况
移动端 display flex 滚动
取值 计算属性 多变量影响其值时使用
列表操作不要写死、列表数据添加、删除 修改唯一标识可改变传index
数组内的对象也为引用
显示清空再赋值
保存查询数据—数据修改、保存滑动位置
Fixed relative 不支持大量滑动h5
返显 + 输入 + 流程中断 + 消息通知 + 保存页面数据
需求是最大问题 流水号 vuex 下一个页面 路由守卫from
输入框一定有返显 数据来源 计算属性computed
赋值：获取值为空、有值覆盖、空值赋值
process.env.NODE_ENV !== 'development'

全局组件

按钮:不同功能不同颜色、确定 取消 查询 修改 下一步 重 置
表单下拉选项列表
标签:不同状态不同颜色
优先弹框样式:纯提示(提示语)、一个按钮带操作、两个按钮带操作 功能区分：删除、确认 数量区分：1、2、3、提示文字居中还是靠左，单行/多行
请求样式（加载中、请求失败404、大量、极少、无）
table
日期组件无法复用
对话框

1.1重复代码文件repeat

repeat
一个文件，存放重复功能的代码，写明何种功能，留着备用（以后可能用的上）

1.1.1bug代码文件bug

bug
一个文件，写一个清单，以及解决方案，因为多处可能都存在类似bug

1.2删除的代码文件del

del
一个文件，删除的代码，写明来自哪个文件，留着备用（以后可能用的上）
保留删除的模拟数据

1.3码表文件codeTable

codeTable
一个文件，特定标识，html、js、css

1.4代码书写顺序

先写正确逻辑，最后再查找bug和错误返回

1.5v-if与v-show的选用

带操作使用v-if form
不会产生操作bug（展示型）使用v-show display: none可手动切换
v-if 回到页面初始状态 v-show回到上次位置

1.7项目是否需要迭代，项目大小

1.确定代码注释数量
2.确定项目目录复杂程度
3.完全了解业务逻辑之后才能更好的写代码
4.再小的网站也有业务逻辑
5.展示那种数据、依照那些排序

2.页面内容

页面不能空白要有内容，不能只有个目录
路由重定向，或者组件和router-view显隐

6.样式存在少许差异

差异处元素内容为空
元素不同
元素占位
v-if 删除多余
插槽

7.公共组件包含的内容

5.类似html结构的一定用数组

8.api接口

同一接口 返回值键相同
api参数与页面显示值不同，不采用接口文档字段eg：statusLabel
全部存在status、statusLabel

9.页面划分

1.以页面划分，引入组件（组件各自互不相关）
2.以路由划分，组件内监听（根据路由书写事件）

10.js文件

导出导入需要有总标识

1.代码书写优化

1.1前端所需数据数量不一致

1.后端返回一条数据，但前端需要多条数据，自定义变量存储
2.自己决定是全局变量还是局部变量

1.4参数传值

1.传输所有值
2.为了以后更好的维护

1.6api请求

取消methods api 增删改方法
查 保留
为了实现修改数据后再次调用方法，实现页面数据刷新
传所有数据给后端，方便维护
多处用到同一请求方法时，会有哪些不同
api文档是否有复用方法
params、后台返的数据展示console
console.log('res后台返回信息', 'params', res)
有无值都传，’’,空数组

1.方法名称
initData
queryData
addData
updateData
delData

1.8标志位flag

2.记录下标志位
3.已通过1、未通过0、未审核2

1.9if判断

if (a === 0) {

}
else if (a === 1) {

} 

1.10重置，引用类型赋值

1.重置清空所有记录（无论是否后续使用）
2.引用类型赋值之前先清空

1.11业务书写

2.首先，页面初始化显示数据、
3.页面某一操作之后，页面显示改动，一个操作之后，页面引起的一系列变化
4.类似代码多次运行，函数封装调用，通过传参改变结果
5.离开页面，还原之前页面

6.判断数据是只赋值一次，还是每次都赋值
7.使用方法时，走完整个流程
8.找出是谁触发了数据的更新，多次
9.用户类别,用户包含数据 使用群体，可查看项目群体
事件添加到数据修改上、而非点击、键盘事件上

11.多处触发调用同一接口时，接口回调函数的不同操作
12.操作成功提示

// bad
this.$message.info('新增成功！');
// good
this.$message.info('新增药品成功！');

1.12前后台数据交互

1清空数据
1.1合法发送请求、获取后端数据
2.判断获取值是否正确
3.错误处理和正确处理
3.前端标识与后端对应、code+name（数据出错-->后端、后端有字典）、code后端无字典
flag 计算属性 Label 不同显示，一个事件

5.写入数据
6.真正取值是何种字段
后台管理
流程阻断记录，中断操作如何拿到之前的数据，拿流水号查不同接口

一个数据是由多个数据组合而成，判断多个对象是否都有效
多条数据是否重复
数据单一流向 数据在整个流程中是否有效

1.13数据的状态

无数据
发请求时，清空上一次的数据
数据加载前
数据加载中
数据加载失败
数据加载成功
错误数据
一条数据
很少数据
大量数据13亿 是否分页
有数据
表单数据单位

1.14增删查改

1.删
1.提交是否删除
2.同意删除
3.回收站
4.真正删除

3.api接口校验

1.get/post方式
2.路径
3.参数

4.事件修改对象动态属性的值

状态 其他操作会不会影响状态改变 状态切换
// 弹出框显示
    onShow (show) {
      this.flag[show] = true
      this[show].flag = true
},
相似一系列事件一定可以封装数据、封装事件简写（前提：变量命名、方法调用）（组件）
页面类似事件同名 下一步 onNext()

5.模拟数据

模拟数据使用数据保存 不直接html写

6.数据修改

form表单有返显（判断条件不同）
1. 只传code 展示之前转换所有name，提交不转换
数据集中处理（提交，展示）前一步统一处理
单项数据展示、详情（数据转化）<---->详情、数据存储到数组（数据转化）
遵循不改变原来的值所代表意思 status-->statusLabel 不影响后续操作 date格式不可改变

7.请求数据

getApplicantInfoList(params).success(data => {
      const resData = data
params 原始处为对象{a:1,b:2}
      const a = { ...this.flag.isNoticeShow }

8.登录

单点登录：多系统只登录一次
同一账号不能同时登录
多账号不能在同一浏览器登录

9.form

同一个组件使用之前初始化(清空)数据
填写+返显
字典判断的数据单一性 前端展示判断idType === ‘身份证’
查询条件保存，保存前端字段
是否初始化(清空)数据、是否清空查询条件、是否有默认输入项
copy 比较修改 清空
输入范围
返回、修改是否重新请求
输入项选项列表是否带有空值
添加、修改：不同 证件号码和证件类型 查询信息是否重填信息，有值项是否被覆盖
验证：是否必输、字段长度、数字、汉字、英文
合理性：数据来源正确、数据写入正确、数据进出范围一致（员工—>如何确定为员工）

10. 错误几种方式

刷新
直接路由进入错误，router.beforeEach((to, from, next) => {
删除路由参数路由直接进入 使用动态参数解决
清除vuex、缓存进入