循序漸進VUE+Element 前端應用開發(13）--- 前端API介面的封裝處理

阿新 • • 發佈：2020-06-30

在前面隨筆《循序漸進VUE+Element 前端應用開發(12）--- 整合ABP框架的前端登入處理》介紹了一個系統最初接觸到的前端登入處理的實現，但往往對整個系統來說，一般會有很多業務物件，而每個業務物件的API介面又有很多，不過簡單來說也就是常規的增刪改查，以及一些自定義的介面，通用都比較有規律性。而本身我們這個VUE+Element 前端應用就是針對ABP框架的業務物件，因此前端的業務物件介面也是比較統一的，那麼可以考慮在前端中對後端API介面呼叫進行封裝，引入ES6的方式進行前端API的抽象簡化。本篇隨筆主要針對這個方面，介紹前端API介面的封裝處理，以便簡化我們大量類似的業務介面的累贅程式碼實現。

1、ABP框架API介面的回顧

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介面封裝。

2、基於ES6的JS業務類的封裝

關於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.items

        this.pageinfo.total = data.result.totalCount

        this.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();

          }

        })

      })

    }