如题,借助thymeleaf的标签将多级菜单递归展示到页面上。网上查阅了多个博客,均不太适合我的需求。
这里,我主要用到的是<th:block>标签里面的“th:include”属性,将其值设置为递归函数,并传入初始参数。通过设置“th:unless”属性,添加递归结束条件。
关键代码如下:
1、后端菜单数据结构:
MenuVO
/** * 菜单信息封装对象 * * @ClassName: MenuVO * @Description: TODO * */ public class MenuVO implements Serializable { private static final long serialVersionUID = 6979431459397881571L; /** * 菜单id */ private Integer menuId; /** * 菜单名字 */ private String menuName; /** * 菜单顺序 */ private Integer menuOrder; /** * 菜单对应页面地址 */ private String url; /** * 菜单图标 */ private String icon; /** * 子菜单集合 */ private List<MenuVO> children; /** * 菜单类型:0、目录;1、菜单、2、按钮 */ private Integer type; //其他代码略... }
2、在controller中返回的数据模型中写入MenuVO集合
@Controller public class LoginController extends BaseController{ @Autowired MenuService menuService; @GetMapping({ "/index" }) String index(Model model) { List<MenuVO> menus = menuService.queryMenusByUserId(getUserId()); model.addAttribute("menus", menus); model.addAttribute("name", getUser().getName()); return "index"; } //其他代码略...... }
3、添加菜单代码块
footer.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <body> <th:block th:fragment="menu2(menus,lv)"> <th:block th:each="p : ${menus}"> <li> <a th:url="${p.url}" th:style="|padding-left:${13*lv}px|" th:href="'#menu'+${p.menuId}" class="menuItem collapsed" data-toggle="collapse"><i th:class="${p.icon}" aria-hidden="true"></i> <span th:text="${p.menuName}"></span> <span th:if="${p.type} ==0" class="pull-right glyphicon glyphicon-chevron-toggle"></span> </a> <ul th:if="${p.type} ==0" th:id="'menu'+${p.menuId}" class="nav nav-list collapse" style="height: 0px;"> <th:block th:unless="${#lists.isEmpty(p.children)}" th:include="this::menu2(${p.children},${lv+1})"/> </ul> </li> </th:block> </th:block> </body> </html>
4、在index.html页面中引用菜单代码块
<!-- 菜单导航 --> <div class="menu col-md-2 shadow"> <ul id="main-nav" class="nav nav-stacked" style=""> <th:block th:include="footer::menu2(${menus},1)"/> </ul> </div>
相关推荐
thymeleaf常用标签页面
基于SpringBoot + thymeleaf + MySQL实现图书馆管理系统 基于SpringBoot + thymeleaf + MySQL实现图书馆管理系统 基于SpringBoot + thymeleaf + MySQL实现图书馆管理系统 基于SpringBoot + thymeleaf + MySQL实现...
SpringBoot+Mybatis+Thymeleaf等技术实现的Java博客系统.zipSpringBoot+Mybatis+Thymeleaf等技术实现的Java博客系统.zipSpringBoot+Mybatis+Thymeleaf等技术实现的Java博客系统.zipSpringBoot+Mybatis+Thymeleaf等...
在本项目中,我们利用Spring Boot、Thymeleaf和Bootstrap三大技术栈构建了一个简易的后台管理系统界面。Spring Boot作为现代化的Java应用开发框架,极大地简化了配置和启动流程,而Thymeleaf则是一个现代的服务器端...
springboot整合thymeleaf+maven实现异常处理页面,实现异常跳转页面
基于Spring_Boot+thymeleaf的web服务分类展示系统,提供数据集、标签集的展示,以_ClassificationSystem
该项目试基于SpringBoot2.X+Thymeleaf 实现的完整博客系统。 部分的前端展示页面和css样式等借鉴了部分网络作者的开源项目,在此向其作者表示感谢! 因为博主的能力有限,重构计划一直拖后,但是对于自己项目的...
1、基于SpringBoot+Mybatis+Thymeleaf架构实现的员工管理系统(源码+数据库).zip 2、该资源包括项目的全部源码,下载可以直接使用! 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设...
然后,创建HTML模板文件,利用Thymeleaf 的语法进行动态数据绑定。例如,使用`${}`来插入变量,`th:text`属性来设置元素文本,`th:href`来生成链接等。同时,结合Bootstrap 的类名,可以轻松实现布局和样式。 在...
在本项目中,我们利用了Spring Boot、Mybatis Plus和Thymeleaf三大技术栈来构建一个用户管理系统,其中包含了用户登录以及校验用户名是否重复的功能。以下将详细阐述这三者之间的配合以及如何实现所述功能。 首先,...
基于SpringBoot+Mybatis+Thymeleaf等技术实现的Java博客系统(代码测试通过,界面美观,可作开发模板) 项目经过严格测试,确保可以运行!源码无需做任何更改! 基于Spring Boot的博客 Spring Boot Blog是由Docker +...
在Spring Boot项目中,结合Thymeleaf模板引擎,我们可以轻松地实现文件的上传和下载功能。Spring Boot的强大会简化这些操作,而Thymeleaf则提供了方便的前端交互。下面将详细介绍如何实现这两个功能。 一、环境准备...
该项目是基于Java和Thymeleaf的学生信息展示与交互系统源码,包含22个文件,涵盖7个Java源文件、5个XML配置文件、2个...该系统利用Thymeleaf模板引擎展示学生信息表,并采用AJAX技术实现动态数据交互,提升用户体验。
SpringBoot+JPA+thymeleaf框架实现增删改查分页显示,前端通过bootstrap渲染
在网页开发中,有时我们需要将Base64编码的字符串直接作为图片显示出来,这在Thymeleaf框架中可以通过特定的方式实现。Base64是一种数据编码方式,它将二进制数据转化为可打印的ASCII字符,常用于在HTTP协议中传输...
在本教程中,我们将深入探讨如何使用Spring Boot、JPA(Java Persistence API)以及Thymeleaf模板引擎实现一个简单的数据库操作,包括增删改查(CRUD)。Spring Boot简化了Java应用程序的开发过程,而JPA是Java平台...
在本系统中,Thymeleaf作为视图层技术,为后台管理系统提供了友好的界面展示和交互体验。 系统的构建过程包括以下步骤: 1. **初始化项目**:首先,使用Spring Initializr创建一个Spring Boot项目,选择必要的依赖...
步骤2:利用Thymeleaf表达式语言 Thymeleaf支持表达式语言(EL),可以获取模型属性并将其插入到URL中。例如,如果需要根据用户ID获取数据,可以这样做: ```html var userId = /*[[${userId}]]*/ 123; // 假设...