编写类postman页面(2)
回顾
上篇文章说到，我们编写了postman的url栏，细心的观众可能发现了: 我们的url栏并没有请求方式的选择，那我们现在就来调整一下吧。
更改请求方式
image
其实很简单，将selectBefore改成如下代码即可，把可选项变成我们常用的4种HTTP请求方式。
image
在展开以后发现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号，并且文字左对齐。
image
编写中部标签部分
首先可以确定的是中间是标签页，这块比较复杂。因为各个标签页里面的内容不一样，所以我们其实是需要编写诸如Params，Headers，Body等具体页面的。
至于为什么不完全仿照postman呢？因为咱们是借鉴它，不是实现它！所以我们对于有些功能是需要进行取舍的。
我们还是去ant design找tab(标签页)，这里就不重复过程了。
image
效果图
编写Body部分
咱们先来尝试编写Body部分，先看看postman的页面:
image
老规矩，我们还是先进行拆解:
分上下2层，上层由3个组件组成，分别是Radio即单选框，下拉选择和文本按钮。这个结论呢，是我比较熟悉ant design组件的情况下总结出来的，你们不熟悉的话，需要多加练习，这是一个循序渐进的过程。
下层呢，就是一个JSON编辑文本框了，稍微简单一些。
我们还是先来编写上层，首先我们编写Radio部分:
image
在Body tab下面另起一行，这里Row可以视为div
然后Radio.Group是antd里面的固定用法，用于按钮分组，Radio就是单选按钮了，我仿照postman，把里面的所有选项都代入进来，看看效果:
image
接着我们去编写raw里面的JSON下拉菜单。
有小伙伴可能注意到了，只有当这个类型为raw的时候才会出现JSON的选择框，也就是说这个按钮出不出现是跟我们的选项有关系的。
所以我们需要用到React的状态管理:
- 先引入useState。
import React, {useState} from 'react';
- 然后设置一个变量，用于存放body的类型:
image
其中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>
这时候去页面上看，不会有什么变化，但是此时组件已经变得可控，你能清楚地知道它当前选中了什么值。
- 编写JSON下拉框
image
先来讲解一下，这句话的意思。
其中最外面的{}代表一个代码块，里面可以编写代码。bodyType === 'raw' ？ xx: null 这个很简单，大家都知道这是个三元表达式。
那么这句话的意思是什么呢？意思就是如果bodyType等于raw，那么就渲染下拉框，否则显示为null，意思是什么都不展示。
我们来补充一下下拉菜单:
可以看到有许多种
image
看看显示效果:
image
但是这里有个问题就是，这边的选项改变以后上面还是显示JSON，所以意思是这里也需要受控，我们要根据他选择的数据来显示具体的内容。
同理我们需要设置一个rawType变量，默认值为JSON:
image
接着我们要给菜单添加点击事件，当click对应的类型时，把rawType改成对应的值。
image
核心方法如图，首先我们创建了一个方法叫onClickMenu，这个方法用来修改rawType，当点击Text的时候传入Text参数，其他的同理。
看看效果:
image
本来想一次性写完代码算了，但是又想展示整个编写过程，感觉这样效率比较低，这一节说完才写了这么点东西，尴尬。不管怎么说，今天先到这里吧。
项目地址
后端代码地址: https://github.com/wuranxu/pity
网友评论