前言
在开发中我们经常会遇到：导航菜单、部门菜单、权限树、评论等功能。
这些功能都有共同的特点：
- 有父子关系
- 可无限递归
我们以导航菜单为例, 我们将导航菜单设置为动态的, 即从动态加载菜单数据。
数据库设计
适用于数据库存储的设计如下:
create table `menus`
(
`id` int primary key auto_increment,
`name` varchar(20) comment '菜单名称',
`pid` int default 0 comment '父级 ID, 最顶级为 0',
`order` int comment '排序, 序号越大, 越靠前'
)
前端渲染
对于前端来说, 我们一般需要这种效果:
菜单配置页面:
image
对应的导航菜单:
image
常用的树形显示插件有: 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
