别人写的平台再垃圾，也是用来淘汰你的。
代码更新地址：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>
</a-layout-content>
</a-layout>
</div>
</template>
如下图，ApiListContent.vue中的最外层使用了Ant Design Vue提供的Card组件，然后右上角使用Button组件，然后是Form组件，最后是两个Tab组件。使用步骤同样是找到组件的示例代码，拷贝到本地后进行调试。
因为两个Tabs当中，不同Tab页的内容也是很多的，这里同样将不同的tab定义为不同的组件，然后在ApiListContent.vue中进行引用。
首先是「请求参数」Tab页，使用Table组件，然后使用插槽将字段全部设置为Input组件，然后在右侧将字段设置为两个按钮，分别用来新增和删除，因为「请求头」Tab页，也需要这个样式，可以再将这个可输入的表格提取作为一个单独的组件，这样就可以达到代码的复用。
在src/components下创建新组件TableForm.vue，然后将Table的逻辑迁移到TableForm中，然后将变化的部分定义为变量，如下定义了三个变量 columns、initData和dataStruct。
<template>
<div class="table-form">
<a-table
:row-selection="rowSelection"
:columns="columns"
:data-source="data"
:pagination="false"
>
<template #bodyCell="{ column, record, index }">
<template v-if="column.key !== 'action'">
<a-input v-model:value="record[column.key]"></a-input>
</template>
<template v-if="column.key === 'action'">
<span>
<a-icon
class="iconfont icon-jia"
style="color: #6b6b6b; cursor: pointer; margin-right: 10px"
@click="addParam"
/>
<a-icon
class="iconfont icon-jianhao"
style="color: #e71f12; cursor: pointer"
@click="deleteParam(index)"
/>
</span>
</template>
</template>
</a-table>
</div>
</template>
<script setup>
import {
computed, onMounted, ref, unref } from "vue";
const props = defineProps({
// 表头
columns: {
type: Array,
default: () => {
return [
{
title: "key",
dataIndex: "key",
key: "key",
},
{
title: "value",
dataIndex: "value",
key: "value",
},
{
title: "描述",
dataIndex: "desc",
key: "desc",
},
{
title: "操作",
key: "action",
},
];
},
},
// 表格初始化数据
initData: {
type: Array,
},
// 表格数据结构
dataStruct: {
type: Object,
default: () => {
return {
key: "",
value: "",
desc: "",
};
},
},
});
const data = ref([]);
onMounted(() => {
data.value = props.initData;
});
const selectedRowKeys = ref([]);
const rowSelection = computed(() => {
return {
selectedRowKeys: unref(selectedRowKeys),
onChange: onSelectChange,
hideDefaultSelections: true,
};
});
const onSelectChange = () => {
};
const addParam = () => {
data.value.push(props.dataStruct);
};
const deleteParam = (index) => {
data.value.splice(index, 1);
};
</script>
<style lang="scss">
.table-form {
.ant-table-cell {
padding: 5px 5px;
}
}
</style>
最后在src/components下分别创建组件ApiParams.vue和ApiHeaders.vue，并在分别在两个组件中引用自定义的组件TableForm。
<template>
<div class="api-header">
<table-form :initData="initData"></table-form>
</div>
</template>
<script setup>
import {
ref } from "vue";
import TableForm from "@/components/TableForm.vue";
const initData = ref([
{
key: "name-1",
value: "18",
desc: "1111",
},
]);
</script>
<style scoped></style>
重启项目，刷新页面可以看到「请求参数」和「请求头」Tab页都有内容了，如下：
本节到此结束，下节将继续完成剩下Tab页的样式布局。