按部就班VUE+Element 前端應用開發(14）--- 根據ABP後端接口實現前端界面展現

時間 2020-07-06

標籤按部就班 vue+element vue element 前端應用開發根據 abp 後端接口實現界面展現简体版

原文原文鏈接

在前面隨筆《按部就班VUE+Element 前端應用開發(12）--- 整合ABP框架的前端登陸處理》簡單的介紹了一個結合ABP後端的登錄接口實現前端系統登錄的功能，本篇隨筆繼續深化這一主題，着重介紹基於ABP後端接口信息，實現對前端界面的開發工做。html

ABP（ASP.NET Boilerplate）框架主要是基於.net core 進行的後端Web API的開發，結合Swagger的管理界面咱們能夠看到發佈的 API 的接口明細信息，這樣前端技術人員能夠很容易整合前端的API應用。Vue + Element的前端應用，是目前較爲流行的前端技術整合，Vue提供了前端框架很好的支持，Element提供了很是不錯的界面組件封裝和處理，經過ABP後端API接口和前端Vue+Element的整合，能夠很好實現先後端的分離處理，同時又極大提升各自開發過程，並利用最新、應用普遍的技術來實現最好的技術應用。前端

一、ABP接口和前端對接處理

ABP框架主要仍是基於領域驅動的理念來構建整個架構的，其中領域驅動包含的概念有域對象Entities、倉儲對象Repositories、域服務接口層Domain Services、域事件Domain Events、應用服務接口Application Services、數據傳輸對象DTOs等。git

ABP官方網站：http://www.aspnetboilerplate.com，從裏面能夠查看很詳細的案例和文檔說明，能夠根據須要下載不一樣類型的基礎框架。github

ABP GitHub源碼地址：https://github.com/aspnetboilerplate，能夠下載整個基礎的框架內容，以及相關的樣板案例代碼。後端

關於ABP框架使用，若是不知道，請自行補習一下個人隨筆：ABP框架使用。api

整理後的ABP快速開發框架的架構圖示，以下圖所示（以字典模塊爲例說明）跨域

針對Web API接口調用的封裝，爲了適應客戶端快速調用的目的，這個封裝做爲一個獨立的封裝層，以方便各個模塊之間進行共同調用。前端框架

在基於VUE+Element 前端應用中，上圖的ApiCaller組件，其實就是咱們封裝的API的JS類，同時也有相關的繼承封裝處理，相似C#中類的繼承關係了。架構

在JS裏面引入了ES6的語法，JS函數就可使用類的方式來實現各類基礎接口的封裝和子類的繼承關係了。框架

例如咱們先定義好JS中常規的API封裝接口BaseApi類，而後定義子類有DIctType、DictData等業務類，那麼這些類繼承BaseApi，就會具備相關的接口了，以下所示繼承關係。

這些API類的文件視圖以下所示。

有了這些業務類的準備，那麼咱們和後端ABP的API接口對接，就很容易了，以下圖所示。

通常來講，咱們頁面模塊可能會涉及到Store模塊，用來存儲對應的狀態信息，也多是直接訪問API模塊，實現數據的調用並展現。在頁面開發過程當中，多數狀況下，不須要Store模塊進行交互，通常只須要存儲對應頁面數據爲全局數據狀態的狀況下，纔可能啓用Store模塊的處理。

經過WebProxy代理的處理，咱們能夠很容易在前端中實現跨域的處理，不一樣的路徑調用不一樣的域名地址API均可以，最終轉換爲本地的API調用，這就是跨域的處理操做。

二、ABP接口信息和前端界面處理

有了上面的一些知識準備，相信對ABP+Vue+Element的前端對接有了一個大概的認識了。

ABP+Swagger負責API接口的開發和公佈，以下是API接口的管理界面。

進一步查看GetAll的API接口說明，咱們能夠看到對應的條件參數，以下所示。

這些是做爲查詢條件的處理，用來給後端獲取對應的條件信息，從而過濾返回的數據記錄的。

那麼咱們前端界面也須要根據這些參數來構造查詢界面，咱們能夠經過部分條件進行處理便可，其中MaxResultCount和SkipCount是用於分頁定位的參數。

前端界面代碼以下所示。

主要就是構造一個條件查詢的表單以下所示。

其中定義了一個searchForm的屬性，那麼咱們能夠了解下它的定義。

而後咱們在查詢處理的函數getlist裏面，就能夠根據這些條件，以及分頁參數進行數據的請求查詢了，以下代碼所示。

    getlist() { // 列表數據獲取
      var param = { // 構造常規的分頁查詢條件
        SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize, MaxResultCount: this.pageinfo.pagesize, // 過濾條件
        Name: this.searchForm.name,
        Remark: this.searchForm.remark,
        DictType_ID: this.searchForm.dictType_ID
      };

      // 獲取產品列表，綁定到模型上，並修改分頁數量
      this.listLoading = true
      dictdata.GetAll(param).then(data => {
        this.list = data.result.items
        this.pageinfo.total = data.result.totalCount
        this.listLoading = false
      })
    },

其中的dictdata.GetAll就是調用API模塊裏面的函數進行處理，是咱們在視圖頁面類中導入這些API類的定義的。

// 業務API對象
import dicttype from '@/api/dicttype'
import dictdata from '@/api/dictdata'

咱們對於DictDataApi的JS類定義以下所示。

其中JS類的BaseApi具備常規的增刪改查接口，以下所示。

其中list是列表的數據，pageinfo是分頁信息，那麼咱們在前端的列表展現界面代碼以下所示。

        <el-table
          v-loading="listLoading" :data="list"
          border
          fit
          stripe
          highlight-current-row
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          @selection-change="selectionChange"
          @row-dblclick="rowDbclick"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="字典名稱">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="字典值">
            <template slot-scope="scope">
              {{ scope.row.value }}
            </template>
          </el-table-column>
          <el-table-column label="備註">
            <template slot-scope="scope">
              {{ scope.row.remark }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="排序" width="80">
            <template slot-scope="scope">
              {{ scope.row.seq }}
            </template>
          </el-table-column>
          <el-table-column label="操做" width="140">
            <template scope="scope">
              <el-row>
                <el-tooltip effect="light" content="查看" placement="top-start">
                  <el-button icon="el-icon-search" type="success" circle size="mini" @click="showView(scope.row.id)" />
                </el-tooltip>
                <el-tooltip effect="light" content="編輯" placement="top-start">
                  <el-button icon="el-icon-edit" type="primary" circle size="mini" @click="showEdit(scope.row.id)" />
                </el-tooltip>
                <el-tooltip effect="light" content="刪除" placement="top-start">
                  <el-button icon="el-icon-delete" type="danger" circle size="mini" @click="showDelete(scope.row.id)" />
                </el-tooltip>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <div class="block" style="height:70px;">
          <el-pagination
            :current-page="pageinfo.pageindex"
            :page-size="pageinfo.pagesize"
            :total="pageinfo.total"
            :page-sizes="[10,20,30,40]"
            layout="total, sizes, prev, pager, next"
            @size-change="sizeChange"
            @current-change="currentChange"
          />
        </div>