测试平台系列(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」也会被挤上去，这样就非常难看，所以我们进行一下改造:

我们把bodyType === 'raw'改成'none'，因为我们这边暂时只支持JSON形式的数据，所以暂时可以这么写，针对none的时候额外写一个div组件，并给它设置好高度和文本居中，这样就有内味了！

这是我在mac上的显示效果(今天在公司摸鱼写文章)

编写Tabs

上图已经快看到实际效果了，最终代码还得润色一下。

改写编辑器方法

目前我们的编辑器，初始值字段是defaultValue，这样的话一旦刷新了返回结果，那么这个值不会再次更新，所以我们需要改写，具体的方法就是让Editor变成「受控组件」。

去掉defaultValue字段，改为value

• 编写Body tab下的编辑器

简单封装并引用了一下，JSON.stringify这个方法是用来序列化JSON的，后面的参数是为了让JSON更美观。

可能大家有注意到有个tarBarExtra...这样的字段，这个字段呢，是我们用来显示http状态码和相应时间的，对比postman就是:

因为里面内容很多，所以我把它作为一个组件抽离出来。

• 编写http状态码组件

最终结果就是这样，简单的html代码。

这里肯定有小伙伴有「疑惑」，为什么你把style这种文件放到css里面去呢？其实不是我不想，是「因为我懒」，而且需要我手动写样式的地方其实还蛮少的，如果写的一般是在同级目录编写同名文件.less，里面用less的语法去写样式，这里我求方便，就一锅端了。

大概效果:

稍微调整一下之前的代码

请求部分和全局的response冲突了，调整一下:

高度也给降低一点，不然太高了，一点都不拿破仑！

改写Request类 获取cookie

我们之前的后端接口并没有拿出cookie信息，所以我们需要改造一下。

和headers等类似

编写最后的部分

由于cookies和headers都是以表单的形式展示的，而且都是「key-value」的格式，所以我们可以封装成Table组件。

• 编写columns

• 编写根据不同字段（cookies和response_headers）来获取对应数据的方法

引入2个组件并且设置不分页

两块除了这里不一样，其他都是一样的。

最终效果

广告时间

预览地址: http://47.112.32.195/

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

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

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