基於 springboot+vue 的測試平臺開發繼續更新。
停更得有半年,最近待業家中沒有理由不繼續更新了。本來是打算做別的功能,但是我的重新調試環境的時候發現了bug,搞半天原來是因爲沒實現接口與模塊的綁定,導致點擊左側模塊樹之後列表頁就沒數據。氣死我了,那先來把這個坑填上。
先看一下最後的功能效果動圖。
因爲完善這個功能要涉及一些之前功能的改動,所以接下來以實際的開發修改過程來記錄內容(源碼獲取在文末):
- 尋找級聯組件
- 後端返回組件需要的數據內容
- 修改前端內容,使用級聯組件
- 修改新增、編輯功能,保存選擇的模塊
- 修改編輯回顯功能,顯示對應節點
一、級聯選擇器組件
elementUI 官網,找到級聯選擇器組件。
查看組件的功能屬性,發現可以滿足我的需求:
- 懸停觸發級聯菜單
- 支持單獨選擇每一級
- 支持搜索節點
二、後端返回組件需要的數據
查看組件屬性得知所需的數據內容,value
用於存放選擇的節點,注意這裏存進去的是數組。而options
就是數據源來,也是一個數組,裏面的屬性有:
- value,選擇節點時候的賦值
- label,顯示的節點文本內容
- children,子節點嵌套的內容
其實這裏模塊節點裏要用的數據,就是左側模塊樹的數據。
對於這個模塊樹我後端是有一個專門的接口返回的,所以我打算複用這個接口。思路就是當這個接口被請求的時候,我再把這個接口返回的數據賦值options
即可。
但是用下來發現後端原接口是少了一個返回字段value
,會導致選擇的時候有bug,所以我修改了後端接口,增加一個字段的返回。
新增的字段裏的值我使用模塊id,不會重複。
F12看下修改後的接口返回,沒問題。
三、前端使用級聯組件
後端數據有了,下面改前端,找到編輯頁面裏的對應位置,原來的內容是我臨時放置的一個下拉選擇框(圖中被註釋部分),現在用級聯組件的內容(紅框部分)替換上去。
說一下用到的組件屬性:
:show-all-levels="false"
: 輸入框中是否顯示選中值的完整路徑,false就只顯示最後一級。filterable
: 是否可搜索選項,開啓placeholder
: 佔位符,顯示背景內容clearable
:支持清空選項v-model
: 綁定你選中的節點value 到某個字段上options
: 後端接口返回的數據,存放在這個字段上:props
:用到的一些其他配置選項@change
:當選中節點變化時觸發
{ expandTrigger: 'hover', checkStrictly: true }
,關於用到的2個 props,作用分別是:
- expandTrigger:次級菜單的展開方式,hover是鼠標懸停展開,我覺得比較方便。
- checkStrictly: 是否嚴格的遵守父子節點不互相關聯,true 就可以支持任意一個節點的選擇。
四、新增、編輯裏保存選擇的模塊
我重新查看了前端點擊保存按鈕的代碼,發現會判斷此時是新增還是編輯,從而選擇調用對應的新增或者修改方法。
進一步查看這2個方法,發現裏面關於請求數據的處理都封裝在另一個方法handleSaveRequest
裏。
找到方法了對應的模塊id的字段,之前我沒實現這個功能的時候,是寫死了 0。
這裏我前端做了一下處理,因爲後端接口接收到參數是int,但是組件這裏 value 是數組,通過在handleChange
方法里加log打印,查看控制檯裏的返回便知。
這裏我操作了2次,發現數組的最後一個是你選擇的節點,所以我要取出這個最後一個節點用來請求後端接口,索引就是數組length-1
。
本來以爲這樣就可以了,後來調試時候發現bug,最後發現新增和編輯的時候,還不能統一都這麼處理。
因爲新增的時候傳入的是數組,但是編輯的時候就只是一個值,所以這裏更具當前的頁面狀態是編輯還是新增加了判斷,分開處理。
調試一下編輯保存,查看入參以及數據庫落庫都正常。
調試一下新增保存,查看入參以及數據庫落庫都正常。
五、編輯回顯模塊節點
此時我點擊編輯按鈕打開編輯頁面,發現是沒顯示已保存的模塊節點的。
F12 查看打開編輯調用的接口,發現接口返回裏有了 moduleId 。
但是我原接口裏返回的是 int 類型,這裏看控制檯裏組件裏的是字符串,所以我嘗試修改了下後端的接口,以及數據庫的字段類型,正常了。
看下效果。
坑填上了,也想動動手的小夥伴可以通過公衆號回覆【測試平臺】獲取系列教程文章以及源碼地址。