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

编写类postman页面(4)

回顾

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

思考

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

编写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版本，需要了解详情的话可以去它的官网看。

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

• 安装@monaco-editor/react

npm install @monaco-editor/react --save

• 编写编辑器组件src/components/Postman/CodeEditor.jsx

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

• 引入组件

判断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,
  });
}

• 编写组装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,
        }

简单输出一下返回结果

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

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

广告时间

预览地址: http://47.112.32.195/

后端代码地址: https://github.com/wuranxu/pity

前端代码地址: https://github.com/wuranxu/pityWeb

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