编写类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组件,并给它设置好高度和文本居中,这样就有内味了!
编写Tabs
上图已经快看到实际效果了,最终代码还得润色一下。
改写编辑器方法
目前我们的编辑器,初始值字段是defaultValue
,这样的话一旦刷新了返回结果,那么这个值不会再次更新,所以我们需要改写,具体的方法就是让Editor变成受控组件。
- 编写Body tab下的编辑器
简单封装并引用了一下,JSON.stringify这个方法是用来序列化JSON的,后面的参数是为了让JSON更美观。
可能大家有注意到有个tarBarExtra…这样的字段,这个字段呢,是我们用来显示http状态码和相应时间的,对比postman就是:
因为里面内容很多,所以我把它作为一个组件抽离出来。
- 编写http状态码组件
最终结果就是这样,简单的html代码。
这里肯定有小伙伴有疑惑,为什么你把style这种文件放到css里面去呢?其实不是我不想,是因为我懒,而且需要我手动写样式的地方其实还蛮少的,如果写的一般是在同级目录编写同名文件.less
,里面用less的语法去写样式,这里我求方便,就一锅端了。
大概效果:
稍微调整一下之前的代码
请求部分和全局的response冲突了,调整一下:
高度也给降低一点,不然太高了,一点都不拿破仑!
改写Request类 获取cookie
我们之前的后端接口并没有拿出cookie信息,所以我们需要改造一下。
编写最后的部分
由于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
我拉你进群~