layuiAdmin后台框架以及动态权限
前言：layuiAdmin是使用layui開發的后臺管理框架模板，拿來就用方便了很多后端和前端開發者。關于加載菜單權限問題，小劉使用并且記錄了下來；
分析：1.頭部導航和左邊菜單聯動為一個菜單權限。
?? ? ????? 2.了解layui權限是怎么加載本地靜態json的。
?????????? 3.設計相應權限的數據庫表數據
?????????? 4.后端程序相應的返回相同的json格式的數據
layuiAdmin首頁加載權限
// layuimini.init('api/init.json');原項目請求的是這些靜態資源layuimini.init('/permission/initMenu');下面是靜態json格式的權限內容；
?創建關于權限的5張表：用戶表，角色表，權限表，用戶角色表，角色權限表
用戶表：
| Create Table |
|
|
角色表：
| Create Table |
CREATE?TABLE?`role`?( ??`id`?int?NOT?NULL?AUTO_INCREMENT, ??`role_name`?varchar(64)?DEFAULT?NULL, ??PRIMARY?KEY?(`id`) )?ENGINE=InnoDB?AUTO_INCREMENT=4?DEFAULT?CHARSET=utf8 |
權限表：
| Create Table |
CREATE?TABLE?`permission`?( ??`id`?int?NOT?NULL?AUTO_INCREMENT, ??`title`?varchar(64)?DEFAULT?NULL, ??`icon`?varchar(100)?DEFAULT?NULL, ??`href`?varchar(100)?DEFAULT?NULL, ??`father_id`?int?DEFAULT?NULL, ??`level`?int?DEFAULT?NULL, ??`has_son`?int?DEFAULT?NULL, ??`target`?varchar(64)?DEFAULT?'_self', ??`sort`?int?DEFAULT?NULL, ??PRIMARY?KEY?(`id`) )?ENGINE=InnoDB?AUTO_INCREMENT=48?DEFAULT?CHARSET=utf8 |
用戶角色表
| Create Table |
CREATE?TABLE?`user_role`?( ??`id`?int?NOT?NULL?AUTO_INCREMENT, ??`user_id`?int?DEFAULT?NULL, ??`role_id`?int?DEFAULT?NULL, ??PRIMARY?KEY?(`id`) )?ENGINE=InnoDB?AUTO_INCREMENT=5?DEFAULT?CHARSET=utf8 |
角色權限表
| Create Table |
CREATE?TABLE?`role_permission`?( ??`id`?int?NOT?NULL?AUTO_INCREMENT, ??`role_id`?int?DEFAULT?NULL, ??`permission_id`?int?DEFAULT?NULL, ??PRIMARY?KEY?(`id`) )?ENGINE=InnoDB?AUTO_INCREMENT=110?DEFAULT?CHARSET=utf8 |
所以要從后臺定義請求這些數據
特別注意：一定要按照要求格式，采用遞歸，由上到下獲取數據
/*** 初始化菜單* @return*/@RequestMapping(value = "/initMenu")@ResponseBodypublic Map<String,Object> initMenu(){Map<String,Object>map=new HashMap<>();Map<String,Object>clearInfo=new HashMap<>();clearInfo.put("clearUrl","api/clear.json");map.put("clearInfo",clearInfo);Map<String,Object>homeInfo=new HashMap<>();homeInfo.put("title","首頁");homeInfo.put("icon","fa fa-home");homeInfo.put("href","page/welcome-1.html?mpi=m-p-i-0");map.put("homeInfo",homeInfo);Map<String,Object>logoInfo=new HashMap<>();logoInfo.put("title","layuiAdmin");logoInfo.put("image","images/logo.png");logoInfo.put("href","");map.put("logoInfo",logoInfo);Map<String,Object>menuInfo=new LinkedHashMap<>();//保證菜單的順序List<Permission> permission = getPermission(1, 0);permission.forEach(t->{menuInfo.put(t.getTitle(),t);});map.put("menuInfo",menuInfo);return map;}/*** 按照需求獲取角色的權限* @return*/@RequestMapping(value = "/getPermissionBySelect")@ResponseBodypublic List<Permission>getPermissionBySelect(){List<Permission> permission = getPermission(1, 0);return permission;}/*** 遞歸獲取權限* @param roleId* @param permissionId* @return*/public List<Permission> getPermission(Integer roleId, Integer permissionId){List<Permission> list=new ArrayList<>();List<RolePermission>rolePermission = permissionDao.getListRolePermission(roleId,permissionId);rolePermission.forEach(t->{if (t.getPermission().getHasSon()!=0){//嚴格按照layuiadmin菜單格式List<Permission> permission = getPermission(roleId, t.getPermissionId());t.getPermission().setChild(permission);}list.add(t.getPermission());});return list;}而權限列表頁面邏輯分為三個部分
權限列表，可以更新刪除權限，刪除的同時必須刪除角色權限表中的數據，同樣采用遞歸由上到下全部刪除
角色列表，實現用戶即角色，刪除時，所有角色權限相應內容刪除。
樹形權限菜單，給某個級別的權限添加子集。賦予某個角色相應的權限。
其他的操作再用戶管理，操作用戶角色關系，可做到用戶即角色。
關于權限頁面的代碼：
//模擬數據有children的才叫節點data = null;/*** 通過角色Id直接獲取權限數據* @param roleId*/function getPermissionByRoleId(roleId) {var sendDate = (new Date()).getTime();$.ajax({url: "/permission/getTreePermissionList",type: "get",data: {roleId: roleId},async: false,beforeSend: function () {var icon_load = `<i id="icon_loading" class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" style="display: inline-block;position: absolute;top: 50%;left: 50%; margin: auto;"></i>`;$("#test12").html(icon_load);//在請求后臺數據之前顯示loading圖標},success: function (msg) {var receiveDate = (new Date()).getTime();var responseTimeMs = receiveDate - sendDate;setTimeout(function () {$("#icon_loading").remove();data = msg;console.log(data);initTreePermission();}, responseTimeMs);},dataType: "json"});}/*** 初始化權限*/function initTreePermission() {//基本演示tree.render({elem: '#test12',data: data,showCheckbox: true //是否顯示復選框,id: 'demoId1',isJump: true //是否允許點擊節點時彈出新窗口跳轉, oncheck: function (obj) {///復選框點擊觸發的事件，，直接和角色綁定添加即可console.log(obj.data); //得到當前點擊的節點數據console.log(obj.checked); //得到當前節點的展開狀態：open、close、normalconsole.log(obj.elem); //得到當前節點元素},click: function (obj) {console.log(obj);var data = obj.data; //獲取當前點擊的節點數據console.log(data);layer.open({type: 1,// closeBtn:0,title: ['添加子集權限', 'font-size:20px;font-weight:bolder;text-align:center;'],content: $('#updatePermissionForm'), //這里content是一個DOM，注意：最好該元素要存放在body最外層，否則可能被其它的相對元素所影響skin: 'layui-layer-lan',area: ['500px', '480px'],offset: '40px',// 彈出后，渲染表格success: function (layero, index) {$("#updatePermissionForm form")[0].reset();//清空之前彈出的內容form.val("updatePermissionForm", { //formTest 即 class="layui-form" 所在元素屬性 lay-filter="" 對應的值"fatherId": data.id, "level": data.level + 1, "hasSon": 0});},cancel: function (index, layero) {}});// layer.msg('狀態：' + obj.state + '<br>節點數據：' + JSON.stringify(data));}});}//按鈕事件test12util.event('lay-demo', {getChecked: function (othis) {var checkedData = tree.getChecked('demoId1'); //獲取選中節點的數據console.log("---獲取選中的數據--");console.log(checkedData);var roleId = $("#editRoleNameByLeft").attr("role_id");$.ajax({url: "/permission/savePermissionWithRoleId",type: "post",async: false,data: {roleId: roleId,permissionList: JSON.stringify(checkedData)},success: function (msg) {layer.msg("權限保存成功!");},dataType: "json"});},setChecked: function () {tree.setChecked('demoId1', [12, 18]); //勾選指定節點},reload: function () {//重載實例tree.reload('demoId1', {});},addFirstMenu: function () {//添加一級菜單// $("#updatePermissionForm form input[name='hasSon']").parent().parent().remove();// $("#updatePermissionForm form input[name='href']").parent().parent().remove();layer.open({type: 1,// closeBtn:0,title: ['添加子集權限', 'font-size:20px;font-weight:bolder;text-align:center;'],content: $('#updatePermissionForm'), //這里content是一個DOM，注意：最好該元素要存放在body最外層，否則可能被其它的相對元素所影響skin: 'layui-layer-lan',area: ['500px', '480px'],offset: '40px',// 彈出后，渲染表格success: function (layero, index) {$("#updatePermissionForm form")[0].reset();//清空之前彈出的內容form.val("updatePermissionForm", { //formTest 即 class="layui-form" 所在元素屬性 lay-filter="" 對應的值"fatherId": 0, "level": 1,"hasSon": 0});},cancel: function (index, layero) {}});}});至此，完成了layuiAdmin的權限菜單的管理設置。
有啥不懂得小伙伴們加群交流啦：852665736；本群致力于一同進步的小伙伴們，大家一起交流探討，在陌生的城市感受溫暖；??
無償免費分享源碼以及技術和面試文檔，更多優秀精致的源碼技術棧分享請關注微信公眾號：gh_817962068649? ?關鍵字：SSM動態通用權限管理系統
總結
以上是生活随笔為你收集整理的layuiAdmin后台框架以及动态权限的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机科学与技术第四轮学科评估结果,全国
- 下一篇： G723音频格式读入内存