使用layui+ajax实现简单的菜单权限管理及排序

**简单的例子使用的layui框架,并没有使用他的ztree插件,只用ajax配合sql完成最简单的一二级菜单权限控制及其排序功能。 
先看数据库设计:** 
user表: 
这里写图片描述 
role表: 
这里写图片描述; 
menu表: 
这里写图片描述 
user_role表: 
这里写图片描述 
role_menu表: 
这里写图片描述

在这里 menu的id依然是主键,多了mid也就是菜单id,pare_menu_id也就是这个菜单对应的父级菜单的菜单id(mid);没有的话,就是0,也就是一级菜单,在这里,一级菜单的mid必须满足为整千数,或者万也行,其子菜单在mid+999范围内; 
sql查询结果: 
这里写图片描述
前台数据处理方法:

 //菜单循环遍历打印拼接操作
          $(function () {
              $.ajax( {
                  url : projectName+'/sys/menu/findMenuByRole',
                  type : 'post',
                  dataType : 'json',
                  success : function(data) {
                      var menu = ""; //定义变量存储
                      for(var i = 0;i<data.length;i++){
                          menu += "<li class='layui-nav-item '>"
                          if(data[i].pareMenuId == 0){ //取出父元素的菜单,拼进页面
                              menu +=        "<a href='javascript:;'>"+data[i].menuName+"</a>"
                              for(var j = 0;j<data.length;j++){ //继续遍历这几条数据
                                  if(data[j].mid > data[i].mid && data[j].mid < (data[i].mid)+1000){ //取出这个父元素所对应的子元素
                                      menu +=    "<dl class='layui-nav-child'>"
                                      menu +=        "<dd>"
                                      menu +=            "<a href='"+data[j].menuPath+"' target='option'>"+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+data[j].menuName+"</a>"
                                      menu +=        "</dd>"
                                      menu +=    "</dl>"
                                  }
                              }
                          }
                          menu +=    "</li>";
                      }
                      $("#nav").html(menu);
                      var element = layui.element;
                      element.init()//初始化element事件,使菜单展开
                  }
              });
          })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

效果如下: 
图1是默认排序 
这里写图片描述 
下面我们将用户管理放在第一位。看图 
这里写图片描述 
将order设置为一结果如图: 
这里写图片描述 
这样用户管理就去了第一位; 
sql实现:

    SELECT
            t1.*
         FROM
            (
                SELECT
                    sys_menu.id,
                    sys_menu.mid,
                    sys_menu.menu_name,
                    sys_menu.menu_path,
                    sys_menu.pare_menu_id,
                    sys_menu.`status`,
                    sys_menu.`order`,
                    abc.`status` AS status2
                FROM
                    sys_menu
                INNER JOIN (
                    SELECT
                        *
                    FROM
                        role_menu
                    WHERE
                        id IN (
                            SELECT
                                min(id)
                            FROM
                                role_menu
                            GROUP BY
                                role_id,
                                menu_id
                        )
                    AND role_menu.`status` = 1
                ) abc ON abc.menu_id = sys_menu.id
                INNER JOIN sys_role ON sys_role.id = abc.role_id
                INNER JOIN user_role ON user_role.role_id = sys_role.id
                INNER JOIN sys_user ON sys_user.id = user_role.user_id
                WHERE
                    sys_user.id = #{id}
                AND sys_menu.`status` = 1
                ORDER BY
                    mid
            ) t1
        ORDER BY
            t1.pare_menu_id,
            t1.`order`;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44

**上图#{id}就是用户的id,多表关联查询就可以了;(因为用的是sm框架单纯的springMvc+mybatis+html) 
关于权限,当然不同用户看到的东西不同;至于菜单的权限,我是在role_menu表中加了status,默认都是0;admin用户的都是1;因为如果是角色的菜单授权很麻烦;干脆都给他赋予权限,之不过状态这里给她控制一下就可以了,也就是添加一个菜单,就给这个表每个角色添加一条数除admin其余为status=0;**

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值