基於springboot+bootstrap+mysql+redis搭建一套完整的許可權架構【八】【完善整個專案】
上一章我們已經完成了選單模組的開發工作，那麼到了本章我們將完成我們角色管理模組的開發工作，在本章開始一個全新的模組進行開發的時候我們需要遵守一定的命名和開發規範如下：
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" onclick="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】