spring boot: 用thymeleaf嵌套循環展示多層數據(spring boot 2.3.2)

一，什么情況下會用到嵌套循環？

   當我們展示多個分類時，每個分類下又展示出推薦的前幾個商品，
   這時我們需要用到嵌套循環

   看一個例子：

 

 

 

說明：劉宏締的架構森林是一個專注架構的博客，地址：https://www.cnblogs.com/architectforest

         對應的源碼可以訪問這里獲取： https://github.com/liuhongdi/

說明：作者:劉宏締 郵箱: [e-mail]

 

二，演示項目的相關信息

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="width:100%;height:30px;background:#ffffff;font-size: 16px;" ></div>
<div id="content" style="width:1040px;">
    <div style="width:790px;float:left;margin-left:30px;">
        <!--main begin-->
        <div th:each="categoryOne:${list}" style="width:790px;font-size:16px;overflow: hidden;">
            <!--顯示分類信息-->
            <div style="background:#eeeeee;width:790px;height:20px;line-height:20px;overflow: hidden;margin-top: 10px;">
                <div style="width:200px;float:left;">
                分類ID:<span th:text="${categoryOne.category.categoryId}"></span> 分類名稱:<span th:text="${categoryOne.category.categoryName}"></span>
                </div>

                <div style="width:200px;float:right;text-align: right;">
                    <a th:href="@{/goods/goodslist/(categoryid=${categoryOne.category.categoryId})}">更多...</a>
                </div>
            </div>
            <!--顯示分類下的商品列表信息-->
            <div style="width:790px;height:100px;">
                <div th:each="goodsOne:${categoryOne.goodslist}" style="width: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)