测试平台系列(15) 编写类postman页面(4).md

2022/6/13 测试平台接口测试FastApiPythonReact

# 编写类postman页面(4)

# 回顾

在上一节我们终于搞定了Params这个难啃的骨头,接下来我们要编写headers,与之类似的组件,一起来试试吧~

# 思考

思考一下,headersparams都是键值对的形式,似乎不需要太大的改动,咱们有现成的可编辑表格,所以做起来会很方便。

# 编写Header模块

其实照理说这种模块比如params还有headers都可以抽出为单独的组件,不过这里我觉得似乎复用的地方比较少,所以这个看人,其实也是可以抽出来的,毕竟一个组件如果太大了肯定会出现很多耦合问题。

# 观察postman的headers构造

可以看到postman的功能非常多,headers可以隐藏,也给了默认的headers,这边我们就简单点,说话的方式简单点。只保留核心表格就行了!

  • 新增变量存放headers信息以及正在编辑的key信息

  • 字段方面我们可以复用一部分

    但是需要稍稍改动,因为在删除的时候,params除了要更新表格以外,还需要修改url

    思路是把columns变成一个纯函数,参数为params的时候返回params的内容,为headers时返回headers的内容,其他的没有变化。

  • 改动onDelete方法

上一步改动就是为了onDelete能够对不同的类型做出不同的删除操作,如果不是params则不修改url了。

  • 最后是再引入一个可编辑表格

title是headers,没有extra,数据是headers和setHeaders等。

  • 调整一下EditableTable组件

这里加了一个判断,因为不传入这个字段会导致页面崩溃

# 看看效果

可以看到数据互不影响

# 编写Body(重头戏来了)

首先需要了解一下,咱们的body里面其实是代码编辑器,我们可以采用开源的monaco react版本 (opens new window),需要了解详情的话可以去它的官网看。

注意: 我们暂时只支持JSON类型的请求体,后面会增加form和file等等,因为我已经实在要看到成果了。。。

  • 安装@monaco-editor/react
npm install @monaco-editor/react --save
1
  • 编写编辑器组件src/components/Postman/CodeEditor.jsx

这里很简单哈,基本上是把官网的例子拿来抄了一下

对于那种可传可不传的变量,就给一个默认值,比如heighttheme,因为它支持黑色主题哦。

  • 引入组件

判断bodyType是不是raw,如果是raw才显示此组件,否则显示null。三元表达式大家应该都清楚。

然后包装了一层卡片,因为原先的不带有边框,所以我这里用Card组件包装了一层,然后给边距设置为0。

# 看看效果

可以看到还有具体的错误提示

总体还是不错的吧?至此,我们一期的功能基本上就快要搞好了,还差一个相应信息栏。后面的业主别急,慢慢来。

# 来个动图感受下吧

# 联调接口

  • 编写请求方法

和以前一样,直接接受参数并请求即可

import request from '@/utils/request';
import { CONFIG } from '@/consts/config';

export async function request(params) {
  return request(`${CONFIG.URL}/request/http`, {
    method: 'POST',
    data: params,
  });
}
1
2
3
4
5
6
7
8
9
  • 编写组装headers的方法

    因为headers是一个map,所以咱们需要把它从数组变为map。

  • 创建一些状态

loading用来在请求的时候显示一个loading的状态

method将请求方式的select组件改成了受控组件,因为我们需要拿到它的值。

response后续我们会需要显示出具体的结果。

  • 编写组装请求数据的方法onRequest

这个方法是点击到Send按钮后执行的方法,可以看到首先让Send按钮处于加载中,防止重复点击。然后判断参数是否合理,不合理直接弹出提示(待会会有动图演示)

最后就是改回原来的状态并设置返回结果了。

# 后端调整

由于在我试用的过程中发现,后端遇到了几个的问题。

  • 如果response是文本或者非JSON,那么程序会直接报错
  • 如果headers没有传入,那么程序也会报错

解决办法如图,如果能转为JSON,就直接转为JSON,否则返回text。 如果没有headers则直接返回{}而不去遍历headers了。

ps: response_header也需要判断,见完整代码。

完整代码:

import datetime

import requests


class Request(object):

    def __init__(self, url, session=False, **kwargs):
        self.url = url
        self.session = session
        self.kwargs = kwargs
        if self.session:
            self.client = requests.session()
            return
        self.client = requests

    def get(self):
        return self.request("GET")

    @staticmethod
    def get_elapsed(timer: datetime.timedelta):
        if timer.seconds > 0:
            return f"{timer.seconds}.{timer.microseconds // 1000}s"
        return f"{timer.microseconds // 100}ms"

    def request(self, method: str):
        status_code = 0
        elapsed = "-1ms"
        try:
            if method.upper() == "GET":
                response = self.client.get(self.url, **self.kwargs)
            elif method.upper() == 'POST':
                response = self.client.post(self.url, **self.kwargs)
            else:
                response = self.client.request(method, self.url, **self.kwargs)
            status_code = response.status_code
            if status_code != 200:
                return Request.response(False, status_code)
            elapsed = Request.get_elapsed(response.elapsed)
            data = self.get_response(response)
            return Request.response(True, 200, data, response.headers, response.request.headers, elapsed=elapsed)
        except Exception as e:
            return Request.response(False, status_code, msg=str(e), elapsed=elapsed)

    def post(self):
        return self.request("POST")

    def get_response(self, response):
        try:
            return response.json()
        except:
            return response.text

    @staticmethod
    def response(status, status_code=200, response=None, response_header=None,
                 request_header=None, elapsed=None, msg="success"):
        request_header = {k: v for k, v in request_header.items()} if request_header is not None else {}
        response_header = {k: v for k, v in response_header.items()} if response_header is not None else {}
        return {
            "status": status, "response": response, "status_code": status_code,
            "response_header": response_header, "request_header": request_header,
            "msg": msg, "elapsed": elapsed,
        }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

# 简单输出一下返回结果

感觉篇幅已经很长了,文字的方式太慢了,🤔要不要出个视频呀?不然的话我感觉打字好累,效果还一般。

直接来看一个完整的例子,测自己的接口:

# 广告时间

预览地址: http://47.112.32.195/ (opens new window)

后端代码地址: https://github.com/wuranxu/pity (opens new window)

前端代码地址: https://github.com/wuranxu/pityWeb (opens new window)

欢迎关注公众号测试开发入坑,还有加群一起讨论相关问题呀!如果群二维码过期了,可以加我个人微信: wuranxu 我拉你进群~