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 的代码如下(简化):



<html xmlns:th="http://www.thymeleaf.org">
<head>

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双重多重嵌套使用)