thymeleaf实现th:each双重多重嵌套功能

博主最近在做一个个人的博客网站，准备用 thymeleaf 实现一个动态加载一二级文章分类的功能，效果如下：

后台实体类代码如下：

/**
 * @author 曲健磊
 * @date 2019-08-22 20:28:18
 * @description 一级分类实体类
 */
public class CateVO {
  /**
   * 一级分类id
   */
  private Integer cate1Id;
  /**
   * 一级分类名称
   */
  private String cate1Name;
  /**
   * 该一级分类下的二级分类列表
   */
  private List<Cate2> cate2List;
 // 省略set get方法
}
/**
 * @author 曲健磊
 * @date 2019-08-15 20:18:44
 * @description 二级分类实体类
 */
public class Cate2 {
 /**
   * 二级分类id
   */
  private Integer id;
 /**
   * 二级分类名称
   */
  private String cateName;
}

Controller 层的代码如下：

@Controller
@RequestMapping("/")
public class IndexController {
  @Autowired
  private CateService cateService;
 /**
 * 我配置的项目端口号是：80
 * 所以，当用户在浏览器上输入：127.0.0.1:80 或 127.0.0.1 时请求会进到这个方法里
 */
  @GetMapping("/")
  public String defaultWebPage(HttpServletRequest request){
    // 1.模拟获取所有的一级分类以及每个一级分类下的所有二级分类
 List<CateVO> allCateList = new ArrayList<CateVO>();
 // 1.1.一级分类
 CateVO cateVO1 = new CateVO();
 cateVO1.setCate1Id(1);
 cateVO1.setCate1Name("大数据");

 // 1.2.该一级分类下的二级分类列表
 List<Cate2> cate2_1List = new ArrayList<Cate2>();

 // 1.2.1.第一个二级分类
 Cate2 cate2_1_1 = new Cate2();
 cate2_1_1.setId(1);
 cate2_1_1.setCateName("Hadoop");

 // 1.2.2.第二个二级分类
 Cate2 cate2_1_2 = new Cate2();
 cate2_1_2.setId(1);
 cate2_1_2.setCateName("Spark");

 cate2_1List.add(cate2_1_1);
 cate2_1List.add(cate2_1_2);
 // 1.3.把所有的二级分类添加到该一级分类下
 cateVO1.setCate2List(cate2_1List);
 // 1.4.把所有的一级分类放入列表中，多个的话以此类推（通常都是直接查数据库的）
 allCateList.add(cateVO1);
 // 2.将一级分类列表放入 request 域中。
    request.setAttribute("cateList", allCateList);
    // 3.返回 index.html 页面
    return "index";
  }
}

前台 html 的代码如下（简化）：

<!DOCTYPE HTML>
<!-- thymeleaf的引用 -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<!-- 引用的css，js -->
</head>
<!-- 页面主体 -->
<body>
<ul>
 <!-- 这一级是一级的分类 -->
  <li th:each="cate1:${cateList}"><a th:text="${cate1.cate1Name}"></a>
   <!-- 这是一级下的二级分类列表 -->
    <ul>
     <li th:each="cate2:${cate1.cate2List}"><a th:text="${cate2.cateName}"></a></li>
    </ul>
  </li>
</ul>
</body>
</html>

博主直接用 java 代码解释一下上面的 th:each 那里是什么意思吧：

// cateList 就是我们在 Controller 中向 request 域中设置的那个属性
for (CateVO cate1 : cateList) {
 System.out.println(cate1.cate1Name);

 // cate1这个变量现在就存在于request域中，我们可以直接调用它的属性和方法
 for (Cate2 cate2 : cate1.cate2List) {
 System.out.println(cate2.cateName);

 // 依次类推，如果有三级分类这里继续调用cate2的属性或方法就可以
 }
}

cate1:${cateList} 这个写法是固定的格式，冒号前的 cate1 是新定义的临时变量，cateList 是我们在 Controller 中放入 request 域中的变量；在一级分类循环里面，我们是可以直接获取刚才定义的临时变量：cate1 的。

所以，我们可以继续 th:each 遍历该一级分类的二级分类列表，三级四级以此类推。

总结

以上所述是小编给大家介绍的thymeleaf实现th:each双重多重嵌套功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • ThinkPHP之foreach标签使用概述

    ThinkPHP模板的foreach标签用于在模板中循环输出数据集或者对对象进行遍历输出. 相对于volist标签而言,foreach标签没有volist标签那么多的功能,却可以对对象进行遍历输出,而volist标签通常是用于输出数组. foreach标签用法如下: <foreach name="list" item="vo"> 用 户 名:{$vo.username}<br /> 电子邮件:{$vo.email}<br /> 注

  • spring boot使用thymeleaf跳转页面实例代码

    spring boot使用thymeleaf跳转页面实例代码

    前言 在学习springboot 之后想结合着html做个小demo,无奈一直没掌握窍门,在多番的搜索和尝试下终于找到了配置的方法,使用thymeleaf做事前端页面模板,不能使用纯html. thymeleaf介绍 Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎. Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板 - 可以在浏览器中正确显示HTML,还可以作为静态原型工作,从而在开发团队中进行更强大的协作. 使用Spring Framework的模块,

  • spring boot使用thymeleaf模板的方法详解

    前言 Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点: 1.Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果.这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式.浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以

  • spring boot thymeleaf 图片上传web项目根目录操作步骤

    thymeleaf介绍 简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点: 1.Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果.这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式.浏览器解释 html 时会忽略未定义的标签属性,所以 t

  • Python和Ruby中each循环引用变量问题（一个隐秘BUG?）

    虽然这个问题我是在 Python 里遇到的,但是用 Ruby 解释起来比较容易一些.在 Ruby 里,遍历一个数组可以有很多种方法,最常用的两种无非是 for 和 each: 复制代码 代码如下: arr = ['a', 'b', 'c'] arr.each { |e|  puts e} for e in arr  puts eend 通常我比较喜欢后者,似乎因为写起来比较好看,不过从效率上来说前者应该会稍微快一点,因为后者实际上是在遍历的过程中对每个元素都调用一个 lambda 函数来做的,虽

  • Spring Boot + thymeleaf 实现文件上传下载功能

    Spring Boot + thymeleaf 实现文件上传下载功能

    最近同事问我有没有有关于技术的电子书,我打开电脑上的小书库,但是邮件发给他太大了,公司又禁止用文件夹共享,于是花半天时间写了个小的文件上传程序,部署在自己的Linux机器上. 提供功能: 1 .文件上传 2.文件列表展示以及下载 原有的上传那块很丑,写了点js代码优化了下,最后界面显示如下图: 先给出成果,下面就一步步演示怎么实现. 1.新建项目 首先当然是新建一个spring-boot工程,你可以选择在网站初始化一个项目或者使用IDE的Spring Initialier功能,都可以新建一个项目

  • springboot如何使用thymeleaf模板访问html页面

    springboot如何使用thymeleaf模板访问html页面

    引言 在传统的web开发中通常使用jsp页面,首先需要在pom文件中引入springmvc相关的包,然后写springmvc的配置文件(包括访问资源的路径解析),之后还需再web.xml中配置访问路由.这无疑太麻烦了,每次开发前都需要编写大量的配置文件. springboot为此提供了高效便捷的解决方案,只需再pom.xml中添加web开发的依赖,便可进行web开发,省去了繁琐的配置步骤. 下面为web开发引入的依赖 <dependency> <groupId>org.spring

  • springboot用thymeleaf模板的paginate分页完整代码

    springboot用thymeleaf模板的paginate分页完整代码

    本文根据一个简单的user表为例,展示 springboot集成mybatis,再到前端分页完整代码(新手自学,不足之处欢迎纠正): 先看java部分 pom.xml 加入 <!--支持 Web 应用开发,包含 Tomcat 和 spring-mvc. --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web&l

  • jQuery 中$(this).index与$.each的使用指南

    工作当中响应某个需求,切换选项卡的一个效果,根据每个选项下的内容元素的总数不同而进行不同的html变化(如果选项卡下的内容为空就等于XXX,否则就XXX) 复制代码 代码如下: $(function(){          $(".bao").hide();           $(".bao").eq(0).show();           $(".head li").click(function(){               $(thi

  • thymeleaf实现th:each双重多重嵌套功能

    thymeleaf实现th:each双重多重嵌套功能

    博主最近在做一个个人的博客网站,准备用 thymeleaf 实现一个动态加载一二级文章分类的功能,效果如下: 后台实体类代码如下: /** * @author 曲健磊 * @date 2019-08-22 20:28:18 * @description 一级分类实体类 */ public class CateVO { /** * 一级分类id */ private Integer cate1Id; /** * 一级分类名称 */ private String cate1Name; /** * 该

  • Python 避免字典和元组的多重嵌套问题

    目录 一.字典.元组的多重嵌套 二.嵌套结构重构为类 一.字典.元组的多重嵌套 例 1:记录全班学生的成绩. 分析:定义一个 SimpleGradebook类, 学生名是字典self._grades的键,成绩是字典self._grades的值. class SimpleGradebook(): def __init__(self): self._grades = {} def add_student(self, name): self._grades[name] = [] def report_

  • jquery实现具有嵌套功能的选项卡

    关于选项卡功能大家一定都不会陌生,无非就是鼠标点击或者悬浮能够切换相关的内容. 通常情况下,大家见到的选项卡都是没有嵌套功能的,也就是说就是完成了一层切换效果,本章节分享一段代码实例,实现了选项卡的嵌套功能,也就是选项卡中嵌套有选项卡功能,也就能够容纳更多的内容. 代码如下: <head> <meta charset="gb2312"> <title>jquery选项卡</title> <style type="text/

  • Android编程实现变化的双重选择框功能示例

    Android编程实现变化的双重选择框功能示例

    本文实例讲述了Android编程实现变化的双重选择框功能.分享给大家供大家参考,具体如下: 原理:定义四个RadioGroup,通过第一个RadioGroup的选择来控制其余几个radiogroup的显隐 布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&quo

  • 微信小程序自定义tab实现多层tab嵌套功能

    微信小程序自定义tab实现多层tab嵌套功能

    小程序最近是越来越火了-- 做小程序有一段时间了,总结一下项目中遇到的问题及解决办法吧. 项目中有个多 tab 嵌套的需求,进入程序主界面下面有两个 tab,进入A模块后,A模块最底下又有多个tab,每个tab上又嵌了2-4个不等的tab... 这种变态需求只能自定义tab了. 其实如果项目不是很复杂,没有多tab嵌套的需求,完全可以用小程序官方的 tabBar,方便快捷. 官方 tabBar 地址:https://developers.weixin.qq.... 一.Demo结构 先看效果图吧

  • Python使用字典的嵌套功能详解

    当需要存储很多同类型的不通过数据时可能需要使用到嵌套,先用一个例子说明嵌套的使用 1.在列表中存储字典 #假设年级里有一群国际化的学生,有黄皮肤的中国人.有白皮肤的美国人也有黑皮肤的非洲人,只记录部分特征 student_1={'nationality':'China','colour':'yellow','age':'15'} student_2={'nationality':'America','colour':'white','age':'18'} student_3={'national

  • Java跳出多重嵌套循环过程解析

    这篇文章主要介绍了Java跳出多重嵌套循环过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.使用标号 1.多重嵌套循环前定义一个标号 2.里层循环的代码中使用带有标号 break 的语句 跳出多重嵌套循环(方法一) public static void main(String[] args) { ok: for(int i=0;i<15;i++){ for(int j=0;j<15;j++){ System.out.println(

  • Spring boot+mybatis+thymeleaf 实现登录注册增删改查功能的示例代码

    本文重在实现理解,过滤器,业务,逻辑需求,样式请无视.. 项目结构如下 1.idea新建Spring boot项目,在pom中加上thymeleaf和mybatis支持.pom.xml代码如下 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3

  • Java if-else 多重嵌套的优化方式

    目录 if-else多重嵌套的优化 1. if-else 多重嵌套的问题 2. 解决方案 2.1 使用Map缓存 2.2 switch 简化条件 多个ifelse语句的替代设计 案例研究 重构 工厂模式 使用枚举 命令模式 规则引擎 小结 if-else多重嵌套的优化 1. if-else 多重嵌套的问题 项目重构发现代码中存在类似以下的三重 if-else 嵌套代码,其中变量 a.b.c有三种可能的取值,组合起来共有27 个分支,这还没有算上对各个变量进行合法性校验失败的分支. 如此繁杂琐碎的

  • Java实现评论回复功能的完整步骤

    前言 使用递归循环开发评论回复功能,适用于大部分的简单单体应用 评论功能或许是大多数的单体应用之中会用到的功能,我们会在自己所开发的项目之中进行集成该功能 大多数时候我们会将评论功能划分成以下几种: 单一型 嵌套型 两层型 一.分类方式 1.单一型 单一型评论方式就是日常论坛之中的盖楼的方式 用户只能根据所在的文章或者问题进行单一回复,评论之间没有互动 类似于问答形式.提出问题,然后回答,一对多关系.这些回答之间没有任何联系 2.嵌套型 嵌套型评论方式会对有回复的评论进行递归,会造成后端性能不佳

随机推荐