别人写的平台再垃圾，也是用来淘汰你的。
Python环境没有的，请自行安装，本教程采用的是python 3.9。
Django官网 https://www.djangoproject.com/
Node环境没有的，请自行安装，本教程采用的是node v17.6.0。
Vue.js官网 https://cn.vuejs.org/
接着上章，本章将完成保存带请求体的POST接口。
接口管理模块开发（六）
后端项目修改接口Model定义
根据前端请求体页面展示，请求体有不同的格式，因此接口的Model定义还需要新增一个「请求体类型」字段。
- 在后端项目
main/models.py中给Api定义新增一个「请求体类型」字段
-
使用命令
python manage.py makemigrations和python manage.py migrate将改动同步到数据库 （后续Model字段变更都是这个操作，将不再赘述）。 -
将新增的字段配置到serializer中，这样就可以对该字段进行序列化（将对象转换为响应中的json数据格式）和反序列化（将请求中的数据转换为对象）了。
带请求体的接口保存
后端接口改造完成后，前端就可以进行接口对接了，首先需要确定请求体类型。
首先将ApiBody中的Tab的key按照后端定义的body_type进行定义，这样根据Tab的activeKey属性就可以获得选择的请求体类型。
<template>
<div class="api-body">
<a-tabs v-model:activeKey="body_type" type="card">
<a-tab-pane key="NONE" tab="none">不需要请求体</a-tab-pane>
<a-tab-pane key="JSON" tab="json">
<api-coder :lang="json" :initHeight="'250px'"></api-coder>
</a-tab-pane>
<a-tab-pane key="FORM" tab="form-data">
<table-form></table-form>
</a-tab-pane>
<a-tab-pane key="BINARY" tab="binary">Content of Tab Pane 3</a-tab-pane>
</a-tabs>
</div>
</template>
<script setup>
import TableForm from "@/components/TableForm.vue";
import ApiCoder from "@/components/ApiCoder.vue";
import {
ref } from "vue";
const body_type = ref("");
</script>
然后定义jsonBody和formBody用来接收JSON类型的请求体和表单类型的请求体（binary主要是文件传输，后面单独来讲），接着将其传递给子组件ApiCoder和TableForm。并且需要定义一个方法用来返回请求体数据供父组件使用。
<script setup>
import TableForm from "@/components/TableForm.vue";
import ApiCoder from "@/components/ApiCoder.vue";
import {
ref, defineExpose } from "vue";
const body_type = ref("");
const jsonBody = ref("");
const formBody = ref([]);
const updateScript = (content)=>{
jsonBody.vaule=content;
}
const getData = () => {
switch (body_type.value) {
case "JSON":
return jsonBody.value;
case "FORM":
return JSON.stringify(formBody.value);
default:
return "";
}
};
defineExpose({
body_type,
getData,
});
</script>
最后在ApiListContent组件中也给ApiBody子组件定义ref属性方便子组件方法调用，然后在【Save】按钮点击事件中获取请求体。
重启项目刷新页面，再次填写请求信息，点击【Save】按钮。
可以看到JOSN类型和表单类型的接口，均可以保存成功了，再次查看数据库，可以看到新增的body_type也有信息了。
到这里，除了文件类型的请求参数外，接口请求已经可以正常新增保存，接下来是查看接口详情逻辑的开发，方便对新增的接口进行调试。
接口详情逻辑开发
接口详情主要的交互逻辑是点击左侧树形结构中的接口，右侧需要展示对应接口信息。
前面说过DRF的ModelViewSet已经提供了查看详情的接口，可以在Swagger上看到，因此只需要前端通过接口ID就可以查询到对应的接口详情。
前端项目中，首先处理ApiListContent组件，需要增加一个prop变量，用于接收查询出来的接口信息。因为prop变量是不允许进行修改的，所以不能将formState直接变更为prop变量，所以新增一个变量initData，然后对其开启监听，当initData有变化时将其赋值给formState，从而在ApiListContent中加载详情信息。
然后在父组件ApiListView中给子组件ApiListSider新增一个emit方法方便获取查询出的接口详情，然后将详情信息传递给子组件ApiListContent的initData用于展示。
最后给ApiListSider的ATree组件新增select事件，用于选中节点时触发。
接着定义emit，在事件触发时调用。
const selectRow = (key, row) => {
if (row.node.type === "api") {
detailApiApi(row.node.id).then((res) => {
emits("showDefault", "", false);
emits("detail", res);
});
}
};
重启项目，刷新页面，选择分类一下已经创建的接口，可以看到右侧可以正常展示接口信息了。
经过调试之后，发现请求参数、请求头、请求体信息并没有加载出来，因此需要继续进行处理。
-
首先是请求参数，因为请求参数也是子组件
ApiParams进行展示的，因此子组件中原本定义的initData变量需要更改为prop变量来接收参数信息 -
接着在父组件
ApiListContent引入子组件时将请求参数进行传递
<a-tab-pane key="1" tab="请求参数">
<api-params ref="apiParam" :initData="formState.params"></api-params>
</a-tab-pane>
- 通过开发者工具可以看到接口详情请求的响应是正常返回的，但是因为是以json字符串方式保存的，所以在传递之前还需要将响应数据进行转换。
- 最后重启项目，刷新页面，再次选择分类下有请求参数的接口，可以看到请求参数正常显示了。
- 请求头信息与请求参数一致，按照上述方法进行处理刷新页面，再次选择分类下有请求头的接口，可以看到请求头正常显示了。
- 接下来是请求体，与请求参数处理基本一致，但是需要多个参数用于传递请求体的类型。
- 在子组件
ApiBody中需要定义对应的props变量，并且对其进行监听，然后通过监听的body_type进行参数格式转化。
const props = defineProps({
type: {
type: String,
default: "NONE",
},
initData: {
type: String,
},
});
const body_type = ref("NONE");
watch(
() => props.type,
() => {
body_type.value = props.type;
},
{
immediate: true } // immediate选项可以开启首次赋值监听
);
const jsonBody = ref("");
const formBody = ref([]);
watch(
() => props.initData,
() => {
switch (props.type) {
case "JSON":
jsonBody.value = props.initData;
break;
case "FORM":
formBody.value = JSON.parse(props.initData);
break;
}
},
{
immediate: true } // immediate选项可以开启首次赋值监听
);
- 重启项目，刷新页面，选择分类下带请求体的接口，可以看到接口详情中的请求体可以正常展示了。
篇幅有限，本章到这里就结束了，下章开始处理接口调试功能，即右侧的【Send】按钮功能。