内容简介:在开发中我们经常会遇到:导航菜单、部门菜单、权限树、评论等功能。这些功能都有共同的特点:我们以导航菜单为例, 我们将导航菜单设置为动态的, 即从动态加载菜单数据。
在开发中我们经常会遇到:导航菜单、部门菜单、权限树、评论等功能。
这些功能都有共同的特点:
- 有父子关系
- 可无限递归
我们以导航菜单为例, 我们将导航菜单设置为动态的, 即从动态加载菜单数据。
数据库设计
适用于数据库存储的设计如下:
create table `menus` ( `id` int primary key auto_increment, `name` varchar(20) comment '菜单名称', `pid` int default 0 comment '父级 ID, 最顶级为 0', `order` int comment '排序, 序号越大, 越靠前' )
前端渲染
对于前端来说, 我们一般需要这种效果:
菜单配置页面:
对应的导航菜单:
常用的树形显示插件有: JsTree , zTree , Layui Tree , Bootstrap Tree View 等。
这些插件一般需要这两种格式:
基础格式:
[ { "id": 1, "name": "权限管理", "pid": 0, "order": 1 }, { "id": 2, "name": "用户管理", "pid": 1, "order": 2 }, { "id": 3, "name": "角色管理", "pid": 1, "order": 3 }, { "id": 4, "name": "权限管理", "pid": 1, "order": 4 } ]
树形格式:
[ { "id": 1, "name": "权限管理", "pid": 0, "order": 1, "children": [ { "id": 2, "name": "用户管理", "pid": 1, "order": 2, "children": [] }, { "id": 3, "name": "角色管理", "pid": 1, "order": 3, "children": [] }, { "id": 4, "name": "权限管理", "pid": 1, "order": 4, "children": [] } ] } ]
有的插件这两种格式都支持, 而有些只支持树形结构, 但我们数据库查询出来的结果往往又是普通结构, 这时候我们就需要将普通格式转换成树形格式。
这个转换一般是在服务端进行(因为前端插件大多都是请求后台的一个 URL 来接收 JSON 数据, 没有提供加载数据后 - 渲染前的事件, 所以无法在前端完成转换.)
数据转换
首先有 Java 实体类:
public class Menu { private int id, private String name, private int pid // getter setter 略 }
数据库查询后的一般是在 List 中:
List<Menu> menus = xxxMapper.selectXXX();
然后我们需要将这个 List
转换为树形结构, 首先定义一个树形结构的 VO 类:
public class MenuTreeVO { private int id, private String name, private int pid, private List<MenuVo> children, // getter setter 略 }
转换 工具 类:
package im.zhaojun.util; import im.zhaojun.model.vo.MenuTreeVO; import java.util.ArrayList; import java.util.List; public class TreeUtil { /** * 所有待用"菜单" */ private static List<MenuTreeVO> all = null; /** * 转换为树形 * @param list 所有节点 * @return 转换后的树结构菜单 */ public static List<MenuTreeVO> toTree(List<MenuTreeVO> list) { // 最初, 所有的 "菜单" 都是待用的 all = new ArrayList<>(list); // 拿到所有的顶级 "菜单" List<MenuTreeVO> roots = new ArrayList<>(); for (MenuTreeVO menuTreeVO : list) { if (menuTreeVO.getParentId() == 0) { roots.add(menuTreeVO); } } // 将所有顶级菜单从 "待用菜单列表" 中删除 all.removeAll(roots); for (MenuTreeVO menuTreeVO : roots) { menuTreeVO.setChildren(getCurrentNodeChildren(menuTreeVO));; } return roots; } /** * 递归函数 * 递归目的: 拿到子节点 * 递归终止条件: 没有子节点 * @param parent 父节点 * @return 子节点 */ private static List<MenuTreeVO> getCurrentNodeChildren(MenuTreeVO parent) { // 判断当前节点有没有子节点, 没有则创建一个空长度的 List, 有就使用之前已有的所有子节点. List<MenuTreeVO> childList = parent.getChildren() == null ? new ArrayList<>() : parent.getChildren(); // 从 "待用菜单列表" 中找到当前节点的所有子节点 for (MenuTreeVO child : all) { if (parent.getMenuId().equals(child.getParentId())) { childList.add(child); } } // 将当前节点的所有子节点从 "待用菜单列表" 中删除 all.removeAll(childList); // 所有的子节点再寻找它们自己的子节点 for (MenuTreeVO menuTreeVO : childList) { menuTreeVO.setChildren(getCurrentNodeChildren(menuTreeVO)); } return childList; } }
调用方式:
// 从数据库获取 List<Menu> menus = xxxMapper.selectXXX(); // Menu 转为 MenuTreeVO List<MenuTreeVO> menuTreeVOS = new ArrayList<>(); for (Menu menu : menus) { MenuTreeVO menuTreeVO = new MenuTreeVO(); BeanUtils.copyProperties(menu, menuTreeVO); menuTreeVOS.add(menuTreeVO); } // 调用转换方法 xxxUtil.toTree(menuTreeVOS); // 通过 Json 或 ModelAndView 返回给前台.
附:模板引擎渲染
有时我们会使用模板引擎来渲染菜单, 但由于菜单是树形结构的, 所以在模板引擎中单纯的使用 for 是无法完成无限极菜单的渲染的.
这里有一个很新奇的方法, 我以 thymeleaf
引擎为例:
index.html 的导航部分:
<div class="left-nav"> <div id="side-nav"> <ul id="nav"> <th:block th:include="public::menu(${menus})"/> </ul> </div> </div>
public.html 公共模板部分:
<th:block th:fragment="menu(menus)"> <li th:each="menu:${menus}"> <a href="javascript:;"> <i class="iconfont"></i> <cite th:text="${menu.menuName}">系统管理</cite> <i class="iconfont nav_right"></i> </a> <ul class="sub-menu"> <li th:each="child:${menu.children}"> <a th:if="${#lists.isEmpty(child.children)}" data-th-_href="${child.url}" _href="users"> <i class="iconfont"></i> <cite th:text="${child.menuName}">用户管理</cite> </a> <th:block th:unless="${#lists.isEmpty(child.children)}" th:include="this::menu(${child})" /> </li> </ul> </li> </th:block>
基本逻辑就是使用 include 引用模板, 各种模板引擎都有这种功能, 然后判断当前节点有没有子节点, 有的话, 模板文件引用自身, 来完成递归.
结语
上述代码是在开发一个 Shiro 的权限管理后台的时候的一些思路和代码, 完整的代码可以参考: https://github.com/zhaojun1998/Shiro-Action
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Django框架–权限代码+左侧菜单和权限应用
- .net core3.1 abp动态菜单和动态权限(动态菜单实现和动态权限添加) (三)
- Alain 菜单权限控制
- 手把手教你搞定菜单权限设计,精确到按钮级别,建议收藏
- RXThinkCMF_TP6 v2.9.5 旗舰版发布,更新权限菜单获取功能,提升性能
- RXThinkCMF_TP6 v1.0.6 旗舰版发布,新增生成模块创建模块菜单及权限节点的功能
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。