循序渐进VUE+Element 前端应用开发(13)— 前端API接口的封装处理,循序渐进VUE+Element 前端应用开发(12)— 整合ABP框架的前端登录处理,循序渐进VUE+Element 前端应用开发(5)— 表格列表页面的查询,列表展示和字段转义处理,循序渐进VUE+Element 前端应用开发(9)— 界面语言国际化的处理,循序渐进VUE+Element 前端应用开发(11)— 图标的维护和使用,循序渐进VUE+Element 前端应用开发(12)— 整合ABP框架的前端登录处理

在前面随笔《循序渐进VUE+Element 前端应用开发(12)— 整合ABP框架的前端登录处置》先容了一个系统最初接触到的前端登录处置的实现,但往往对整个系统来说,一样平常会有许多营业工具,而每个营业工具的API接口又有许多,不外简朴来说也就是通例的增删改查,以及一些自界说的接口,通用都对照有规律性。而自己我们这个VUE+Element 前端应用就是针对ABP框架的营业工具,因此前端的营业工具接口也是对照统一的,那么可以思量在前端中对后端API接口挪用举行封装,引入ES6的方式举行前端API的抽象简化。本篇随笔主要针对这个方面,先容前端API接口的封装处置,以便简化我们大量类似的营业接口的累赘代码实现。

1、ABP框架API接口的回首

ABP是ASP.NET Boilerplate的简称,ABP是一个开源且文档友好的应用程序框架。ABP不仅仅是一个框架,它还提供了一个最徍实践的基于领域驱动设计(DDD)的体系结构模子。

启动Host的项目,我们可以看到Swagger的治理界面如下所示。

循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理,循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理,循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理,循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理

上图就是ABP后端框架的API接口的查看页面,从上图可以看到,一样平常营业工具,都有Get、GetAll、Create、Update、Delete等常见接口,由于这些接口是给前端举行挪用的。

Vue + Element前端项目的视图、Store模块、API模块、Web API之间关系如下所示。

循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理,循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理,循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理,循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理

前面先容了,一样平常前端挪用,通过前端API类的封装,即可提议对后端API接口的挪用,如系统登录API界说如下代码所示。

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

凭据通例的API类的处置,我们对应的营业类,就需要界说许多这样的函数,如之前先容产物信息处置的API接口一样。

循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理,循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理,循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理,循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理

 由于通例的增删改查,都是尺度的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,就会具有相关的接口了,如下所示继续关系。

循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理,循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理,循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理,循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理

 例如,我们对于DictDataApi的JS类界说如下所示。

QT Json

循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理,循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理,循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理,循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理

 通过一行代码 export default new Api(‘/abp/services/app/dictdata/’) 就可以组织一个子类实例供使用了。

对于DictTypeApi来说,处置方式也是类似,继续自基类,并增添一些自己的接口实现即可。

循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理,循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理,循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理,循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理

 这些API类的文件视图如下所示。

循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理,循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理,循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理,循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理

 有了这些准备,我们就可以在视图页面类中导入这些界说,并使用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 前端应用开发(13)--- 前端API接口的封装处理,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理,循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理,循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理,循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理

循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理,循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理,循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理,循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理

 

 循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理,循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理,循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理,循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理

列出一下前面几篇随笔的毗邻,供参考:

循序渐进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框架的前端登录处置

 

原创文章,作者:870t新闻网,如若转载,请注明出处:https://www.870t.com/archives/19238.html