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

上面代码定义了一个“类”，可以看到里面有一个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: ‘取消’

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法