博主最近在做一個(gè)個(gè)人的博客網(wǎng)站,準(zhǔn)備用 thymeleaf 實(shí)現(xiàn)一個(gè)動(dòng)態(tài)加載一二級(jí)文章分類(lèi)的功能,效果如下:
![](http://img.jbzj.com/file_images/article/201911/20191119151800527.gif?20191019151816)
后臺(tái)實(shí)體類(lèi)代碼如下:
/**
* @author 曲健磊
* @date 2019-08-22 20:28:18
* @description 一級(jí)分類(lèi)實(shí)體類(lèi)
*/
public class CateVO {
/**
* 一級(jí)分類(lèi)id
*/
private Integer cate1Id;
/**
* 一級(jí)分類(lèi)名稱(chēng)
*/
private String cate1Name;
/**
* 該一級(jí)分類(lèi)下的二級(jí)分類(lèi)列表
*/
private ListCate2> cate2List;
// 省略set get方法
}
/**
* @author 曲健磊
* @date 2019-08-15 20:18:44
* @description 二級(jí)分類(lèi)實(shí)體類(lèi)
*/
public class Cate2 {
/**
* 二級(jí)分類(lèi)id
*/
private Integer id;
/**
* 二級(jí)分類(lèi)名稱(chēng)
*/
private String cateName;
}
Controller 層的代碼如下:
@Controller
@RequestMapping("/")
public class IndexController {
@Autowired
private CateService cateService;
/**
* 我配置的項(xiàng)目端口號(hào)是:80
* 所以,當(dāng)用戶(hù)在瀏覽器上輸入:127.0.0.1:80 或 127.0.0.1 時(shí)請(qǐng)求會(huì)進(jìn)到這個(gè)方法里
*/
@GetMapping("/")
public String defaultWebPage(HttpServletRequest request){
// 1.模擬獲取所有的一級(jí)分類(lèi)以及每個(gè)一級(jí)分類(lèi)下的所有二級(jí)分類(lèi)
ListCateVO> allCateList = new ArrayListCateVO>();
// 1.1.一級(jí)分類(lèi)
CateVO cateVO1 = new CateVO();
cateVO1.setCate1Id(1);
cateVO1.setCate1Name("大數(shù)據(jù)");
// 1.2.該一級(jí)分類(lèi)下的二級(jí)分類(lèi)列表
ListCate2> cate2_1List = new ArrayListCate2>();
// 1.2.1.第一個(gè)二級(jí)分類(lèi)
Cate2 cate2_1_1 = new Cate2();
cate2_1_1.setId(1);
cate2_1_1.setCateName("Hadoop");
// 1.2.2.第二個(gè)二級(jí)分類(lèi)
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.把所有的二級(jí)分類(lèi)添加到該一級(jí)分類(lèi)下
cateVO1.setCate2List(cate2_1List);
// 1.4.把所有的一級(jí)分類(lèi)放入列表中,多個(gè)的話(huà)以此類(lèi)推(通常都是直接查數(shù)據(jù)庫(kù)的)
allCateList.add(cateVO1);
// 2.將一級(jí)分類(lèi)列表放入 request 域中。
request.setAttribute("cateList", allCateList);
// 3.返回 index.html 頁(yè)面
return "index";
}
}
前臺(tái) html 的代碼如下(簡(jiǎn)化):
!DOCTYPE HTML>
!-- thymeleaf的引用 -->
html xmlns:th="http://www.thymeleaf.org">
head>
!-- 引用的css,js -->
/head>
!-- 頁(yè)面主體 -->
body>
ul>
!-- 這一級(jí)是一級(jí)的分類(lèi) -->
li th:each="cate1:${cateList}">a th:text="${cate1.cate1Name}">/a>
!-- 這是一級(jí)下的二級(jí)分類(lèi)列表 -->
ul>
li th:each="cate2:${cate1.cate2List}">a th:text="${cate2.cateName}">/a>/li>
/ul>
/li>
/ul>
/body>
/html>
博主直接用 java 代碼解釋一下上面的 th:each 那里是什么意思吧:
// cateList 就是我們?cè)?Controller 中向 request 域中設(shè)置的那個(gè)屬性
for (CateVO cate1 : cateList) {
System.out.println(cate1.cate1Name);
// cate1這個(gè)變量現(xiàn)在就存在于request域中,我們可以直接調(diào)用它的屬性和方法
for (Cate2 cate2 : cate1.cate2List) {
System.out.println(cate2.cateName);
// 依次類(lèi)推,如果有三級(jí)分類(lèi)這里繼續(xù)調(diào)用cate2的屬性或方法就可以
}
}
cate1:${cateList}
這個(gè)寫(xiě)法是固定的格式,冒號(hào)前的 cate1 是新定義的臨時(shí)變量,cateList 是我們?cè)?Controller 中放入 request 域中的變量;在一級(jí)分類(lèi)循環(huán)里面,我們是可以直接獲取剛才定義的臨時(shí)變量:cate1 的。
所以,我們可以繼續(xù) th:each 遍歷該一級(jí)分類(lèi)的二級(jí)分類(lèi)列表,三級(jí)四級(jí)以此類(lèi)推。
總結(jié)
以上所述是小編給大家介紹的thymeleaf實(shí)現(xiàn)th:each雙重多重嵌套功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
您可能感興趣的文章:- springboot+thymeleaf+druid+mybatis 多模塊實(shí)現(xiàn)用戶(hù)登錄功能
- Spring boot+mybatis+thymeleaf 實(shí)現(xiàn)登錄注冊(cè)增刪改查功能的示例代碼
- Spring boot2+jpa+thymeleaf實(shí)現(xiàn)增刪改查
- Thymeleaf對(duì)象的使用之基本對(duì)象實(shí)例解析
- SpringBoot使用thymeleaf模板過(guò)程解析
- Spring Boot Thymeleaf實(shí)現(xiàn)國(guó)際化的方法詳解
- SpringBoot引入Thymeleaf的實(shí)現(xiàn)方法
- Thymeleaf中th:each及th:if使用方法解析