上一章我们已经完成了菜单模块的开发工作，那么到了本章我们将完成我们角色管理模块的开发工作，在本章开始一个全新的模块进行开发的时候我们需要遵守一定的命名和开发规范如下：
1、我们的Controller的RequestMapping的命名要和我们的文件夹的命名一致，且增加的页面要叫add.html，修改的页面要叫update.html，若不按上述命名则需要大家自己去重写updatePage和addPage的方法来实现页面的跳转。
2、需要在WebMvcConfig类中配置一个首页的跳转如下：
再我们接下来的模块也是完全按照这样的步骤进行开发的，接着我们开始开发我们的角色管理模块，由于我们的Java代码在第六章的时候已经全部编写完成了，因此在这里我们只需要在WebMvcConfig增加页面跳转，同时在我们的sys目录底下创建add.html、update.html和roleList.html这三个文件代码如下：
add.html代码内容如下：
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<body>
<form id="roleForm" role="form" method="post" action="role/save">
<div class="row">
<div class="col-md-7">
<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="roleName">权限名称:</label>
<input type="text" class="form-control" name="roleName" id="roleName" placeholder="请输入权限名称" />
</div>
</div>
<div class="col-md-5" style="margin-top: 10px;">
<input type="hidden" id="treeArray" name="treeArray" />
<ul id="roleZtree" class="ztree" style="width:200px; overflow:auto;"></ul>
</div>
</div>
</form>
<script th:inline="javascript">
<![CDATA[
$(function () {
$('#roleForm').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: '权限代码不能为空'
},
threshold : 2 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
url: "role/isExist",//验证地址
data:function(validator) {// 获取需要传送到后台的验证的数据
return {
name:$("#name").val()
}
},
message: '权限代码已存在',//提示消息
delay : 500,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
type: 'POST'//请求方式
}
}
},
roleName:{
message: '权限名称验证失败',
validators: {
notEmpty: {
message: '权限名称不能为空'
}
}
}
}
})
// 绑定dialog的确定按钮的监听事件
$("#btnOk",window.top.document).click(function() {
var t = $.fn.zTree.getZTreeObj("roleZtree");
var nodes = t.getCheckedNodes(true);
var treeArray = "";
for(var i=0;i<nodes.length;i++){
if(i==0){
treeArray = nodes[i].id
}else{
treeArray = treeArray + "," + nodes[i].id
}
}
$("#treeArray").attr("value",treeArray);
// 此段是为防止需要点击两次按钮来实现验证的方法，若不添加此处的放行，那么我们将要点击两次确定按钮才可以提交验证
var name = $("#name").val();
// 判断当前的code又值，且当前不存在错误验证方可放开该字段的验证
if(name != null && name != ""&&$("#name").parent("div").find('.glyphicon-remove').length==0){
$('#roleForm').bootstrapValidator('enableFieldValidators', 'name', false);
} else {
$('#roleForm').bootstrapValidator('enableFieldValidators', 'name', true);
}
var bootstrapValidator = $("#roleForm", window.top.document).data('bootstrapValidator');
bootstrapValidator.validate();
if(bootstrapValidator.isValid()){
$.post($("#roleForm",window.top.document).attr('action'),$("#roleForm",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();
// jquery 调用刷新当前操作的table页面的refresh方法
$(window.parent.document).contents().find(".tab-pane.fade.active.in iframe")[0].contentWindow.doQuery();
window.Ewin.alert({message:'增加数据成功!'});
}else{
window.Ewin.alert({message:'增加数据失败!'});
}
})
}
});
var setting = {
check: {
enable: true
},
view: {
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('roleZtree');
if (treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
return true;
}
}
}
};
$.post("/tree/loadUserTree",function(info){
var t = $("#roleZtree");
t = $.fn.zTree.init(t, setting,info.data);
})
})
]]>
</script>
</body>
</html>update.html代码内容如下：
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<body>
<form id="roleForm" role="form" method="post" action="role/update">
<div class="row">
<div class="col-md-7">
<input type="hidden" name="id" id="roleId" th:value="${entity.id}" />
<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="roleName">权限名称:</label>
<input type="text" class="form-control" name="roleName" id="roleName" th:value="${entity.roleName}" placeholder="请输入权限名称" />
</div>
</div>
<div class="col-md-5" style="margin-top: 10px;">
<input type="hidden" id="treeArray" name="treeArray" />
<ul id="roleZtree" class="ztree" style="width:200px; overflow:auto;"></ul>
</div>
</div>
</form>
<script th:inline="javascript">
<![CDATA[
$(function () {
$('#roleForm').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: '权限代码不能为空'
},
threshold : 2 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
url: "role/isExist",//验证地址
data:function(validator) {// 获取需要传送到后台的验证的数据
return {
name:$("#name").val(),
id:$("#roleId").val()
}
},
message: '权限代码已存在',//提示消息
delay : 500,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
type: 'POST'//请求方式
}
}
},
roleName:{
message: '权限名称验证失败',
validators: {
notEmpty: {
message: '权限名称不能为空'
}
}
}
}
})
// 绑定dialog的确定按钮的监听事件
$("#btnOk",window.top.document).click(function() {
var t = $.fn.zTree.getZTreeObj("roleZtree");
var nodes = t.getCheckedNodes(true);
var treeArray = "";
for(var i=0;i<nodes.length;i++){
if(i==0){
treeArray = nodes[i].id
}else{
treeArray = treeArray + "," + nodes[i].id
}
}
$("#treeArray").attr("value",treeArray);
// 此段是为防止需要点击两次按钮来实现验证的方法，若不添加此处的放行，那么我们将要点击两次确定按钮才可以提交验证
var name = $("#name").val();
// 判断当前的code又值，且当前不存在错误验证方可放开该字段的验证
if(name != null && name != ""&&$("#name").parent("div").find('.glyphicon-remove').length==0){
$('#roleForm').bootstrapValidator('enableFieldValidators', 'name', false);
} else {
$('#roleForm').bootstrapValidator('enableFieldValidators', 'name', true);
}
var bootstrapValidator = $("#roleForm", window.top.document).data('bootstrapValidator');
bootstrapValidator.validate();
if(bootstrapValidator.isValid()){
$.post($("#roleForm",window.top.document).attr('action'),$("#roleForm",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();
// jquery 调用刷新当前操作的table页面的refresh方法
$(window.parent.document).contents().find(".tab-pane.fade.active.in iframe")[0].contentWindow.doQuery();
window.Ewin.alert({message:'修改数据成功!'});
}else{
window.Ewin.alert({message:'修改数据失败!'});
}
})
}
});
var setting = {
check: {
enable: true
},
view: {
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('roleZtree');
if (treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
return true;
}
}
}
};
$.post("/role/loadRoleTree?id="+[[${entity.id}]],function(info){
var t = $("#roleZtree");
t = $.fn.zTree.init(t, setting,info.data);
})
})
]]>
</script>
</body>
</html>roleList.html内容如下：
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:include="include/includebase"></head>
<body>
<div class="panel-body" style="padding-bottom:0px;">
<div class="panel panel-default">
<div class="panel-heading">查询条件</div>
<div class="panel-body">
<form class="form-inline" role="form" style="float: left; width: 100%;margin-left: 20px;" method="post" id="queryRole">
<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="roleName">权限名称:</label>
<input type="text" class="form-control" name="roleName" id="roleName" placeholder="请输入权限名称" />
</div>
<div class="form-group">
<button type="button" id="queryBtn" οnclick="doQuery();" class="btn btn-primary">查询</button>
</div>
</form>
</div>
</div>
<table id="role-table" style="margin-top: -50px;">
</table>
</div>
<script th:inline="javascript">
$(function() {
initTable();
$('#role-table').bootstrapTable('hideColumn', 'id');
});
function doQuery(){
$('#role-table').bootstrapTable('refresh'); //刷新表格
}
function initTable(){
$('#role-table').bootstrapTable({
url:"role/list",
height: $(window.parent.document).find("#wrapper").height() - 252,
width:$(window).width(),
showColumns:true,
formId :"queryRole",
pagination : true,
sortName : 'id',
sortOrder : 'desc',
pageSize : 13,
toolbars:[
{
text: '添加',
iconCls: 'glyphicon glyphicon-plus',
handler: function () {
window.Ewin.dialog({title:"添加",url:"role/addPage",width:600,height:310})
}
},
{
text: '修改',
iconCls: 'glyphicon glyphicon-pencil',
handler: function () {
var rows = $('#role-table').bootstrapTable('getSelections');
if(rows.length==0||rows.length>1){
window.Ewin.alert({message:'请选择一条需要修改的数据!'});
return false;
}
window.Ewin.dialog({title:"修改",url:"role/updatePage?id="+rows[0].id,width:600,height:310});
}
},
{
text: '删除',
iconCls: 'glyphicon glyphicon-remove',
handler: function () {
var rows = $('#role-table').bootstrapTable('getSelections');
if(rows.length==0){
window.Ewin.alert({message:'请选择一条需要删除的数据!'});
return false;
}
window.Ewin.confirm({title:'提示',message:'是否要删除您所选择的记录？',width:500}).on(function (e) {
if (e) {
$.post("role/removeBath",{json:JSON.stringify(rows)},function(e){
if(e.result){
window.Ewin.alert({message:e.msg});
doQuery();
}
});
}
});
}
}
],
columns: [
{
checkbox: true
},
{
field: '',
title: '序号',
formatter: function (value, row, index) {
return index+1;
}
},
{
field : 'id',
title : '权限流水',
align : 'center',
valign : 'middle',
sortable : true
},
{
field : 'name',
title : '权限代码',
align : 'center',
valign : 'middle',
sortable : true
},
{
field : 'roleName',
title : '权限名称',
align : 'center',
valign : 'middle',
sortable : true
}]
});
}
</script>
</body>
</html>到此我们就完成了我们角色管理的开发工作，接下来的用户管理、字典维护、组织架构也是类似的开发思路，这里就不再细细说明了，大家直接从github上拿源代码下来大家自己看就明白了，完整源代码的地址： https://github.com/185594-5-27/csdndemo/tree/base-demo-complete
上一篇文章地址：基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【七】【菜单维护模块】
下一篇文章地址：基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【九】【整合websocket】
QQ交流群：578746866
扫一扫
1079
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
