Thymeleaf作为一款模板引擎，广泛应用于Web应用程序中，同时也是Spring的官方推荐模板引擎之一。在Web应用程序中，常常需要展示一些列表数据，例如商品列表、用户列表等等。本文将介绍如何使用Thymeleaf实现列表展示，包括数据准备、模板设计和数据展示等方面的内容。
一、数据准备
在开始实现列表展示前，先要准备好展示所需的数据。可以使用模拟数据，或者从数据库或其他数据源中获取数据。例如，我们可以使用Java对象来模拟商品列表数据：
public class Product {
private Long id;
private String name;
private Double price;
// 省略getter和setter
}
public class ProductRepository {
public static List<Product> findAll() {
List<Product> products = new ArrayList<>();
products.add(new Product(1L, "商品1", 100.0));
products.add(new Product(2L, "商品2", 200.0));
products.add(new Product(3L, "商品3", 300.0));
return products;
}
}
以上代码定义了一个`Product`类和一个`ProductRepository`类。`Product`类用来表示商品信息，`ProductRepository`类提供了一个`findAll`方法，用来返回所有商品信息。
二、模板设计
在数据准备好之后，接下来需要设计模板，用来展示数据。可以使用Thymeleaf的循环指令来展示列表数据。以下是一个简单的模板设计示例：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>商品列表</title>
</head>
<body>
<table>
<thead>
<tr>
<th>商品ID</th>
<th>商品名称</th>
<th>商品价格</th>
</tr>
</thead>
<tbody>
<tr th:each="p : ${products}">
<td th:text="${p.id}"></td>
<td th:text="${p.name}"></td>
<td th:text="${p.price}"></td>
</tr>
</tbody>
</table>
</body>
</html>
以上模板设计中，使用了Thymeleaf的`th:each`指令来循环展示每个商品的信息。使用`products`作为迭代对象，通过`${p.id}`、`${p.name}`和`${p.price}`等表达式来展示每个商品的ID、名称和价格等信息。
三、数据展示
在数据准备好和模板设计好之后，接下来需要使用Java代码来将数据展示到页面上。可以使用Spring MVC来实现数据展示的逻辑。以下是一个简单的Spring MVC控制器示例：
@Controller
public class ProductController {
@GetMapping("/products")
public String list(Model model) {
List<Product> products = ProductRepository.findAll();
model.addAttribute("products", products);
return "product/list";
}
}
以上代码定义了一个`ProductController`控制器，使用`@GetMapping`注解，将`/products`请求映射到`list`方法。在`list`方法中，使用`ProductRepository`的`findAll`方法来获取所有商品信息，并将其存储到模型中，即调用`model.addAttribute(“products”, products)`方法。最后，将模板的名称`”product/list”`作为返回结果，表示渲染到页面上。
四、小结
本文介绍了如何使用Thymeleaf实现列表展示，从数据准备、模板设计到数据展示等方面进行了详细的阐述。当然，Thymeleaf还有更多的使用方式和指令，读者可以根据自己的具体需求进行深入探索。
参考代码：
Product.java：
public class Product {
private Long id;
private String name;
private Double price;
// 省略getter和setter
}
ProductRepository.java：
public class ProductRepository {
public static List<Product> findAll() {
List<Product> products = new ArrayList<>();
products.add(new Product(1L, "商品1", 100.0));
products.add(new Product(2L, "商品2", 200.0));
products.add(new Product(3L, "商品3", 300.0));
return products;
}
}
模板设计示例：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>商品列表</title>
</head>
<body>
<table>
<thead>
<tr>
<th>商品ID</th>
<th>商品名称</th>
<th>商品价格</th>
</tr>
</thead>
<tbody>
<tr th:each="p : ${products}">
<td th:text="${p.id}"></td>
<td th:text="${p.name}"></td>
<td th:text="${p.price}"></td>
</tr>
</tbody>
</table>
</body>
</html>
ProductController.java：
@Controller
public class ProductController {
@GetMapping("/products")
public String list(Model model) {
List<Product> products = ProductRepository.findAll();
model.addAttribute("products", products);
return "product/list";
}
}
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/302072.html
微信扫一扫 
支付宝扫一扫 