基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【七】【菜单维护模块】

最新推荐文章于 2023-03-12 15:39:04 发布

绝影邪

最新推荐文章于 2023-03-12 15:39:04 发布

阅读量303

点赞数

分类专栏： SpringBoot

SpringBoot 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

大家在阅读本章的时候大家一定要把上一章的代码从GitHub上拿下来先，因此本章的以及后续章节的所有的Java代码都是基于上一章节的代码因此大家一定要记得把上一章的代码全部给clone下来，否则本章的代码大家将无法运行起来。

通过上一章节我们已经完成了我们的基本架构的开发工作，那么这一章我们将开发我们的菜单维护模块，实现对菜单的增删改查的功能，该模块的菜单树使用的是ztree的前端js的代码，首先在我们开发该模块的时候我们需要到WebMvcConfig中增加如下配置：

接着我们开始编写我们的菜单模块的代码首先建如下的文件路径，同时我们实现我们的菜单维护的业务逻辑：

首先是treeList.html的页面的代码（该页面使用了bootstrap和ztree）

<html xmlns:th="http://www.thymeleaf.org"
>
<head th:include="include/includebase"></head>
<body>
<div id="content" class="row-fluid">
<div class="col-md-3 " style="margin-top: 10px;">
<ul id="menu_tree" class="ztree" style="width:560px; overflow:auto;"></ul>
</div>
</div>
<script th:inline="javascript">
var zTree;
var demoIframe;
var selectNode;
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
var addStr = "<span class='button remove' id='removeBtn_" + treeNode.tId + "' title='add node' onfocus='this.blur();'></span>";
addStr += "<span class='button add' id='addBtn_" + treeNode.tId + "'></span>";
addStr += "<span class='button edit' id='editBtn_" + treeNode.tId + "'></span>";
if(treeNode.isParent){
addStr += "<span class='button add' id='addParentBtn_" + treeNode.tId + "'></span>";
}
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.tId);
if (btn) btn.bind("click", function(){
zTree = $.fn.zTree.getZTreeObj("menu_tree");
selectNode = treeNode;
window.Ewin.dialog({title:"添加",url:"tree/addTreePage?id="+treeNode.id,width:400,height:650})
return false;
});
var remove_btn = $("#removeBtn_"+treeNode.tId);
if (remove_btn) remove_btn.bind("click", function() {
zTree = $.fn.zTree.getZTreeObj("menu_tree");
if (treeNode.isParent) {
window.Ewin.alert({message:"请先删除当前菜单节点底下的子菜单！"});
}else{
window.Ewin.confirm({title: '提示', message: '是否要删除您当前选中的菜单节点？', width: 500}).on(function (e) {
if (e) {
$.post("tree/remove",{id:treeNode.id},function(e){
if(e.result){
zTree.removeNode(treeNode);
window.Ewin.alert({message:e.msg});
}else{
window.Ewin.alert({message:e.msg});
}
})
}
});
}
return false;
});
var edit_btn = $("#editBtn_"+treeNode.tId);
if (edit_btn) edit_btn.bind("click", function(){
zTree = $.fn.zTree.getZTreeObj("menu_tree");
selectNode = treeNode;
window.Ewin.dialog({title:"修改",url:"tree/updateTreePage?id="+treeNode.id,width:400,height:650})
return false;
});
var add_parent_btn = $("#addParentBtn_"+treeNode.tId);
if (add_parent_btn) add_parent_btn.bind("click", function(){
zTree = $.fn.zTree.getZTreeObj("menu_tree");
selectNode = null;
window.Ewin.dialog({title:"添加",url:"tree/addTreePage",width:400,height:650})
return false;
})
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
$("#removeBtn_"+treeNode.tId).unbind().remove();
$("#editBtn_"+treeNode.tId).unbind().remove();
$("#addParentBtn_"+treeNode.tId).unbind().remove();
};
var setting = {
check: {
enable: false
},
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable:true,
idKey: "id",
pIdKey: "pId",
rootPId: "0"
}
},
callback: {
beforeClick: function(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj('menu_tree');
if (treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
return true;
}
}
}
};
function loadReady() {
var bodyH = demoIframe.contents().find("body").get(0).scrollHeight,
htmlH = demoIframe.contents().find("html").get(0).scrollHeight,
maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH),
h = demoIframe.height() >= maxH ? minH:maxH;
if (h < 530){
h = 530;
}
demoIframe.height(h);
}
$(function() {
$.post("/tree/loadUserTree",function(info){
var t = $("#menu_tree");
t = $.fn.zTree.init(t, setting,info.data);
})
});
</script>
</body>
</html>

接着是add.html增加菜单的页面的代码：

<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<body>
<form id="treeForm" role="form" method="post" action="tree/save">
<input type="hidden" name="pId" th:value="${entity.id}" />
<div class="form-group" >
<label >父菜单名称:</label>
<input type="text" class="form-control" th:value="${entity.name}" readonly="readonly" />
</div>
<div class="form-group">
<label for="name">菜单名称:</label>
<input type="text" class="form-control" name="name" id="name" placeholder="请输入菜单名称" />
</div>
<div class="form-group">
<label for="url">菜单地址:</label>
<input type="text" class="form-control" name="url" id="url" placeholder="请输入菜单地址" />
</div>
<div class="form-group">
<label for="icon">菜单样式:</label>
<input type="text" class="form-control" name="icon" id="icon" placeholder="请输入菜单样式" />
</div>
<div class="form-group">
<label for="url">菜单编码:</label>
<input type="text" class="form-control" name="code" id="code" placeholder="请输入菜单编码" />
</div>
<div class="form-group">
<label for="treeOrder">菜单顺序:</label>
<input type="text" class="form-control" name="treeOrder" id="treeOrder" placeholder="请输入菜单顺序" />
</div>
<div class="form-group">
<label >菜单状态:</label>
<label class='radio-inline'><input type='radio' name='state' value='1' checked="checked" />可用</label>
<label class='radio-inline'><input type='radio' name='state' value='0' />禁用</label>
</div>
</form>
<script th:inline="javascript">
<![CDATA[
$(function () {
$('#treeForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
message: '菜单名称验证失败',
validators: {
notEmpty: {
message: '菜单名称不能为空'
}
}
},
url: {
message: '菜单地址验证失败',
validators: {
notEmpty: {
message: '菜单地址不能为空'
}
}
},
code: {
message: '菜单编码验证失败',
validators: {
notEmpty: {
message: '菜单编码不能为空'
}
}
},
treeOrder: {
message: '菜单顺序验证失败',
validators: {
notEmpty: {
message: '菜单顺序不能为空'
},
regexp: {
regexp: /^[0-9_]+$/,
message: '菜单顺序必须为数字'
},
stringLength: {
min: 1,
max: 18,
message: '菜单顺序必须在1到18位之间'
}
}
}
}
})
// 绑定dialog的确定按钮的监听事件
$("#btnOk",window.top.document).click(function() {
var bootstrapValidator = $("#treeForm", window.top.document).data('bootstrapValidator');
bootstrapValidator.validate();
if(bootstrapValidator.isValid()){
var zTree = $(window.parent.document).contents().find(".tab-pane.fade.active.in iframe")[0].contentWindow.zTree;
var selectNode = $(window.parent.document).contents().find(".tab-pane.fade.active.in iframe")[0].contentWindow.selectNode;
$.post($("#treeForm",window.top.document).attr('action'),$("#treeForm",window.top.document).serialize(),function(e){
if(e.result){
$('.modal-dialog', window.top.document).parent('div').remove()
$('body', window.top.document).find('.modal-backdrop').remove();
var entity = e.entity;
zTree.addNodes(selectNode, {id:entity.id, pId:entity.pId, name:entity.name});
window.Ewin.alert({message:'增加数据成功!'});
}else{
window.Ewin.alert({message:'增加数据失败!'});
}
})
}
});
})
]]>
</script>
</body>
</html>

最后是update.html修改菜单页面的代码：

<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<body>
<form id="treeForm" role="form" method="post" action="tree/update">
<input type="hidden" name="pId" th:value="${entity.tree.id}" />
<input type="hidden" name="id" th:value="${entity.id}" />
<div class="form-group" >
<label >父菜单名称:</label>
<input type="text" class="form-control" th:value="${entity.tree.name}" readonly="readonly" />
</div>
<div class="form-group">
<label for="name">菜单名称:</label>
<input type="text" class="form-control" name="name" id="name" th:value="${entity.name}" placeholder="请输入菜单名称" />
</div>
<div class="form-group">
<label for="url">菜单地址:</label>
<input type="text" class="form-control" name="url" id="url" th:value="${entity.url}" placeholder="请输入菜单地址" />
</div>
<div class="form-group">
<label for="icon">菜单样式:</label>
<input type="text" class="form-control" name="icon" id="icon" th:value="${entity.icon}" placeholder="请输入菜单样式" />
</div>
<div class="form-group">
<label for="url">菜单编码:</label>
<input type="text" class="form-control" name="code" id="code" th:value="${entity.code}" placeholder="请输入菜单编码" />
</div>
<div class="form-group">
<label for="treeOrder">菜单顺序:</label>
<input type="text" class="form-control" name="treeOrder" id="treeOrder" th:value="${entity.treeOrder}" placeholder="请输入菜单顺序" />
</div>
<div class="form-group">
<label for="treeOrder">菜单状态:</label>
<label class='radio-inline'><input type='radio' name='state' value='1' th:checked="${entity.state} == 1?true:false" />可用</label>
<label class='radio-inline'><input type='radio' name='state' value='0' th:checked="${entity.state} == 0?true:false" />禁用</label>
</div>
</form>
<script th:inline="javascript">
<![CDATA[
$(function () {
$('#treeForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
message: '菜单名称验证失败',
validators: {
notEmpty: {
message: '菜单名称不能为空'
}
}
},
url: {
message: '菜单地址验证失败',
validators: {
notEmpty: {
message: '菜单地址不能为空'
}
}
},
code: {
message: '菜单编码验证失败',
validators: {
notEmpty: {
message: '菜单编码不能为空'
}
}
},
treeOrder: {
message: '菜单顺序验证失败',
validators: {
notEmpty: {
message: '菜单顺序不能为空'
},
regexp: {
regexp: /^[0-9_]+$/,
message: '菜单顺序必须为数字'
},
stringLength: {
min: 1,
max: 18,
message: '菜单顺序必须在1到18位之间'
}
}
}
}
})
// 绑定dialog的确定按钮的监听事件
$("#btnOk",window.top.document).click(function() {
var bootstrapValidator = $("#treeForm", window.top.document).data('bootstrapValidator');
bootstrapValidator.validate();
if(bootstrapValidator.isValid()){
var zTree = $(window.parent.document).contents().find(".tab-pane.fade.active.in iframe")[0].contentWindow.zTree;
var selectNode = $(window.parent.document).contents().find(".tab-pane.fade.active.in iframe")[0].contentWindow.selectNode;
$.post($("#treeForm",window.top.document).attr('action'),$("#treeForm",window.top.document).serialize(),function(e){
if(e.result){
$('.modal-dialog', window.top.document).parent('div').remove()
$('body', window.top.document).find('.modal-backdrop').remove();
var entity = e.entity;
selectNode.name = entity.name;
zTree.updateNode(selectNode);
window.Ewin.alert({message:'修改数据成功!'});
}else{
window.Ewin.alert({message:'修改数据失败!'});
}
})
}
});
})
]]>
</script>
</body>
</html>

到此我们完成了菜单模块的开发工作，由于java代码我们在上一章已经完成了全部的开发因此此处就不再继续陈述了，开发完成以后大家可以直接运行程序查看结果如下：

本章代码的GitHub地址：https://github.com/185594-5-27/csdndemo/tree/master-base-tree

上一篇文章地址：基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【六】【引入bootstrap前端框架】

下一篇文章地址：基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【八】【完善整个项目】

绝影邪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【七】【菜单维护模块】

大家在阅读本章的时候大家一定要把上一章的代码从GitHub上拿下来先，因此本章的以及后续章节的所有的Java代码都是基于上一章节的代码因此大家一定要记得把上一章的代码全部给clone下来，否则本章的代码大家将无法运行起来。通过上一章节我们已经完成了我们的基本架构的开发工作，那么这一章我们将开发我们的菜单维护模块，实现对菜单的增删改查的功能，该模块的菜单树使用的是ztree...
复制链接

扫一扫