編寫類postman頁面(5)
回顧
上節(jié)我們把流程串起來了宗弯，但是還沒來得及編寫返回頁面。那么我們今天就把返回結(jié)果展示出來嵌牺。
思考
這邊補充一下挨稿，剛才我嘗試在自己的云服務(wù)器部署pity項目严拒，但是發(fā)現(xiàn)自己給自己挖了個坑。
pity項目沒有配置requirements.txt荠呐，導(dǎo)致許多軟件版本沒有安裝赛蔫，服務(wù)跑不起來砂客；
接著我們就把需要安裝的補全一下！
新建pity/requirements.txt文件
flask-cors
logbook
pyjwt==1.7.1
mysql-connector-python
flask-sqlalchemy
flask
requests
- 安裝完整版本:
pip3 install -r requirements.txt
編寫返回結(jié)果頁面
我們發(fā)現(xiàn)呵恢，在請求body為none的情況下鞠值，這個body會壓縮到tab頁上，如果咱們要展示response的話渗钉，response也會被擠上去彤恶，這樣就非常難看，所以我們進行一下改造:
我們把bodyType === 'raw'改成'none'鳄橘，因為我們這邊暫時只支持JSON形式的數(shù)據(jù)声离，所以暫時可以這么寫，針對none的時候額外寫一個div組件瘫怜，并給它設(shè)置好高度和文本居中术徊，這樣就有內(nèi)味了！
編寫Tabs
上圖已經(jīng)快看到實際效果了鲸湃，最終代碼還得潤色一下弧关。
改寫編輯器方法
目前我們的編輯器，初始值字段是defaultValue唤锉，這樣的話一旦刷新了返回結(jié)果世囊，那么這個值不會再次更新，所以我們需要改寫窿祥，具體的方法就是讓Editor變成受控組件株憾。
- 編寫B(tài)ody tab下的編輯器
簡單封裝并引用了一下晒衩，JSON.stringify這個方法是用來序列化JSON的嗤瞎，后面的參數(shù)是為了讓JSON更美觀。
可能大家有注意到有個tarBarExtra...這樣的字段听系，這個字段呢贝奇，是我們用來顯示http狀態(tài)碼和相應(yīng)時間的，對比postman就是:
因為里面內(nèi)容很多靠胜，所以我把它作為一個組件抽離出來掉瞳。
- 編寫http狀態(tài)碼組件
最終結(jié)果就是這樣，簡單的html代碼浪漠。
這里肯定有小伙伴有疑惑陕习，為什么你把style這種文件放到css里面去呢？其實不是我不想址愿，是因為我懶该镣，而且需要我手動寫樣式的地方其實還蠻少的，如果寫的一般是在同級目錄編寫同名文件.less响谓，里面用less的語法去寫樣式损合，這里我求方便省艳，就一鍋端了。
大概效果:
稍微調(diào)整一下之前的代碼
請求部分和全局的response沖突了嫁审，調(diào)整一下:
高度也給降低一點跋炕，不然太高了，一點都不拿破侖土居！
改寫Request類 獲取cookie
我們之前的后端接口并沒有拿出cookie信息枣购，所以我們需要改造一下。
編寫最后的部分
由于cookies和headers都是以表單的形式展示的擦耀，而且都是key-value的格式棉圈，所以我們可以封裝成Table組件。
- 編寫columns
- 編寫根據(jù)不同字段（cookies和response_headers）來獲取對應(yīng)數(shù)據(jù)的方法
引入2個組件并且設(shè)置不分頁
兩塊除了這里不一樣眷蜓，其他都是一樣的分瘾。
最終效果
項目地址
后端代碼地址: https://github.com/wuranxu/pity
