🎯 Mục tiêu bài học
- Hiểu được Thymeleaf là gì và vai trò trong Spring Boot-
- Biết cách truyền dữ liệu từ Controller sang View-
- Hiển thị dữ liệu bằng cú pháp Thymeleaf (th:text, th:each, th:if,…)-
- Làm việc với danh sách dữ liệu (List)-
- Biết sử dụng fragment để chia nhỏ và tái sử dụng giao diện.
📖 1. Thymeleaf là gì?
Thymeleaf là một template engine mạnh mẽ dùng để xây dựng giao diện HTML trong ứng dụng Spring Boot. Nó cho phép:
- Thymeleaf là một template engine giúp render HTML động.
- Hiển thị dữ liệu từ controller vào view (HTML).
- Tương thích tốt với HTML5.
- Hỗ trợ logic điều kiện, lặp, định dạng dữ liệu, layout engine…
- Được tích hợp chặt chẽ với Spring MVC.
- Ưu điểm:
- Viết HTML đúng chuẩn.
- Giao diện xem được cả khi chưa chạy backend.
- Dễ tích hợp các điều kiện, vòng lặp, xử lý logic đơn giản ngay trong HTML.
📌 Thymeleaf thay thế tốt cho JSP, đồng thời giữ nguyên cấu trúc HTML để dễ thiết kế.
🛠 2. Cấu hình Thymeleaf trong Spring Boot
Spring Boot đã tích hợp sẵn Thymeleaf, nếu bạn đã thêm dependency sau trong pom.xml, thì không cần cấu hình thêm:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
🗂 3. Truyền dữ liệu đơn giản từ Controller sang HTML
Tạo Controller mới: GreetingController.java
package com.yourcompany.banhang.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class GreetingController {
@GetMapping("/hello")
public String sayHello(Model model) {
model.addAttribute("name", "Lập Trình Web Spring Boot");
return "hello";
}
}
🧾 4. Tạo file hello.html trong thư mục templates
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Xin chào</title>
</head>
<body>
<h2>Xin chào, <span th:text="${name}">[Tên]</span>!</h2>
</body>
</html>
📝
th:text="${name}"dùng để hiển thị giá trị biếnnametừ controller truyền vào.
🔍 5. Giải thích cú pháp Thymeleaf cơ bản
| Cú pháp | Ý nghĩa |
|---|---|
th:text | Hiển thị nội dung (text) |
th:if / th:unless | Điều kiện hiển thị |
th:each | Lặp qua danh sách |
th:href, th:src | Gán link động |
${} | Truy cập biến từ controller |
🚀 6. Chạy thử
Chạy ứng dụng, mở trình duyệt truy cập:
http://localhost:8080/helloKết quả hiển thị:
Lập Trình Web Spring Boot7. Truyền dữ liệu dạng List và hiển thị bằng th:each
@GetMapping("/products")
public String productList(Model model) {
List<String> products = Arrays.asList("Laptop", "Điện thoại", "Tablet");
model.addAttribute("products", products);
return "product-list";
}
<!-- product-list.html -->
<ul>
<li th:each="p : ${products}" th:text="${p}"></li>
</ul>
8. Chạy lại server và truy cập
http://localhost:8080/products👉 Kết quả: danh sách các sản phẩm được hiển thị dưới dạng <li>.
9. Sử dụng Fragment để chia nhỏ và tái sử dụng giao diện
Fragment trong Thymeleaf là một đoạn giao diện HTML có thể tái sử dụng, thường dùng để tách các phần như header, footer, navbar, giúp giao diện gọn gàng và dễ bảo trì.
📌 Ví dụ: bạn chỉ cần tạo header.html một lần, sau đó có thể chèn vào nhiều trang khác nhau bằng cú pháp th:replace hoặc th:insert.
🧩 Tạo file fragment header.html:
<!-- header.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="siteHeader">
<header>
<h2>🛒 Spring Boot Shop</h2>
</header>
</div>
</body>
</html>
👉 Chèn fragment vào trang khác:
<!-- index.html --> <html xmlns:th="http://www.thymeleaf.org"> <body> <div th:replace="header :: siteHeader"></div> <h2>Chào mừng đến với website bán hàng!</h2> </body> </html>
📌 Giải thích:
th:replace="header :: siteHeader" sẽ nhúng đoạn đó vào trang đang hiển thị.
th:fragment="siteHeader" định nghĩa một đoạn giao diện có thể tái sử dụng.
✅ Kết luận
Qua bài học này, bạn đã:
- Hiển thị dữ liệu động bằng cú pháp
th:text, th:each. - Làm quen với Thymeleaf – công cụ giao diện của Spring Boot.
- Biết cách truyền dữ liệu từ Controller đến View.
- Biết cách chia nhỏ giao diện và tái sử dụng các thành phần bằng fragment
