按部就班VUE+Element 前端應用開發(13）--- 前端API接口的封裝處理

時間 2020-07-06

標籤按部就班 vue+element vue element 前端應用開發 api 接口封裝處理欄目軟件設計简体版

原文原文鏈接

在前面隨筆《按部就班VUE+Element 前端應用開發(12）--- 整合ABP框架的前端登陸處理》介紹了一個系統最初接觸到的前端登陸處理的實現，但每每對整個系統來講，通常會有不少業務對象，而每一個業務對象的API接口又有不少，不過簡單來講也就是常規的增刪改查，以及一些自定義的接口，通用都比較有規律性。而自己咱們這個VUE+Element 前端應用就是針對ABP框架的業務對象，所以前端的業務對象接口也是比較統一的，那麼能夠考慮在前端中對後端API接口調用進行封裝，引入ES6的方式進行前端API的抽象簡化。本篇隨筆主要針對這個方面，介紹前端API接口的封裝處理，以便簡化咱們大量相似的業務接口的累贅代碼實現。html

一、ABP框架API接口的回顧

ABP是ASP.NET Boilerplate的簡稱，ABP是一個開源且文檔友好的應用程序框架。ABP不只僅是一個框架，它還提供了一個最徍實踐的基於領域驅動設計(DDD)的體系結構模型。前端

啓動Host的項目，咱們能夠看到Swagger的管理界面以下所示。es6

上圖就是ABP後端框架的API接口的查看頁面，從上圖能夠看到，通常業務對象，都有Get、GetAll、Create、Update、Delete等常見接口，因爲這些接口是給前端進行調用的。編程

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

前面介紹了，通常前端調用，經過前端API類的封裝，便可發起對後端API接口的調用，如系統登陸API定義以下代碼所示。api

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

按照常規的API類的處理，咱們對應的業務類，就須要定義不少這樣的函數，如以前介紹產品信息處理的API接口同樣。app

因爲常規的增刪改查，都是標準的API接口，那麼若是咱們按照每一個API類都須要重複定義這些API，顯然不妥，太臃腫。框架

若是是常規的JS，那麼就以公佈函數方式定義API接口，不過咱們能夠引入ES6的處理方式，在JS中引入類和繼承的概念進行處理相同的API接口封裝。函數

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

關於ES6，你們能夠有空了解一下《ES6 入門教程》，能夠全面瞭解ES6不少語法和相關概念。post

不過這裏只須要了解一下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 => { 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();
          }
        })
      })
    }