javascript
SpringBoot中使用Thymeleaf常用功能(三):测试Thymeleaf循环取数据
搭建環境請參考文章一
在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
如果這篇文章幫助到了你,歡迎打賞鼓勵,您的鼓勵是我最大的動力!
總結
以上是生活随笔為你收集整理的SpringBoot中使用Thymeleaf常用功能(三):测试Thymeleaf循环取数据的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: SpringBoot使用thymelea
- 下一篇: python 32位和64位的区别在哪