6 尚硅谷_權(quán)限系統(tǒng)_RBAC_菜單模塊_作業(yè)

Java課程系列項(xiàng)目課程系列之權(quán)限系統(tǒng)尚硅谷JavaEE教研組版本：V1.0 第一章 ztree介紹和使用1.1 菜單樹實(shí)現(xiàn)原理 1.2 參考zTree-demo1.3 查看框架的源代碼1.3.1 本地文檔1.3.2 聯(lián)網(wǎng)文檔1.4 Demo演示1.4.1 將ztree引入到項(xiàng)目中1.4.2 分析樹結(jié)構(gòu)引入css和js，拷貝zTree案例代碼，展示出樹結(jié)構(gòu)。1.4.3 增加容器1.4.4 增加模擬代碼var zNodes = name:父節(jié)點(diǎn)1 - 展開, open:true, children: name:父節(jié)點(diǎn)11 - 折疊, children: name:葉子節(jié)點(diǎn)111, name:葉子節(jié)點(diǎn)112, name:葉子節(jié)點(diǎn)113, name:葉子節(jié)點(diǎn)114 , name:父節(jié)點(diǎn)12 - 折疊, children: name:葉子節(jié)點(diǎn)121, name:葉子節(jié)點(diǎn)122, name:葉子節(jié)點(diǎn)123, name:葉子節(jié)點(diǎn)124 , name:父節(jié)點(diǎn)13 - 沒有子節(jié)點(diǎn), isParent:true , name:父節(jié)點(diǎn)2 - 折疊, children: name:父節(jié)點(diǎn)21 - 展開, open:true, children: name:葉子節(jié)點(diǎn)211, name:葉子節(jié)點(diǎn)212, name:葉子節(jié)點(diǎn)213, name:葉子節(jié)點(diǎn)214 , name:父節(jié)點(diǎn)22 - 折疊, children: name:葉子節(jié)點(diǎn)221, name:葉子節(jié)點(diǎn)222, name:葉子節(jié)點(diǎn)223, name:葉子節(jié)點(diǎn)224 , name:父節(jié)點(diǎn)23 - 折疊, children: name:葉子節(jié)點(diǎn)231, name:葉子節(jié)點(diǎn)232, name:葉子節(jié)點(diǎn)233, name:葉子節(jié)點(diǎn)234 , name:父節(jié)點(diǎn)3 - 沒有子節(jié)點(diǎn), isParent:true ; var setting = ; $.fn.zTree.init($(#treeDemo), setting, zNodes);1.4.5 簡單JSONvar setting = data: simpleData: enable: true ; var zNodes = id:1, pId:0, name:pNode 1, open:true, id:11, pId:1, name:pNode 11, id:111, pId:11, name:leaf node 111, id:112, pId:11, name:leaf node 112, id:113, pId:11, name:leaf node 113, id:114, pId:11, name:leaf node 114, id:12, pId:1, name:pNode 12, id:121, pId:12, name:leaf node 121, id:122, pId:12, name:leaf node 122, id:123, pId:12, name:leaf node 123, id:124, pId:12, name:leaf node 124, id:13, pId:1, name:pNode 13 - no child, isParent:true, id:2, pId:0, name:pNode 2, id:21, pId:2, name:pNode 21, open:true, id:211, pId:21, name:leaf node 211, id:212, pId:21, name:leaf node 212, id:213, pId:21, name:leaf node 213, id:214, pId:21, name:leaf node 214, id:22, pId:2, name:pNode 22, id:221, pId:22, name:leaf node 221, id:222, pId:22, name:leaf node 222, id:223, pId:22, name:leaf node 223, id:224, pId:22, name:leaf node 224, id:23, pId:2, name:pNode 23, id:231, pId:23, name:leaf node 231, id:232, pId:23, name:leaf node 232, id:233, pId:23, name:leaf node 233, id:234, pId:23, name:leaf node 234, id:3, pId:0, name:pNode 3 - no child, isParent:true ; $(document).ready(function() $.fn.zTree.init($(#treeDemo), setting, zNodes); ); 第二章 加載菜單樹2.1 加載許可樹2.1.1 準(zhǔn)備模擬數(shù)據(jù)2.1.2 加載菜單樹，導(dǎo)入 zTree2.1.3 控制器ResponseBodyGetMapping(/list)public List menusList()List listMenus = systemMenuService.listMenusUnmerge();return listMenus;2.1.4 業(yè)務(wù)層Overridepublic List listMenusUnmerge() return menuMapper.selectByExample(null);2.1.5 頁面展示var ztreeObj = null;$(function()/初始化所有菜單initMenus(););function initMenus()/1、ztree配置項(xiàng)var setting = data : simpleData : enable : true,pIdKey: pid /指定哪個(gè)為父ID，默認(rèn)查找名稱為pId屬性,key:url:xxx/指定一個(gè)不被識別的屬性，這樣點(diǎn)擊菜單就不會執(zhí)行url跳轉(zhuǎn)了 ;/2、拿到menu的ztree數(shù)據(jù)$.get($appPath/menu/list,function(data)/3、展示節(jié)點(diǎn)ztreeObj = $.fn.zTree.init($(#menuTree), setting, data);/展開所有節(jié)點(diǎn)/var ztreeObj = $.fn.zTree.getZTreeObj(menuTree);ztreeObj.expandAll(true););2.2 增加根菜單data.push(id:0,name:系統(tǒng)菜單);2.3 增加圖標(biāo)l 注意：設(shè)置圖標(biāo)時(shí)，如果字體出現(xiàn)亂碼，需要將css映射引用放置在Bootstrap樣式之前。l 自定義圖標(biāo)/1、ztree配置項(xiàng)var setting = view: /定制顯示效果addDiyDom: customeIcon,/顯示自定義圖標(biāo)addHoverDom: addHoverDom, /顯示按鈕removeHoverDom: removeHoverDom /移除按鈕;/自定義圖標(biāo)function customeIcon(treeId,treeNode)/treeId：整個(gè)ztree樹的id，treeNode：當(dāng)前正在渲染的節(jié)點(diǎn)console.log(treeNode)/1、找到每一個(gè)ztree節(jié)點(diǎn)上用來顯示圖標(biāo)的標(biāo)簽，刪掉這個(gè)標(biāo)簽的原來的class。加上我們指定的class/2、每一個(gè)節(jié)點(diǎn)展示的時(shí)候都會調(diào)用/$(#+treeNode.tId+_span).text(111)$(#+treeNode.tId+_ico).removeClass();/.addClass();$(#+treeNode.tId+_span).before()l data.push(id:0,name:系統(tǒng)菜單,icon:glyphicon glyphicon-asterisk);l 相關(guān)節(jié)點(diǎn)說明顯示文字的標(biāo)簽 id=menuTree_4_span顯示圖標(biāo)的標(biāo)簽 id=menuTree_4_ico整個(gè)子節(jié)點(diǎn)：idmenuTree_4_a 的a標(biāo)簽tId+_span：就是用來顯示文字的tid+_ico：就是用來顯示圖標(biāo)的2.4 增加、移除按鈕組2.4.1 增加事件處理view: /定制顯示效果addDiyDom: customeIcon,/顯示自定義圖標(biāo)addHoverDom: addHoverDom, /顯示按鈕removeHoverDom: removeHoverDom /移除按鈕2.4.2 增加按鈕組function addHoverDom(treeId,treeNode)var aObj = $(# + treeNode.tId + _a); aObj.attr(href, javascript:;);aObj.attr(onclick, return false;);if (treeNode.editNameFlag | $(#btnGroup+treeNode.tId).length0) return;var s = ;if ( treeNode.level = 0 ) s +=    else if ( treeNode.level = 1 ) s +=   if (treeNode.children.length = 0) s +=   s +=    else if ( treeNode.level = 2 ) s +=   s +=   s += ;aObj.after(s);2.4.3 移除按鈕組function removeHoverDom(treeId,treeNode)$(#btnGroup+treeNode.tId).remove();2.5 按鈕組事件綁定給按鈕增加事件綁定function addBtn(id)alert(add：+id);function updateBtn(id)alert(update:+id);function deleteBtn(id)alert(delete:+id);第三章 菜單新增3.1 事件處理function addBtn(id)$(#addFormPid).val(id);$(#AddModal).modal(show:true,backdrop:static,keyboard:false)function saveMenu()var pid = $(#addFormPid).val();var name = $(#addFormName).val();var icon = $(#addFormIcon).val();var url = $(#addFormUrl).val();$.post($PATH/menu/add,pid:pid,name:name,icon:icon,url:url,function(result)if(result=ok)$(#AddModal).modal(hide);initTree(););/* $(#addFormPid).val();$(#addFormName).val();$(#addFormIcon).val();$(#addFormUrl).val(); */$(#addMenuForm)0.reset();3.2 模態(tài)框 × 添加菜單 菜單名稱 菜單圖標(biāo) 菜單URL 關(guān)閉 保存 3.3 后臺代碼處理l ControllerResponseBodyPostMapping(/add)public String addMenu(TMenu menu)systemMenuService.saveMenu(menu);return ok;l Service void saveMenu(TMenu menu);l ServiceImplOverridepublic void saveMenu(TMenu menu) menuMapper.insertSelective(menu);3.4 添加后效果3.5 注意事項(xiàng)l 只有根節(jié)點(diǎn)和分支節(jié)點(diǎn)可以添加l 葉子節(jié)點(diǎn)不能添加第四章 菜單修改4.1 事件處理function updateBtn(id)$.get($PATH/menu/get,id:id,function(result)$(#UpdateModal inputname=id).val(result.id);$(#UpdateModal inputname=name).val();$(#UpdateModal inputname=icon).val(result.icon);$(#UpdateModal inputname=url).val(result.url);$(#UpdateModal).modal(show:true,backdrop:static,keyboard:false);function updateMenu()var id = $(#UpdateModal inputname=id).val();var name = $(#UpdateModal inputname=name).val();var icon = $(#UpdateModal inputname=icon).val();var url = $(#UpdateModal inputname=url).val();$.post($PATH/menu/edit,id:id,name:name,icon:icon,url:url,function(result)if(result=ok)$(#UpdateModal).modal(hide);initTree(););4.2 模態(tài)框 × 修改菜單 菜單名稱 菜單圖標(biāo) 菜單URL 關(guān)閉 修改 4.3 后臺代碼處理l ControllerResponseBodyPostMapping(/edit)public String editMenu(TMenu menu)systemMenuService.editMenu(menu);return ok;ResponseBodyGetMapping(/get)public TMenu getMenu(Integer id)return systemMenuService.getMenuById(id);l Service void editMenu(TMenu menu);TMenu getMenuById(Integer id);l ServiceImplOverridepublic void editMenu(TMenu menu) menuMapper.updat