thymeleaf實(shí)現(xiàn)th:each雙重多重嵌套功能

更新時(shí)間：2019年11月19日 15:15:34 作者：曲健磊

今天給大家分享一個(gè)使用 thymeleaf 實(shí)現(xiàn)一個(gè)動(dòng)態(tài)加載一二級(jí)文章分類的功能，本文通過代碼講解的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

博主最近在做一個(gè)個(gè)人的博客網(wǎng)站，準(zhǔn)備用 thymeleaf 實(shí)現(xiàn)一個(gè)動(dòng)態(tài)加載一二級(jí)文章分類的功能，效果如下：

后臺(tái)實(shí)體類代碼如下：

/**
 * @author 曲健磊
 * @date 2019-08-22 20:28:18
 * @description 一級(jí)分類實(shí)體類
 */
public class CateVO {
  /**
   * 一級(jí)分類id
   */
  private Integer cate1Id;
  /**
   * 一級(jí)分類名稱
   */
  private String cate1Name;
  /**
   * 該一級(jí)分類下的二級(jí)分類列表
   */
  private List<Cate2> cate2List;
 // 省略set get方法
}
/**
 * @author 曲健磊
 * @date 2019-08-15 20:18:44
 * @description 二級(jí)分類實(shí)體類
 */
public class Cate2 {
 /**
   * 二級(jí)分類id
   */
  private Integer id;
 /**
   * 二級(jí)分類名稱
   */
  private String cateName;
}

Controller 層的代碼如下：

@Controller
@RequestMapping("/")
public class IndexController {
  @Autowired
  private CateService cateService;
 /**
 * 我配置的項(xiàng)目端口號(hào)是：80
 * 所以，當(dāng)用戶在瀏覽器上輸入：127.0.0.1:80 或 127.0.0.1 時(shí)請(qǐng)求會(huì)進(jìn)到這個(gè)方法里
 */
  @GetMapping("/")
  public String defaultWebPage(HttpServletRequest request){
    // 1.模擬獲取所有的一級(jí)分類以及每個(gè)一級(jí)分類下的所有二級(jí)分類
 List<CateVO> allCateList = new ArrayList<CateVO>();
 // 1.1.一級(jí)分類
 CateVO cateVO1 = new CateVO();
 cateVO1.setCate1Id(1);
 cateVO1.setCate1Name("大數(shù)據(jù)");
 
 // 1.2.該一級(jí)分類下的二級(jí)分類列表
 List<Cate2> cate2_1List = new ArrayList<Cate2>();
 
 // 1.2.1.第一個(gè)二級(jí)分類
 Cate2 cate2_1_1 = new Cate2();
 cate2_1_1.setId(1);
 cate2_1_1.setCateName("Hadoop");
 
 // 1.2.2.第二個(gè)二級(jí)分類
 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í)分類添加到該一級(jí)分類下
 cateVO1.setCate2List(cate2_1List);
 // 1.4.把所有的一級(jí)分類放入列表中，多個(gè)的話以此類推（通常都是直接查數(shù)據(jù)庫的）
 allCateList.add(cateVO1);
 // 2.將一級(jí)分類列表放入 request 域中。
    request.setAttribute("cateList", allCateList);
    // 3.返回 index.html 頁面
    return "index";
  }
}

前臺(tái) html 的代碼如下（簡化）：

<!DOCTYPE HTML>
<!-- thymeleaf的引用 -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<!-- 引用的css，js -->
</head>
<!-- 頁面主體 -->
<body>
<ul>
 <!-- 這一級(jí)是一級(jí)的分類 -->
  <li th:each="cate1:${cateList}"><a th:text="${cate1.cate1Name}"></a>
   <!-- 這是一級(jí)下的二級(jí)分類列表 -->
    <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);
 
 // 依次類推，如果有三級(jí)分類這里繼續(xù)調(diào)用cate2的屬性或方法就可以
 }
}

cate1:${cateList} 這個(gè)寫法是固定的格式，冒號(hào)前的 cate1 是新定義的臨時(shí)變量，cateList 是我們?cè)?Controller 中放入 request 域中的變量；在一級(jí)分類循環(huán)里面，我們是可以直接獲取剛才定義的臨時(shí)變量：cate1 的。

所以，我們可以繼續(xù) th:each 遍歷該一級(jí)分類的二級(jí)分類列表，三級(jí)四級(jí)以此類推。

總結(jié)

以上所述是小編給大家介紹的thymeleaf實(shí)現(xiàn)th:each雙重多重嵌套功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: