Khóa học spring-boot

Biến trong Thymeleaf

0 phút đọc

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:

html Copy
<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:

html Copy
<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)

html Copy
<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)

html Copy
<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

html Copy
<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

html Copy
<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.

Avatar
Được viết bởi

Admin Team

Gợi ý câu hỏi phỏng vấn

Không có dữ liệu

Không có dữ liệu

Gợi ý bài viết
Không có dữ liệu

Không có dữ liệu

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào