在前面隨筆《循序漸進VUE+Element 前端應用開發(3）--- 動態菜單和路由的關聯處理》中介紹了在Vue + Element整合框架中，實現了動態菜單和動態路由的處理，從而可以根據用戶角色對應的菜單實現本地路由的過濾和綁定，菜單順利弄好了，就需要進一步開發頁面功能了，本篇隨筆介紹一個案例，通... ...
在前面隨筆《循序漸進VUE+Element 前端應用開發(3）--- 動態菜單和路由的關聯處理》中介紹了在Vue + Element整合框架中，實現了動態菜單和動態路由的處理，從而可以根據用戶角色對應的菜單實現本地路由的過濾和綁定，菜單順利弄好了，就需要進一步開發頁面功能了，本篇隨筆介紹一個案例，通過獲取後端數據後，進行產品信息頁面的處理。
1、後端數據的獲取處理
前面隨筆，我們介紹過了Vue + Element的前端框架中，主要通過後端獲取數據，並呈現在界面視圖或者組件上的。
前後端的邊界則非常清晰，前端可以在通過網路獲取對應的JSON就可以構建前端的應用了。
我們通過Vue.config.js的配置信息，可以指定Proxy來處理是本地Mock數據還是實際的後端數據，如下所示。
我們要跨域請求數據，在配置文件里設置代理，vue-cli3項目，需要在vue.config.js裡面寫配置。
我們創建了一些操作數據的API類文件，每個API名稱對應一個業務的集中處理，包括特定業務的列表請求、單個請求、增加、刪除、修改等等都可以封裝在一個API類裡面。
然後在對應的業務API訪問類，如product.js 裡面定義我們的請求邏輯，主要就是利用簡單封裝axios的request輔助類來實現數據的請求。
下一步就是在src/views/product目錄裡面定義我們的視圖文件，這個也就是頁面文件，其中包含了常規VUE的幾個部分，包括
<template> </template> <script> export default { } </script> <style> </style>
其中在<template>裡面的是界面元素部分，可以添加我們相關的界面組件等內容，如element的界面組件在裡面。
其中<script>是vue腳本交互的部分了，這裡面封裝我們很多處理邏輯和對應的modal對象信息，在調用API類進行訪問數據前，我們往往需要引入對應的API類文件，如下所示。
import { GetTopBanners, GetProductList } from '@/api/product'
其中<style>則定義相關的樣式。
在開始介紹Vue 的Script部分，我們認為你已經對VUE的script相關內容，以及它的生命周期有所瞭解了，script部分的內容包括有。
<script> export default { data() { return {}; }, methods: { // 組件的方法 }, watch: { // watch擅長處理的場景：一個數據影響多個數據 }, computed: { // computed擅長處理的場景：一個數據受多個數據影響 }, beforeCreate: function() { // 在實例初始化之後，數據觀測(data observer) 和 event/watcher 事件配置之前被調用。 }, created: function() { // 實例已經創建完成之後被調用。在這一步，實例已完成以下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。 }, beforeMount: function() { // 在掛載開始之前被調用：相關的 render 函數首次被調用。 }, mounted: function() { // 編譯好的HTML掛載到頁面完成後執行的事件鉤子 // el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用該鉤子。 // 此鉤子函數中一般會做一些ajax請求獲取數據進行數據初始化 console.log("Home done"); }, beforeUpdate: function() { // 數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。 你可以在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。 }, updated: function() { // 由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之後會調用該鉤子。 // 當這個鉤子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態，因為這可能會導致更新無限迴圈。 // 該鉤子在伺服器端渲染期間不被調用。 }, beforeDestroy: function() { // 實例銷毀之前調用。在這一步，實例仍然完全可用。 }, destroyed: function() { // Vue 實例銷毀後調用。調用後，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。 該鉤子在伺服器端渲染期間不被調用。 } }; </script>
其中我們主要涉及到內容包括：
data，用於定義整個頁面的modal對象或屬性，
method，用於定義各種處理方法
computed，用於定義一些計算的樹形
created，用於我們在元素創建，但是沒有掛載的時候
mounted，完成頁面掛載的時候
2、界面展示處理
例如我們要展示一個界面內容，需要展示產品的圖片，以及產品信息介紹
那麼需要定義相關的數據模板，以及對應的處理方法，在頁面載入前實現數據的綁定處理。
export default { data() { return { activeName: 'all', currentDate: new Date(), banners: [], productlist: [], pageinfo: { pageindex: 1, pagesize: 10, total: 0 }, producttype: 'all' }; }, created() { this.loadbanners() this.getlist() },
界面部分，我們利用Element的界面組件定義一個走馬燈的展示效果，如下所示。
在Template模塊裡面定義好的界面元素如下所示。
這裡面的el-carousel 是Element組件的走馬燈，而 v-for="item in banners" 就是vue的處理語法，對data模型裡面的數據進行迴圈處理，然後逐一展示多個圖片，從而實現了走馬燈的效果展示。
對於列表展示，我們採用了一個卡片的展示內容，以及分頁處理的方式實現數據的展示。
分類按鈕部分，代碼如下所示。
<el-row :gutter="20" style="padding:20px"> <el-button type="primary" icon="el-icon-search" :plain="producttype !='all'" @click="handleClick($event, 'all')">全部</el-button> <el-button type="success" icon="el-icon-search" :plain="producttype !='1'" @click="handleClick($event, '1')">框架產品</el-button> <el-button type="warning" icon="el-icon-search" :plain="producttype !='2'" @click="handleClick($event, '2')">軟體產品</el-button> <el-button type="danger" icon="el-icon-search" :plain="producttype !='3'" @click="handleClick($event, '3')">開發組件</el-button> </el-row>
主要就是根據data屬性進行一些樣式的控制，以及響應對應的click事件。
而每個卡片內容介紹，Demo代碼如下所示。
<el-col :span="4"><div class="grid-content bg-purple" /> <el-card class="box-card"> <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image"> <div style="padding: 14px;"> <span>好吃的漢堡</span> <div class="bottom clearfix"> <time class="time">價格：¥200</time> <el-button type="text" class="button" @click="loadbanners()">操作按鈕</el-button> </div> </div> </el-card> </el-col>
但是我們要根據實際獲得的動態數據進行綁定，因此需要一個迴圈來進行處理，類似上面的v-for迴圈，對產品列表進行展示即可。
<el-col v-for="(item, index) in productlist" :key="index" :span="4" style="min-width:250px"> <div class="grid-content bg-purple"> <el-card class="box-card"> <img :src="item.Picture" class="image" style="width:200px;height:200px"> <div style="padding: 14px;"> <span>{{ item.ProductName }}</span> <div class="bottom clearfix"> <!-- <time class="time">價格：¥{{ item.Price }}</time> --> <el-button type="text" class="button">操作按鈕</el-button> </div> </div> </el-card> </div> </el-col>
為了有效的請求和展示數據，我們還需要利用分頁組件來進行數據的分頁查詢處理，分頁組件界面的定義代碼如下所示。
<el-pagination background layout="prev, pager, next" :page-sizes="[10,20,50]" :total="pageinfo.total" :current-page="pageinfo.pageindex" :page-size="pageinfo.pagesize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
為了實現對數據的分頁，我們需要定義當前頁碼、每頁面數據大小、總共數據記錄數等幾個變數，用來進行分頁查詢的需要。
我們定義的getList的方法如下所示。
getlist() { // 構造分頁查詢條件 var param = { type: this.producttype === 'all' ? '' : this.producttype, pageindex: this.pageinfo.pageindex, pagesize: this.pageinfo.pagesize }; this.listLoading = true // 發起數據查詢請求，並設置本地Data的值 GetProductList(param).then(data => { this.productlist = data.list this.pageinfo.total = data.total_count this.listLoading = false }) },
另外定義幾個方法，對數據進行查詢的操作。
// 單擊某類別的時候，進行查詢 handleClick(e, type) { // console.log(e, type); this.producttype = type this.pageinfo.pageindex = 1; this.getlist() }, // 頁面數量改變後查詢處理 handleSizeChange(val) { console.log(`每頁 ${val} 條`); this.pageinfo.pagesize = val; this.getlist() }, // 頁碼改變後查詢處理 handleCurrentChange(val) { console.log(`當前頁: ${val}`); this.pageinfo.pageindex = val; this.getlist() }
以上就是我們利用Element的界面組件，以及Vue的方法進行數據的分頁查詢請求的基礎操作，通過這個簡單的案例，我們可以瞭解一些基礎的Element 界面組件的使用，以及對Data / Method等內容的瞭解，並指導如何封裝調用跨域的API請求，實現後端數據在界面上的展示處理了。
