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双重多重嵌套功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

将WSL系统更换国内源的方法(固定路径+国内镜像源+详细教程)
这篇文章主要介绍了将WSL系统更换国内源的方法(固定路径+国内镜像源+详细教程),首先找到wsl镜像源，替换镜像源，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-10-10
Viso 2019 下载与激活方法
Visio 是一款专门绘制流程示意图工具，由于很多刚入职的小白没有安装过visio，今天小编抽空给大家分享下Viso 2019 下载与激活方法，感兴趣的朋友一起看看吧
2023-02-02
微信小程序配置服务器域名详细图文教程
每个微信小程序都要在上线前配置好服务器域名,不然会显示白屏,需要小程序开发者在小程序后台操作设置,下面这篇文章主要给大家介绍了关于微信小程序配置服务器域名的详细图文教程,需要的朋友可以参考下
2024-02-02
git_stats web代码图形统计工具详解
仓库代码统计工具之一,可以按git提交人、提交次数、修改文件数、代码行数、注释量在时间维度上进行统计，亦可按各文件类型进行简单的统计，非常方便.本文给大家介绍git_stats web代码图形统计工具，需要的朋友参考下吧
2021-12-12
最新idea2021最新激活超详细教程
最近有朋友向小编反应idea激活码失效的问题，今天小编给大家推荐使用通过无限重置试用期持续激活，需要的朋友参考下吧
2020-09-09
Elasticsearch聚合查询及排序操作示例
这篇文章主要为大家介绍了Elasticsearch聚合查询及排序操作示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-04-04
汉明码编码原理及校验方法分析
汉明码在传输的消息流中插入验证码，当计算机存储或移动数据时，可能会产生数据位错误，以侦测并更正单一比特错误。由于汉明编码简单，它们被广泛应用于内存RAM
2021-09-09
如何利用Fiddler模拟恶劣网络环境
这篇文章主要介绍了如何利用Fiddler模拟恶劣网络环境问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
uniapp引入支付宝原生扫码插件步骤详解
这篇文章主要为大家介绍了uniapp引入支付宝原生扫码插件步骤详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
Kettle下载与安装保姆级教程(最新)
Kettle是一个实现ETL开发的一款开发工具，Spoon是Kettle工具提供的图形化界面，它由Java开发，支持跨平台运行，本文给大家分享Kettle下载与安装配置教程，感兴趣的朋友一起看看吧
2022-11-11