java web动态菜单设计_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:
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
4.0.0
BeetlMetisMenu
BeetlMetisMenu
war
1.0-SNAPSHOT
BeetlMetisMenu Maven Webapp
http://maven.apache.org
org.springframework.boot
spring-boot-starter-parent
1.5.9.RELEASE
junit
junit
3.8.1
test
org.springframework.boot
spring-boot-starter-thymeleaf
org.springframework.boot
spring-boot-devtools
com.ibeetl
beetl-framework-starter
1.1.22.RELEASE
BeetlMetisMenu
org.springframework.boot
spring-boot-maven-plugin
创建测试用的html:
在resources/templates目录下创建demo.html
Beetl_MetisMenu动态多级菜单
Hello World
创建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}
Beetl_MetisMenu动态多级菜单
Hello ${name}
修改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文件:
Beetl_MetisMenu动态多级菜单
Hello ${name}
Menu 1
- item 1.1
- item 1.2
Menu 1.3
- item 1.3.1
- item 1.3.2
- item 1.3.3
- item 1.3.4
- item 1.4
Menu 1.5
- item 1.5.1
- item 1.5.2
- item 1.5.3
- item 1.5.4
// 此处一定记得初始化metisMenu
$(function () {
$('#menu1').metisMenu();
});
启动项目,在浏览器中输入http://localhost:8080/demo,查看是否页面正常显示 如下:
image.png
如果显示成功,恭喜你,第三关闯关成功! ^_^
下面开始创建动态菜单
创建菜单对象Menu.java
package demo;
import java.util.List;
/**
* 菜单对象
*/
public class Menu {
// 菜单名
private String name;
// 拥有的子菜单列表
private List
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public List
return children;
}
public void setChildren(List
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
// 传递给页面
model.addAttribute("menuTree", menuTree);
return "demo.btl";
}
/**
* 创建菜单树
*
* @return List
*/
private List
// 创建根菜单列表
List
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
*/
private List
List
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:
${rootMenu.name}
0){ %>
创建子级菜单模板subMenu.btl:
${childMenu.name}
${childMenu.name}
修改之前的demo模板demo.btl:
1、把之前写的静态菜单的部分替换成用菜单模板显示
Beetl_MetisMenu动态多级菜单
$(function () {
$('#menu1').metisMenu();
});
启动项目,在浏览器中输入http://localhost:8080/demo,查看是否页面正常显示 如下:
image.png
如果显示成功,恭喜你,全部关卡闯关成功,取得真经! ^_^
java web动态菜单设计_spring-boot与模板引擎:使用metisMenu实现动态多级菜单相关推荐
- Spring Boot + Drools+模板引擎,优惠券的动态添加以及购物车结算
目录 二.项目文件结构以及数据库表结构 三.主要项目文件说明 1.pom文件 2.配置文件 3.实体类 4.添加优惠券业务实现 5.购物车结算业务实现 四.实现效果 1.添加优惠券 2.购物车结算 五 ...
- 软件架构-Spring boot集成模板引擎swagger2实现
上次说过springboot其实就是一个CI工具,如何体验出来CI的作用就是持续集成,它可以集成各种的工具,这里说说关于模板的集成引擎和Swagger. (一)Spring boot 集成模板引擎实现 ...
- Java Email 发HTML邮件工具 采用 freemarker模板引擎渲染
Java Email 发HTML邮件工具 采用 freemarker模板引擎 1.常用方式对比 Java发送邮件有很多的实现方式 第一种:Java 原生发邮件mail.jar和activation.j ...
- Java Web现代化开发:Spring Boot + Mybatis + Redis二级缓存
背景 Spring-Boot因其提供了各种开箱即用的插件,使得它成为了当今最为主流的Java Web开发框架之一.Mybatis是一个十分轻量好用的ORM框架.Redis是当今十分主流的分布式key- ...
- java web期末课程设计 学生成绩管理系统(mysql,jstl+el,Javabean)+增删改查,session域+servlet(基础易理解)
学生成绩管理系统 一.实验目的 为了更好的学习理解JavaWeb,创建了此系统.此系统可以帮助学习Java web基础,特别是javaweb入门,此系统使用大部分Java web基础知识.Java w ...
- java 搭建个人博客_Spring boot 搭建个人博客系统(一)——整体思路
Spring boot 搭建个人博客系统(一)--整体思路 一直想用Spring boot 搭建一个属于自己的博客系统,刚好前段时间学习了叶神的牛客项目课受益匪浅,乘热打铁也主要是学习,好让自己熟悉这 ...
- 带源码下载—校园表白墙—基于Java Web,Mysql,jsp—设计报告分享
项目代码路径下载:https://download.csdn.net/download/weixin_42868605/20686663 1.系统功能说明: 发布新的表白墙消息. 删除自己发的消息. ...
- Spring Boot整合模板引擎jsp
为什么80%的码农都做不了架构师?>>> jsp也算是一种模板引擎吧.整合jsp前,先说一下运行SpringBoot项目的几种方式 1. 运行SpringBoot项目的几种方式 ...
- Spring Boot 9-FreeMarker模板引擎
springboot使用freemarker模板引擎 首先引入freemarker <!-- freemarker依赖包 --> <dependency><groupId ...
- Spring Boot 使用模板引擎
Spring Boot 推荐使用Thymeleaf.FreeMarker.Velocity.Groovy.Mustache等模板引擎.不建议使用JSP. Spring Boot 对以上几种引擎提供了良 ...
最新文章
- android 刷新某条数据_Android 支持刷新、加载更多、带反弹效果的RecyclerView
- [编写高质量代码:改善java程序的151个建议]建议69 列表相等只需关心元素相等...
- block 与 dispatch quene
- 浏览器中插入富文本编辑器
- 第一百三十五期:如何模拟一次阿里双11秒杀场景的实现?程序员必看
- 硬件基础知识---(17)如何设计一个三极管放大电路
- 微信小程序实现语音识别功能
- 3.5 RNN 层使用方法
- 光纤是计算机网络介质之一,计算机网络技术传输介质--光纤.pptx
- 特征图注意力_【抠图中的注意力机制】HAttMatting---让抠图变得如此简单!
- pyinstaller打包py遇到的问题
- 计算机之父童年的故事教学设计,计算机之父童年的故事 教学设计
- ide之从入门到疯癫
- 间歇性禁食 肠道菌群 心血管代谢疾病
- wikioi 1219 骑士游历
- 阿里开发者招聘节 | 面试题14:如何实现两金额数据相加(最多小数点两位)
- 【vue+HT+flyTo】HT图扑软件中的flyTo应用
- 蚂蚁金服mPaaS 3.0发布 助力客户智能化构建超级App生态
- FreeBSD开发手册(一)
- 2003服务器文件自动只读,windows 2003 文件夹只读,iis 无法写入的问题解决方法...