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;//idprivate 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左侧导航动态权限的思路基本就是这样了，如果你有更好的方法欢迎分享交流

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

Django 权限管理-后台根据用户权限动态生成菜单
Django权限管理实现目标: 1.管理用户,添加角色,用户关联角色 2.添加权限.角色关联权限 3.添加动作.权限关联动作 4.添加菜单.权限关联菜单实现动态生成用户权限菜单(可设置多级菜单嵌套 ...
layui图片上传按钮按着没反应_关于layui动态生成文件上传按钮后点击无效的解决办法...
首先,这是一个坑,大坑,网上一大堆写的云里雾里,不知所以,转了一圈,除了copy就是copy,Jesus God,花了一晚上,走通了这个坑,话不多说,直接解决 layui版本: layui-v2.5. ...
MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航
MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航原文:MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航上篇文章我们完成了动态生成多级菜单这个实用组件. 本篇 ...
layui模块显示收缩_修改layui的后台模板的左侧导航栏可以伸缩的方法
原生的左侧导航栏代码: 所有商品列表一列表二列表三超链接解决方案列表一列表二超链接云市场发布商品自己修改的: 生源追踪生源列表学校信息工做计划学员管理学员列表考勤管理 ...
layui动态生成多页签
layout.html <!DOCTYPE html> <html> <head><meta charset="utf-8">< ...
layui laydate 渲染失效问题，lay-key导致动态生成代码二次渲染失败
在开发中因为需要动态生成时间选择框,所以选择了layui的 laydate控件,但是遇到了生成的时间选择框点击无效的问题,然后再次render 时间选择器一闪就消失了,查了多方资料,找到了如下的解决方 ...
Word在生成PDF后，PDF左侧导航书签不显示目录的解决方法
Word在生成PDF后,PDF左侧导航书签不显示目录的解决方法第一步第二步第一步另存为PDF格式,操作如下: 第二步选择"创建标签时使用标题"
Vue + ElementUI 动态生成面包屑导航教程
在Web应用程序中,面包屑导航是一种常用的导航方式,它可以帮助用户更好地理解当前页面的位置和层次关系.在Vue项目中,结合ElementUI组件库,我们可以很容易地实现一个动态生成面包屑导航的功能.本 ...
axure 生成html 左侧导航列表不在了,axure导航栏菜单 axure预览左侧导航框架调出来...
axure 怎样增加导航条子菜单 axure做出类似百度经验页面的左侧步骤栏的效果,步骤: 制作页面为了体现效果,需要做一个比较长(高)的页面,在Axure工作区中拖入4个矩形,分别为顶部标题.菜单 ...
layui -- autoForm 模块(动态生成表单,非官网模块)
动态生成form表单的需求可用, formTemplate.html 和 autuform.js 在同级目录 ,使用方式如下创建 autoform文件夹 formTemplate.html 和 au ...

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

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

最新文章

热门文章