1. 全栈程序员必看首页

layuiAdmin后台框架以及动态权限

全栈程序员-站长 • • 未分类 • 阅读 2

layuiAdmin后台框架以及动态权限alyuiAdmin 首页加载权限 layuimini init api init json 原项目请求的是这些静态资源 layuimini init permission initMenu init json 格式所以要从后台定义请求这些数据特别注意 一定要按照要求格式 采用递归 由上到下获取数据

前言：layuiAdmin是使用layui开发的后台管理框架模板，拿来就用方便了很多后端和前端开发者。关于加载菜单权限问题，小刘使用并且记录了下来；

分析：1.头部导航和左边菜单联动为一个菜单权限。

           2.了解layui权限是怎么加载本地静态json的。

           3.设计相应权限的数据库表数据

           4.后端程序相应的返回相同的json格式的数据

layuiAdmin首页加载权限

 // layuimini.init('api/init.json');原项目请求的是这些静态资源 layuimini.init('/permission/initMenu');

下面是静态json格式的权限内容；

layuiAdmin后台框架以及动态权限

 创建关于权限的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") @ResponseBody public Map 
  
    initMenu(){ Map 
   
     map=new HashMap<>(); Map 
    
      clearInfo=new HashMap<>(); clearInfo.put("clearUrl","api/clear.json"); map.put("clearInfo",clearInfo); Map 
     
       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 
      
        logoInfo=new HashMap<>(); logoInfo.put("title","layuiAdmin"); logoInfo.put("image","images/logo.png"); logoInfo.put("href",""); map.put("logoInfo",logoInfo); Map 
       
         menuInfo=new LinkedHashMap<>();//保证菜单的顺序 List 
        
          permission = getPermission(1, 0); permission.forEach(t->{ menuInfo.put(t.getTitle(),t); }); map.put("menuInfo",menuInfo); return map; } / * 按照需求获取角色的权限 * @return */ @RequestMapping(value = "/getPermissionBySelect") @ResponseBody public List 
         
           getPermissionBySelect(){ List 
          
            permission = getPermission(1, 0); return permission; } / * 递归获取权限 * @param roleId * @param permissionId * @return */ public List 
           
             getPermission(Integer roleId, Integer permissionId){ List 
            
              list=new ArrayList<>(); List 
             
               rolePermission = permissionDao.getListRolePermission(roleId,permissionId); rolePermission.forEach(t->{ if (t.getPermission().getHasSon()!=0){//严格按照layuiadmin菜单格式 List 
              
                permission = getPermission(roleId, t.getPermissionId()); t.getPermission().setChild(permission); } list.add(t.getPermission()); }); return list; }

layuiAdmin后台框架以及动态权限

layuiAdmin后台框架以及动态权限

layuiAdmin后台框架以及动态权限

而权限列表页面逻辑分为三个部分

权限列表，可以更新删除权限，删除的同时必须删除角色权限表中的数据，同样采用递归由上到下全部删除

角色列表，实现用户即角色，删除时，所有角色权限相应内容删除。

树形权限菜单，给某个级别的权限添加子集。赋予某个角色相应的权限。

其他的操作再用户管理，操作用户角色关系，可做到用户即角色。

关于权限页面的代码：

 //模拟数据有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 = ``;
                    $("#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、normal
                    console.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 + '
节点数据：' + JSON.stringify(data)); } }); } //按钮事件test12 util.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的权限菜单的管理设置。

有啥不懂得小伙伴们加群交流啦：；本群致力于一同进步的小伙伴们，大家一起交流探讨，在陌生的城市感受温暖；  

无偿免费分享源码以及技术和面试文档，更多优秀精致的源码技术栈分享请关注微信公众号：gh_9   关键字：SSM动态通用权限管理系统

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/228464.html原文链接：https://javaforall.net

赞 (0)
0 0

关于作者

全栈程序员-站长的头像

全栈程序员-站长

133.5K 文章
3 粉丝
本网站汇聚当前互联网主流语音，持续更新，欢迎关注公众号“全栈程序员社区”
上一篇 2026年3月16日 下午6:57
下一篇 2026年3月16日 下午6:57


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号