spring boot: 用thymeleaf嵌套循环展示多层数据(spring boot 2.3.2)

一，什么情况下会用到嵌套循环？

   当我们展示多个分类时，每个分类下又展示出推荐的前几个商品，
   这时我们需要用到嵌套循环

   看一个例子：

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： https://github.com/liuhongdi/

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，演示项目的相关信息

1,项目地址:

https://github.com/liuhongdi/templateloop

2,项目功能说明：

        演示了模板中常用的嵌套循环

3,项目结构；如图：

三，配置文件说明

1,pom.xml

        <!--thymeleaf begin-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!--thymeleaf   end-->

2,application.properties

#error
server.error.include-stacktrace=always
#error
logging.level.org.springframework.web=trace

#thymeleaf
spring.thymeleaf.cache=false
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.mode=HTML
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

四，java程序说明

1,Category.java

//分类模型
public class Category {

    //分类id
    Long categoryId;
    public Long getCategoryId() {
        return this.categoryId;
    }
    public void setCategoryId(Long categoryId) {
        this.categoryId = categoryId;
    }

    //分类名称
    private String categoryName;
    public String getCategoryName() {
        return this.categoryName;
    }
    public void setCategoryName(String categoryName) {
        this.categoryName = categoryName;
    }

    //打印
    public String toString(){
        return " Category:categoryId=" + categoryId +" categoryName=" + categoryName;
    }
}

2,Goods.java

//商品模型
public class Goods {
    //商品id
    Long goodsId;
    public Long getGoodsId() {
        return this.goodsId;
    }
    public void setGoodsId(Long goodsId) {
        this.goodsId = goodsId;
    }

    //商品名称
    private String goodsName;
    public String getGoodsName() {
        return this.goodsName;
    }
    public void setGoodsName(String goodsName) {
        this.goodsName = goodsName;
    }

    //商品标题
    private String subject;
    public String getSubject() {
        return this.subject;
    }
    public void setSubject(String subject) {
        this.subject = subject;
    }

    //商品价格
    private BigDecimal price;
    public BigDecimal getPrice() {
        return this.price;
    }
    public void setPrice(BigDecimal price) {
        this.price = price;
    }

    //库存
    int stock;
    public int getStock() {
        return this.stock;
    }
    public void setStock(int stock) {
        this.stock = stock;
    }

    //打印
    public String toString(){
        return " Goods:goodsId=" + goodsId +" goodsName=" + goodsName+" subject=" + subject+" price=" + price+" stock=" + stock;
    }
}

3,HomeController.java

@Controller
@RequestMapping("/home")
public class HomeController {

    //返回分栏目的商品列表
    @GetMapping("/category")
    public String home(Model model) {
        //统一使用一个list返回
        ArrayList<Map<String,Object>> list = new ArrayList<>();

        //每个分类及分类下的推荐商品，用一个map来保存
        //第一个分类
        Map<String,Object> map1 = new HashMap<String,Object>();
        Category category1 = new Category();

        category1.setCategoryId(1L);
        category1.setCategoryName("家居");
        map1.put("category",category1);

        //保存商品用的list
        ArrayList<Goods> listGoods1 = new ArrayList<Goods>();

        Goods goods1 = new Goods();
        goods1.setGoodsId(1L);
        goods1.setGoodsName("无线智能感应灯");
        listGoods1.add(goods1);
        Goods goods2 = new Goods();
        goods2.setGoodsId(2L);
        goods2.setGoodsName("朱之光落地灯");
        listGoods1.add(goods2);
        Goods goods3 = new Goods();
        goods3.setGoodsId(3L);
        goods3.setGoodsName("儿童抗首菌枕头");
        listGoods1.add(goods3);
        Goods goods4 = new Goods();
        goods4.setGoodsId(4L);
        goods4.setGoodsName("按摩床垫升级款");
        listGoods1.add(goods4);
        Goods goods5 = new Goods();
        goods5.setGoodsId(5L);
        goods5.setGoodsName("北欧简约金属茶几");
        listGoods1.add(goods5);
        map1.put("goodslist",listGoods1);

        //把map1添加到list
        list.add(map1);

        //第二个分类
        Map<String,Object> map2 = new HashMap<String,Object>();
        Category category2 = new Category();
        category2.setCategoryId(2L);
        category2.setCategoryName("美护");
        map2.put("category",category2);
        ArrayList<Goods> listGoods2 = new ArrayList<Goods>();
        
        Goods goods21 = new Goods();
        goods21.setGoodsId(21L);
        goods21.setGoodsName("护手霜套装");
        listGoods2.add(goods21);
        Goods goods22 = new Goods();
        goods22.setGoodsId(22L);
        goods22.setGoodsName("美白牙贴");
        listGoods2.add(goods22);
        Goods goods23 = new Goods();
        goods23.setGoodsId(23L);
        goods23.setGoodsName("口腔护理泡沫");
        listGoods2.add(goods23);
        map2.put("goodslist",listGoods2);
        //把map2添加到list
        list.add(map2);

        //第三个分类
        Map<String,Object> map3 = new HashMap<String,Object>();
        Category category3 = new Category();
        category3.setCategoryId(3L);
        category3.setCategoryName("服装");
        map3.put("category",category3);
        ArrayList<Goods> listGoods3 = new ArrayList<Goods>();
        
        Goods goods31 = new Goods();
        goods31.setGoodsId(31L);
        goods31.setGoodsName("纯色真丝睡袍");
        listGoods3.add(goods31);
        Goods goods32 = new Goods();
        goods32.setGoodsId(32L);
        goods32.setGoodsName("蚕丝条纹睡衣套装");
        listGoods3.add(goods32);
        Goods goods33 = new Goods();
        goods33.setGoodsId(33L);
        goods33.setGoodsName("牛津长袖衬衫");
        listGoods3.add(goods33);
        map3.put("goodslist",listGoods3);
        ////把map3添加到list
        list.add(map3);

        //把list传递给模板
        model.addAttribute("list",list);
        return "home/category.html";
    }
}

说明：我们没有使用数据库，因为只是用于演示，

        直接用代码写入了11条数据，共三个分类

        每个分类的数据各放入一个map中，最后用一个list传递给模板

4，category.html

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div style="100%;height:30px;background:#ffffff;font-size: 16px;" ></div>
<div id="content" style="1040px;">
    <div style="790px;float:left;margin-left:30px;">
        <!--main begin-->
        <div th:each="categoryOne:${list}" style="790px;font-size:16px;overflow: hidden;">
            <!--显示分类信息-->
            <div style="background:#eeeeee;790px;height:20px;line-height:20px;overflow: hidden;margin-top: 10px;">
                <div style="200px;float:left;">
                分类ID:<span th:text="${categoryOne.category.categoryId}"></span> 分类名称:<span th:text="${categoryOne.category.categoryName}"></span>
                </div>

                <div style="200px;float:right;text-align: right;">
                    <a th:href="@{/goods/goodslist/(categoryid=${categoryOne.category.categoryId})}">更多...</a>
                </div>
            </div>
            <!--显示分类下的商品列表信息-->
            <div style="790px;height:100px;">
                <div th:each="goodsOne:${categoryOne.goodslist}" style="250px;height:100px;float: left;background:#eeeeee;margin-left:10px;margin-top:10px;">
                    <div>商品ID:[[${goodsOne.goodsId}]]</div>
                    <div>商品名称:[[${goodsOne.goodsName}]]</div>
                </div>
            </div>
        </div>
        <!--main   end-->
    </div>
</div>
</body>
</html>

注意代码中用了th:each嵌套循环了两层，变量名分别用了categoryOne和goodsOne

五，测试效果

访问:

http://127.0.0.1:8080/home/category

返回:

 循环展示了多个分类下的多个商品

六，查看spring boot版本

  .   ____          _            __ _ _
 /\ / ___'_ __ _ _(_)_ __  __ _    
( ( )\___ | '_ | '_| | '_ / _` |    
 \/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::        (v2.3.2.RELEASE)