按部就班VUE+Element 前端應用開發(4）--- 獲取後端數據及產品信息頁面的處理

在前面隨筆《按部就班VUE+Element 前端應用開發(3）--- 動態菜單和路由的關聯處理》中介紹了在Vue + Element整合框架中，實現了動態菜單和動態路由的處理，從而能夠根據用戶角色對應的菜單實現本地路由的過濾和綁定，菜單順利弄好了，就須要進一步開發頁面功能了，本篇隨筆介紹一個案例，經過獲取後端數據後，進行產品信息頁面的處理。

一、後端數據的獲取處理

前面隨筆，咱們介紹過了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，完成頁面掛載的時候

二、界面展現處理

例如咱們要展現一個界面內容，須要展現產品的圖片，以及產品信息介紹

 那麼須要定義相關的數據模板，以及對應的處理方法，在頁面加載前實現數據的綁定處理。

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請求，實現後端數據在界面上的展現處理了。