15 接口自动化 接口管理模块开发（四）

别人写的平台再垃圾，也是用来淘汰你的。

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(""