按部就班VUE+Element 前端应用开发(13）--- 前端API接口的封装处理

在前面随笔《按部就班VUE+Element 前端应用开发(12）--- 整合ABP框架的前端登陆处理》介绍了一个系统最初接触到的前端登陆处理的实现，但每每对整个系统来讲，通常会有不少业务对象，而每一个业务对象的API接口又有不少，不过简单来讲也就是常规的增删改查，以及一些自定义的接口，通用都比较有规律性。而自己咱们这个VUE+Element 前端应用就是针对ABP框架的业务对象，所以前端的业务对象接口也是比较统一的，那么能够考虑在前端中对后端API接口调用进行封装，引入ES6的方式进行前端API的抽象简化。本篇随笔主要针对这个方面，介绍前端API接口的封装处理，以便简化咱们大量相似的业务接口的累赘代码实现。

一、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接口封装。

 

二、基于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 => { 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 前端应用开发(11）--- 图标的维护和使用

按部就班VUE+Element 前端应用开发(12）--- 整合ABP框架的前端登陆处理