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

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

ABP官方網站：http://www.aspnetboilerplate.com，從里面可以查看很詳細的案例和文檔說明，可以根據需要下載不同類型的基礎框架。

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

整理后的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+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.itemsthis.pageinfo.total = data.result.totalCountthis.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- @selection-change='selectionChange' @row-dblclick='rowDbclick'> <el-table-column type='selection' /> <el-table-column label='字典名稱'> <template slot-scope='scope'> {{ scope.row.name }} </template> </el-table-column> <el-table-column 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 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 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>

這樣就可以簡單實現列表的查詢和展示了。

當然我們一般情況下，可能有一些列表用來進行數據過濾處理的，如這里的字典類型，可以通過樹列表的進行展示，從而可以友好的管理不同類型的字典數據，如下是整合了樹形列表的查詢處理過程，界面相對復雜一些，不過原理差不多，都是根據條件進行API數據的請求，然后展示在列表中即可。

完整的對字典管理界面的實現。

其中包括對字典大類的維護，以及對應字典大類的數據列表數據的添加處理。

以上就是Vue Element前端應用開發之根據ABP后端接口實現前端展示的詳細內容，更多關于Vue Element之根據ABP后端接口實現前端展示的資料請關注好吧啦網其它相關文章！