使用Thymeleaf實現列表展示

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/zh-tw/n/302072.html

使用Thymeleaf實現列表展示

一、數據準備

二、模板設計

三、數據展示

四、小結

相關推薦

發表回復