Element Vue 開箱即用框架如何使用-測試開發【提測平臺】階段小結(二)

MrZ大奇發表於2021-08-22
Vue框架
微信搜尋【大奇測試開】，關注這個堅持分享測試開發乾貨的傢伙。

上一篇總結了後端服務介面的開發，這篇我們主要來總結下前後端分離開發中的前端部分，主要是開箱即用的框架介紹和之前章節元件的梳理和部分的擴充套件內容，總體希望通過之前簡單的產品管理頁面囉嗦的幾次分享和這兩次總結，能夠從0-1的快速搭建起一個平臺，說明一個夠用測試平臺開發沒有想象中那麼難。

往期推薦

技術簡介

在【提測平臺】的分享專案中，前端技術主要框架和遞進是 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的前後分離開發有了基礎的開發能力，後續將繼續實現《提測平臺》的其他功能點實現，篇幅文字和進度會更多些，所以如果你在跟著這個分享教程，一定要動手好好實踐之前的分享，看似簡單但真的是基石。

 

原創不易，經過實踐的總結分享更不易，如果你覺得有用，請點選推薦，也歡迎關注我部落格園和微信公眾號。

相關文章