12 接口自动化 接口管理模块开发（一）

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

代码更新地址：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/

本节将进入接口管理模块的开发，页面参考是postman，左侧用于显示接口列表，层级关系，右侧展示接口具体信息，参照如下：

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

接着上节，点击项目管理列表上，对应项目的名称，进入到「接口管理」页面，因此需要一个新的路由指向新的页面，在点击目管理列表的名称时跳转到对应项目的「接口管理」页面，并且展示出对应的接口列表，本节先不做这个跳转，直接创建一个菜单，然后先进行简单的进行页面布局规划。

前端页面布局

• 创建一个新的页面，并且设置路由指向这个新页面。

• 再次重启前端项目，刷新页面，就可以看到新路由，并且能够访问到接口管理页面了，接下来就是在这个页面进行页面布局规划

前端页面布局

为了实现左右结构的布局，同样可以使用Ant Design Vue的Layout组件，效果如下：

因为接口管理页面的功能比较多，为避免一个文件中的代码量太大，因此将区域进行划分，作为组件进行引入。

左侧的Sider区域，在src/components下新增一个组件ApiListSider.vue，然后在ApiListView.vue中引入。

<template>
  <div class="api">
    <a-layout>
      <a-layout-sider>
        <api-list-sider></api-list-sider>
      </a-layout-sider>
      <a-layout-content>Content</a-layout-content>
    </a-layout>
  </div>
</template>

同样ApiListSider.vue中的树形结构可以采用Ant Design Vue提供的tree组件。

右侧的Content区域，在src/components下新增一个组件ApiListContent.vue，然后在ApiListView.vue中引入。

<template>
  <div class="api">
    <a-layout>
      <a-layout-sider>
        <api-list-sider></api-list-sider>
      </a-layout-sider>
      <a-layout-content>
        <api-list-content></api-list-content>
      </