啊胡

V1

2022/10/01阅读:16主题:绿意

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: {
    typeString,
    default"",
  },
  lang: {
    typeString,
    default"python",
  },
  readOnly: {
    typeBoolean,
    defaultfalse,
  },
  initHeight:{
    typeString,
    default"600px",
  }
});

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

let script = ref("");

watch(
  () => props.content,
  () => {
    script.value = props.content;
  },
  { immediatetrue } // 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.vueresHeader.vuereqContent.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>

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

分类:

后端

标签:

软件测试

作者介绍

啊胡
V1