layui使用之左侧导航动态生成与权限控制

     最近有一个后台项目前端改造，需要将以前的前端框架换成layui，所以在设计权限与菜单这块研究了一些时间，记录一下以便探讨，查网上很多资料，也有一些心得。

    先说说思路：首先菜单权限设计，我是设计到了按钮权限。开始就得先设计好自己的数据库，网上有很多参考，我的设计是如下

---

-- ----------------------------
-- ebiz_admin菜单表
-- ----------------------------
DROP TABLE IF EXISTS `ebiz_admin_menu`;
CREATE TABLE `ebiz_admin_menu` (
  `MENU_ID` int(11) NOT NULL AUTO_INCREMENT,
  `MENU_NO` varchar(20) COLLATE utf8_bin NOT NULL,
  `RESOURCE_ID` int(11) DEFAULT NULL COMMENT '资源Id',
  `MENU_ICON` int(11) DEFAULT NULL COMMENT '菜单图标',
  `MENU_STATUS` int(11) DEFAULT NULL COMMENT '菜单状态',
  `DISPLAY_NAME` varchar(100) COLLATE utf8_bin DEFAULT NULL COMMENT '显示名称',
  `PARENT_MENU_NO` varchar(20) COLLATE utf8_bin DEFAULT 0 COMMENT '父节点,默认为0,方便递归',
  `VIEW_SEQ` int(11) DEFAULT NULL COMMENT '菜单排列序列号',
  `CREATED_USER` varchar(50) COLLATE utf8_bin DEFAULT NULL COMMENT '创建用户',
  `CREATED_DATE` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `MODIFIED_USER` varchar(50) COLLATE utf8_bin DEFAULT NULL COMMENT '修改用户',
  `MODIFIED_DATE` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '最后更新时间',
  `IS_DELETE` char(1) COLLATE utf8_bin DEFAULT '0' COMMENT '删除标志 0未删除 1删除 0默认值',
  `MENU_PATHS` varchar(2000) COLLATE utf8_bin DEFAULT NULL,
  PRIMARY KEY (`MENU_ID`)
) ENGINE=InnoDB AUTO_INCREMENT=217 DEFAULT CHARSET=utf8 COLLATE=utf8_bin COMMENT='菜单样式表';

---

-- ----------------------------
-- 角色表
-- ----------------------------
DROP TABLE IF EXISTS `ebiz_admin_role`;
CREATE TABLE `ebiz_admin_role` (
  `ROLE_ID` int(11) NOT NULL AUTO_INCREMENT,
  `ROLE_CODE` varchar(100) COLLATE utf8_bin DEFAULT NULL COMMENT '角色编码',
  `ROLE_NAME` varchar(200) COLLATE utf8_bin DEFAULT NULL COMMENT '角色名称',
  `CREATED_USER` varchar(50) COLLATE utf8_bin DEFAULT NULL COMMENT '创建用户',
  `CREATED_DATE` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `MODIFIED_USER` varchar(50) COLLATE utf8_bin DEFAULT NULL COMMENT '修改用户',
  `MODIFIED_DATE` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '更新时间',
  `IS_DELETE` char(1) COLLATE utf8_bin DEFAULT '0' COMMENT '删除标志 1 删除 0未删除 默认未0',
  PRIMARY KEY (`ROLE_ID`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8 COLLATE=utf8_bin COMMENT='角色表';

---

-- ----------------------------
-- 角色按钮权限
-- ----------------------------
DROP TABLE IF EXISTS `ebiz_admin_role_button`;
CREATE TABLE `ebiz_admin_role_button` (
  `ROLE_ID` int(11) NOT NULL COMMENT '角色Id',
  `BUTTON_ID` int(11) DEFAULT NULL COMMENT '按钮流水号',
  `CREATED_USER` varchar(50) COLLATE utf8_bin DEFAULT NULL,
  `CREATED_DATE` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  `MODIFIED_USER` varchar(50) COLLATE utf8_bin DEFAULT NULL,
  `MODIFIED_DATE` timestamp NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin COMMENT='角色权限关联表';

---

-- ----------------------------
-- 角色菜单权限
-- ----------------------------
DROP TABLE IF EXISTS `ebiz_admin_role_menu`;
CREATE TABLE `ebiz_admin_role_menu` (
  `ROLE_ID` int(11) NOT NULL COMMENT '角色Id',
  `MENU_ID` int(11) DEFAULT NULL COMMENT '菜单流水号',
  `CREATED_USER` varchar(50) COLLATE utf8_bin DEFAULT NULL,
  `CREATED_DATE` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  `MODIFIED_USER` varchar(50) COLLATE utf8_bin DEFAULT NULL,
  `MODIFIED_DATE` timestamp NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin COMMENT='角色权限关联表';

以上是我的菜单权限设计方案

权限设计好了开始根据登录用户查询菜单列表，这里有很多方式，有的人用递归查询，有的人用mysql自定义函数查询所有子节点然后去根据用户权限匹配。

我们只要知道layui导航栏需要的是一个什么数据，layui官方文档提供了这个数据格式：

官方声明需要严格按照他们提供的数据格式进行返回

例如我们建一个返回数据实体类：

/**
 * Created with Intellij IDEA.
 * Author: Smiley
 * Date: 2020/8/20 9:42
 * Description:用户导航菜单实体
 */
public class UserMenuDTO {
    private Integer id;//id
    private String title;//菜单名称
    private String icon;//图标
    private String link;//链接地址
    private Boolean status;//状态
    private List<?> titleNode;//子节点
    //省略get/set
}

然后你查询出来的数据放在上面实体类的list中，注意上面的子节点也是UserMenuDTO的list集合

response.getWriter().print(jsonResponse);//用这个返回前端即可啦。

所以我们做动态左侧导航的时候，需要返回前端这种格式的json数据

有了数据以后，前端页面整一个ajax获取到这数据遍历一下即可。以下js仅供参考

<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element;
        //获取所有的菜单
        $.ajax({
            url:"${ctx}/user/getMenu",
            type:"POST",
            dataType:"json",
            success:function (res) {
                var html='';
                html+='<ul class="layui-nav layui-nav-tree"  lay-filter="test">';
                $.each(res,function (i,item) {
                    html=html+'<li class="layui-nav-item">';
                    html += '<a href="javascript:;" data-url="'+item.link+'" nav-id="'+item.id+'">' +
                        '<cite>'+item.title+'</cite></a>';
                    if(item.titleNode!=""&& item.titleNode.length>0){
                        html += '<dl class="layui-nav-child">';
                        $.each(item.titleNode,function (j,item2) {
                            html+='<dd>'
                            html += '<a href="javascript:;" data-url="'+item2.link+'" ' +
                                'nav-id="'+item2.id+'">' +
                                '<cite>'+item2.title+'</cite></a>';
                            if(item2.titleNode!=""&&item2.titleNode.length>0){
                                html += '<ol class="layui-nav-child">';
                                $.each(item2.titleNode,function (k,item3) {
                                    html += '<li>'+
                                        '<a href="javascript:;" data-url="'+item3.link+'" nav-id="'+item3.id+'">'+
                                        '<cite>'+item3.title+'</cite>'+
                                        '</a>'+
                                        '</li>';
                                });
                                html+= '</ol>';
                            }
                        });
                        html+= '</dl>' ;
                    }
                    html+= '</li>';
                });
                html+='</ul>';
                $(".layui-side-scroll").append(html);
                element.init();
              }
        });
    });
</script>

到这里layui左侧导航动态权限的思路基本就是这样了，如果你有更好的方法欢迎分享交流