thymeleaf实现th:each双重多重嵌套功能
更新时间：2019年11月19日 15:15:34 作者：曲健磊
今天给大家分享一个使用 thymeleaf 实现一个动态加载一二级文章分类的功能，本文通过代码讲解的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
博主最近在做一个个人的博客网站，准备用 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双重多重嵌套功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
最近项目需要实现程序的并行化，刚好借着翻译这篇帖子的机会，了解和熟悉并行计算的基本概念和程序设计，有需要的朋友可以借鉴参考下2021-11-11
kali2021.4a使用virtualenv安装angr的详细过程
在Linux中安装各种依赖python的软件时，最头疼的问题之一就是各个软件的python版本不匹配的问题，angr依赖python3，因此考虑使用virtualenv来安装angr，需要的朋友可以参考下2022-11-11
2018年已经过去了近三分之二了，是不是感觉时光匆匆、一去不复返，过去的时间我们追不回，但是我们可以更加珍惜以后的时间！下面这篇文章主要给大家分享了2018年最值得一读的互联网书单，希望以后的日子里大家可以多读书，读好书2018-08-08![Jebrains付费插件Activation code[持续更新]](//img.jbzj.com/images/xgimg/bcimg3.png)
Jebrains付费插件Activation code[持续更新]
这篇文章主要介绍了Jebrains付费插件Activation code[持续更新],使用本Activation code需要jetbrains-agent支持！感兴趣的朋友跟随小编一起看看吧2020-09-09
IntelliJ IDEA 2020.1配置svn的图文教程
这篇文章主要介绍了IntelliJ IDEA 2020.1配置svn的图文教程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
这篇文章主要介绍了一看就懂的IDEA编辑器 .http教程详解,本文以PHPStorm的ide作为例子的讲解，需要的朋友可以参考下2020-11-11
当你写项目的时候，如何快速的完成一个项目的搭建，这个时候就需要借助到一些模板了，前端开发的一个好处就是，各类UI模板都是相当的齐全的，本文就介绍几个前端框架，感兴趣的可以了解一下2021-06-06
基于Laravel + Vue + Element 实现 人力资源系统(考勤应用 )
Bee 是人力资源系统中的考勤应用，主要功能用于员工申请假单。接下来通过本文给大家介绍基于Laravel + Vue + Element 考勤应用 之 人力资源系统,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了编程界主流脚本编程语言的比较和选择,本文分析了Unix/Linux Shell、Python/Jython、Ruby/JRuby、Perl、Groovy等脚本语言的优缺点,帮助您快速了解各大语言,需要的朋友可以参考下2015-05-05
这篇文章介绍了使用git命令上传代码的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-03-03
![Jebrains付费插件Activation code[持续更新]](http://img.jbzj.com/images/xgimg/bcimg3.png)
最新评论