Biến trong Thymeleaf

Biến trong Thymeleaf là một khía cạnh quan trọng khi bạn xây dựng các trang web động và muốn hiển thị dữ liệu từ máy chủ Java của bạn lên trang web của bạn. Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng biến trong Thymeleaf để hiển thị dữ liệu và làm cho trang web của bạn trở nên phong phú hơn.

Thymeleaf - Một Java Template Engine

Trước khi chúng ta bắt đầu, hãy nhớ rằng Thymeleaf là một Java Template Engine. Nó cho phép bạn kết hợp mã Java và giao diện người dùng một cách hiệu quả. Thymeleaf sử dụng các biến để truyền dữ liệu từ phía máy chủ Java sang mã HTML, làm cho trang web của bạn trở nên linh hoạt và đáng tin cậy.

Định nghĩa Biến trong Thymeleaf

Trong Thymeleaf, bạn có thể định nghĩa biến bằng cách sử dụng cú pháp th:object hoặc th:field. Dưới đây là cách bạn có thể sử dụng chúng:

Biến đối tượng (th:object)

Biến đối tượng cho phép bạn đặt một đối tượng Java vào phạm vi của Thymeleaf. Ví dụ, nếu bạn có một đối tượng Person với thuộc tính name, bạn có thể sử dụng th:object như sau:

<div th:object="${person}">
  <p>Name: <span th:text="*{name}"></span></p>
</div>

Ở đây, ${person} đại diện cho đối tượng Person, và bạn có thể truy cập thuộc tính name của nó bằng cách sử dụng *{name}.

Biến trường (th:field)

Biến trường làm cho việc xử lý các trường dữ liệu trong các biểu mẫu HTML trở nên dễ dàng hơn. Ví dụ, nếu bạn có một biểu mẫu đăng ký với trường username, bạn có thể sử dụng th:field như sau:

<form th:object="${user}" th:action="@{/register}" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" th:field="*{username}" />
</form>

Trong trường này, ${user} đại diện cho đối tượng User, và *{username} là cách Thymeleaf liên kết trường username trong biểu mẫu HTML với thuộc tính username của đối tượng User.

Hiển thị Giá trị Biến

Khi bạn đã định nghĩa biến trong Thymeleaf, bạn có thể hiển thị giá trị của chúng bằng cách sử dụng các thuộc tính Thymeleaf như th:text, th:value, th:src, và nhiều thuộc tính khác. Dưới đây là một số ví dụ:

Hiển thị giá trị văn bản (th:text)

<p th:text="${user.name}"></p>

Trong ví dụ này, th:text sẽ hiển thị giá trị của thuộc tính name của đối tượng user.

Gán giá trị vào trường (th:value)

<input type="text" th:value="${user.email}" />

th:value cho phép bạn gán giá trị của thuộc tính email vào trường nhập liệu.

Điều kiện và Vòng lặp

Thymeleaf cung cấp cách mạnh mẽ để sử dụng biến trong các biểu thức điều kiện và vòng lặp. Bạn có thể kiểm tra điều kiện, duyệt qua danh sách và hiển thị các phần tử tùy thuộc vào giá trị của biến.

Ví dụ về Điều kiện

<p th:if="${user.isAdmin()}">This user is an admin.</p>

Trong ví dụ này, th:if sẽ kiểm tra xem đối tượng user có phải là admin hay không.

Ví dụ về Vòng lặp

<ul>
  <li th:each="item : ${items}" th:text="${item}"></li>
</ul>

Với th:each, bạn có thể duyệt qua danh sách items và hiển thị mỗi phần tử trong danh sách.

Với th:each, bạn có thể duyệt qua danh sách items và hiển thị mỗi phần tử trong danh sách.

Biến trong Thymeleaf cho phép bạn tạo ra các trang web động và tương tác bằng cách truyền dữ liệu từ máy chủ Java của bạn vào giao diện người dùng. Bằng cách sử dụng cú pháp Thymeleaf và các thuộc tính như th:text, th:if, và th:each, bạn có thể hiển thị dữ liệu theo cách linh hoạt và dễ dàng. Điều này làm cho việc phát triển ứng dụng web trở nên dễ dàng và mạnh mẽ hơn bao giờ hết.