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

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

代码更新地址：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，左侧用于显示接口列表，层级关系，右侧展示接口具体信息，参照如下：

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

「请求体」Tab页布局

接着上节，今天完成「请求体」Tab 页的布局。根据请求不同的格式有不同的请求体，比如form-data、json、binary等等，因此不同的请求格式，同样需要切换不同的tab页，可再次使用标签来完成。

并且form-data格式同样是key-value形式，可以再次使用自定义组件TableForm。

none即是没有请求体，json就是以json的格式传递请求体，binary主要是用于文件上传等。json格式为了语法高亮展示，可以引入组件codemirror来完成。

首先使用命令npm install codemirror vue-codemirror --save安装依赖，并且需要使用命令npm install @codemirror/lang-json --save安装json语言支持。安装安装后，同样为了方便其他页面使用这个组件，同样先自定义个组件进行封装，在src/components下新建ApiCoder.vue组件。

<template>
  <codemirror
    v-model="script"
    :style="{ height: initHeight, 'font-size': '14px' }"
    :autofocus="true"
    :indent-with-tab="true"
    :tab-size="2"
    :extensions="extensions"
    :disabled="readOnly"
    :lang="lang"
    @blur="updateScript"
  />
</template>

<script setup>
import {
      
       ref, watch } from "vue";
import {
      
       Codemirror } from "vue-codemirror";
import {
      
       python } from "@codemirror/lang-python";
import {
      
       json } from "@codemirror/lang-json";

const props = defineProps({
      
      
  content: {
      
      
    type: String,
    default: "",
  },
  lang: {
      
      
    type: String,
    default: "python",
  },
  readOnly: {
      
      
    type: Boolean,
    default: false,
  },
  initHeight:{
      
      
    type: String,
    default: "600px",
  }
});

const extensions = [python(), json()];

let script = ref("");

watch(
  () => props.content,
  () => {
      
      
    script.value = props.content;
  },
  {
      
       immediate: true } // immediate选项可以开启首次赋值监听
);

const emit = defineEmits(["updateScript"]);

const updateScript = () => {
      
      
  emit("updateScript", script.value);
};
</script>

然后在需要的页面上进行组件引用。

<a-tab-pane key="2" tab="json">
  <api-coder :lang="json" :initHeight="'250px'"></api-coder>
</a-tab-pane>

重启前端项目，刷新页面，切换到「json」就可以看到输入框了，输入json格式的字符串，可以看到语法高亮显示。

到这里一个请求的基本功能就完成了，「前置脚本」和「后置脚本」将在后面的章节进行完善。

响应部分Tab页布局

请求的基本功能完成之后，接下来是响应部分，响应部分主要是「响应体」和「响应头」，为了更好的排查问题，可以将完整的请求放在「请求内容」之中，「断言」和「提取」将和「前置脚本」、「后置脚本」放在一起介绍。

大部分「响应体」是json格式或者html格式，可以引用ApiCoder.vue组件；「响应头」主要是kay_value格式，但是不需要支持输入，可以采用普通的table组件进行展示；「请求内容」就是当作普通的文本进行展示，也可以使用ApiCoder.vue组件。

按照上诉拆分，同样创建3个子组件resBody.vue、resHeader.vue、reqContent.vue，然后在ApiListContent中引入。

<a-tabs v-model:activeKey="activeKey">
  <a-tab-pane key="1" tab="响应体">
    <res-body></res-body>
  </a-tab-pane>
  <a-tab-pane key="2" tab="响应头">
    <res-header></res-header>
  </a-tab-pane>
  <a-tab-pane key="3" tab="断言">TODO</a-tab-pane>
  <a-tab-pane key="4" tab="提取">TODO</a-tab-pane>
  <a-tab-pane key="5" tab="请求内容">
    <req-content></req-content>
  </a-tab-pane>
</a-tabs>

重启项目刷新页面，可以看到响应部分也可以正常展示了，接下来就是后端要提供响应的接口完成交互。