閱讀本文可能需要一些時(shí)間哆档，建議通勤/蹲坑的時(shí)候觀看。

回顧

上篇編寫了一部分結(jié)構(gòu)淆两，還剩下表格沒有編寫。以及和后端接口的聯(lián)調(diào)拂酣，也會在本文補(bǔ)充秋冰。

補(bǔ)充Table內(nèi)容

在此之前，我們給新增環(huán)境這個(gè)按鈕加一個(gè)icon婶熬，這樣會更直觀剑勾。

icon地址: https://ant.design/components/icon-cn/

點(diǎn)擊復(fù)制

image

其實(shí)icon也是一個(gè)組件，我們把它嵌入到Button

補(bǔ)充Table組件

需要注意的是赵颅，這里和html有大不一樣的地方了虽另。因?yàn)槲覀冃枰玫絘ntd的Table組件，所以我們按照規(guī)矩行事饺谬，根據(jù)它需要的參數(shù)傳入對應(yīng)的數(shù)據(jù)就行捂刺。

先理解一下官網(wǎng)的最基本的表格例子

• dataSource

  一個(gè)json數(shù)組，里面呢，存放的是數(shù)據(jù)信息蕊连，這個(gè)數(shù)據(jù)我們從哪兒來呢深滚？從后端接口/config/environment/list獲取。

• columns

  這個(gè)是表格的列配置信息仪缸，也是個(gè)json數(shù)組贵涵，key代表列的key，title代表表頭的名字恰画，dataIndex代表從dataSource的數(shù)據(jù)里面取什么字段宾茂，比如上圖的address，代表這一列的內(nèi)容是從address里面取的拴还。

我們先copy官網(wǎng)的代碼跨晴，看看效果

可以看到，我們實(shí)現(xiàn)了想要的效果

但是這樣還不夠自沧，數(shù)據(jù)和內(nèi)容都不是我們想要的坟奥，所以我們還需要改造。

• 改寫columns

  我們有自己需要展示的列和字段:

image

其實(shí)我們需要展示id拇厢，環(huán)境名爱谁，備注，創(chuàng)建人和更新時(shí)間就可以了孝偎。所以列就這幾項(xiàng)访敌，但是因?yàn)槲覀冞€需要編輯某一行和刪除某一行的功能，所以我們需要再定義一列衣盾。

定義一列操作列

操作列提供了2個(gè)鏈接a寺旺，分別是編輯和刪除，用Divider隔開势决，這個(gè)是分割線阻塑。

• 暫時(shí)改變dataSource的值

  因?yàn)檫@里的數(shù)據(jù)都是寫好了的，并不是真正的接口返回果复，可以說是假數(shù)據(jù)陈莽。我們?yōu)榱藴y試列名顯示的情況，我們自己給他進(jìn)行一些調(diào)整虽抄。

對應(yīng)上columns里面的remarks走搁，name,create_user等等

顯示效果如下

大體上我們已經(jīng)完成了html結(jié)構(gòu)的編寫，接著我們需要補(bǔ)全功能迈窟。其實(shí)路還很長私植，我們需要改動的地方還很多，建議大家耐心看车酣。

拿到真實(shí)數(shù)據(jù)

上述我們是造了一個(gè)假數(shù)據(jù)曲稼，那我們怎么拿到真實(shí)數(shù)據(jù)呢索绪？首先，我們需要維護(hù)一個(gè)變量躯肌，舉個(gè)例子叫: data者春，它默認(rèn)是空數(shù)組，也就是沒數(shù)據(jù)清女。當(dāng)我們請求了/config/environment/list接口以后钱烟，更新data變量，由于react會自動判斷變量的更新并update頁面內(nèi)容嫡丙，所以我們需要做的事情就變得很簡單了拴袭。

• 維護(hù)data變量

image

state大家注意，這個(gè)是一個(gè)固定的寫法曙博，別換成別的拥刻，react會自動監(jiān)聽Environment組件的state變量里的數(shù)據(jù)內(nèi)容。這么理解父泳，state等于是一個(gè)動態(tài)變量池般哼，你在里面放入一個(gè)data，當(dāng)state里面的data發(fā)生變化惠窄，react會自動檢測data是否在dom上有顯示蒸眠，有的話就自動更新。

同時(shí)杆融，我們還要把原來的dataSource去掉楞卡，換成data。

• 編寫獲取后端的接口

image

這邊我們一次性把增刪改查的接口都編寫好脾歇，以便之后去使用蒋腮。其實(shí)就是request請求，然后傳入對應(yīng)的請求方式和url地址+參數(shù)等藕各。注意以下圖中post和get的區(qū)別池摧。

有同學(xué)可能注意到了，第一個(gè)listEnvironment接口method下面一行的params激况，怎么不是key-value的形式险绘？有同學(xué)知道的嗎？

其實(shí)這里是一個(gè)省略的寫法誉碴，當(dāng)key的名字和value變量名一樣的時(shí)候，可以省掉key瓣距。也就是說:

{key: key}可以簡寫為{key}黔帕，注意：前面的key是字符串，后面的key是變量蹈丸。這個(gè)大家要搞明白才能玩得轉(zhuǎn)成黄！

• 需要維護(hù)的變量

  由于我們的環(huán)境列表獲取頁支持分頁呐芥，所以在獲取列表的時(shí)候，需要加上當(dāng)前page和size2個(gè)參數(shù)奋岁。這邊我們還得維護(hù)一個(gè)變量: pagination思瘟，這樣當(dāng)我們用戶切換頁碼的時(shí)候，我們可以去請求對應(yīng)page的環(huán)境列表闻伶。

默認(rèn)current為第1頁滨攻，pageSize為8，數(shù)據(jù)總數(shù)為0

由于我們的list接口還需要一個(gè)name參數(shù)蓝翰，而這個(gè)name也會進(jìn)行更換光绕，所以我們也要維護(hù)一個(gè)name的變量。

• 編寫獲取環(huán)境列表的方法

image

這個(gè)方法接受page, size和name3個(gè)參數(shù)畜份，如果不傳入的話诞帐，默認(rèn)為state里面的值。為啥要設(shè)定參數(shù)爆雹，這個(gè)說來話長停蕉，因?yàn)閞eact的修改狀態(tài)不是立馬生效的，是異步的钙态。

舉個(gè)例子慧起，你在翻頁的時(shí)候，想的是更新了頁碼的當(dāng)前頁從1->2驯绎，然后重新調(diào)用fetchEnvironmentList方法完慧，可能還是取的第一頁數(shù)據(jù)。所以我們需要支持參數(shù)化剩失，這樣更可控屈尼。

如果請求成功，我們就更新data的數(shù)據(jù)為response.data拴孤， pagination的total字段為res.total脾歧。

這里有個(gè)細(xì)節(jié)要值得注意:

我們更新狀態(tài)，必須用this.setState演熟，不能直接去修改它的值鞭执。比如: this.state.data = xxx，這樣是不對的芒粹。

• 思考什么時(shí)候會發(fā)生獲取環(huán)境列表的調(diào)用

  其實(shí)有2個(gè)地方兄纺，第一個(gè)是我剛進(jìn)來，你要給我展示第一頁的數(shù)據(jù)化漆。第二個(gè)是我搜索的時(shí)候估脆，你也要給我展示新的數(shù)據(jù)。

image

我們加上一個(gè)這樣的方法座云，componentDidMount是react的一個(gè)固定的寫法疙赠，也是繼承自Component的方法付材，代表這個(gè)組件加載后執(zhí)行的方法，這個(gè)方法僅僅會被執(zhí)行一次圃阳，滿足了我們的需求（一進(jìn)來就獲取環(huán)境信息）厌衔。

看看效果

那個(gè)創(chuàng)建人為1的地方，大家先忽略掉捍岳，因?yàn)槲掖娴氖怯脩鬷d富寿。

編寫查找的方法

首先我們需要改寫搜索框，當(dāng)搜索框的文本有變化的時(shí)候祟同，我們需要去更新name作喘，其次是用戶點(diǎn)擊搜索按鈕或回車的時(shí)候，我們要去根據(jù)輸入的內(nèi)容搜索對應(yīng)的環(huán)境晕城。

• 改寫搜索框

image

注意一下泞坦，這個(gè)輸入框的內(nèi)容的value是this.state.name，然后onChange是antd為Input輸入框提供的方法砖顷，e.target.value可以拿到用戶輸入的新值贰锁，接著我們根據(jù)新的值改寫name即可。

onSearch方法滤蝠，實(shí)際上調(diào)用了fetchEnvironmentList方法豌熄，第三個(gè)參數(shù)傳入了當(dāng)前用戶輸入的name。

image

編寫新增/修改功能

其實(shí)新增和修改很簡單物咳，我們想象有一個(gè)對話框锣险，里面可以填寫環(huán)境名和備注，那不就o了嗎览闰？雀氏如此芯肤！

復(fù)雜的表單，antd都給我們封裝好了压鉴，博主這里又進(jìn)一步封裝了一層崖咨，有興趣的可以去看具體的源碼。

我們想做的就是油吭，點(diǎn)擊新增環(huán)境按鈕击蹲，給咱家彈出一個(gè)對話框，那對話框啥時(shí)候顯示婉宰，是不是很明了了呢歌豺？你點(diǎn)的時(shí)候就顯示，X掉就不顯示了心包。

所以我們需要一個(gè)visible的變量(默認(rèn)為false)世曾，去管理我們對話框是否出現(xiàn)。還需要一條記錄record，用于初始化表單的數(shù)據(jù)轮听。

image

Modal(也就是對話框)我們已經(jīng)編寫好了，onFinish代表的是表單的提交動作岭佳，在這里有2種：

• 新增環(huán)境

• 編輯環(huán)境

  怎么區(qū)分它們呢血巍？我們根據(jù)record里面的id是不是0來區(qū)分，如果不是0說明是編輯動作珊随，否則則是新增動作述寡。所以我們在點(diǎn)擊新增環(huán)境按鈕的時(shí)候，需要把record也進(jìn)行下修改叶洞。

可以看到我們可以正確獲取到表單的數(shù)據(jù)

接著我們來編寫onFinish方法:

image

如果成功提交鲫凶，我們需要關(guān)閉對話框！最終我們重新獲取一遍數(shù)據(jù)衩辟，嘿嘿螟炫。

最后，我們需要為編輯按鈕添加一個(gè)點(diǎn)擊事件: 顯示出對話框并把表單初始化為這行數(shù)據(jù)艺晴。

image

編寫刪除方法

image

刪除很簡單昼钻，只需要傳入record.id給onDelete方法，并調(diào)用到后端接口即可封寞。

你以為然评，這就結(jié)束了？其實(shí)還有2個(gè)地方狈究！有沒有想過碗淌，我們沒有處理table翻頁的情況，還有個(gè)就是上面的創(chuàng)建人是數(shù)字的情況抖锥。

編寫翻頁功能

image

只需要在table的onChange事件里面調(diào)用獲取環(huán)境列表的方法即可亿眠。注意，pagination參數(shù)是當(dāng)前你要翻的頁面宁改，比如你從第一頁到第二頁缕探，那么pagination的數(shù)據(jù)是{current: 2, pageSize: 8}，這個(gè)大家可以自己console.log輸出試試还蹲。還得指定pagination參數(shù)為this.state.pagination爹耗。

簡單地替大家嘗試一下

image

image

其實(shí)拆分不太合理，下篇花了太多時(shí)間谜喊。但是也不想花費(fèi)太多篇章了潭兽。辛苦大家耐心看完了！不太完整的前端教程就到這里了~