博主最近在做一個個人的博客網站，準備用 thymeleaf 實現一個動態加載一二級文章分類的功能，效果如下：
后臺實體類代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
/** * @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 層的代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
@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 的代碼如下（簡化）：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!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 那里是什么意思吧：
|
1
2
3
4
5
6
7
8
9
10
11
|
// 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雙重多重嵌套功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對服務器之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
原文鏈接：https://blog.csdn.net/a909301740/article/details/100031624
