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

回顧

上篇編寫了一部分結構，還剩下表格沒有編寫。以及和後端介面的聯調，也會在本文補充。

補充Table內容

在此之前，我們給新增環境這個按鈕加一個icon，這樣會更直觀。

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

補充Table元件

需要注意的是，這裡和html有大不一樣的地方了。因為我們需要用到antd的Table元件，所以我們按照規矩行事，根據它需要的引數傳入對應的資料就行。

• dataSource

  一個json陣列，裡面呢，存放的是資料資訊，這個資料我們從哪兒來呢？從後端介面/config/environment/list

  獲取。

• columns

  這個是表格的列配置資訊，也是個json陣列，key代表列的key，title代表表頭的名字，dataIndex代表從dataSource的資料裡面取什麼欄位，比如上圖的address，代表這一列的內容是從address裡面取的。

但是這樣還不夠，資料和內容都不是我們想要的，所以我們還需要改造。

• 改寫columns

  我們有自己需要展示的列和欄位:

其實我們需要展示id，環境名，備註，建立人和更新時間就可以了。所以列就這幾項，但是因為我們還需要編輯某一行和刪除某一行的功能，所以我們需要再定義一列。

操作列提供了2個連結a，分別是編輯和刪除，用Divider隔開，這個是分割線。

• 暫時改變dataSource的值

  因為這裡的資料都是寫好了的，並不是真正的介面返回，可以說是假資料。我們為了測試列名顯示的情況，我們自己給他進行一些調整。

大體上我們已經完成了html結構的編寫，接著我們需要補全功能。其實路還很長，我們需要改動的地方還很多，建議大家耐心看。

拿到真實資料

上述我們是造了一個假資料，那我們怎麼拿到真實資料呢？首先，我們需要維護一個變數，舉個例子叫: data，它預設是空陣列，也就是沒資料。當我們請求了/config/environment/list介面以後，更新data變數，由於react會自動判斷變數的更新並update頁面內容，所以我們需要做的事情就變得很簡單了。

• 維護data變數

state大家注意，這個是一個固定的寫法，別換成別的，react會自動監聽Environment元件的state變數裡的資料內容。這麼理解，state等於是一個動態變數池，你在裡面放入一個data，當state裡面的data發生變化，react會自動檢測data是否在dom上有顯示，有的話就自動更新。

同時，我們還要把原來的dataSource去掉，換成data。

• 編寫獲取後端的介面

這邊我們一次性把增刪改查的介面都編寫好，以便之後去使用。其實就是request請求，然後傳入對應的請求方式和url地址+引數等。注意以下圖中post和get的區別。

有同學可能注意到了，第一個listEnvironment介面method下面一行的params，怎麼不是key-value的形式？有同學知道的嗎？

其實這裡是一個省略的寫法，當key的名字和value變數名一樣的時候，可以省掉key。也就是說:

{key: key}可以簡寫為{key}，注意：前面的key是字串，後面的key是變數。這個大家要搞明白才能玩得轉！

• 需要維護的變數

  由於我們的環境列表獲取頁支援分頁，所以在獲取列表的時候，需要加上當前page和size2個引數。這邊我們還得維護一個變數: pagination，這樣當我們使用者切換頁碼的時候，我們可以去請求對應page的環境列表。

由於我們的list介面還需要一個name引數，而這個name也會進行更換，所以我們也要維護一個name的變數。

• 編寫獲取環境列表的方法

這個方法接受page, size和name3個引數，如果不傳入的話，預設為state裡面的值。為啥要設定引數，這個說來話長，因為react的修改狀態不是立馬生效的，是非同步的。

舉個例子，你在翻頁的時候，想的是更新了頁碼的當前頁從1->2，然後重新呼叫fetchEnvironmentList方法，可能還是取的第一頁資料。所以我們需要支援引數化，這樣更可控。

如果請求成功，我們就更新data的資料為response.data， pagination的total欄位為res.total。

這裡有個細節要值得注意:

我們更新狀態，必須用this.setState，不能直接去修改它的值。比如: this.state.data = xxx，這樣是不對的。

• 思考什麼時候會發生獲取環境列表的呼叫

  其實有2個地方，第一個是我剛進來，你要給我展示第一頁的資料。第二個是我搜索的時候，你也要給我展示新的資料。

我們加上一個這樣的方法，componentDidMount是react的一個固定的寫法，也是繼承自Component的方法，代表這個元件載入後執行的方法，這個方法僅僅會被執行一次，滿足了我們的需求（一進來就獲取環境資訊）。

那個建立人為1的地方，大家先忽略掉，因為我存的是使用者id。

編寫查詢的方法

首先我們需要改寫搜尋框，當搜尋框的文字有變化的時候，我們需要去更新name，其次是使用者點選搜尋按鈕或回車的時候，我們要去根據輸入的內容搜尋對應的環境。

• 改寫搜尋框

注意一下，這個輸入框的內容的value是this.state.name，然後onChange是antd為Input輸入框提供的方法，e.target.value可以拿到使用者輸入的新值，接著我們根據新的值改寫name即可。

onSearch方法，實際上呼叫了fetchEnvironmentList方法，第三個引數傳入了當前使用者輸入的name。

編寫新增/修改功能

其實新增和修改很簡單，我們想象有一個對話方塊，裡面可以填寫環境名和備註，那不就o了嗎？雀氏如此！

複雜的表單，antd都給我們封裝好了，博主這裡又進一步封裝了一層，有興趣的可以去看具體的原始碼。

我們想做的就是，點選新增環境按鈕，給咱家彈出一個對話方塊，那對話方塊啥時候顯示，是不是很明瞭了呢？你點的時候就顯示，X掉就不顯示了。

所以我們需要一個visible的變數(預設為false)，去管理我們對話方塊是否出現。還需要一條記錄record，用於初始化表單的資料。

Modal(也就是對話方塊)我們已經編寫好了，onFinish代表的是表單的提交動作，在這裡有2種：

• 新增環境

• 編輯環境

  怎麼區分它們呢？我們根據record裡面的id是不是0來區分，如果不是0說明是編輯動作，否則則是新增動作。所以我們在點選新增環境按鈕的時候，需要把record也進行下修改。

接著我們來編寫onFinish方法:

如果成功提交，我們需要關閉對話方塊！最終我們重新獲取一遍資料，嘿嘿。

最後，我們需要為編輯按鈕新增一個點選事件: 顯示出對話方塊並把表單初始化為這行資料。

編寫刪除方法

刪除很簡單，只需要傳入record.id給onDelete方法，並呼叫到後端介面即可。

你以為，這就結束了？其實還有2個地方！有沒有想過，我們沒有處理table翻頁的情況，還有個就是上面的建立人是數字的情況。

編寫翻頁功能

只需要在table的onChange事件裡面呼叫獲取環境列表的方法即可。注意，pagination引數是當前你要翻的頁面，比如你從第一頁到第二頁，那麼pagination的資料是{current: 2, pageSize: 8}，這個大家可以自己console.log輸出試試。還得指定pagination引數為this.state.pagination。

簡單地替大家嘗試一下

其實拆分不太合理，下篇花了太多時間。但是也不想花費太多篇章了。辛苦大家耐心看完了！不太完整的前端教程就到這裡了~

前端程式碼倉庫: https://github.com/wuranxu/pityWeb

後端程式碼倉庫: https://github.com/wuranxu/pity