概述

ABP（ASP.NET Boilerplate）框架主要是基于.net core 進(jìn)行的后端Web API的開(kāi)發(fā)，結(jié)合Swagger的管理界面我們可以看到發(fā)布的 API 的接口明細(xì)信息，這樣前端技術(shù)人員可以很容易整合前端的API應(yīng)用。Vue + Element的前端應(yīng)用，是目前較為流行的前端技術(shù)整合，Vue提供了前端框架很好的支持，Element提供了非常不錯(cuò)的界面組件封裝和處理，通過(guò)ABP后端API接口和前端Vue+Element的整合，可以很好實(shí)現(xiàn)前后端的分離處理，同時(shí)又極大提高各自開(kāi)發(fā)過(guò)程，并利用最新、應(yīng)用廣泛的技術(shù)來(lái)實(shí)現(xiàn)最好的技術(shù)應(yīng)用。

1、ABP接口和前端對(duì)接處理

ABP框架主要還是基于領(lǐng)域驅(qū)動(dòng)的理念來(lái)構(gòu)建整個(gè)架構(gòu)的，其中領(lǐng)域驅(qū)動(dòng)包含的概念有 域?qū)ο驟ntities、倉(cāng)儲(chǔ)對(duì)象Repositories、域服務(wù)接口層Domain Services、域事件Domain Events、應(yīng)用服務(wù)接口Application Services、數(shù)據(jù)傳輸對(duì)象DTOs等。

ABP官方網(wǎng)站：http://www.aspnetboilerplate.com，從里面可以查看很詳細(xì)的案例和文檔說(shuō)明，可以根據(jù)需要下載不同類(lèi)型的基礎(chǔ)框架。

ABP GitHub源碼地址：https://github.com/aspnetboilerplate，可以下載整個(gè)基礎(chǔ)的框架內(nèi)容，以及相關(guān)的樣板案例代碼。

整理后的ABP快速開(kāi)發(fā)框架的架構(gòu)圖示，如下圖所示（以字典模塊為例說(shuō)明）

針對(duì)Web API接口調(diào)用的封裝，為了適應(yīng)客戶(hù)端快速調(diào)用的目的，這個(gè)封裝作為一個(gè)獨(dú)立的封裝層，以方便各個(gè)模塊之間進(jìn)行共同調(diào)用。

在基于VUE+Element 前端應(yīng)用中，上圖的ApiCaller組件，其實(shí)就是我們封裝的API的JS類(lèi)，同時(shí)也有相關(guān)的繼承封裝處理，類(lèi)似C#中類(lèi)的繼承關(guān)系了。

在JS里面引入了ES6的語(yǔ)法，JS函數(shù)就可以使用類(lèi)的方式來(lái)實(shí)現(xiàn)各種基礎(chǔ)接口的封裝和子類(lèi)的繼承關(guān)系了。

例如我們先定義好JS中常規(guī)的API封裝接口BaseApi類(lèi)，然后定義子類(lèi)有DIctType、DictData等業(yè)務(wù)類(lèi)，那么這些類(lèi)繼承BaseApi，就會(huì)具有相關(guān)的接口了，如下所示繼承關(guān)系。

這些API類(lèi)的文件視圖如下所示。

有了這些業(yè)務(wù)類(lèi)的準(zhǔn)備，那么我們和后端ABP的API接口對(duì)接，就很容易了，如下圖所示。

一般來(lái)說(shuō)，我們頁(yè)面模塊可能會(huì)涉及到Store模塊，用來(lái)存儲(chǔ)對(duì)應(yīng)的狀態(tài)信息，也可能是直接訪(fǎng)問(wèn)API模塊，實(shí)現(xiàn)數(shù)據(jù)的調(diào)用并展示。在頁(yè)面開(kāi)發(fā)過(guò)程中，多數(shù)情況下，不需要Store模塊進(jìn)行交互，一般只需要存儲(chǔ)對(duì)應(yīng)頁(yè)面數(shù)據(jù)為全局?jǐn)?shù)據(jù)狀態(tài)的情況下，才可能啟用Store模塊的處理。

通過(guò)WebProxy代理的處理，我們可以很容易在前端中實(shí)現(xiàn)跨域的處理，不同的路徑調(diào)用不同的域名地址API都可以，最終轉(zhuǎn)換為本地的API調(diào)用，這就是跨域的處理操作。

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

有了上面的一些知識(shí)準(zhǔn)備，相信對(duì)ABP+Vue+Element的前端對(duì)接有了一個(gè)大概的認(rèn)識(shí)了。

ABP+Swagger負(fù)責(zé)API接口的開(kāi)發(fā)和公布，如下是API接口的管理界面。

進(jìn)一步查看GetAll的API接口說(shuō)明，我們可以看到對(duì)應(yīng)的條件參數(shù)，如下所示。

這些是作為查詢(xún)條件的處理，用來(lái)給后端獲取對(duì)應(yīng)的條件信息，從而過(guò)濾返回的數(shù)據(jù)記錄的。

那么我們前端界面也需要根據(jù)這些參數(shù)來(lái)構(gòu)造查詢(xún)界面，我們可以通過(guò)部分條件進(jìn)行處理即可，其中MaxResultCount和SkipCount是用于分頁(yè)定位的參數(shù)。

前端界面代碼如下所示。

主要就是構(gòu)造一個(gè)條件查詢(xún)的表單如下所示。

其中定義了一個(gè)searchForm的屬性，那么我們可以了解下它的定義。

然后我們?cè)诓樵?xún)處理的函數(shù)getlist里面，就可以根據(jù)這些條件，以及分頁(yè)參數(shù)進(jìn)行數(shù)據(jù)的請(qǐng)求查詢(xún)了，如下代碼所示。

getlist() { // 列表數(shù)據(jù)獲取
      var param = { // 構(gòu)造常規(guī)的分頁(yè)查詢(xún)條件
        SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,
        MaxResultCount: this.pageinfo.pagesize,
        // 過(guò)濾條件
        Name: this.searchForm.name,
        Remark: this.searchForm.remark,
        DictType_ID: this.searchForm.dictType_ID
      };

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

其中的dictdata.GetAll就是調(diào)用API模塊里面的函數(shù)進(jìn)行處理，是我們?cè)谝晥D頁(yè)面類(lèi)中導(dǎo)入這些API類(lèi)的定義的。

// 業(yè)務(wù)API對(duì)象
import dicttype from '@/api/dicttype'
import dictdata from '@/api/dictdata'

我們對(duì)于DictDataApi的JS類(lèi)定義如下所示。

其中JS類(lèi)的BaseApi具有常規(guī)的增刪改查接口，如下所示。

其中l(wèi)ist是列表的數(shù)據(jù)，pageinfo是分頁(yè)信息，那么我們?cè)谇岸说牧斜碚故窘缑娲a如下所示。

<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="字典名稱(chēng)">
            <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>

這樣就可以簡(jiǎn)單實(shí)現(xiàn)列表的查詢(xún)和展示了。

當(dāng)然我們一般情況下，可能有一些列表用來(lái)進(jìn)行數(shù)據(jù)過(guò)濾處理的，如這里的字典類(lèi)型，可以通過(guò)樹(shù)列表的進(jìn)行展示，從而可以友好的管理不同類(lèi)型的字典數(shù)據(jù)，如下是整合了樹(shù)形列表的查詢(xún)處理過(guò)程，界面相對(duì)復(fù)雜一些，不過(guò)原理差不多，都是根據(jù)條件進(jìn)行API數(shù)據(jù)的請(qǐng)求，然后展示在列表中即可。

完整的對(duì)字典管理界面的實(shí)現(xiàn)。

其中包括對(duì)字典大類(lèi)的維護(hù)，以及對(duì)應(yīng)字典大類(lèi)的數(shù)據(jù)列表數(shù)據(jù)的添加處理。

以上就是Vue Element前端應(yīng)用開(kāi)發(fā)之根據(jù)ABP后端接口實(shí)現(xiàn)前端展示的詳細(xì)內(nèi)容，更多關(guān)于Vue Element之根據(jù)ABP后端接口實(shí)現(xiàn)前端展示的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論