在前面隨筆《循序漸進VUE+Element 前端應(yīng)用開發(fā)之動態(tài)菜單和路由的關(guān)聯(lián)處理》中介紹了在Vue + Element整合框架中，實現(xiàn)了動態(tài)菜單和動態(tài)路由的處理，從而可以根據(jù)用戶角色對應(yīng)的菜單實現(xiàn)本地路由的過濾和綁定，菜單順利弄好了，就需要進一步開發(fā)頁面功能了，本篇隨筆介紹一個案例，通過獲取后端數(shù)據(jù)后，進行產(chǎn)品信息頁面的處理。

前后端的邊界則非常清晰，前端可以在通過網(wǎng)絡(luò)獲取對應(yīng)的JSON就可以構(gòu)建前端的應(yīng)用了。

我們通過Vue.config.js的配置信息，可以指定Proxy來處理是本地Mock數(shù)據(jù)還是實際的后端數(shù)據(jù)，如下所示。

我們要跨域請求數(shù)據(jù)，在配置文件里設(shè)置代理，vue-cli3項目，需要在vue.config.js里面寫配置。

我們創(chuàng)建了一些操作數(shù)據(jù)的API類文件，每個API名稱對應(yīng)一個業(yè)務(wù)的集中處理，包括特定業(yè)務(wù)的列表請求、單個請求、增加、刪除、修改等等都可以封裝在一個API類里面。

然后在對應(yīng)的業(yè)務(wù)API訪問類，如product.js 里面定義我們的請求邏輯，主要就是利用簡單封裝axios的request輔助類來實現(xiàn)數(shù)據(jù)的請求。

下一步就是在src/views/product目錄里面定義我們的視圖文件，這個也就是頁面文件，其中包含了常規(guī)VUE的幾個部分，包括

<template> </template><script>export default {}</script><style></style>

其中在<template>里面的是界面元素部分，可以添加我們相關(guān)的界面組件等內(nèi)容，如element的界面組件在里面。

其中<script>是vue腳本交互的部分了，這里面封裝我們很多處理邏輯和對應(yīng)的modal對象信息，在調(diào)用API類進行訪問數(shù)據(jù)前，我們往往需要引入對應(yīng)的API類文件，如下所示。

import { GetTopBanners, GetProductList } from ’@/api/product’

其中<style>則定義相關(guān)的樣式。

在開始介紹Vue 的Script部分，我們認為你已經(jīng)對VUE的script相關(guān)內(nèi)容，以及它的生命周期有所了解了，script部分的內(nèi)容包括有。

<script>export default { data() { return {}; }, methods: { // 組件的方法 }, watch: { // watch擅長處理的場景：一個數(shù)據(jù)影響多個數(shù)據(jù) }, computed: { // computed擅長處理的場景：一個數(shù)據(jù)受多個數(shù)據(jù)影響 }, beforeCreate: function() { // 在實例初始化之后，數(shù)據(jù)觀測(data observer) 和 event/watcher 事件配置之前被調(diào)用。 }, created: function() { // 實例已經(jīng)創(chuàng)建完成之后被調(diào)用。在這一步，實例已完成以下的配置：數(shù)據(jù)觀測(data observer)，屬性和方法的運算， watch/event 事件回調(diào)。然而，掛載階段還沒開始，$el 屬性目前不可見。 }, beforeMount: function() { // 在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。 }, mounted: function() { // 編譯好的HTML掛載到頁面完成后執(zhí)行的事件鉤子 // el 被新創(chuàng)建的 vm.$el 替換，并掛載到實例上去之后調(diào)用該鉤子。 // 此鉤子函數(shù)中一般會做一些ajax請求獲取數(shù)據(jù)進行數(shù)據(jù)初始化 console.log('Home done'); }, beforeUpdate: function() { // 數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬 DOM 重新渲染和打補丁之前。 你可以在這個鉤子中進一步地更改狀態(tài)，這不會觸發(fā)附加的重渲染過程。 }, updated: function() { // 由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補丁，在這之后會調(diào)用該鉤子。 // 當(dāng)這個鉤子被調(diào)用時，組件 DOM 已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下，你應(yīng)該避免在此期間更改狀態(tài)，因為這可能會導(dǎo)致更新無限循環(huán)。 // 該鉤子在服務(wù)器端渲染期間不被調(diào)用。 }, beforeDestroy: function() { // 實例銷毀之前調(diào)用。在這一步，實例仍然完全可用。 }, destroyed: function() { // Vue 實例銷毀后調(diào)用。調(diào)用后，Vue 實例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。 該鉤子在服務(wù)器端渲染期間不被調(diào)用。 }};</script>

其中我們主要涉及到內(nèi)容包括：

data，用于定義整個頁面的modal對象或?qū)傩裕?/p>

method，用于定義各種處理方法

computed，用于定義一些計算的樹形

created，用于我們在元素創(chuàng)建，但是沒有掛載的時候

mounted，完成頁面掛載的時候

例如我們要展示一個界面內(nèi)容，需要展示產(chǎn)品的圖片，以及產(chǎn)品信息介紹

那么需要定義相關(guān)的數(shù)據(jù)模板，以及對應(yīng)的處理方法，在頁面加載前實現(xiàn)數(shù)據(jù)的綁定處理。

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='iteminbanners' 就是vue的處理語法，對data模型里面的數(shù)據(jù)進行循環(huán)處理，然后逐一展示多個圖片，從而實現(xiàn)了走馬燈的效果展示。

對于列表展示，我們采用了一個卡片的展示內(nèi)容，以及分頁處理的方式實現(xiàn)數(shù)據(jù)的展示。

分類按鈕部分，代碼如下所示。

<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’)'>框架產(chǎn)品</el-button> <el-button type='warning' icon='el-icon-search' :plain='producttype !=’2’' @click='handleClick($event, ’2’)'>軟件產(chǎn)品</el-button> <el-button type='danger' icon='el-icon-search' :plain='producttype !=’3’' @click='handleClick($event, ’3’)'>開發(fā)組件</el-button></el-row>

主要就是根據(jù)data屬性進行一些樣式的控制，以及響應(yīng)對應(yīng)的click事件。

而每個卡片內(nèi)容介紹，Demo代碼如下所示。

<el-col :span='4'><div /><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' @click='loadbanners()'>操作按鈕</el-button> </div> </div></el-card></el-col>

但是我們要根據(jù)實際獲得的動態(tài)數(shù)據(jù)進行綁定，因此需要一個循環(huán)來進行處理，類似上面的v-for循環(huán)，對產(chǎn)品列表進行展示即可。

<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='http://www.piao2010.com/bcjs/item.Picture' 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>

為了有效的請求和展示數(shù)據(jù)，我們還需要利用分頁組件來進行數(shù)據(jù)的分頁查詢處理，分頁組件界面的定義代碼如下所示。

<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' />

為了實現(xiàn)對數(shù)據(jù)的分頁，我們需要定義當(dāng)前頁碼、每頁面數(shù)據(jù)大小、總共數(shù)據(jù)記錄數(shù)等幾個變量，用來進行分頁查詢的需要。

我們定義的getList的方法如下所示。

getlist() { // 構(gòu)造分頁查詢條件 var param = {type: this.producttype === ’all’ ? ’’ : this.producttype,pageindex: this.pageinfo.pageindex,pagesize: this.pageinfo.pagesize }; this.listLoading = true // 發(fā)起數(shù)據(jù)查詢請求，并設(shè)置本地Data的值 GetProductList(param).then(data => {this.productlist = data.listthis.pageinfo.total = data.total_countthis.listLoading = false }) },

另外定義幾個方法，對數(shù)據(jù)進行查詢的操作。

// 單擊某類別的時候，進行查詢 handleClick(e, type) { // console.log(e, type); this.producttype = type this.pageinfo.pageindex = 1; this.getlist() }, // 頁面數(shù)量改變后查詢處理 handleSizeChange(val) { console.log(`每頁 ${val} 條`); this.pageinfo.pagesize = val; this.getlist() }, // 頁碼改變后查詢處理 handleCurrentChange(val) { console.log(`當(dāng)前頁: ${val}`); this.pageinfo.pageindex = val; this.getlist() }

以上就是我們利用Element的界面組件，以及Vue的方法進行數(shù)據(jù)的分頁查詢請求的基礎(chǔ)操作，通過這個簡單的案例，我們可以了解一些基礎(chǔ)的Element 界面組件的使用，以及對Data / Method等內(nèi)容的了解，并指導(dǎo)如何封裝調(diào)用跨域的API請求，實現(xiàn)后端數(shù)據(jù)在界面上的展示處理了。

以上就是Vue Element前端應(yīng)用開發(fā)之獲取后端數(shù)據(jù)的詳細內(nèi)容，更多關(guān)于Vue Element獲取后端數(shù)據(jù)的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！