Tích hợp Spring Boot với Thymeleaf - Ví dụ thực tế: Quản lý sách! Rất chi tiết!

Giới thiệu tổng quan

1. Cấu trúc dự án

Hình 1-1

2. Cấu hình dự án

  • IntelliJ IDEA 2024.3.3
  • Spring Boot 3.4.3
  • JDK 17

I. Cấu hình tích hợp Thymeleaf

Có 2 cách để thêm thư viện Thymeleaf vào dự án Spring Boot:

  1. Qua Spring Initializr: Chọn tùy chọn Thymeleaf trong giao diện chọn dependency
    2. Hình 2-1
  2. Qua Maven: Thêm đoạn mã sau vào file pom.xml

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

II. Tạo lớp thực thể

Dự án sử dụng 2 lớp thực thể chính:

1. User.java


public class User implements Serializable {
    private final String ten;
    private final String vaiTro;

    public User(String ten, String vaiTro) {
        this.ten = ten;
        this.vaiTro = vaiTro;
    }

    public String getTen() { return ten; }
    public String getVaiTro() { return vaiTro; }
}

2. Book.java


public class Book {
    private Integer ma;
    private String ten;
    private String tacGia;
    private String nhaXuatBan;
    private Integer trangThai; // 0: có sẵn, 1: đang mượn, 2: đang trả

    // Constructor, getter, setter và toString
}

3. Data.java


public class Data {
    public static List<Book> layDuLieu() {
        return List.of(
            new Book(1, "Tam Quoc", "La Quan Trung", "NXB Van Hoc", 0),
            new Book(2, "Hồng Lâu Mộng", "Tào Tuyết Cần", "NXB Van Hoc", 1),
            new Book(3, "Thủy Hử", "Thi Nại Am", "NXB Van Hoc", 2)
        );
    }
}

III. Tạo lớp điều khiển

BookController.java


@Controller
@RequestMapping("sach")
public class BookController {
    private List<Book> danhSach = Data.layDuLieu();

    @GetMapping("danh-sach")
    public String hienThi(Model model, HttpSession session) {
        session.setAttribute("user", new User("nguyen", "ADMIN"));
        model.addAttribute("danhSach", danhSach);
        return "books";
    }

    @PostMapping("tim-kiem")
    public String timKiem(
        @RequestParam(required = false) String ten,
        @RequestParam(required = false) String tacGia,
        Model model
    ) {
        List<Book> ketQua = danhSach.stream()
            .filter(s -> (ten == null || s.getTen().contains(ten)) 
                     && (tacGia == null || s.getTacGia().contains(tacGia)))
            .collect(Collectors.toList());
        model.addAttribute("danhSach", ketQua);
        return "books";
    }

    // Các phương thức thêm/sửa/xóa sách
}

IV. Tạo giao diện Thymeleaf

books.html


<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
</head>
<body>
    <div class="box-body">
        <!-- Nút thêm sách -->
        <div th:if="${session.user?.vaiTro == 'ADMIN'}">
            <button data-toggle="modal" data-target="#themSach">Thêm mới</button>
        </div>

        <!-- Bảng hiển thị -->
        <table class="table">
            <tr th:each="sach : ${danhSach}">
                <td th:text="${sach.ten}"></td>
                <td th:text="${sach.tacGia}"></td>
                <td>
                    <span th:if="${sach.trangThai == 0}" class="success">Có sẵn</span>
                    <span th:if="${sach.trangThai == 1}" class="warning">Đang mượn</span>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

V. Kiểm thử ứng dụng

  1. Khởi động ứng dụng và truy cập: http://localhost:8080/sach/danh-sach
  2. Thử nghiệm các chức năng: tìm kiếm, thêm mới, mượn sách
  3. Kiểm tra log console khi thực hiện thao tác mượn/trả sách
Hình 3-1

Thẻ: Spring Boot Thymeleaf Java Quản lý sách

Đăng vào ngày 19 tháng 6 lúc 23:38

Thẻ Phổ Biến

©2026 Thành phố Cuồng loạn