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

所属分类: 网络编程 / 其它综合 阅读数: 1145
收藏 0 赞 0 分享

博主最近在做一个个人的博客网站,准备用 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 赞 0 分享

科学知识:理解socket

这篇文章主要介绍了科学知识:理解socket,本文试图用简洁的语言说清楚socket的相关知识,以便理解,需要的朋友可以参考下
收藏 0 赞 0 分享

科学知识:同步、异步、阻塞和非阻塞区别

这篇文章主要介绍了科学知识:同步、异步、阻塞和非阻塞区别,本文分别讲解了这些概念,需要的朋友可以参考下
收藏 0 赞 0 分享

24种编程语言的Hello World程序

这篇文章主要介绍了24种编程语言的Hello World程序,包括熟知的Java、C语言、C++、C#、Ruby、Python、PHP等编程语言,需要的朋友可以参考下
收藏 0 赞 0 分享

科普:多线程与异步的区别

这篇文章主要介绍了科普:多线程与异步的区别,本文讲解了多线程和异步操作的异同、异步操作的本质、线程的本质、异步操作的优缺点、多线程的优缺点等内容,需要的朋友可以参考下
收藏 0 赞 0 分享

网址(URL)支持的最大长度是多少?最大支持多少个字符?

这篇文章主要介绍了网址(URL)支持的最大长度是多少?最大支持多少个字符?本文总结了IIS、apache服务器及浏览器软件Internet Explorer、Firefox、Opera、chrome等主流的浏览器软件支持情况,需要的朋友可以参考下
收藏 0 赞 0 分享

RPC、RMI、SOAP的区别详解

这篇文章主要介绍了RPC、RMI、SOAP的区别详解,本文还同时讲解了RPC、SOAP、WSDL的关系,需要的朋友可以参考下
收藏 0 赞 0 分享

一张图告诉你计算机编程语言的发展历史

这篇文章主要介绍了一张图告诉你计算机编程语言的发展历史,也可看作是计算机的发展历史大事记,需要的朋友可以参考下
收藏 0 赞 0 分享

Flyway数据库版本控制的教程详解

这篇文章主要介绍了Flyway数据库版本控制的教程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
收藏 0 赞 0 分享

github版本库使用详细图文教程(命令行及图形界面版)

今天我们就来学习github的使用,我们将用它来管理我们的代码,你会发现它的好处的,当然是要在本系列教程全部完成之后,所以请紧跟站长的步伐,今天是第一天,我们来学习如何在git上建立自己的版本仓库,并将代码上传到仓库中
收藏 0 赞 0 分享
查看更多