編寫類postman頁面(3)
回顧
記得上一節(jié)我們編寫了postman的中間部分挨务，其實還有header部分的一些表單數(shù)據(jù)沒有編寫完成，今天我們就盡量完成它并且嘗試跑一個小小的demo。
尋找可編輯表格組件
可以看到這里比較簡單，基本上就是2塊: 文字部分和可編輯表格
可編輯表格的話，我們可以自己寫，也可以直接用現(xiàn)成的古今。我們?yōu)榱松倒弦稽c，就采用ant design pro封裝好的高階組件(意思是功能齊全滔以，簡單好用)
具體地址: ProComponents
那么這個就是我們需要的捉腥，由于我們用的JavaScript而非TypeScript，所以呢我們需要復(fù)雜一點找到對應(yīng)的源碼:
在彈出的網(wǎng)站就可以找到對應(yīng)的JS代碼了你画！
我們這個項目本來就帶有了pro的組件抵碟，所以不需要額外安裝了哈。(親測新版本還有點問題)
編寫可編輯表格雛形
首先呢坏匪，我們這個組件是postman組件拟逮，但是其實這個可編輯組件是可以和后面的headers標(biāo)簽進行復(fù)用的，所以我們單獨把這個組件抽出來封裝适滓。
新建src/components/Table/EditableTable.jsx
代碼基本上是復(fù)制過來的敦迄，但是我們抽取了幾個重要的參數(shù):
-
columns
由于我們的每個表格的字段可能不一樣，所以說我們不能寫死
-
dataSource
實際數(shù)據(jù)凭迹，本來不是這樣的罚屋，但是發(fā)現(xiàn)這個組件有點bug，讓我有點小尷尬
-
setDataSource
改變dataSource的方法
-
title
比如這里我們需要的title是Query Params
注意這里嗅绸，這里我是從columns中拿到真實字段脾猛，因為咱們還有其他字段比如后面的刪除，拿到之后在用戶點擊新增一行數(shù)據(jù)的時候默認(rèn)給字段加上值鱼鸠。
引入表格組件并編寫columns
- columns
我設(shè)置了3個字段分別是KEY,VALUE, DESCRIPTION猛拴。與postman是保持一致的羹铅，然后最后一列我設(shè)置了一個圖標(biāo)(刪除)，刪除方法自己手動編寫了（還是因為他有bug愉昆，無法刪除）职员。因為我在官網(wǎng)沒改源碼的情況下也發(fā)現(xiàn)無法刪除。
看看效果:
其實postman做的更精致撼唾，下面的數(shù)據(jù)會改變url的內(nèi)容。接下來我們也把這塊實現(xiàn)了吧哥蔚。
改造URL
現(xiàn)在我們有了params參數(shù)倒谷，那么我們的url就由2部分構(gòu)成了:
- url
- params
所以我們原先的url改變的時候如果有參數(shù)變動則需要修改參數(shù)項目，如果參數(shù)項目有變動也需要修改url糙箍。
由于這個ProTable有一點點bug渤愁，筆者也搞了好久今晚，不過最后順利完成了深夯，大家pull最新的代碼就可以看到效果了抖格。可惜的是今天浪費太多時間了咕晋，就只簡單對代碼稍作描述了雹拄。
這個表格組件有些變化:
- 把正在編輯的key和修改可編輯key的方法抽離出來了
- extra函數(shù)用來在表格數(shù)據(jù)變動的時候做一些額外的變動，因為表格變化我們得去更新url
拼接url的方法
url的規(guī)則是 http://www.xxx.com + ?參數(shù)1=值&參數(shù)2=值2
所以第一個參數(shù)用?隔開掌呜，后面都是用&滓玖，代碼寫的很清楚了。
拆解url的方法
這里寫的比較復(fù)雜质蕉，首先判斷url里面有無參數(shù)势篡，沒有的話就把表單數(shù)據(jù)清空。接著就是取url的數(shù)據(jù)組成新的表單模暗。但是表單的每一行是用時間區(qū)別的禁悠，這里js執(zhí)行太快，所以我以數(shù)組索引+時間+10的方式兑宇，就算now全都一樣碍侦，也沒關(guān)系，因為索引肯定不一樣隶糕，避免了一下子添加多行的問題（當(dāng)然你們是看不到這個問題的）祝钢。
刪除參數(shù)
刪除參數(shù)的時候也重新拼接url給url輸入框
輸入框url變化也改變參數(shù)表格
新增了一些變量和set變量的方法
文件總體代碼可以去github看，這里篇幅有限就不貼了若厚。
最終效果
找了個截圖軟件拦英，讓大家看看效果吧，晚安测秸。
項目地址
后端代碼地址: https://github.com/wuranxu/pity
