专栏文章测试平台系列 (13) 编写类 postman 页面 (2/5)

米洛 · 2021年12月05日 · 最后由米洛回复于 2021年12月05日 · 2375 次阅读

编写类 postman 页面 (2)

回顾

上篇文章说到，我们编写了 postman 的url栏，细心的观众可能发现了: 我们的 url 栏并没有请求方式的选择，那我们现在就来调整一下吧。

更改请求方式

其实很简单，将 selectBefore 改成如下代码即可，把可选项变成我们常用的 4 种HTTP请求方式。

在展开以后发现DELETE太长了以至于显示不全，所以我们需要给Select标签增加宽度:

const selectBefore = (
  <Select defaultValue='GET' style={{width: 120, fontSize: 16, textAlign: 'left'}}>
    <Option value='GET'>GET</Option>
    <Option value='POST'>POST</Option>
    <Option value='PUT'>PUT</Option>
    <Option value='DELETE'>DELETE</Option>
  </Select>
);

这里我们还稍微变更了一下样式，加大了字体为 16 号，并且文字左对齐。

编写中部标签部分

首先可以确定的是中间是标签页，这块比较复杂。因为各个标签页里面的内容不一样，所以我们其实是需要编写诸如Params，Headers，Body等具体页面的。

至于为什么不完全仿照 postman 呢？因为咱们是借鉴它，不是实现它！所以我们对于有些功能是需要进行取舍的。

我们还是去 ant design 找 tab(标签页)，这里就不重复过程了。

效果图

编写 Body 部分

咱们先来尝试编写 Body 部分，先看看 postman 的页面:

老规矩，我们还是先进行拆解:

分上下 2 层，上层由 3 个组件组成，分别是 Radio 即单选框，下拉选择和文本按钮。这个结论呢，是我比较熟悉 ant design 组件的情况下总结出来的，你们不熟悉的话，需要多加练习，这是一个循序渐进的过程。

下层呢，就是一个 JSON 编辑文本框了，稍微简单一些。

我们还是先来编写上层，首先我们编写 Radio 部分:

在Body tab下面另起一行，这里Row可以视为div

然后 Radio.Group 是 antd 里面的固定用法，用于按钮分组，Radio 就是单选按钮了，我仿照 postman，把里面的所有选项都代入进来，看看效果:

接着我们去编写 raw 里面的 JSON 下拉菜单。

有小伙伴可能注意到了，只有当这个类型为raw的时候才会出现 JSON 的选择框，也就是说这个按钮出不出现是跟我们的选项有关系的。

所以我们需要用到 React 的状态管理:

先引入useState。

import React, {useState} from 'react';

然后设置一个变量，用于存放 body 的类型:

其中 bodyType 是变量名，setBodyType 是改变 bodyType 的方法，none 是 bodyType 的默认值。

修改 Radio 相关组件

由于之前我们的组件是非受控组件，现在我们让它受控起来。什么叫非受控组件呢，非受控组件指的是，如果你没有给组件指定相关的值和改变方法，则他自己在内部维护了一套，所以我们刚才切换radio 的时候没有什么障碍。

受控组件的意思是这个组件你完全可控，它怎么动，能不能动，都该你掌控。

更多相关信息可以自己去百度查阅。

<Radio.Group defaultValue='none' value={bodyType} onChange={e => setBodyType(e.target.value)}>
  <Radio value='none'>none</Radio>
  <Radio value='form-data'>form-data</Radio>
  <Radio value='x-www-form-urlencoded'>x-www-form-urlencoded</Radio>
  <Radio value='raw'>raw</Radio>
  <Radio value='binary'>binary</Radio>
  <Radio value='GraphQL'>GraphQL</Radio>
</Radio.Group>