
啊胡
2022/10/03阅读:26主题:绿意
14 接口自动化 接口管理模块开发(三)
别人写的平台再垃圾,也是用来淘汰你的。
代码更新地址:https://github.com/ahu965/api-automator.git
Python环境没有的,请自行安装,本教程采用的是python 3.9。
Django官网 https://www.djangoproject.com/
Node环境没有的,请自行安装,本教程采用的是node v17.6.0。
Vue.js官网 https://cn.vuejs.org/
上节已经完成了接口管理的主要功能的前端页面开发,本节将完成对应部分的后端逻辑开发。

接口自动化 接口管理模块开发(三)
后端接口定义
首先先来看左侧的树形结构,最外层可以新增分类和接口,然后分类下还可以创建子分类,分类和子分类下可以创建接口,然后接口下可以创建用例。因此需要三张表,分别是「分类表」、「接口表」、「用例表」。
分类和接口是1:n的关系,因此只需要在「接口表」中维护一个分类字段;接口和用例也是1:n的关系,因此也需要在「用例表」中维护一个接口字段。
按照上诉分析,在后端项目中mian/models.py
中编写Model类。(篇幅有限,仅提供分类和接口Model定义,用例与接口基本一致)
class Category(models.Model):
name = models.CharField(max_length=50, verbose_name="分类名称")
parent_category = models.ForeignKey("self", null=True, blank=True, verbose_name="父分类", on_delete=models.CASCADE)
created_by = models.ForeignKey(User, null=True, verbose_name="创建人", on_delete=models.DO_NOTHING)
created_at = models.DateTimeField(default=datetime.now, verbose_name="创建时间")
updated_at = models.DateTimeField(default=datetime.now, verbose_name="更新时间")
class Meta:
verbose_name = "分类"
verbose_name_plural = verbose_name
class Api(models.Model):
METHOD_TYPE = (
('GET', 'GET'),
('POST', 'POST'),
('PUT', 'PUT'),
('PATCH', 'PATCH'),
('DELETE', 'DELETE')
)
name = models.CharField(max_length=50, verbose_name="接口名称")
desc = models.CharField(max_length=500, blank=True, null=True, verbose_name="接口描述")
method = models.CharField(max_length=10, choices=METHOD_TYPE, verbose_name="请求方式")
path = models.CharField(max_length=500, blank=True, null=True, verbose_name="接口路径")
params = models.CharField(max_length=500, blank=True, null=True, verbose_name="请求参数,以json串进行保存")
headers = models.CharField(max_length=500, blank=True, null=True, verbose_name="请求头,以json串进行保存")
body = models.TextField(blank=True, null=True, verbose_name="请求头,以json串进行保存")
category = models.ForeignKey(Category, null=True, blank=True, verbose_name="分类", on_delete=models.CASCADE)
created_by = models.ForeignKey(User, null=True, verbose_name="创建人", on_delete=models.DO_NOTHING)
created_at = models.DateTimeField(default=datetime.now, verbose_name="创建时间")
updated_at = models.DateTimeField(default=datetime.now, verbose_name="更新时间")
class Meta:
verbose_name = "接口"
verbose_name_plural = verbose_name
然后使用命令python manage.py makemigrations
和python manage.py migrate
将表同步到数据库。

然后在后端项目中mian/views.py
中使用ModelViewSet
快速定义「分类」、「接口」、「用例」用的简单增删改查接口。
class CategoryViewSet(ModelViewSet):
queryset = Category.objects.filter()
serializer_class = CategorySerializer
class ApiViewSet(ModelViewSet):
queryset = Api.objects.filter()
serializer_class = ApiSerializer
class CaseViewSet(ModelViewSet):
queryset = Case.objects.filter()
serializer_class = CaseSerializer
将路由配置之后,重启后端项目,进行swagger页面,就可以看到创建了18个相关接口,在交互的过程中,部分接口可能需要进行调整,将在后面一一进行完善。

前端接口对接
后端接口完成后,在前端项目的src/apis
目录下定义接口方法,供页面进行引用,具体方案参照前端的项目管理接口,不再赘述。
新增分类
首先完成新增分类的功能。首先给右上角(如图所示)「新增分类」按钮添加onClick
事件,点击按钮后打开Modal弹窗,支持输入分类名称,点击Modal的【确定】按钮后,调用接口保存分类。

新增分类成功后,还需要刷新树形结构,为避免接口过多导致加载变慢,这里使用Atree组件提供的懒加载功能,即点击展示按钮时请求子节点。 首先查询父分类为空的分类列表和分类为空的接口列表。
后端目前提供的接口支持查询父分类为null的分类,因此后端接口需要进行改造,通过重写self.get_queryset
方法。

然后在前端项目中调用查询接口获取到父分类为空的分类列表。
const queryCategories = (parent_category) => {
listCategoryApi(parent_category).then((res) => {
treeData.value = res;
});
};
onMounted(() => {
queryCategories(-1);
});
重启项目,刷新页面就可以看到新增的分类了,如下:

接着为了实现懒加载效果,需要先新增分类下的节点,篇幅有限,本章先用新增子分类来演示。
跟上面一样,给【新增分类】按钮添加事件,拉起Modal框,调用接口新增分类,不一样的是本次需要将父分类的ID作为参数传递。

子分类新增成功后,就可以使用懒加载的效果了,在atree组件中新增load-data
属性,在loadData方法中调用接口查询该分类下的接口或者分类。

const loadData = (treeNode) => {
return new Promise((resolve) => {
if (treeNode.dataRef.children) {
resolve();
return;
}
listCategoryApi(treeNode.dataRef.id).then((res) => {
treeNode.dataRef.children = res;
treeData.value = [...treeData.value];
resolve();
});
});
};
重启项目,刷新页面,点击「分类一」的展开按钮就可以看到效果了。

本章到这里就结束啦,下章将完成新增接口的交互。
作者介绍
