编写类postman页面(5)

回顾

上节我们把流程串起来了,但是还没来得及编写返回页面。那么我们今天就把返回结果展示出来。

思考

这边补充一下,刚才我尝试在自己的云服务器部署pity项目,但是发现自己给自己挖了个坑。

pity项目没有配置requirements.txt,导致许多软件版本没有安装,服务跑不起来;

接着我们就把需要安装的补全一下!

新建pity/requirements.txt文件

  1. flask-cors
  2. logbook
  3. pyjwt==1.7.1
  4. mysql-connector-python
  5. flask-sqlalchemy
  6. flask
  7. requests
  • 安装完整版本:
  1. pip3 install -r requirements.txt

编写返回结果页面

我们发现,在请求body为none的情况下,这个body会压缩到tab页上,如果咱们要展示response的话,response也会被挤上去,这样就非常难看,所以我们进行一下改造:

测试平台系列(16) 编写类postman页面(5) - 图1

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

测试平台系列(16) 编写类postman页面(5) - 图2

编写Tabs

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

改写编辑器方法

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

测试平台系列(16) 编写类postman页面(5) - 图3

  • 编写Body tab下的编辑器

测试平台系列(16) 编写类postman页面(5) - 图4

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

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

测试平台系列(16) 编写类postman页面(5) - 图5

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

  • 编写http状态码组件

测试平台系列(16) 编写类postman页面(5) - 图6

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

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

大概效果:

测试平台系列(16) 编写类postman页面(5) - 图7

稍微调整一下之前的代码

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

测试平台系列(16) 编写类postman页面(5) - 图8

测试平台系列(16) 编写类postman页面(5) - 图9

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

改写Request类 获取cookie

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

测试平台系列(16) 编写类postman页面(5) - 图10

测试平台系列(16) 编写类postman页面(5) - 图11

编写最后的部分

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

  • 编写columns

测试平台系列(16) 编写类postman页面(5) - 图12

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

测试平台系列(16) 编写类postman页面(5) - 图13

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

测试平台系列(16) 编写类postman页面(5) - 图14

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

最终效果

测试平台系列(16) 编写类postman页面(5) - 图15

广告时间

预览地址: http://47.112.32.195/

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

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

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

测试平台系列(16) 编写类postman页面(5) - 图16

测试平台系列(16) 编写类postman页面(5) - 图17