无限级菜单/权限树该如何设计

栏目: 数据库 · 发布时间: 6年前

内容简介：在开发中我们经常会遇到：导航菜单、部门菜单、权限树、评论等功能。这些功能都有共同的特点：我们以导航菜单为例, 我们将导航菜单设置为动态的, 即从动态加载菜单数据。

在开发中我们经常会遇到：导航菜单、部门菜单、权限树、评论等功能。

这些功能都有共同的特点：

  1. 有父子关系
  2. 可无限递归

我们以导航菜单为例, 我们将导航菜单设置为动态的, 即从动态加载菜单数据。

数据库设计

适用于数据库存储的设计如下:

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


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
我++

我++

威廉·J·米切尔 / 刘小虎等 / 中国建筑工业出版社 / 2006-6 / 50.00元

随着《我++——电子自我和互联城市》（Me++：The Cyborg Self And The Networked City）的出版，《比特之城》（City Of Bits）和《E-托邦》（E-topia）的作者完成了一套检验信息技术在日常生活中之衍生的非正式三部曲。威廉·J·米切尔描述了自马可尼以后的百年间无线技术的发展变化：网络的不断扩大，发送和接受装置的不断缩小。正如他所说，这就像“大人国重......一起来看看 《我++》 这本书的介绍吧!

码农工具
随机密码生成器
随机密码生成器

多种字符组合密码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3