首先看一下菜单的样子
根据这个样子我们定义菜单类
public class Menu {
// 菜单id
private String id;
// 菜单名称
private String name;
// 父菜单id
private String parentId;
// 菜单url
private String url;
// 菜单图标
private String icon;
// 菜单顺序
private int order;
// 子菜单
private List<Menu> childMenus;
// ... 省去getter和setter方法以及toString方法
}
我们根据这个类定义数据库,并插入菜单数据
DROP TABLE IF EXISTS `jrbac_menu`;
CREATE TABLE `jrbac_menu` (
`id` varchar(32) NOT NULL COMMENT '主键id,uuid32位',
`name` varchar(64) NOT NULL COMMENT '菜单名称',
`parent_id` varchar(32) DEFAULT NULL COMMENT '父菜单id',
`url` varchar(64) DEFAULT NULL COMMENT '访问地址',
`icon` varchar(32) DEFAULT NULL COMMENT '菜单图标',
`order` tinyint(4) DEFAULT '0' COMMENT '菜单顺序',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='菜单表';
-- ----------------------------
-- Records of jrbac_menu
-- ----------------------------
INSERT INTO `jrbac_menu` VALUES ('1', 'Forms', null, 'forms.html', 'fa fa-edit', '0');
INSERT INTO `jrbac_menu` VALUES ('2', 'UI Elements', null, '', 'fa fa-wrench', '1');
INSERT INTO `jrbac_menu` VALUES ('3', 'Buttons', '2', 'buttons.html', '', '0');
INSERT INTO `jrbac_menu` VALUES ('4', 'Icons', '2', 'icons.html', null, '1');
INSERT INTO `jrbac_menu` VALUES ('5', 'Multi-Level Dropdown', '', '', 'fa fa-sitemap', '2');
INSERT INTO `jrbac_menu` VALUES ('6', 'Second Level Item', '5', 'second.html', null, '0');
INSERT INTO `jrbac_menu` VALUES ('7', 'Third Level', '5', null, '', '1');
INSERT INTO `jrbac_menu` VALUES ('8', 'Third Level Item', '7', 'third.html', null, '0');
为了演示,我们把可展开的没有做完,仅仅插入几条数据能出效果就可以了。
meuDao
package com.jrbac.dao;
import java.util.List;
import com.jrbac.entity.LoginUser;
import com.jrbac.entity.Menu;
public interface MenuDao {
/**
* 查找用户的菜单
* @param loginUser
* @return
*/
public List<Menu> queryMenuList(LoginUser loginUser);
}
mybatis
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.jrbac.dao.MenuDao">
<select id="queryMenuList" resultType="Menu">
SELECT
id,`name`,parent_id,url,icon,`order`
FROM
jrbac_menu ORDER BY `order` ASC
</select>
</mapper>
测试方法与递归方法
@Test
public void testQueryMenuList() {
// 原始的数据一条一条的
List<Menu> rootMenu = menuDao.queryMenuList(null);
// 构建好的菜单树,第一层菜单的pid是null
List<Menu> menuTree = buildMenuTree(rootMenu, null);
System.out.println(menuTree);
}
/**
* 构建菜单树
*
* @param menuList
* @param pid
* @return
*/
private List<Menu> buildMenuTree(List<Menu> menuList, String pid) {
List<Menu> treeList = new ArrayList<>();
menuList.forEach(menu -> {
if (StringUtils.equals(pid, menu.getParentId())) {
menu.setChildMenus(buildMenuTree(menuList, menu.getId()));
treeList.add(menu);
}
});
return treeList;
}
menuDao.queryMenuList(null);查找的结果是一条一条的数据
测试程序的运行结果,对输出的json进行个格式化后的对比
最终效果
如果你也使用sbadmin后台模版的话,它只做到了二级菜单,三级的没有做展开控制。
要做到三级将sb-admin-2.js的最后一个替换成下面的。
if (element.is('li')) {
element.addClass('active');
element.parent().addClass('in');
}
再奉上前端jsp页面输出菜单的代码
<c:forEach items="${userMenuList }" var="menu" varStatus="status">
<!-- 一级子菜单没有parentId,有url -->
<c:if test="${empty menu.parentId and not empty menu.url}">
<li>
<a href="<c:url value='${menu.url }'/>">
<i class="${menu.icon } fa-fw"></i> ${menu.name }
</a>
</li>
</c:if>
<!-- 可展开的一级菜单,没有parentId,有url -->
<c:if test="${empty menu.parentId and empty menu.url}">
<li>
<a href="#">
<i class="${menu.icon } fa-fw"></i> ${menu.name }<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level">
<!-- 没有url的是三级菜单,有url的直接输出到li中 -->
<c:forEach items="${menu.childMenus}" var="secondChild" varStatus="status">
<c:if test="${not empty secondChild.url }">
<li>
<a href="<c:url value='${secondChild.url }'/>">${secondChild.name }</a>
</li>
</c:if>
<!-- 二级菜单url为空,表示还有三级菜单 -->
<c:if test="${empty secondChild.url }">
<li>
<a href="#">${secondChild.name }<span class="fa arrow"></span></a>
<ul class="nav nav-third-level">
<c:forEach items="${secondChild.childMenus}" var="thirdChild" varStatus="status">
<li>
<a href="<c:url value='${thirdChild.url }'/>">${thirdChild.name }</a>
</li>
</c:forEach>
</ul>
</li>
</c:if>
</c:forEach>
</ul>
</li>
</c:if>
</c:forEach>
参考文献
https://blog.csdn.net/ldllovegyh/article/details/102692948