1.項目效率提高總結(jié)
非同類文件夾只包含一個文件，其他都為文件夾,readme.md
1.0.1項目之前
具體應用場景（投影儀、寬屏）
兼容性
瀏覽器窗口縮放事件
寬高適配（自適應）
權(quán)限
登錄：手機號一鍵登錄、第三方、小程序授權(quán)、賬號密碼
用戶類型、同一類型級別 eg:高級、低級 用戶角色權(quán)限重疊
何處會進入這個頁面，返回、操作之后返回、其他頁面進入、刷新、直接路由進入 當前頁面數(shù)據(jù)當前頁面請求
body--header--content--footer 自上而下（整體）、自左到右（局部）、找到所有存在處，找出區(qū)別，設(shè)為傳參
全局組件
表單驗證 eg：表單驗證方式大量、極少、無表單（彈框優(yōu)先、紅字）文字對齊方式
數(shù)據(jù)格式化 eg：日期
字典 eg：男 女
初始化數(shù)據(jù)、按鈕請求數(shù)據(jù)
對數(shù)據(jù)進行操作時，在數(shù)據(jù)使用、提交之前
template少用判斷 使用具體值
多情況時，先分析有幾種情況
移動端 display flex 滾動
取值 計算屬性 多變量影響其值時使用
列表操作不要寫死、列表數(shù)據(jù)添加、刪除 修改唯一標識可改變傳index
數(shù)組內(nèi)的對象也為引用
顯示清空再賦值
保存查詢數(shù)據(jù)—數(shù)據(jù)修改、保存滑動位置
Fixed relative 不支持大量滑動h5
返顯 + 輸入 + 流程中斷 + 消息通知 + 保存頁面數(shù)據(jù)
需求是最大問題 流水號 vuex 下一個頁面 路由守衛(wèi)from
輸入框一定有返顯 數(shù)據(jù)來源 計算屬性computed
賦值：獲取值為空、有值覆蓋、空值賦值
process.env.NODE_ENV !== 'development'
全局組件
按鈕:不同功能不同顏色、確定 取消 查詢 修改 下一步 重 置
表單下拉選項列表
標簽:不同狀態(tài)不同顏色
優(yōu)先彈框樣式:純提示(提示語)、一個按鈕帶操作、兩個按鈕帶操作 功能區(qū)分：刪除、確認 數(shù)量區(qū)分：1、2、3、提示文字居中還是靠左，單行/多行
請求樣式（加載中、請求失敗404、大量、極少、無）
table
日期組件無法復用
對話框
1.1重復代碼文件repeat
repeat
一個文件，存放重復功能的代碼，寫明何種功能，留著備用（以后可能用的上）
1.1.1bug代碼文件bug
bug
一個文件，寫一個清單，以及解決方案，因為多處可能都存在類似bug
1.2刪除的代碼文件del
del
一個文件，刪除的代碼，寫明來自哪個文件，留著備用（以后可能用的上）
保留刪除的模擬數(shù)據(jù)
1.3碼表文件codeTable
codeTable
一個文件，特定標識，html、js、css
1.4代碼書寫順序
先寫正確邏輯，最后再查找bug和錯誤返回
1.5v-if與v-show的選用
帶操作使用v-if form
不會產(chǎn)生操作bug（展示型）使用v-show display: none可手動切換
v-if 回到頁面初始狀態(tài) v-show回到上次位置
1.7項目是否需要迭代，項目大小
1.確定代碼注釋數(shù)量
2.確定項目目錄復雜程度
3.完全了解業(yè)務(wù)邏輯之后才能更好的寫代碼
4.再小的網(wǎng)站也有業(yè)務(wù)邏輯
5.展示那種數(shù)據(jù)、依照那些排序
2.頁面內(nèi)容
頁面不能空白要有內(nèi)容，不能只有個目錄
路由重定向，或者組件和router-view顯隱
6.樣式存在少許差異
差異處元素內(nèi)容為空
元素不同
元素占位
v-if 刪除多余
插槽
7.公共組件包含的內(nèi)容
5.類似html結(jié)構(gòu)的一定用數(shù)組
8.api接口
同一接口 返回值鍵相同
api參數(shù)與頁面顯示值不同，不采用接口文檔字段eg：statusLabel
全部存在status、statusLabel
9.頁面劃分
1.以頁面劃分，引入組件（組件各自互不相關(guān)）
2.以路由劃分，組件內(nèi)監(jiān)聽（根據(jù)路由書寫事件）
10.js文件
導出導入需要有總標識
1.代碼書寫優(yōu)化
1.1前端所需數(shù)據(jù)數(shù)量不一致
1.后端返回一條數(shù)據(jù)，但前端需要多條數(shù)據(jù)，自定義變量存儲
2.自己決定是全局變量還是局部變量
1.4參數(shù)傳值
1.傳輸所有值
2.為了以后更好的維護
1.6api請求
取消methods api 增刪改方法
查 保留
為了實現(xiàn)修改數(shù)據(jù)后再次調(diào)用方法，實現(xiàn)頁面數(shù)據(jù)刷新
傳所有數(shù)據(jù)給后端，方便維護
多處用到同一請求方法時，會有哪些不同
api文檔是否有復用方法
params、后臺返的數(shù)據(jù)展示console
console.log('res后臺返回信息', 'params', res)
有無值都傳，’’,空數(shù)組
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.重置清空所有記錄（無論是否后續(xù)使用）
2.引用類型賦值之前先清空
1.11業(yè)務(wù)書寫
2.首先，頁面初始化顯示數(shù)據(jù)、
3.頁面某一操作之后，頁面顯示改動，一個操作之后，頁面引起的一系列變化
4.類似代碼多次運行，函數(shù)封裝調(diào)用，通過傳參改變結(jié)果
5.離開頁面，還原之前頁面
6.判斷數(shù)據(jù)是只賦值一次，還是每次都賦值
7.使用方法時，走完整個流程
8.找出是誰觸發(fā)了數(shù)據(jù)的更新，多次
9.用戶類別,用戶包含數(shù)據(jù) 使用群體，可查看項目群體
事件添加到數(shù)據(jù)修改上、而非點擊、鍵盤事件上
11.多處觸發(fā)調(diào)用同一接口時，接口回調(diào)函數(shù)的不同操作
12.操作成功提示
// bad
this.$message.info('新增成功！');
// good
this.$message.info('新增藥品成功！');
1.12前后臺數(shù)據(jù)交互
1清空數(shù)據(jù)
1.1合法發(fā)送請求、獲取后端數(shù)據(jù)
2.判斷獲取值是否正確
3.錯誤處理和正確處理
3.前端標識與后端對應、code+name（數(shù)據(jù)出錯-->后端、后端有字典）、code后端無字典
flag 計算屬性 Label 不同顯示，一個事件
5.寫入數(shù)據(jù)
6.真正取值是何種字段
后臺管理
流程阻斷記錄，中斷操作如何拿到之前的數(shù)據(jù)，拿流水號查不同接口
一個數(shù)據(jù)是由多個數(shù)據(jù)組合而成，判斷多個對象是否都有效
多條數(shù)據(jù)是否重復
數(shù)據(jù)單一流向 數(shù)據(jù)在整個流程中是否有效
1.13數(shù)據(jù)的狀態(tài)
無數(shù)據(jù)
發(fā)請求時，清空上一次的數(shù)據(jù)
數(shù)據(jù)加載前
數(shù)據(jù)加載中
數(shù)據(jù)加載失敗
數(shù)據(jù)加載成功
錯誤數(shù)據(jù)
一條數(shù)據(jù)
很少數(shù)據(jù)
大量數(shù)據(jù)13億 是否分頁
有數(shù)據(jù)
表單數(shù)據(jù)單位
1.14增刪查改
1.刪
1.提交是否刪除
2.同意刪除
3.回收站
4.真正刪除
3.api接口校驗
1.get/post方式
2.路徑
3.參數(shù)
4.事件修改對象動態(tài)屬性的值
狀態(tài) 其他操作會不會影響狀態(tài)改變 狀態(tài)切換
// 彈出框顯示
onShow (show) {
this.flag[show] = true
this[show].flag = true
},
相似一系列事件一定可以封裝數(shù)據(jù)、封裝事件簡寫（前提：變量命名、方法調(diào)用）（組件）
頁面類似事件同名 下一步 onNext()
5.模擬數(shù)據(jù)
模擬數(shù)據(jù)使用數(shù)據(jù)保存 不直接html寫
6.數(shù)據(jù)修改
form表單有返顯（判斷條件不同）
1. 只傳code 展示之前轉(zhuǎn)換所有name，提交不轉(zhuǎn)換
數(shù)據(jù)集中處理（提交，展示）前一步統(tǒng)一處理
單項數(shù)據(jù)展示、詳情（數(shù)據(jù)轉(zhuǎn)化）<---->詳情、數(shù)據(jù)存儲到數(shù)組（數(shù)據(jù)轉(zhuǎn)化）
遵循不改變原來的值所代表意思 status-->statusLabel 不影響后續(xù)操作 date格式不可改變
7.請求數(shù)據(jù)
getApplicantInfoList(params).success(data => {
const resData = data
params 原始處為對象{a:1,b:2}
const a = { ...this.flag.isNoticeShow }
8.登錄
單點登錄：多系統(tǒng)只登錄一次
同一賬號不能同時登錄
多賬號不能在同一瀏覽器登錄
9.form
同一個組件使用之前初始化(清空)數(shù)據(jù)
填寫+返顯
字典判斷的數(shù)據(jù)單一性 前端展示判斷idType === ‘身份證’
查詢條件保存，保存前端字段
是否初始化(清空)數(shù)據(jù)、是否清空查詢條件、是否有默認輸入項
copy 比較修改 清空
輸入范圍
返回、修改是否重新請求
輸入項選項列表是否帶有空值
添加、修改：不同 證件號碼和證件類型 查詢信息是否重填信息，有值項是否被覆蓋
驗證：是否必輸、字段長度、數(shù)字、漢字、英文
合理性：數(shù)據(jù)來源正確、數(shù)據(jù)寫入正確、數(shù)據(jù)進出范圍一致（員工—>如何確定為員工）
10. 錯誤幾種方式
刷新
直接路由進入錯誤，router.beforeEach((to, from, next) => {
刪除路由參數(shù)路由直接進入 使用動態(tài)參數(shù)解決
清除vuex、緩存進入
