搭建环境请参考文章一
在index.html中新建超链接：<a th:href="@{eachtest}">测试循环</a>
新建包com.ysh.thymeleaftest.domain,在此包下新建Dog.java,添加一些属性，并提供相应的setter和getter方法，再重写给属性赋值的构造方法以及默认的构造方法，实现Serializable接口。
Dog.java:
package com.ysh.thymeleaftest.domain;
import java.io.Serializable;
public class Dog implements Serializable {
private Integer id;
private String name;
private String image;
private Double price;
private String owner;
public Dog() {
// TODO Auto-generated constructor stub
}
public Dog(Integer id, String name, String image, Double price, String owner) {
this.id = id;
this.name = name;
this.image = image;
this.price = price;
this.owner = owner;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getImage() {
return image;
}
public void setImage(String image) {
this.image = image;
}
public Double getPrice() {
return price;
}
public void setPrice(Double price) {
this.price = price;
}
public String getOwner() {
return owner;
}
public void setOwner(String owner) {
this.owner = owner;
}
}
在ThymeleafController.java中添加方法eachtest,保存数据到作用范围域，用于测试
Thymeleaf的循环获取数据。
eachtest方法用来响应：<a th:href="@{eachtest}">测试循环</a>，在此方法中创建了五个dog对象，并将其存放在list中，
保存到request作用范围域，返回success3,Thymeleaf会自动解析并跳转到success3.html中
eachtest:
/*
* 保存数据到作用范围域，用于测试Thymeleaf的循环获取数据
* */
@RequestMapping("/eachtest")
public String eachtest(WebRequest webRequest){
// 模拟数据库数据保存到List集合
List<Dog> dogs = new ArrayList<>();
dogs.add(new Dog(1, "巴扎黑1", "1.jpg",109.00,"ysh"));
dogs.add(new Dog(2, "巴扎黑2", "2.jpg",108.00,"badao"));
dogs.add(new Dog(3, "巴扎黑3", "3.jpg",58.00,"liumang"));
dogs.add(new Dog(4, "巴扎黑4", "4.jpg",108.00,"qi"));
dogs.add(new Dog(5, "巴扎黑5", "5.jpg",79.00,"zhi"));
// 保存数据到request作用范围域
webRequest.setAttribute("dogs", dogs, RequestAttributes.SCOPE_REQUEST);
return "success3";
}
success3.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>thymeleaf示例</title>
<link rel="stylesheet" th:href="@{css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{css/bootstrap-theme.min.css}"/>
<script type="text/javascript" th:src="@{js/jquery-1.11.0.min.js}"></script>
<script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
</head>
<body>
<div class="panel panel-primary">
<!-- .panel-heading 面板头信息。 -->
<div class="panel-heading">
<!-- .panel-title 面板标题。 -->
<h3 class="panel-title">Thymeleaf循环</h3>
</div>
</div>
<div class="container">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">狗狗信息列表</h3>
</div>
<div class="panel-body">
<!-- table-responsive:响应式表格,在一个表展示所有的数据,当不够显示的时候可以左右滑动浏览-->
<div class="table table-responsive">
<!--
.table-bordered 类为表格和其中的每个单元格增加边框。
.table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
-->
<table class="table table-bordered table-hover">
<thead>
<th class="text-center">狗狗照片</th ><th class="text-center">狗狗名字</th>
<th class="text-center">狗狗价格</th ><th class="text-center">狗狗主人</th>
</thead>
<tbody class="text-center">
<tr th:each="dog : ${dogs}">
<td> <img src="img/1.jpg" th:src="@{'img/'+${dog.image}}" height="60"/></td>
<td th:text="${dog.name}"></td>
<td th:text="${dog.price}"></td>
<td th:text="${dog.owner}"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
运行结果：
附：源码地址：
https://download.csdn.net/download/badao_liumang_qizhi/10530567