實(shí)項(xiàng)操目JavaEE框架應(yīng)用開發(fā)（SpringBoot+VueJS）工作單元十

實(shí)現(xiàn)菜單前端管理功能CHAPTERTEN任務(wù)2

實(shí)現(xiàn)菜單新增功能任務(wù)分析本任務(wù)來實(shí)現(xiàn)新增菜單功能，在菜單管理界面，單擊“新增”按鈕彈出“添加菜單”窗口，在窗口中錄入數(shù)據(jù)，單擊“確定”按鈕實(shí)現(xiàn)菜單的新增功能。任務(wù)實(shí)施步驟1.

編寫新增按鈕實(shí)現(xiàn)邏輯步驟2.增加添加對話框頁面步驟3.實(shí)現(xiàn)菜單圖標(biāo)選擇功能步驟4.引入自定義組件步驟5.實(shí)現(xiàn)表單處理方法步驟6.編寫請求后端接口代碼步驟7.運(yùn)行調(diào)試步驟1

編寫新增按鈕實(shí)現(xiàn)邏輯修改system/menu/index.vue

組件，實(shí)現(xiàn)“新增”按鈕綁定的handleAdd(row)方法以及該方法內(nèi)表單重置的reset()方法和獲取菜單下拉樹結(jié)構(gòu)的getTreeselect()方法。步驟2增加添加對話框頁面修改system/menu/index.vue

組件，使用el-dialog實(shí)現(xiàn)增加“添加或修改菜單對話框”效果，將Treeselect

組件和IconSelect

組件分別用于實(shí)現(xiàn)樹形菜單選擇和圖標(biāo)選擇的效果。步驟3實(shí)現(xiàn)菜單圖標(biāo)選擇功能1）創(chuàng)建“src\components\IconSelect\index.vue”文件，構(gòu)建步驟2中使用的IconSelect組件的模板內(nèi)容，用于實(shí)現(xiàn)菜單圖標(biāo)的選擇功能。2）創(chuàng)建“src\components\IconSelect\requireIcons.js”文件，引入步驟2中使用的IconSelect組件的圖標(biāo)文件，用于實(shí)現(xiàn)菜單圖標(biāo)的選擇功能。步驟4引入自定義組件1）在“package.json”文件的dependencies下增加Treeselect

依賴。2）引入步驟3創(chuàng)建的IconSelect

組件和Treeselect

組件。步驟5實(shí)現(xiàn)表單處理方法1）實(shí)現(xiàn)步驟2中彈出框的cancel和submitForm

方法。2）實(shí)現(xiàn)步驟2中彈出框的cancel和submitForm

方法。步驟6

編寫請求后端接口的代碼在“api/system/menu.js”中增加addMenu

函數(shù)，addMenu

函數(shù)使用post請求方法，請求后端接口“/system/menu/”，傳遞頁面輸入的菜單信息作為data參數(shù)，用于新增菜單數(shù)據(jù)到數(shù)據(jù)