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

在前面隨筆《循序漸進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類定義如下所示，

通過一行代碼 export default new Api('/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 =https://www.cnblogs.com/wuhuacong/p/> {
        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();
          }
        })
      })
    }

最后我們來看看使用這些介面處理，對字典管理界面的實作，

為了方便讀者理解，我列出一下前面幾篇隨筆的連接，供參考：

循序漸進VUE+Element 前端應用開發(1）--- 開發環境的準備作業

循序漸進VUE+Element 前端應用開發(2）--- Vuex中的API、Store和View的使用

循序漸進VUE+Element 前端應用開發(3）--- 動態選單和路由的關聯處理

循序漸進VUE+Element 前端應用開發(4）--- 獲取后端資料及產品資訊頁面的處理

循序漸進VUE+Element 前端應用開發(5）--- 表格串列頁面的查詢，串列展示和欄位轉義處理

循序漸進VUE+Element 前端應用開發(6）--- 常規Element 界面組件的使用

循序漸進VUE+Element 前端應用開發(7）--- 介紹一些常規的JS處理函式

循序漸進VUE+Element 前端應用開發(8）--- 樹串列組件的使用

循序漸進VUE+Element 前端應用開發(9）--- 界面語言國際化的處理

循序漸進VUE+Element 前端應用開發(10）--- 基于vue-echarts處理各種圖表展示

循序漸進VUE+Element 前端應用開發(11）--- 圖示的維護和使用

循序漸進VUE+Element 前端應用開發(12）--- 整合ABP框架的前端登錄處理

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

循序漸進VUE+Element 前端應用開發(14）--- 根據ABP后端介面實作前端界面展示

循序漸進VUE+Element 前端應用開發(15）--- 用戶管理模塊的處理

循序漸進VUE+Element 前端應用開發(16）--- 組織機構和角色管理模塊的處理

循序漸進VUE+Element 前端應用開發(17）--- 選單管理

循序漸進VUE+Element 前端應用開發(18）--- 功能點管理及權限控制

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/14809.html

標籤：Html/Css

上一篇：十位大牛做出的web前端開發規范總結

下一篇：初識web