Vue Element前端應(yīng)用開發(fā)之前端API接口的封裝

更新時(shí)間：2021年05月13日 10:23:31 作者：伍華聰

對整個(gè)系統(tǒng)來說，一般會有很多業(yè)務(wù)對象，而每個(gè)業(yè)務(wù)對象的API接口又有很多。我們這個(gè)VUE+Element 前端應(yīng)用就是針對ABP框架的業(yè)務(wù)對象，因此前端的業(yè)務(wù)對象接口也是比較統(tǒng)一的，那么可以考慮在前端中對后端API接口調(diào)用進(jìn)行封裝，引入ES6的方式進(jìn)行前端API的抽象簡化。

1、ABP框架API接口的回顧

ABP是ASP.NET Boilerplate的簡稱，ABP是一個(gè)開源且文檔友好的應(yīng)用程序框架。ABP不僅僅是一個(gè)框架，它還提供了一個(gè)最徍實(shí)踐的基于領(lǐng)域驅(qū)動設(shè)計(jì)(DDD)的體系結(jié)構(gòu)模型。

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

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

Vue + Element前端項(xiàng)目的視圖、Store模塊、API模塊、Web API之間關(guān)系如下所示。

前面介紹了，一般前端調(diào)用，通過前端API類的封裝，即可發(fā)起對后端API接口的調(diào)用，如系統(tǒng)登錄API定義如下代碼所示。

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

按照常規(guī)的API類的處理，我們對應(yīng)的業(yè)務(wù)類，就需要定義很多這樣的函數(shù)，如之前介紹產(chǎn)品信息處理的API接口一樣。

由于常規(guī)的增刪改查，都是標(biāo)準(zhǔn)的API接口，那么如果我們按照每個(gè)API類都需要重復(fù)定義這些API，顯然不妥，太臃腫。

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

2、基于ES6的JS業(yè)務(wù)類的封裝

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

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

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

基本上，ES6 的class可以看作只是一個(gè)語法糖，它的絕大部分功能，ES5 都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法而已。上面的代碼用 ES6 的class改寫，就是下面這樣。

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

上面代碼定義了一個(gè)“類”，可以看到里面有一個(gè)constructor方法，這就是構(gòu)造方法，而this關(guān)鍵字則代表實(shí)例對象。也就是說，ES5 的構(gòu)造函數(shù)Point，對應(yīng) ES6 的Point類的構(gòu)造方法。

Point類除了構(gòu)造方法，還定義了一個(gè)toString方法。注意，定義“類”的方法的時(shí)候，前面不需要加上function這個(gè)關(guān)鍵字，直接把函數(shù)定義放進(jìn)去了就可以了。另外，方法之間不需要逗號分隔，加了會報(bào)錯(cuò)。

Class 可以通過extends關(guān)鍵字實(shí)現(xiàn)繼承，這比 ES5 的通過修改原型鏈實(shí)現(xiàn)繼承，要清晰和方便很多。

class Point {
}

class ColorPoint extends Point {
}

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

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

// 定義框架里面常用的API接口：Get/GetAll/Create/Update/Delete/Count等
export default class BaseApi {
  constructor(baseurl) {
    this.baseurl = baseurl
  }

  // 獲取指定的單個(gè)記錄
  Get(data) {
    return request({
      url: this.baseurl + 'Get',
      method: 'get',
      params: data
    })
  }

  // 根據(jù)條件獲取所有記錄
  GetAll(data) {
    return request({
      url: this.baseurl + 'GetAll',
      method: 'get',
      params: data
    })
  }

  // 創(chuàng)建記錄
  Create(data) {
    return request({
      url: this.baseurl + 'Create',
      method: 'post',
      data: data
    })
  }

  // 更新記錄
  Update(data) {
    return request({
      url: this.baseurl + 'Update',
      method: 'put',
      data: data
    })
  }

  // 刪除指定數(shù)據(jù)
  Delete(data) {
    return request({
      url: this.baseurl + 'Delete',
      method: 'delete',
      params: data
    })
  }

  // 獲取條件記錄數(shù)量
  Count(data) {
    return request({
      url: this.baseurl + 'Count',
      method: 'post',
      data: data
    })
  }
}

以上我們定義了很多常規(guī)的ABP后端接口的封裝處理，其中我們調(diào)用的地址通過組合的方式處理，而具體的地址則交由子類（業(yè)務(wù)對象API）進(jìn)行賦值處理。

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

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

通過一行代碼exportdefaultnewApi('/abp/services/app/dictdata/') 就可以構(gòu)造一個(gè)子類實(shí)例供使用了。

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

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

有了這些準(zhǔn)備，我們就可以在視圖頁面類中導(dǎo)入這些定義，并使用JS類了。

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

加入我們要在視圖頁面中查詢結(jié)果，直接就可以通過使用dictdata或者dicttype對象來實(shí)現(xiàn)對應(yīng)的API調(diào)用，如下代碼所示。

getlist() {
      // 構(gòu)造常規(guī)的分頁查詢條件
      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
      };

      // 獲取產(chǎn)品列表，綁定到模型上，并修改分頁數(shù)量
      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('您確認(rèn)刪除選定類型嗎?', '操作提示',
        {
          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: '刪除成功!'
            })
            // 刷新數(shù)據(jù)
            this.getTree();
          }
        })
      })
    }

最后我們來看看使用這些接口處理，對字典管理界面的實(shí)現(xiàn)。