回顾

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

思考

这边补充一下，刚才我尝试在自己的云服务器部署 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://test.pity.fun/

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

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