vue项目封装api接口,
对于整个系统来说，通常会有很多业务对象，每个业务对象都有很多API接口。我们的VUE元素前端应用是针对ABP框架的业务对象的，所以前端业务对象接口比较统一。所以，我们可以考虑将后端API接口调用封装在前端，引入ES6对前端API进行抽象和简化。
:
目录
1.ABP框架2 API接口综述。基于ES6的JS业务类封装
1、ABP框架API接口的回顾
ABP是ASP.NET样板的缩写。ABP是一个开源和文档友好的应用框架。ABP不仅是一个框架，而且提供了一个基于DDD的最实用的架构模型。
启动Host的项目，我们可以看到如下图的Swagger的管理界面。
上图是ABP后端框架API接口的查看页面。从上图可以看出，一般的业务对象都有Get、GetAll、Create、Update、Delete等通用接口。因为这些接口被调用到前端。
VuElement前端项目的视图、存储模块、API模块、Web API之间的关系如下。
如前所述，一般前端调用可以通过前端API类的封装来发起对后端API接口的调用，如下面的系统登录API定义代码所示。
导出函数getInfo(id) {
退货请求({
URL:“/ABP/services/app/User/Get”，
方法：“get”，
参数：{
编号
}
})
}
按照常规的API类处理，我们对应的业务类需要定义很多这样的函数，比如前面介绍的产品信息处理的API接口。
由于常规的添加、删除和更改都是标准的API接口，如果我们需要根据每个API类重复定义这些API，显然是不合适和臃肿的。
如果是常规的JS，那么API接口会用发布函数来定义，但是我们可以引入ES6，把类和继承的概念引入JS来处理同样的API接口封装。
2、基于ES6的JS业务类的封装
关于ES6，有时间可以了解一下《ES6 入门教程》，可以全面了解ES6的很多语法和相关概念。
但是，我们只需要了解JS中类定义和继承的关系。
ES6提供了一种更接近传统语言的编写方法，并引入了类的概念作为对象的模板。使用class关键字，您可以定义一个类。
基本上ES6的类可以看作只是一个语法糖，ES5可以做到大部分功能。类的新写法只是让对象原型的写法更清晰，更像面向对象编程的语法。上面的代码是用ES6类重写的，就是下面这个。
类点{
构造函数(x，y) {
this.x=x
this.y=y
}
toString() {
return ( this.x ， this . y )；
}
}
上面的代码定义了一个“类”，你可以看到里面有一个构造器方法，就是构造方法，而这个关键字代表的是实例对象。也就是说，ES5的构造函数Point对应的是ES6的Point类的构造方法。
除了构造方法，Point类还定义了一个toString方法。注意，定义一个“类”方法的时候，不需要在前面加上关键字function，只需要把函数定义放进去就可以了。另外，不需要用逗号分隔方法，加起来会出错。
类可以通过extends关键字继承，这比ES5通过修改原型链来继承要清晰和方便得多。
类点{
}
类ColorPoint扩展点{
}
上面的代码定义了一个ColorPoint类，它通过extends关键字继承了Point类的所有属性和方法。
有了这些知识，让我们定义一个API接口封装类，如下面的base-api.js代码所示。
//定义框架中常见的API接口：get/get all/create/update/delete/count等。
导出默认的基本类Api {
构造函数(baseurl) {
this.baseurl=baseurl
}
//获取指定的单个记录
获取(数据){
退货请求({
url: this.baseurl Get ，
方法：“get”，
参数：数据
})
}
//根据条件获取所有记录
GetAll(数据){
退货请求({
url: this.baseurl GetAll ，
方法：“get”，
参数：数据
})
}
//创建记录
创建(数据){
退货请求({
url: this.baseurl Create ，
方法： post ，
数据：数据
})
}
//更新记录
更新(数据){
退货请求({
url: this.baseurl Update ，
方法：“put”，
数据：数据
})
}
//删除指定的数据
删除(数据){
退货请求({
url: this.baseurl Delete ，
方法：“删除”，
参数：数据
})
}
//获取条件记录的数量
计数(数据){
退货请求({
url: this.baseurl Count ，
方法： post ，
数据：数据
})
}
}
上面我们定义了很多ABP后端接口的常规封装处理，其中我们调用的地址是组合处理的，而具体的地址是分配给子类(业务对象API)的。
我们增加的定义子类包括DIctType、DictData等业务类，所以这些类继承了BaseApi，会有相关的接口，如下图继承关系所示。
例如，我们对DictDataApi的JS类定义如下。
可以构造一个子类实例，供一行代码ExportDefaultNewAPI(/ABP/services/app/dict data/)使用。
对于DictTypeApi，处理方法类似，只是从基类继承，增加一些自己的接口实现。
这些API类的文件视图如下所示。
有了这些准备，我们可以在视图页面类中导入这些定义，并使用JS类。
//业务API对象
从“@/api/dicttype”导入dicttype
从“@/api/dictdata”导入dictdata
如果要在视图页面中查询结果，可以使用dictdata或dicttype对象直接实现相应的API调用，如下面的代码所示。
getlist() {
//构造通用分页查询条件
var param={
skip count:(this . pageinfo . pageindex-1)* this . pageinfo . pagesize，
max result count:this . pagenfo . pagesize，
//过滤条件
名称：this.searchForm.name，
备注：this.searchForm.remark，
字典类型ID: this.searchForm.dictType_ID
};
//获取产品列表，绑定模型，修改页码。
this.listLoading=true
字典数据。GetAll(param)。然后(data={
this.list=data.result.items
this . pageinfo . total=data . result . total count
this.listLoading=false
})
}
或者如下面的代码所示。
//删除指定的字典类型
deleteDictType() {
如果(！this . search form . dict type _ ID type of(this . search form . dict type _ ID)=== undefined ){
返回；
}
这个。$confirm(您确定要删除所选类型吗？，操作提示，
{
类型：“警告”//成功，错误，信息，警告
//confirmButtonText:确定，
//cancelButtonText:“取消”
}
).然后(()={
var param={ ID:this . search form . dict type _ ID }
字典类型。删除(参数)。然后(data={
if (data.success) {
//提示信息
这个。$message({
类型：“成功”，
消息：“删除成功！”
})
//刷新数据
this . gettree()；
}
})
})
}
最后，我们来看看使用这些接口处理的字典管理接口的实现。
那就是Vue Element前端应用开发之前前端API接口的封装细节。关于Vue元素前端API接口封装的更多信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。