系列传送门
spring-boot与模板引擎：静态资源文件路径
spring-boot与模板引擎：修改模板路径和后缀名
spring-boot与模板引擎：使用metisMenu实现动态多级菜单
在web开发中，特别是后台管理工具的开发，经常用到纵向的多级菜单。
但是常用的Bootstrap仅能支持到2级菜单，对于3级及3级以上的菜单的显示，却无能为力。
下面我将使用另一个jQuery的菜单显示插件——metisMenu，结合项目，实现动态多级菜单显示。
image.png
用到的技术：
jQuery
jQuery-metisMenu插件 官网地址：http://mm.onokumus.com/index.html
Beetl模板引擎 官网地址：http://ibeetl.com/
Maven
Spring-boot或Nutz框架(本文以Spring-boot举例)
用到的开发工具：
intellij IDEA
开始
新建maven项目
image.png
image.png
剩下步骤直接next即可。
创建java目录，并设置为Sources Root：
image.png
创建demo包名和模板目录（存放beetl模板），最后项目目录结构如下：
image.png
添加spring-boot和beetl相关依赖
pom.xml：
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>BeetlMetisMenu</groupId>
<artifactId>BeetlMetisMenu</artifactId>
<packaging>war</packaging>
<version>1.0-SNAPSHOT</version>
<name>BeetlMetisMenu Maven Webapp</name>
<url>http://maven.apache.org</url>
<!-- spring-boot -->
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.5.9.RELEASE</version>
</parent>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
<!-- spring-boot -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
</dependency>
<!-- beetl -->
<dependency>
<groupId>com.ibeetl</groupId>
<artifactId>beetl-framework-starter</artifactId>
<version>1.1.22.RELEASE</version>
</dependency>
</dependencies>
<build>
<finalName>BeetlMetisMenu</finalName>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
创建测试用的html:
在resources/templates目录下创建demo.html
<!DOCTYPE HTML>
<html>
<head>
<title>Beetl_MetisMenu动态多级菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<p>Hello World</p>
</body>
</html>
创建spring-boot的启动器
在包名demo下创建Application.java:
package demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
创建Controller
在包名demo下创建DemoController.java:
package demo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class DemoController {
@RequestMapping("/demo")
public String demo() {
return "demo";
}
}
启动项目，测试web环境配置是否成功
image.png
启动后，在浏览器中输入http://localhost:8080/demo，查看是否页面正常显示 Hello World。如果显示成功，恭喜你，第一关闯关成功！ ^_^
添加beetl相关配置
重命名demo.html为demo.btl，并修改文件如下：
1、修改Hello World为Hello ${name}
<!DOCTYPE HTML>
<html>
<head>
<title>Beetl_MetisMenu动态多级菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<p>Hello ${name}</p>
</body>
</html>
修改DemoController.javar如下：
1、给页面返回一个name参数
2、修改返回的页面为demo.btl模板
package demo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class DemoController {
@RequestMapping("/demo")
public String demo(Model model) {
model.addAttribute("name", "world");
return "demo.btl";
}
}
启动项目，测试web环境配置是否成功。
启动后，在浏览器中输入http://localhost:8080/demo，查看是否页面正常显示 Hello World。如果显示成功，恭喜你，第二关闯关成功！ ^_^
下面将进入我们的主题，创建多级菜单
先做一个静态的看看效果。
修改demo.btl文件：
<!DOCTYPE HTML>
<html>
<head>
<title>Beetl_MetisMenu动态多级菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!--引入bootstrap css-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"/>
<!--引入font css-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
<!--引入metisMenu css-->
<link rel="stylesheet" href="http://mm.onokumus.com/metisMenu.css">
<link rel="stylesheet" href="http://mm.onokumus.com/css/mm-vertical.css">
</head>
<body>
<p>Hello ${name}</p>
<div class="container">
<div class="row">
<nav class="sidebar-nav">
<ul class="metismenu" id="menu1">
<li class="active">
<a class="has-arrow" href="#" aria-expanded="true">Menu 1</a>
<ul aria-expanded="true" class="collapse in" style="">
<li><a href="#" aria-expanded="false">item 1.1</a></li>
<li><a href="#" aria-expanded="false">item 1.2</a></li>
<li class="active">
<a class="has-arrow" href="#" aria-expanded="true">Menu 1.3</a>
<ul aria-expanded="true" class="collapse in" style="">
<li><a href="#">item 1.3.1</a></li>
<li><a href="#">item 1.3.2</a></li>
<li><a href="#">item 1.3.3</a></li>
<li><a href="#">item 1.3.4</a></li>
</ul>
</li>
<li><a href="#" aria-expanded="false">item 1.4</a></li>
<li>
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
<ul aria-expanded="false" class="collapse">
<li><a href="#">item 1.5.1</a></li>
<li><a href="#">item 1.5.2</a></li>
<li><a href="#">item 1.5.3</a></li>
<li><a href="#">item 1.5.4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</body>
<!--引入jquery js-->
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<!--引入bootstrap js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.min.js"></script>
<!--引入metisMenu js-->
<script src="http://mm.onokumus.com/metisMenu.js"></script>
<script>
// 此处一定记得初始化metisMenu
$(function () {
$('#menu1').metisMenu();
});
</script>
</html>
启动项目，在浏览器中输入http://localhost:8080/demo，查看是否页面正常显示 如下：
image.png
如果显示成功，恭喜你，第三关闯关成功！ ^_^
下面开始创建动态菜单
创建菜单对象Menu.java
package demo;
import java.util.List;
/**
* 菜单对象
*/
public class Menu {
// 菜单名
private String name;
// 拥有的子菜单列表
private List<Menu> children;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public List<Menu> getChildren() {
return children;
}
public void setChildren(List<Menu> children) {
this.children = children;
}
}
修改DemoController.java:
1、创建菜单树
2、把菜单树传给页面
package demo;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.ArrayList;
import java.util.List;
@Controller
public class DemoController {
@RequestMapping("/demo")
public String demo(Model model) {
// 创建菜单树
List<Menu> menuTree = createMenuTree();
// 传递给页面
model.addAttribute("menuTree", menuTree);
return "demo.btl";
}
/**
* 创建菜单树
*
* @return List<Menu>
*/
private List<Menu> createMenuTree() {
// 创建根菜单列表
List<Menu> rootMenuList = createMenuList(null, 2);
for (Menu rootMenu : rootMenuList) {
// rootMenu是根菜单
// 给rootMenu创建一级菜单
rootMenu.setChildren(createMenuList(rootMenu, 2));
for (Menu childMenu : rootMenu.getChildren()) {
// childMenu是一级菜单
// 给childMenu创建子菜单（二级菜单）
childMenu.setChildren(createMenuList(childMenu, 2));
for (Menu childOfChildMenu : childMenu.getChildren()) {
// childOfChildMenu是二级菜单
// 给childOfChildMenu创建子菜单（三级菜单）
childOfChildMenu.setChildren(createMenuList(childOfChildMenu, 2));
}
}
}
// 此时rootMenuList是一个树状结构
return rootMenuList;
}
/**
* 创建指定菜单的子菜单列表
*
* @param menu Menu 指定的菜单，如果为空，则默认创建的是一级菜单
* @param count int 指定菜单的子菜单数量
* @return List<Menu>
*/
private List<Menu> createMenuList(Menu menu, int count) {
List<Menu> menuList = new ArrayList<Menu>();
for (int i = 1; i <= count; i++) {
if (menu == null) {
// 创建一级菜单
Menu rootMenu = new Menu();
rootMenu.setName("Menu " + i);
menuList.add(rootMenu);
} else {
// 创建menu的子菜单
Menu childMenu = new Menu();
childMenu.setName(menu.getName() + "." + i);
menuList.add(childMenu);
}
}
return menuList;
}
}
创建根菜单模板rootMenu.btl：
<nav class="sidebar-nav">
<ul class="metismenu" id="menu1">
<!--遍历菜单树-->
<% for(rootMenu in rootMenuList) { %>
<li>
<a class="has-arrow" href="#" aria-expanded="false">${rootMenu.name}</a>
<% if(rootMenu.children != null && rootMenu.children.~size > 0){ %>
<!--当前菜单的子菜单不为空-->
<!--使用子菜单模板显示子菜单-->
<% layout("/subMenu.btl",{"childMenus":rootMenu.children}){} %>
<% } %>
</li>
<% } %>
</ul>
</nav>
创建子级菜单模板subMenu.btl：
<ul aria-expanded="false" class="collapse">
<!--遍历子菜单树-->
<% for(childMenu in childMenus){ %>
<% if(childMenu.children == null || childMenu.children.~size == 0){ %>
<!--当前菜单的子菜单为空，直接显示当前菜单-->
<li>
<a href="javascript:;" aria-expanded="false">${childMenu.name}</a>
</li>
<% } else { %>
<!--当前菜单的子菜单不为空-->
<li>
<!--先显示当前菜单-->
<a class="has-arrow" href="#" aria-expanded="false">${childMenu.name}</a>
<!--再继续递归本模板显示子菜单-->
<% layout("/subMenu.btl",{"childMenus":childMenu.children}){} %>
</li>
<% } %>
<% } %>
</ul>
修改之前的demo模板demo.btl：
1、把之前写的静态菜单的部分替换成用菜单模板显示
<!DOCTYPE HTML>
<html>
<head>
<title>Beetl_MetisMenu动态多级菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!--引入bootstrap css-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"/>
<!--引入font css-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
<!--引入metisMenu css-->
<link rel="stylesheet" href="http://mm.onokumus.com/metisMenu.css">
<link rel="stylesheet" href="http://mm.onokumus.com/css/mm-vertical.css">
</head>
<body>
<div class="container">
<div class="row">
<!--此处使用菜单模板动态显示后台设置的菜单内容-->
<% layout("/rootMenu.btl",{"rootMenuList":menuTree}){} %>
</div>
</div>
</body>
<!--引入jquery js-->
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<!--引入bootstrap js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.min.js"></script>
<!--引入metisMenu js-->
<script src="http://mm.onokumus.com/metisMenu.js"></script>
<script>
$(function () {
$('#menu1').metisMenu();
});
</script>
</html>
启动项目，在浏览器中输入http://localhost:8080/demo，查看是否页面正常显示 如下：
image.png
如果显示成功，恭喜你，全部关卡闯关成功，取得真经！ ^_^
