vue框架編輯接口頁面下拉級聯(lián)選擇并綁定接口所屬模塊
基于 springboot+vue 的測試平臺開發(fā)
繼續(xù)更新
停更得有半年,最近待業(yè)家中沒有理由不繼續(xù)更新了。本來是打算做別的功能,但是我的重新調(diào)試環(huán)境的時候發(fā)現(xiàn)了bug,搞半天原來是因為沒實現(xiàn)接口與模塊的綁定,導(dǎo)致點擊左側(cè)模塊樹之后列表頁就沒數(shù)據(jù)。氣死我了,那先來把這個坑填上。
先看一下最后的功能效果動圖。
因為完善這個功能要涉及一些之前功能的改動,所以接下來以實際的開發(fā)修改過程來記錄內(nèi)容(源碼獲取在文末):
尋找級聯(lián)組件后端返回組件需要的數(shù)據(jù)內(nèi)容修改前端內(nèi)容,使用級聯(lián)組件修改新增、編輯功能,保存選擇的模塊修改編輯回顯功能,顯示對應(yīng)節(jié)點
一、級聯(lián)選擇器組件
elementUI 官網(wǎng),找到級聯(lián)選擇器組件。
查看組件的功能屬性,發(fā)現(xiàn)可以滿足我的需求:
懸停觸發(fā)級聯(lián)菜單支持單獨選擇每一級支持搜索節(jié)點
二、后端返回組件需要的數(shù)據(jù)
查看組件屬性得知所需的數(shù)據(jù)內(nèi)容,value
用于存放選擇的節(jié)點,注意這里存進(jìn)去的是數(shù)組。而options
就是數(shù)據(jù)源來,也是一個數(shù)組,里面的屬性有:
value,選擇節(jié)點時候的賦值label,顯示的節(jié)點文本內(nèi)容children,子節(jié)點嵌套的內(nèi)容
其實這里模塊節(jié)點里要用的數(shù)據(jù),就是左側(cè)模塊樹的數(shù)據(jù)。
對于這個模塊樹我后端是有一個專門的接口返回的,所以我打算復(fù)用這個接口。思路就是當(dāng)這個接口被請求的時候,我再把這個接口返回的數(shù)據(jù)賦值options
即可。
但是用下來發(fā)現(xiàn)后端原接口是少了一個返回字段value
,會導(dǎo)致選擇的時候有bug,所以我修改了后端接口,增加一個字段的返回。
新增的字段里的值我使用模塊id,不會重復(fù)。
F12看下修改后的接口返回,沒問題。
三、前端使用級聯(lián)組件
后端數(shù)據(jù)有了,下面改前端,找到編輯頁面里的對應(yīng)位置,原來的內(nèi)容是我臨時放置的一個下拉選擇框(圖中被注釋部分),現(xiàn)在用級聯(lián)組件的內(nèi)容(紅框部分)替換上去。
說一下用到的組件屬性:
:show-all-levels="false": 輸入框中是否顯示選中值的完整路徑,false就只顯示最后一級。
filterable: 是否可搜索選項,開啟
placeholder: 占位符,顯示背景內(nèi)容
clearable:支持清空選項
v-model: 綁定你選中的節(jié)點value 到某個字段上
options: 后端接口返回的數(shù)據(jù),存放在這個字段上
:props:用到的一些其他配置選項
@change:當(dāng)選中節(jié)點變化時觸發(fā)
{ expandTrigger: 'hover', checkStrictly: true },關(guān)于用到的2個 props,作用分別是:
expandTrigger:次級菜單的展開方式,hover是鼠標(biāo)懸停展開,我覺得比較方便。
checkStrictly: 是否嚴(yán)格的遵守父子節(jié)點不互相關(guān)聯(lián),true 就可以支持任意一個節(jié)點的選擇。
四、新增、編輯里保存選擇的模塊
我重新查看了前端點擊保存按鈕的代碼,發(fā)現(xiàn)會判斷此時是新增還是編輯,從而選擇調(diào)用對應(yīng)的新增或者修改方法。
進(jìn)一步查看這2個方法,發(fā)現(xiàn)里面關(guān)于請求數(shù)據(jù)的處理都封裝在另一個方法handleSaveRequest
里。
找到方法了對應(yīng)的模塊id的字段,之前我沒實現(xiàn)這個功能的時候,是寫死了 0。
這里我前端做了一下處理,因為后端接口接收到參數(shù)是int,但是組件這里 value 是數(shù)組,通過在handleChange
方法里加log打印,查看控制臺里的返回便知。
這里我操作了2次,發(fā)現(xiàn)數(shù)組的最后一個是你選擇的節(jié)點,所以我要取出這個最后一個節(jié)點用來請求后端接口,索引就是數(shù)組length-1
。
本來以為這樣就可以了,后來調(diào)試時候發(fā)現(xiàn)bug,最后發(fā)現(xiàn)新增和編輯的時候,還不能統(tǒng)一都這么處理。
因為新增的時候傳入的是數(shù)組,但是編輯的時候就只是一個值,所以這里更具當(dāng)前的頁面狀態(tài)是編輯還是新增加了判斷,分開處理。
調(diào)試一下編輯保存,查看入?yún)⒁约皵?shù)據(jù)庫落庫都正常。
調(diào)試一下新增保存,查看入?yún)⒁约皵?shù)據(jù)庫落庫都正常。
五、編輯回顯模塊節(jié)點
此時我點擊編輯按鈕打開編輯頁面,發(fā)現(xiàn)是沒顯示已保存的模塊節(jié)點的。
F12 查看打開編輯調(diào)用的接口,發(fā)現(xiàn)接口返回里有了 moduleId 。
但是我原接口里返回的是 int 類型,這里看控制臺里組件里的是字符串,所以我嘗試修改了下后端的接口,以及數(shù)據(jù)庫的字段類型,正常了。
看下效果。
坑填上了,完整代碼更新
前端:
https://github.com/wessonlan/bloomtest-web
后端
https://github.com/wessonlan/bloomtest-backend
以上就是vue框架編輯接口頁面下拉級聯(lián)選擇并綁定接口所屬模塊的詳細(xì)內(nèi)容,更多關(guān)于vue下拉級聯(lián)選擇并綁定接口所屬模塊的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Vuex中mutations和actions的區(qū)別及說明
這篇文章主要介紹了Vuex中mutations和actions的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12