当前位置 主页 > 网站技术 > 代码类 >

    thymeleaf实现th:each双重多重嵌套功能

    栏目:代码类 时间:2019-11-19 18:07

    博主最近在做一个个人的博客网站,准备用 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的属性或方法就可以
     }
    }