微信搜索【大奇測試開】，關注這個堅持分享測試開發干貨的家伙。
上一篇總結了后端服務接口的開發，這篇我們主要來總結下前后端分離開發中的前端部分，主要是開箱即用的框架介紹和之前章節組件的梳理和部分的擴展內容，總體希望通過之前簡單的產品管理頁面啰嗦的幾次分享和這兩次總結，能夠從0-1的快速搭建起一個平台，說明一個夠用測試平台開發沒有想象中那么難。
往期推薦
- 【提測平台】分享3-正式開發產品需求&項目初始化
- 【提測平台】分享4-實現數據庫綁定和產品線顯示功能
- 【提測平台】分享5-實現產品線的添加
- 【提測平台】分享6-產品線修改和軟硬刪除功能實現
- 【提測平台】分享7-實現產品搜索和優化時間顯示
- Python Flask API實現方法-測試開發【提測平台】階段小結(一)
技術簡介
在【提測平台】的分享項目中，前端技術主要框架和遞進是 Vue -> element ui -> vue-admin-template
Vue.js 是一套用於構建用戶界面的 漸進式框架 簡單、靈活、高效，只需初中級的 javascript、html、css知識就可以開發界面了，同時現在社區有很多的第三方庫，快速集成開發，這里不得不提一開始由一個 “尤雨溪” 開發開源出來的，不得不說是大神。
Element ui 是一套基於Vue開發，餓了嗎團隊維護，為開發者、設計師和產品經理准備的開源組件庫，旨在快速搭建頁面。在我看來是一個套進一步降低開發門檻，開箱即用好看統一的組件庫，最新的更新版本是3.x的，而本項目使用的是2.x 的版本，無大影響，記住夠用就行，目前類似組件庫框架很多，比如阿里 antd等
vue-admin-template 是一個后台前端解決方案，它基於 vue 和 element-ui 實現，它進一步二次開發，完整一個開箱即用的后端平台，比如登錄、菜單、路由、模版、布局...都定義好了，使用開發只需要按照規則使用開發即可，當然說明下目前也都是基於前兩個2.x 版本開發的。template 生態是個基礎分支，它的admin 是由大量參考成型一套頁面，可以用來參考學習和直接粘貼復制使用的。
以上遞進到最后一層，說句實話只需要最簡單的js語法知識，就可以開始搞了前端了，當然是對於測試開發個小工具，小平台之類的，更負責定制化的東西還是要專業的前端，畢竟術業有專攻。
擴展：除了vue，目前前端技術特別流行的還有react、angular，組件框架還有antd、iview，后台整套的有andpro，其實基於上述前端不管是個人和還是國內很多互聯網大公司都有不少類似的開源項目或者內部使用二次開發項目。
至於對於使用哪種，網上有很多對比文章可以自行搜索，這里我也不想糾結這些，還是那句話，夠用、適合，尤其是對自己和項目能夠快速開始就是最好的。目前從各公司測試團隊使用情況，以及個人入門掌握情況，還是比較推薦vue系列的，另外一個就是后台，開箱即用是antd pro 后台也比較推薦，有react和vue兩個版本，下個項目分享或許會用到。
框架使用回顧
代碼腳手架 在之前的技術選型的文章中已經給過官方的給出的結構說明圖，這里在貼出來回顧下，目前所用到目錄涉及全部在src下邊，如 /api 封裝請求后端接口，/router 定義菜單路由，/views 頁面-核心部分，並在此涉及到element組件使用和javasript的代碼邏輯實現。
├── build # 構建相關 ├── mock # 項目mock 模擬數據 ├── plop-templates # 基本模板 ├── public # 靜態資源 │ │── favicon.ico # favicon圖標 │ └── index.html # html模板 ├── src # 源代碼 │ ├── api # 所有請求 │ ├── assets # 主題 字體等靜態資源 │ ├── components # 全局公用組件 │ ├── directive # 全局指令 │ ├── filters # 全局 filter │ ├── icons # 項目所有 svg icons │ ├── lang # 國際化 language │ ├── layout # 全局 layout │ ├── router # 路由 │ ├── store # 全局 store管理 │ ├── styles # 全局樣式 │ ├── utils # 全局公用方法 │ ├── vendor # 公用vendor │ ├── views # views 所有頁面 │ ├── App.vue # 入口頁面 │ ├── main.js # 入口文件 加載組件 初始化等 │ └── permission.js # 權限管理 ├── tests # 測試 ├── .env.xxx # 環境變量配置 ├── .eslintrc.js # eslint 配置項 ├── .babelrc # babel-loader 配置 ├── .travis.yml # 自動化CI配置 ├── vue.config.js # vue-cli 配置 ├── postcss.config.js # postcss 配置 └── package.json # package.json
頁面實現 再來回顧下一個新頁面誕生構造，主要分三個區域，分別是組件使用區、javascript編碼區和Css的樣式區。
組件區域使用 <template><div class="app-container"> ... </div></template> 固定html語法內實現組件的引用、數據綁定、屬性定義、樣式定義、方法設定等； <script>...</script> 主要是模塊的引用，數據定義，方法實現，邏輯實現部分；<style>...</style> 為頁面樣式統一實現區域，這部分由於樣式簡單都直接在控件的style屬性里定義了，暫時還沒有涉及到。
菜單配置 新增的頁面實現后值需要參考模版，簡單配置下菜單路由即可實現跳轉，定義在/src/router/index.js ，目前使用的到是是一級菜單，子菜單需要在內部使用 children 定義下下一層，配置字段參照圖，主要是路徑、跳轉地址、菜單這幾項。
一個簡單新增頁面在上述步驟后，運行 npm run dev 就會呈現如下實現
組件階段總結
回顧下使用過的組件，這些后續也會反復的被用到，希望能好好的掌握使用，不過不需要死記硬背，只需要學會如何官方參考與組合加工即可，至於更多詳細的內容記得參考官方文檔，當然后續的頁面開發也會涉及更多的內容。
Form 表單 在組件中，每一個表單域由一個 Form-Item 組件構成，表單域中可以放置各種類型的表單控件，如 Input、Button 等，默認是豎列排列，通過屬性inline 可以讓表單域變為行內的表單域（即橫向排列）如項目分享中的搜索區域實現，其中:model 綁定JSON{ } 數據集，label 定義子項標題，
label-width設置標題寬度，v-model綁定具體數據，style設置額外CSS樣式，disabled 控件不可編輯， 舉例：
<el-form :model="product">
<el-form-item v-if="dialogProductStatus==='UPDATE'" label="編號" label-width="100px">
<el-input v-model="product.id" style="width: 80%" disabled></el-input>
</el-form-item>
</el-form>
<el-form :inline="true" :model="search">
<el-form-item label="名稱">
<el-input v-model="search.title" placeholder="支持模糊查詢" style="width: 200px;" clearable/>
</el-form-item>
</el-form>
Button 按鈕 基礎控件，通過type定義類型，plain定義樣式，@click綁定js事件方法。舉例：
<el-button type="primary" plain @click="searchProduct()">查詢</el-button>
其他樣式參考
另外之前還使用一種 Link 文字鏈接 當作tabel的操作按鈕使用了，屬性什么很類似，這里不單獨拿出來貼了。
Input 輸入框 基礎組件 通過 v-model綁定數據，在內容有變化的時候會動態改變變量值，否則默認為空，之前分享除了通用input還用到了 type="textarea"多行文本輸入框，clearable 設置清除x鍵，其他它還可以定義為密碼類型等。
<el-input v-model="search.keyCode" placeholder="支持模糊查詢" style="width: 200px;" clearable/>
Table 表格 用於展示多條結構類似的數據，可對數據進行排序、篩選、對比或其他自定義操作，課程使用的例子：
<el-table :data="tableData"><!--:data 綁定data()的數組值,會動態根據其變化而變化-->
<el-table-column prop="id" label="編號"/>
<!--:data prop綁定{}中的key，label為自定義顯示的列表頭-->
<el-table-column prop="title" label="名稱"/>
<el-table-column prop="keyCode" label="代號"/>
<el-table-column prop="desc" label="描述" show-overflow-tooltip/>
<el-table-column prop="operator" label="操作人"/>
<el-table-column :formatter="formatDate" prop="update" label="操作時間"/>
<el-table-column label="操作">
<template slot-scope="scope">
<el-link icon="el-icon-edit" @click="dialogProductUpdate(scope.row)">編輯</el-link>
<el-link icon="el-icon-circle-close" @click="pSoftRemove(scope.row.id)">停用</el-link>
<el-link icon="el-icon-delete" @click="pHardRemove(scope.row.id)">刪除</el-link>
</template>
</el-table-column>
</el-table>
這個組件是真的方便，遙想當年寫html還要用循環什么的，這里通過:data 綁定 [{key:value..}] 數據，在el-table-column中用prop屬性來對應對象中的鍵名即可填入數據，用label屬性來定義表格的列名。即可搞定數據的顯示。
table的樣式和屬性很多，可以參考element官方或者 element-admin 的table綜合頁面，日常后台所需完全夠用了。
Dialog 對話框 在保留當前頁面狀態的情況下，告知用戶並承載相關操作，本身可以嵌套上述所有組件，相當於蒙層頁面，比如之前的產品添加和修改的操作，都是利用此組件完成的。基本設置需visible屬性，它接收Boolean，當為true時顯示 Dialog。
除了以上組件以外，之前的還涉及如v-bind、v-if 等語法糖，用法請參考分享教程，后續如果用的還會涉及更深的，或許會單獨研究一下講一講。
至此階段內容前端部分也總結完了，希望通過幾次細節分講和2次總結，大家對flask和vue的前后分離開發有了基礎的開發能力，后續將繼續實現《提測平台》的其他功能點實現，篇幅文字和進度會更多些，所以如果你在跟着這個分享教程，一定要動手好好實踐之前的分享，看似簡單但真的是基石。
原創不易，經過實踐的總結分享更不易，如果你覺得有用，請點擊推薦，也歡迎關注我博客園和微信公眾號。