别人写的平台再垃圾，也是用来淘汰你的。
Python环境没有的，请自行安装，本教程采用的是python 3.9。
Django官网 https://www.djangoproject.com/
Node环境没有的，请自行安装，本教程采用的是node v17.6.0。
Vue.js官网 https://cn.vuejs.org/
上节已经完成了接口管理下创建分类和查询分类的交互，本节将完成新增接口部分交互。
接口自动化 接口管理模块开发（四）
首先来完成分类下，新增接口的交互，因为新增分类只需要name参数，所以采用了Modal框，接口的参数比较多，将使用右侧的部分来完成。这里需要完善的地方是，当没有选中任意接口，或者没有新增接口时，右侧需要展示默认区域。
分类下新增接口
主要的思路就是在ApiListView.vue中引入ApiListContent.vue地方，新增一个<div>元素，用来展示默认区域内容（这里是展示的文本，可以更换为图片）。然后定义一个变量show用来控制是展示默认区域，还是接口编辑区域。
最后在需要ApiListSider.vue中展示接口编辑区域的地方调用父组件的方法修改变量。
- 首先定义emits
const emits = defineEmits(["showDefault"]); - 然后给分类下的【新增接口】按钮添加点击事件
- 点击事件的方法中调用emits中的方法，并且将参数设置为false，同时将分类id传过去以便保存接口的时候使用。
const showApiContent = (id) => {
emits('showDefault', id, false)
}
- 在父组件中定义方法，将方法传递给子组件
<a-layout-sider>
<api-list-sider @showDefault="showApiContent"></api-list-sider>
</a-layout-sider>
const show = ref(true);
const category_id = ref("");
const showApiContent = (id, defaultShow) => {
show.value = defaultShow;
category_id.value = id;
};
重新项目刷新页面，点击「分类一」下的【新增接口】按钮就可以看右侧区域展示接口编辑内容了，如下：
新增接口并保存
完成了页面的交互逻辑后，现在主要来完成接口的保存功能。接口编辑页的右上角有两个按钮，分别是【Save】和【Send】,【Send】主要来完成接口调试功能，【Save】用于保存当前接口的定义，本章先完成【Save】按钮的功能。
不需要再找其他的接口，可以直接拿后端项目提供的接口来完成简单的请求，这里用GET请求/main/categories/来举例。
首先需要给【Save】按钮添加点击事件，调用后端提供的接口保存接口信息，当成功保存后，给出提示信息
const saveApi = () => {
addApiApi(formState.value).then(() => {
message.success("保存成功");
});
};
重启项目，刷新页面，在表单上填写好请求信息后，点击【Save】按钮，检查数据库数据，可以看到一个没有任何请求参数的接口已经保存成功了，但是没有category_id，所以无法在左侧树形接口的分类一下展示出来。
因此需要将上面showApiContent方法中传递的id，再次传递给子组件ApiListContent。
- 首先需要在
ApiListContent中需要定义个prop变量用来接收父组件传递的变量。
const props = defineProps({
category_id: {
type: String,
default: "",
},
});
- 然后在父组件
ApiListView中引用ApiListContent子组件时，将id传递给子组件
<a-layout-content>
<div v-if="show">请新增或者编辑已经存在的接口</div>
<api-list-content
v-if="!show"
:category_id="category_id"
></api-list-content>
</a-layout-content>
- 最后在子组件进行保存时，将category_id填充到请求体中。
const saveApi = () => {
if (props.category_id !== "") {
formState.value.category = props.category_id;
}
addApiApi(formState.value).then(() => {
message.success("保存成功");
});
};
重启项目，刷新页面，填写请求信息后再次保存，保存成功后，再次查看数据库，可以看到category_id已经被成功保存。
查询分类下的接口列表
保存成功后，接下来就是让在分类下展示接口列表，原本的接口列表没有提供查询功能，现在需要新增根据category查询接口列表的功能，简单的查询功能可以直接使用filterset_fields，最终后端项目的接口列表修改如下。
class ApiViewSet(ModelViewSet):
queryset = Api.objects.filter()
serializer_class = ApiSerializer
filter_backends = (DjangoFilterBackend,)
filterset_fields = ('category',)
重启后端项目，访问swagger页面，可以看到列表接口下新增了查询字段category。
后端接口改造完毕后，接下来就是在前端项目中进行调用，跟查询分类下的子分类一样，查询分类下的接口列表。
const loadData = (treeNode) => {
return new Promise((resolve) => {
if (treeNode.dataRef.children) {
resolve();
return;
}
if (treeNode.dataRef.type === "collection") {
// 分类下查询子分类和接口
listCategoryApi(treeNode.dataRef.id).then((res) => {
let children = res;
listApiApi(treeNode.dataRef.id).then((res) => {
children = children.concat(res);
treeNode.dataRef.children = children;
treeData.value = [...treeData.value];
resolve();
});
});
} else {
// TODO:接口需要查询用例
resolve();
}
});
};
重新前端项目，刷新页面，再次查看分类一下面的数据，可以看到能正常查询子分类列表和接口列表了。
这里有个小问题：最后这段代码是查询子分类成功后再查询接口列表，存在一种情况，如果子分类接口查询失败会导致接口列表也无法查询，需要进行优化，后端需要提供一个接口，可以同时查询分类下的子分类以及接口列表。篇幅有限，下章将介绍如何在DRF中自定义接口。