Giới Thiệu Về Thymeleaf

Thymeleaf là một engine templating được thiết kế dành cho các ứng dụng web, cho phép tạo ra các trang HTML động dựa trên dữ liệu từ backend. Nó có trách nhiệm sinh ra những trang HTML chứa đầy đủ thông tin cần thiết để hiển thị tới người dùng.

Cú pháp sử dụng Thymeleaf bao gồm các thuộc tính của thẻ HTML bắt đầu bằng "th:" hoặc có thể sử dụng các cặp ngoặc như "[[...]]" để truyền giá trị.

Model trong Thymeleaf là một khái niệm chủ chốt, đại diện cho dữ liệu sẽ được hiển thị trên trang web. Dữ liệu này được chuyển từ backend đến frontend thông qua các template Thymeleaf. Thông thường, dữ liệu được thêm vào model trong tầng controller và có thể được sử dụng trong template với cú pháp của Thymeleaf.

Cách Thêm Dữ Liệu Động Trong Thymeleaf

Thêm dữ liệu vào thẻ HTML bằng thuộc tính th:
VD: <b th:text="${mainPost.title}"></b>
Trong ví dụ trên, nội dung của thẻ <b> sẽ được thay thế bằng giá trị của thuộc tính "title" từ đối tượng "mainPost".

Chèn dữ liệu vào một vị trí trong thẻ:
VD: <b>[[${mainPost.author.name}]]</b>
Ở đây, giá trị sẽ được hiển thị thông qua biểu thức "[[${<tên_biến>}]]", giúp chèn giá trị ở một vị trí cụ thể mà không thay thế toàn bộ nội dung của thẻ.

Các Biểu Thức Trong Thymeleaf Để Lấy Dữ Liệu

Trong Thymeleaf, để truy xuất dữ liệu từ model, chúng ta sử dụng Thymeleaf Standard Expression:

1. ${…}: Lấy giá trị của một biến.
2. *{…}: Lấy giá trị của một biến được chỉ định, giúp rút ngắn truy cập vào thuộc tính của đối tượng đã lựa chọn.
3. #{…}: Lấy message được định nghĩa trong file message.properties.
4. @{...}: Lấy đường dẫn URL.

Sử Dụng Biểu Thức Điều Kiện Trong Thymeleaf

Thymeleaf hỗ trợ việc hiển thị hoặc ẩn các phần tử dựa trên điều kiện, sử dụng th:if="${<điều_kiện>}". Nếu điều kiện đúng, nội dung sẽ được hiển thị, ngược lại sẽ không hiển thị. Có thể kết hợp với th:unless="${điều_kiện}" để khi điều kiện là sai, nội dung sẽ hiển thị.

Sử Dụng Vòng Lặp Trong Thymeleaf

VD: <ul> <li th:each="user : ${users}" th:text="${user.name}">User name</li> </ul>
Trong ví dụ này, "users" là danh sách và mỗi phần tử sẽ được hiển thị trong thẻ <li>.

Sự Khác Nhau Giữa th:insert và th:replace

th:replace sẽ thay thế thẻ hiện tại bằng nội dung từ fragment.
th:insert sẽ chèn nội dung của fragment vào bên trong thẻ hiện tại.

Tóm Tắt

Phần này đã hướng dẫn những kiến thức cơ bản về việc sử dụng Thymeleaf hiệu quả trong dự án xây dựng blog của bạn.
source: viblo