Thymeleaf là một công cụ mạnh mẽ trong việc tạo template Java. Với Thymeleaf, bạn có toàn quyền kiểm soát cách ứng dụng của bạn xử lý và tạo ra mẫu.

Thymeleaf hỗ trợ xử lý 6 kiểu mẫu khác nhau, bao gồm HTML, XML, Text, JavaScript, CSS và RAW. Tuy nhiên, HTML là kiểu mẫu phổ biến nhất.

Bạn đang xem: Thymeleaf là gì? Cách dùng Thymeleaf trong ứng dụng Spring Boot

Khởi tạo Thymeleaf trong ứng dụng Spring Boot

Bạn có hai cách để thêm Thymeleaf vào ứng dụng Spring Boot. Bạn có thể chọn Thymeleaf làm phần của công cụ khởi tạo của Spring hoặc thêm nó vào file đặc tả bản dựng trong phần phụ thuộc.

Nếu bạn chọn công cụ khởi tạo của Gradle, phần phụ thuộc sẽ được lưu trong file build.gradle. Còn nếu bạn chọn Maven, phần phụ thuộc sẽ được lưu trong file pom.xml.

Thêm Thymeleaf vào ứng dụng Spring Boot cho phép bạn truy cập vào thư viện chính của nó, cung cấp Spring Standard Dialect của Thymeleaf. Spring Standard Dialect chứa các thuộc tính và cú pháp độc đáo, giúp bạn thêm nhiều tính năng khác nhau vào bố cục.

Sử dụng Thymeleaf trong Spring Boot

Khi sử dụng Thymeleaf trong ứng dụng Spring, bước đầu tiên là tạo tài liệu mẫu. Ví dụ, tài liệu mẫu có thể là một trang HTML. Bạn luôn tạo các mẫu Thymeleaf trong thư mục “templates” của Spring Boot, nằm trong thư mục nguồn của ứng dụng.

File home.html

Mẫu Thymeleaf trên là một template HTML5 thông thường, với một thuộc tính bên ngoài xmlns:th. Mục đích của xmlns:th là cung cấp phạm vi cho thuộc tính th:* mà bạn sẽ sử dụng trong tài liệu HTML. Thuộc tính và thẻ khác trong mẫu Thymeleaf là các thẻ và thuộc tính HTML thông thường.

Tạo header

Header là một khía cạnh quan trọng trong bất kỳ trang web hoặc ứng dụng nào. Nó giúp xác định nội dung của ứng dụng thông qua logo và cung cấp điều hướng dễ dàng. Một header cơ bản bao gồm logo và các liên kết điều hướng.

LOGO

Trang chủ
Về chúng tôi
Dịch vụ

Thymeleaf cho phép bạn chèn header vào bất kỳ trang nào trong ứng dụng web bằng thuộc tính th:insert. Thuộc tính th:insert và th:replace sử dụng biểu thức phân đoạn. Biểu thức phân đoạn cho phép bạn đặt các đoạn mã ở bất kỳ vị trí nào trong bố cục.

Xem thêm : Hướng Dẫn Đăng Ký Vay Tiền Tnex Duyệt Nhanh Online Trong 30P

Phần mã trên được chèn vào phía trên thẻ body trong tệp home.html, để chèn đoạn mã header ở phía trên trang chủ. Biểu thức phân đoạn có một số thành phần, trong đó có hai thành phần tùy chọn và hai thành phần bắt buộc:

• Dấu ngã (~), là tùy chọn.
• Một cặp dấu ngoặc nhọn ({}), là tùy chọn.
• Tên của mẫu chứa đoạn mã bạn muốn chèn (header.html).
• Bộ chọn CSS của đoạn mã bạn muốn chèn (#nav).

Đoạn mã dưới đây cho kết quả tương tự:

Điền nội dung vào mẫu

Thymeleaf cho phép bạn sử dụng 5 loại biểu thức trong mẫu:

• Biểu thức phân đoạn (~{...})
• Biểu thức thông báo (#{...})
• Biểu thức URL liên kết (@{...})
• Biểu thức biến (${...})
• Biểu thức biến lựa chọn (*{...})

Biểu thức thông báo cho phép bạn chèn các đoạn văn bản bên ngoài vào bố cục. Với biểu thức này, bạn có thể thay thế hoặc tái sử dụng văn bản trong bố cục. Khi sử dụng biểu thức thông báo, bạn luôn cần đặt văn bản bên ngoài trong file .properties trong thư mục resources.

Trong ứng dụng đơn giản này, file đó là messages.properties, chứa văn bản sau:

placeholder.text=Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae obcaecati illo laboriosam.

Lưu ý rằng văn bản (hoặc thông báo) trên có một khóa đặc biệt là placeholder.text. Điều này là do mỗi file thông báo có thể chứa một tập hợp thông báo khác nhau. Do đó, bạn cần một khóa để chèn một thông báo cụ thể vào bố cục.

Việc chèn mã trên vào phần nội dung của tệp HTML sẽ hiển thị hiệu quả văn bản giữ chỗ dưới dạng một đoạn trong chế độ xem của bạn. Khác với biểu thức phân đoạn, tất cả các thành phần của biểu thức thông báo là bắt buộc. Một biểu thức thông báo yêu cầu:

• Một ký hiệu số (#).
• Một cặp dấu ngoặc nhọn ({}).
• Khóa thông báo bạn muốn chèn (placeholder.text).

Tạo kiểu cho mẫu

Một tệp quan trọng khác trong thư mục tài nguyên là tệp tĩnh. Tệp này lưu trữ các tệp CSS của bạn và bất kỳ hình ảnh nào bạn muốn sử dụng trong ứng dụng. Để liên kết tệp CSS bên ngoài của bạn với mẫu HTML Thymeleaf, bạn cần sử dụng biểu thức URL liên kết. Biểu thức URL liên kết xử lý cả URL tương đối và tuyệt đối.

Việc chèn mã trên vào phần head của tệp HTML cho phép bạn tạo kiểu cho mẫu của mình bằng tệp style.css. Tệp này có sẵn trong thư mục css trong phần tĩnh của tệp tài nguyên trong ứng dụng mẫu. Bạn luôn cần gán biểu thức URL liên kết cho thuộc tính th:href.

Thymeleaf cung cấp một số thuộc tính khác mà bạn có thể sử dụng để cải thiện thiết kế bố cục của mình, chẳng hạn như th:style để thêm hình ảnh vào bố cục.

Biểu thức biến

Xem thêm : Ma trận chuyển vị – Tổng quan các kiến thức quan trọng nhất

Biểu thức biến là biểu thức phổ biến và phức tạp nhất mà Thymeleaf sử dụng. Biểu thức biến Thymeleaf cho phép bạn lấy dữ liệu từ ngữ cảnh ứng dụng hoặc một đối tượng trong ứng dụng và đưa dữ liệu đó vào mẫu. Tùy thuộc vào nguồn dữ liệu bạn muốn hiển thị cho chế độ xem của mình, có hai loại biểu thức biến mà bạn có thể sử dụng.

Biểu thức biến chính sử dụng ký hiệu đô la và cho phép bạn lấy dữ liệu từ ngữ cảnh ứng dụng (dữ liệu được liên kết với các tác vụ khác nhau đang chạy trong ứng dụng). Ví dụ: nếu bạn muốn lấy dữ liệu người dùng từ một phương thức, biểu thức biến ký hiệu đô la là lựa chọn phổ biến. Nếu bạn chạy dự án mẫu và điều hướng đến http://localhost:8080/ trong trình duyệt của bạn, bạn sẽ thấy phương thức sau:

Sau khi đóng modal hoặc gửi tên, ứng dụng sẽ điều hướng đến trang chủ. Trên trang chủ, bạn sẽ thấy một trang web chào mừng từ “Welcome”, theo sau là chuỗi mà bạn vừa gửi qua phương thức.

Ứng dụng mẫu sử dụng biểu thức biến để hoàn thành quá trình này. Phần đơn giản trong tệp modal.html có mã sau:

Submit

Khi người dùng gửi biểu mẫu này, nó kích hoạt thuộc tính th:action có giá trị của một URL POST mà bạn có thể tìm thấy trong class WebController.

@PostMapping("/home")
public String processName(String userName, Model model) {
model.addAttribute("userName", userName);
return "home";
}

Phương thức processName() chấp nhận một chuỗi mà người dùng cung cấp cho phương thức, sau đó gán chuỗi đó cho một biến có tên là userName. Sau đó, bằng cách sử dụng biểu thức biến, bộ điều khiển sẽ đưa biến tên người dùng vào bố cục.

Welcome !

Biểu thức biến lựa chọn sử dụng dấu hoa thị và hữu ích nhất khi xử lý các ứng dụng phức tạp. Ví dụ: một ứng dụng yêu cầu người dùng đăng nhập có thể sử dụng biểu thức biến lựa chọn. Bạn có thể lấy tên người dùng từ đối tượng người dùng và chèn nó vào bố cục.

Đó là cách sử dụng Thymeleaf trong ứng dụng Spring. Hi vọng bài viết này hữu ích với các bạn.

Nguồn: https://ispacedanang.edu.vn
Danh mục: Học tập