循序漸進VUE+Element 前端應用開發(4）--- 獲取后端資料及產品資訊頁面的處理-有解無憂

在前面隨筆《循序漸進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 >價格：¥{{ 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 =https://www.cnblogs.com/wuhuacong/p/> {
        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請求，實作后端資料在界面上的展示處理了，

為了方便讀者理解，我列出一下前面幾篇隨筆的連接，供參考：

循序漸進VUE+Element 前端應用開發(1）--- 開發環境的準備作業

循序漸進VUE+Element 前端應用開發(2）--- Vuex中的API、Store和View的使用

循序漸進VUE+Element 前端應用開發(3）--- 動態選單和路由的關聯處理

循序漸進VUE+Element 前端應用開發(4）--- 獲取后端資料及產品資訊頁面的處理

循序漸進VUE+Element 前端應用開發(5）--- 表格串列頁面的查詢，串列展示和欄位轉義處理

循序漸進VUE+Element 前端應用開發(6）--- 常規Element 界面組件的使用

循序漸進VUE+Element 前端應用開發(7）--- 介紹一些常規的JS處理函式

循序漸進VUE+Element 前端應用開發(8）--- 樹串列組件的使用

循序漸進VUE+Element 前端應用開發(9）--- 界面語言國際化的處理

循序漸進VUE+Element 前端應用開發(10）--- 基于vue-echarts處理各種圖表展示

循序漸進VUE+Element 前端應用開發(11）--- 圖示的維護和使用

循序漸進VUE+Element 前端應用開發(12）--- 整合ABP框架的前端登錄處理

循序漸進VUE+Element 前端應用開發(13）--- 前端API介面的封裝處理

循序漸進VUE+Element 前端應用開發(14）--- 根據ABP后端介面實作前端界面展示

循序漸進VUE+Element 前端應用開發(15）--- 用戶管理模塊的處理

循序漸進VUE+Element 前端應用開發(16）--- 組織機構和角色管理模塊的處理

循序漸進VUE+Element 前端應用開發(17）--- 選單管理

循序漸進VUE+Element 前端應用開發(18）--- 功能點管理及權限控制

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/34108.html

標籤：Html/Css

上一篇：css：選擇器（標簽、類、ID、通配符）

下一篇：前端css選擇器