测试平台系列(16) 编写类postman页面(5)
编写类postman页面(5)
回顾
上节我们把流程串起来了，但是还没来得及编写返回页面。那么我们今天就把返回结果展示出来。
思考
这边补充一下，刚才我尝试在自己的云服务器部署pity项目，但是发现自己给自己挖了个坑。
pity项目没有配置requirements.txt，导致许多软件版本没有安装，服务跑不起来；
接着我们就把需要安装的补全一下！
新建pity/requirements.txt文件
flask-cors
logbook
pyjwt==1.7.1
mysql-connector-python
flask-sqlalchemy
flask
requests
- 安装完整版本:
pip3 install -r requirements.txt
编写返回结果页面
我们发现，在请求body为none的情况下，这个body会压缩到tab页上，如果咱们要展示response的话，response也会被挤上去，这样就非常难看，所以我们进行一下改造:
image
我们把bodyType === 'raw'改成'none'，因为我们这边暂时只支持JSON形式的数据，所以暂时可以这么写，针对none的时候额外写一个div组件，并给它设置好高度和文本居中，这样就有内味了！
这是我在mac上的显示效果(今天在公司摸鱼写文章)
编写Tabs
上图已经快看到实际效果了，最终代码还得润色一下。
改写编辑器方法
目前我们的编辑器，初始值字段是defaultValue，这样的话一旦刷新了返回结果，那么这个值不会再次更新，所以我们需要改写，具体的方法就是让Editor变成受控组件。
去掉defaultValue字段，改为value
- 编写Body tab下的编辑器
image
简单封装并引用了一下，JSON.stringify这个方法是用来序列化JSON的，后面的参数是为了让JSON更美观。
可能大家有注意到有个tarBarExtra...这样的字段，这个字段呢，是我们用来显示http状态码和相应时间的，对比postman就是:
image
因为里面内容很多，所以我把它作为一个组件抽离出来。
- 编写http状态码组件
image
最终结果就是这样，简单的html代码。
这里肯定有小伙伴有疑惑，为什么你把style这种文件放到css里面去呢？其实不是我不想，是因为我懒，而且需要我手动写样式的地方其实还蛮少的，如果写的一般是在同级目录编写同名文件.less，里面用less的语法去写样式，这里我求方便，就一锅端了。
大概效果:
image
稍微调整一下之前的代码
请求部分和全局的response冲突了，调整一下:
image
image
高度也给降低一点，不然太高了，一点都不拿破仑！
改写Request类 获取cookie
我们之前的后端接口并没有拿出cookie信息，所以我们需要改造一下。
和headers等类似
image
编写最后的部分
由于cookies和headers都是以表单的形式展示的，而且都是key-value的格式，所以我们可以封装成Table组件。
- 编写columns
image
- 编写根据不同字段（cookies和response_headers）来获取对应数据的方法
image
引入2个组件并且设置不分页
image
两块除了这里不一样，其他都是一样的。
最终效果
image
项目地址
后端代码地址: https://github.com/wuranxu/pity
