SpringBoot中使用Thymeleaf常用功能（三）：测试Thymeleaf循环取数据

超、凢脫俗 2023-10-17 22:20 12阅读 0赞

搭建环境请参考文章一

在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">  
  
<div class="panel-heading">  
  
<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">  
  
<div class="table table-responsive">  
  
<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>

运行结果：

![70][]

![70 1][]

附：源码地址：

https://download.csdn.net/download/badao\_liumang\_qizhi/10530567

如果这篇文章帮助到了你，欢迎打赏鼓励，您的鼓励是我最大的动力！

![70 2][]

[70]: https://img-blog.csdn.net/2018070915410599?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/2018070915411715?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: https://img-blog.csdn.net/20180711082922648?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70