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

循序渐进VUE+Element 前端应用开发(13）--- 前端API接口的封装处理的更多相关文章

1. 示例浅谈PHP与手机APP开发，即API接口开发

   示例浅谈PHP与手机APP开发,即API接口开发 API(Application Programming Interface,应用程序接口)架构,已经成为目前互联网产品开发中常见的软件架构模式,并且诞 ...

2. Atitit mybatis快速开发 的sql api接口

   Atitit mybatis快速开发 的sql api接口 1.1. sql模式 开发速度大大快与 映射模式1 1.2. MyBatis Mapper1 1.2.1. 代码2 1.2.2. 原理2 1 ...

3. spring boot + vue + element-ui全栈开发入门——前端编辑数据对话框

    需求 1.点击“添加”按钮,弹出录入数据的对话框窗口,并录入数据,如果数据有误则不允许提交.数据填写完毕后,点击“保存”按钮,调用http协议提交数据,提交完毕刷新页面数据.点击“取消”按钮关闭对话 ...

4. Vue + Element UI 实现权限管理系统 前端篇（十六）：系统备份还原

   系统备份还原 在很多时候,我们需要系统数据进行备份还原.我们这里就使用MySql的备份还原命令实现系统备份还原的功能. 后台接口准备 系统备份还原是对数据库的备份还原,所以必须有后台接口的支持,我们准 ...

5. 开放平台（接口）开发-1-天气API接口大全

    前几天有个公司让准备一下第二次面试.应聘的是IOS开发实习生,可是之前一直做android,IOS刚接触了一个月,会的不是非常多,所以决定做一个实际的项目展现给面试官,余同学给了个建议:能够做一 ...

6. Vue + Element UI 实现权限管理系统 前端篇（一）：搭建开发环境

   技术基础 开发之前,请先熟悉下面的4个文档 vue.js2.0中文, 优秀的JS框架 vue-router, vue.js 配套路由 vuex,vue.js 应用状态管理库 Element,饿了么提供 ...

7. springboot+vue+element：echarts开发遇见问题---vue前端(二)

   <template> <u-grid> <u-grid-item caption="服务使用统计排行"> <div class=" ...

8. Vue + Element UI 实现权限管理系统 前端篇（四）：优化登录流程

   完善登录流程 1. 丰富登录界面 1.1 从 Element 指南中选择组件模板丰富登录界面,放置一个登录界面表单,包含账号密码输入框和登录重置按钮. <template> <el- ...

9. Vue + Element UI 实现权限管理系统 前端篇（九）：接口格式定义

   接口请求格式定义 前台显示需要后台数据,我们这里先把前后端交互接口定义好,没有后台的时候,也方便用mock模拟. 接口定义遵循几个规范: 1. 接口按功能模块划分. 系统登录:登录相关接口 用户管理: ...

10. Vue + Element UI 实现权限管理系统 前端篇（八）：管理应用状态

    使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的,但是因为组件封装的原因,隐藏按钮在头部组件,而导航菜单在导航菜单组件,这样就涉及到了组件收缩状态的共享问题.收缩 ...

随机推荐

1. 转载：Solr的自动完成实现方式（第二部分：Suggester方式）

   转自:http://www.cnblogs.com/ibook360/archive/2011/11/30/2269077.html 在Solr的自动完成/自动补充实现介绍(第一部分) 中我介绍了怎么 ...

2. IMX6下移植WKxxx驱动

   wkXXX.c #include<linux/init.h> #include <linux/module.h> #include <linux/kernel.h> ...

3. 当我们安装使用时，会出现eclipse启动不了，出现“Java was started but returned exit code=13......”的问题

   安装win8.1后,启动eclipse,也会提示 "java was started but returned exit code=13" 可能是eclipse.ini配置文件错误 ...

4. Linux Shell编程（10）——引用变量

   当要引用一个变量的值时,一般推荐使用双引号.使用双引号除了变量名前缀($).后引符(`)和转义符(\)外,会使shell不再解释引号中其它所有的特殊字符.用双引号时$仍被当成特殊字符,允许引用一个被双 ...

5. js中arguments的应用

   Javascrip中的每个函数都会有一个Arguments对象实例arguments,它引用着函数的实参,可以用数组下标的方式"[]"引用arguments的元素.argument ...

6. LoadRunner编写Socket协议脚本方法

   本文主要介绍使用LoadRunner手工编写Windows Socket协议测试脚本的方法. 通过LoadRunner编写Windows Socket协议测试脚本,总体说来,比较简单.就像把大象放进冰 ...

7. scala 访问阿里云oss

   我们的数据一天就一个T,数据量不断增大,集群磁盘有限,所以把冷数据放到了oss,偶尔会使用到冷数据,如果使用的时候还的从oss上拉数据这样很浪费时间后来想了个办法可以直接获取到oss上的数据.案例:o ...

8. 基于ZigBee模块与51单片机之间的简化智能家居项目简介（学生版本）

   5月份学校举行比赛,我们团队报名<智能家居>的项目,设计的总体思路用:QT写的上位机与ZigBee无线通信加51作为终端的简易版智能家居 电路连接:PC机->cc2530(协调器)- ...

9. (find) nyoj5-Binary String Matching

   5-Binary String Matching 内存限制:64MB 时间限制:3000ms 特判: No通过数:232 提交数:458 难度:3 题目描述: Given two strings A ...

10. 终于做完了这个pj

    首先要说这个博客网站实在是功能太弱!不知道为什么还要每次写博客.直接交作业不好吗- -b 1.估计时间: 看见这个任务就觉得很难啊,估计装vs2012就得半天,然后上学期选修的c++基本上都忘光了,本 ...