别人写的平台再垃圾，也是用来淘汰你的。
代码更新地址：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();
});
});
};
重启项目，刷新页面，点击「分类一」的展开按钮就可以看到效果了。
本章到这里就结束啦，下章将完成新增接口的交互。