ABP是ASP.NET Boilerplate的簡稱，ABP是一個開源且文檔友好的應用程序框架。ABP不僅僅是一個框架，它還提供了一個最?菏導?幕?諏煊蚯??杓?DDD)的體系結構模型。

啟動Host的項目，我們可以看到Swagger的管理界面如下所示。

上圖就是ABP后端框架的API接口的查看頁面，從上圖可以看到，一般業務對象，都有Get、GetAll、Create、Update、Delete等常見接口，由于這些接口是給前端進行調用的。

Vue + Element前端項目的視圖、Store模塊、API模塊、Web API之間關系如下所示。

前面介紹了，一般前端調用，通過前端API類的封裝，即可發起對后端API接口的調用，如系統登錄API定義如下代碼所示。

export function getInfo(id) { return request({ url: ’/abp/services/app/User/Get’, method: ’get’, params: { id } })}

按照常規的API類的處理，我們對應的業務類，就需要定義很多這樣的函數，如之前介紹產品信息處理的API接口一樣。

由于常規的增刪改查，都是標準的API接口，那么如果我們按照每個API類都需要重復定義這些API，顯然不妥，太臃腫。

如果是常規的JS，那么就以公布函數方式定義API接口，不過我們可以引入ES6的處理方式，在JS中引入類和繼承的概念進行處理相同的API接口封裝。

關于ES6，大家可以有空了解一下《ES6 入門教程》，可以全面了解ES6很多語法和相關概念。

不過這里只需要了解一下JS里面關于類的定義和繼承的處理關系即可。

ES6 提供了更接近傳統語言的寫法，引入了 Class（類）這個概念，作為對象的模板。通過class關鍵字，可以定義類。

基本上，ES6 的class可以看作只是一個語法糖，它的絕大部分功能，ES5 都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。上面的代碼用 ES6 的class改寫，就是下面這樣。

class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return ’(’ + this.x + ’, ’ + this.y + ’)’; }}

上面代碼定義了一個“類”，可以看到里面有一個constructor方法，這就是構造方法，而this關鍵字則代表實例對象。也就是說，ES5 的構造函數Point，對應 ES6 的Point類的構造方法。

Point類除了構造方法，還定義了一個toString方法。注意，定義“類”的方法的時候，前面不需要加上function這個關鍵字，直接把函數定義放進去了就可以了。另外，方法之間不需要逗號分隔，加了會報錯。

Class 可以通過extends關鍵字實現繼承，這比 ES5 的通過修改原型鏈實現繼承，要清晰和方便很多。

class Point {}class ColorPoint extends Point {}

上面代碼定義了一個ColorPoint類，該類通過extends關鍵字，繼承了Point類的所有屬性和方法。

有了這些知識準備，那么我們來定義一個API接口的封裝類，如下 base-api.js 代碼所示。

// 定義框架里面常用的API接口：Get/GetAll/Create/Update/Delete/Count等export default class BaseApi { constructor(baseurl) { this.baseurl = baseurl } // 獲取指定的單個記錄 Get(data) { return request({ url: this.baseurl + ’Get’, method: ’get’, params: data }) } // 根據條件獲取所有記錄 GetAll(data) { return request({ url: this.baseurl + ’GetAll’, method: ’get’, params: data }) } // 創建記錄 Create(data) { return request({ url: this.baseurl + ’Create’, method: ’post’, data: data }) } // 更新記錄 Update(data) { return request({ url: this.baseurl + ’Update’, method: ’put’, data: data }) } // 刪除指定數據 Delete(data) { return request({ url: this.baseurl + ’Delete’, method: ’delete’, params: data }) } // 獲取條件記錄數量 Count(data) { return request({ url: this.baseurl + ’Count’, method: ’post’, data: data }) }}

以上我們定義了很多常規的ABP后端接口的封裝處理，其中我們調用的地址通過組合的方式處理，而具體的地址則交由子類（業務對象API）進行賦值處理。

加入我們定義子類有DIctType、DictData等業務類，那么這些類繼承BaseApi，就會具有相關的接口了，如下所示繼承關系。

例如，我們對于DictDataApi的JS類定義如下所示。

通過一行代碼exportdefaultnewApi(’/abp/services/app/dictdata/’) 就可以構造一個子類實例供使用了。

對于DictTypeApi來說，處理方式也是類似，繼承自基類，并增加一些自己的接口實現即可。

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

有了這些準備，我們就可以在視圖頁面類中導入這些定義，并使用JS類了。

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

加入我們要在視圖頁面中查詢結果，直接就可以通過使用dictdata或者dicttype對象來實現對應的API調用，如下代碼所示。

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 }) }

或者如下代碼所示。

// 刪除指定字典類型 deleteDictType() { if (!this.searchForm.dictType_ID || typeof (this.searchForm.dictType_ID) === ’undefined’) {return; } this.$confirm(’您確認刪除選定類型嗎?’, ’操作提示’,{ type: ’warning’ // success，error，info，warning // confirmButtonText: ’確定’, // cancelButtonText: ’取消’} ).then(() => {var param = { id: this.searchForm.dictType_ID }dicttype.Delete(param).then(data => { if (data.success) { // 提示信息 this.$message({ type: ’success’, message: ’刪除成功!’ }) // 刷新數據 this.getTree(); }}) }) }

最后我們來看看使用這些接口處理，對字典管理界面的實現。

以上就是Vue Element前端應用開發之前端API接口的封裝的詳細內容，更多關于Vue Element之前端API接口的封裝的資料請關注好吧啦網其它相關文章！