spring boot: 用thymeleaf嵌套循环展示多层数据(spring boot 2.3.2)
一，什么情况下会用到嵌套循环？
当我们展示多个分类时，每个分类下又展示出推荐的前几个商品，
这时我们需要用到嵌套循环
看一个例子：
说明：刘宏缔的架构森林是一个专注架构的博客，
网站：https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/05/24/springboot-yong-thymeleaf-qian-tao-xun-huan-zhan-shi-duo-ceng-shu-ju-springboot232/
对应的源码可以访问这里获取： 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="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)
