第一步：工具的介紹

工欲善其事必先利其器，所以首先先總結一下這個項目中的使用到的工具，主要是對自己不熟悉也是第一次接觸的一些東西的總結，這些工具大概分成3類：項目管理工具、項目打包工具、項目運行依賴

---

項目管理工具

SourceTree：一個免費的Git圖形化管理工具

項目打包工具

Webpack :模塊打包機

項目運行依賴

Nodejs：服務器端的、非阻斷式I/O的、事件驅動

開發規范

• 1 自定義的屬性命名前綴：$
• 2 所有的路勁配置（測試，模擬）等地址，另起文件集中管理，在入口文件mian.js引入

問題與總結

1：變量命名

• 1.1 關于input輸入框綁定的變量（this）命名，與loadData中的Get方法中的參數（reqParam）一致；此外input的事件綁定函數的參數(this)也與之一致。以輸入框為條件查詢時，如果輸入框輸入值，則get方法的參數增加對于綁定的值
• 1.2 input中v-model綁定的值不能直接使用后端給定的字段，會導致input組件的@change事件無法響應。
• 1.3 v-model的變量可以通過點的方式獲取,而prop的變量獲取則不可。

2：elementUI組件

• 2.1.0 table表格：在el-table-column中， scope可以獲取當前行或列的所有數據信息
• 2.1.1 table表格：在el-table組件綁定的data類型必須是數組，且el-table-column中的prop必須是data[x]對象的屬性名對應，data需要綁定的服務器返回數據response.data的數據結構過于復雜，可不必轉化

lr <el-table :data="configPrice.data" border><el-table-column type="index" v-if="false"></el-table-column><el-table-column label="修改日期" prop="createTime" align="center" width="150"></el-table-column><el-table-column label="企業工商信息比對" prop="content.orgPay.query" align="center" width="150"></el-table-column> </el-table>

• 2.2 所有需要驗證的數據，用form進行包裹（el-form組價中的v-model綁定的變量都在aForm中定義）。el-form組件的model, ref, rules關系：(：model="aForm"; ref="aForm"; :rules="aRules")。Form-Item 組件里的元素綁定的數據：model="aForm.xxx'的形式.data返回的 return 中，aRules：{ xxx:[{}, {}], xxxx:[{}, {}]}。

• 2.3 關于多選框的驗證[el-select]，當設置了prop屬性時，且有validator的驗證，則觸發的條件需要加上change，無需設置@change事件

  productPriceType: [{ validator: checkType, trigger: 'blur,change' }]

3：服務器返回的數據處理

項目中對后端服務器返回的數據有許多地方需要處理。服務器返回的數據基本是json格式的

• 1.1 當返回的json數據為字符串類型

例如：JSONstring 返回一下數據 { "orgPay":{"query":"20.00","pay":"2.50"}, "orgPayZhiMa":{"check":"2.50"}, "bankauth":{"mobilecode":"0.05","bankauth":"0.95","bankauth3":"0.90"}, "facereco":{"ocr":"0.10","liveExamVSIDPhoto":"0.20","policeVSLiveExam":"1.70"}, "psnZhiMa":{"check":"2.00"}, "psnCheck":{"idInfoCheck":"0.85"}, "bizConfirm":{"bizCheck":"2.50"}, "telecomauth":{"telecomauth":"1.00"}}前端需要把JSON類型的數據轉換為js對象讀取所有價格，這時，有兩種解決方案 （一）：eval函數 var jsObj = eval( "(" + JSONstring + ")" ) 方案說明：加上圓括號的目的是迫使eval函數在處理JavaScript代碼的時候強制將括號內的表達式（expression）轉化為對象，而不是作為語句（statement）來執行將json數據轉換為json對象。但是使用eval函數解析JSON是一種很不安全的方式，能不用最好就不用，原因是eval不但可以解析JSON字符串，還會執行其中的代碼塊（如果有的話） （二）：JSON.parse() 方案說明：JSON.parse()可以把將JSON格式的字符串數據轉換為 JavaScript 對象

4：返回服務器的數據

-1 可以參考請求回來的數據格式，

例如：put方法中對"content"字段的數據必須是***json格式的字符串*** let json = {"orgPay":{"query": priceForm.orgPay_query, "pay": priceForm.orgPay_pay },"orgPayZhiMa": {"check": priceForm.orgPayZhiMa_check },"bankauth": {"mobilecode": priceForm.bankauth_mobilecode, "bankauth": priceForm.bankauth_bankauth , "bankauth3": priceForm.bankauth_bankauth3 },"facereco": {"ocr": priceForm.facereco_ocr, "liveExamVSIDPhoto": priceForm.facereco_liveExamVSIDPhoto, "policeVSLiveExam": priceForm.facereco_policeVSLiveExam },"psnZhiMa": {"check": priceForm.psnZhiMa_check },"psnCheck": {"idInfoCheck": priceForm.psnCheck_idInfoCheck },"bizConfirm": {"bizCheck": priceForm.bizConfirm_bizCheck },"telecomauth": {"telecomauth": priceForm.telecomauth_telecomauth }}; let content = JSON.stringify(json); ***JavaScript 對象轉換為字符串。***

5：精度的控制

后端數據對精度的要求均在前端控制，即在驗證時控制

• 1：parseFloat(xx) 可解析一個字符串xx，并返回一個浮點數；第一個x必須是number
• 2: xx.toFixed(2) 把數字轉換為字符串，結果的小數點后有指定位數的數字

項目現有版本存在的一些疑惑

1.1 用戶管理板塊

分頁樣式：無法在首次刷新時顯示所有頁數。原因：后端數據返回存在誤差

總結

以上是生活随笔為你收集整理的基于Vue+ElementUI的后台管理系统开发的总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。