thymeleaf實現th:each雙重多重嵌套使用

博主最近在做一個個人的博客網站,準備用 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 遍歷該一級分類的二級分類列表,三級四級以此類推。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章