Thymeleaf là gì và bạn có thể sử dụng nó như thế nào trong các ứng dụng Spring Boot của mình?
Thymeleaf là một công cụ tạo mẫu Java. Nó phát triển các mẫu cho cả ứng dụng web và ứng dụng độc lập. Công cụ tạo mẫu này sử dụng khái niệm Mẫu tự nhiên để đưa logic vào bố cục của bạn mà không ảnh hưởng đến thiết kế của bạn. Với Thymeleaf, bạn sẽ có quyền kiểm soát cách ứng dụng xử lý các mẫu mà bạn tạo.
Thymeleaf hỗ trợ xử lý nhiều định dạng mẫu bao gồm HTML, XML, Text, JavaScript, CSS và RAW. Trong số này, HTML là định dạng mẫu được sử dụng phổ biến nhất trong khung Thymeleaf.
Khởi tạo Thymeleaf trong ứng dụng của bạn
Ngoài ra, người ta có thể kết hợp Thymeleaf vào dự án Spring Boot của họ bằng cách chọn đưa nó vào trong quá trình tạo mã soạn sẵn thông qua công cụ khởi tạo của Spring hoặc sau đó đưa nó vào trong tệp thông số kỹ thuật bản dựng dưới tiêu đề phụ thuộc.
Trong trường hợp bạn chọn tùy chọn dự án Gradle, tệp cấu hình chỉ định các phần phụ thuộc của dự án sẽ được gọi là tệp “build.gradle”. Mặt khác, nếu bạn chọn Maven làm giải pháp quản lý phụ thuộc của mình thì tệp cấu hình tương ứng sẽ có tên là “pom.xml”.
Tệp XML chỉ định các phần phụ thuộc cho dự án của bạn, được gọi là “pom.xml”, phải bao gồm một phần cụ thể nêu rõ các phần phụ thuộc đó.
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Thật vậy, điều bắt buộc là tệp build.gradle của bạn phải kết hợp một phân đoạn phụ thuộc cụ thể như sau:
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}
Bài viết nói trên mô tả một ứng dụng minh họa có thể được truy cập thông qua kho lưu trữ GitHub cụ thể, cấp cho người dùng quyền sử dụng nó miễn phí theo các điều khoản của giấy phép MIT cho phép.
Việc tích hợp Thymeleaf vào ứng dụng Spring mang lại lợi thế cho việc sử dụng thư viện cơ bản của nó, cho phép sử dụng Phương ngữ chuẩn Spring cho Thymeleaf. Phương ngữ này thể hiện các thuộc tính và phong cách biểu đạt đặc biệt, tạo điều kiện thuận lợi cho việc kết hợp các khả năng khác nhau trong cấu trúc thiết kế.
Sử dụng Thymeleaf trong Spring Boot
Để sử dụng Thymeleaf trong ứng dụng Spring, cần phải bắt đầu bằng cách tạo tài liệu mẫu. Trong ví dụ cụ thể này, định dạng được chọn cho mẫu là tệp HTML. Chúng tôi khuyên bạn nên tạo tất cả các mẫu Thymeleaf trong thư mục “templates” nằm trong các tệp tài nguyên của Spring Boot.
Tệp home.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Generic Website</title>
</head>
<body></body>
</html>
Mẫu Thymeleaf được cung cấp thể hiện đánh dấu HTML thông thường, bao gồm tiền tố không gian tên không liên quan, xmlns:th , đóng vai trò làm nền tảng để sử dụng bất kỳ thuộc tính nào được chú thích bởi th: trong tài liệu HTML hiện tại. Tất cả các thuộc tính và thành phần khác trong mẫu Thymeleaf đều tuân thủ các quy ước và cú pháp HTML tiêu chuẩn.
Tạo tiêu đề
Tiêu đề đóng vai trò thiết yếu trong việc truyền tải mục đích của trang web hoặc ứng dụng thông qua logo của nó, đồng thời tạo điều kiện thuận lợi cho người dùng điều hướng liền mạch. Các thành phần thiết yếu của tiêu đề cơ bản bao gồm biểu tượng và nhiều liên kết điều hướng giúp truy cập dễ dàng vào các phần khác nhau của trang web hoặc ứng dụng.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div id="nav">
<h1>LOGO</h1>
<ul>
<li> <a id="current">Home </a> </li>
<li> <a>About</a> </li>
<li> <a>Services</a> </li>
</ul>
</div>
</body>
</html>
Thymeleaf cung cấp một phương tiện thuận tiện để kết hợp tiêu đề được chỉ định vào bất kỳ trang web nào trong ứng dụng web của bạn, bằng cách sử dụng thuộc tính th:insert. Thuộc tính này tương thích với cả th:insert cũng như th:replace , được Thymeleaf chấp nhận là’giá trị biểu thức đoạn’. Các biểu thức phân đoạn này cung cấp khả năng chèn các phần nội dung có cấu trúc tại các điểm khác nhau trong toàn bộ bố cục của bạn.
<div th:insert="~{header :: #nav}"></div>
Việc kết hợp đánh dấu nói trên vào thẻ mở trong tệp home.html sẽ dẫn đến sự xuất hiện của tiêu đề trên trang chủ. Biểu thức phân đoạn bao gồm nhiều thành phần, trong đó hai thành phần là tự chọn trong khi hai thành phần còn lại là bắt buộc.
⭐Dấu ngã (~), không bắt buộc.
Một bộ dấu ngoặc nhọn tùy chọn, được biểu thị bằng {}
Mẫu HTML nói trên, bao gồm đánh dấu mong muốn, được chỉ định bằng nhãn “header.html”.
Để thực thi thành công mã JavaScript được cung cấp, cần đảm bảo rằng tệp HTML chứa phần tử có thuộc tính ID được đặt thành “nav”. Điều này có thể đạt được bằng cách thêm đánh dấu thích hợp trong thẻ của tài liệu HTML và gán giá trị ID mong muốn tương ứng.
Thật vậy, việc sử dụng mức đánh dấu nói trên sẽ mang lại kết quả giống hệt với những kết quả đạt được thông qua phương pháp thay thế được nêu chi tiết trước đó.
<div th:insert="header :: #nav"></div>
Điền nội dung mẫu của bạn
Thymeleaf hỗ trợ nhiều định dạng biểu thức khác nhau trong cấu trúc mẫu của nó, bao gồm năm loại riêng biệt như sau:
⭐Biểu thức phân mảnh (~{€¦})
⭐Biểu thức tin nhắn (#{€¦})
⭐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 (*{€¦})
Việc sử dụng biểu thức thông báo cho phép kết hợp các thành phần văn bản không liên quan vào trong bố cục một cách dễ dàng. Bằng cách sử dụng phương pháp này, người ta có thể thay thế hoặc tận dụng lại nội dung có trong thiết kế của họ một cách liền mạch. Điều bắt buộc khi triển khai một biểu thức thông báo là các thành phần văn bản liên quan phải được lưu trữ trong một tệp nằm bên dưới thư mục Resourcesfolder.
Ví dụ được cung cấp sử dụng một tệp tài nguyên cụ thể có tên là “messages.properties”, bao gồm đoạn trích đã cho:
placeholder.text=Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae obcaecati illo laboriosam.
Vui lòng lưu ý rằng đoạn trích có chứa mã định danh được gọi là “placeholder.text”. Việc chỉ định này được chỉ định do thực tế là mỗi thành phần bản tin có thể bao gồm nhiều thông tin liên lạc khác nhau. Do đó, cần phải kết hợp một điểm tham chiếu để tích hợp một thông báo cụ thể trong cấu hình.
<p th:text="#{placeholder.text}"></p>
Việc kết hợp đoạn mã được cung cấp vào nội dung của tài liệu HTML sẽ đảm bảo rằng nội dung giữ chỗ xuất hiện dưới dạng một đoạn gắn kết trong giao diện người dùng. Ngược lại 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 đều bắt buộc và không thể thiếu. Biểu thức thông báo yêu cầu bao gồm từng phần tử được chỉ định mà không có bất kỳ thiếu sót hoặc thay thế nào.
⭐Ký hiệu số (#).
⭐Một cặp dấu ngoặc nhọn ({}).
Nội dung văn bản được bao bọc trong phần tử được chỉ định là “giữ chỗ” là thông điệp mà người ta mong muốn truyền tải, có thể được truy cập thông qua thuộc tính hoặc thuộc tính liên quan của nó, chẳng hạn như “placeholder.text”.
Tạo kiểu cho mẫu của bạn
Thành phần quan trọng khác trong thư mục “tài nguyên” liên quan đến tệp tĩnh, đóng vai trò là kho lưu trữ các biểu định kiểu CSS và các thành phần trực quan không thể thiếu đối với hoạt động của ứng dụng web của bạn. Để thiết lập kết nối giữa tệp CSS được lưu trữ bên ngoài và mẫu HTML Thymeleaf, bạn phải sử dụng biểu thức URL liên kết. Biểu thức linh hoạt này có khả năng xử lý cả URL quan hệ và URL tuyệt đối, mang lại sự linh hoạt và dễ dàng khi tích hợp các thành phần thiết kế thiết yếu với nền tảng dự án của bạn.
<link rel="stylesheet" th:href="@{/css/style.css}" />
Việc kết hợp mã được cung cấp trong phần tử của tài liệu HTML của bạn sẽ cho phép tạo kiểu bằng cách sử dụng một tệp style.css riêng biệt, có thể tìm thấy tệp này nằm trong thư mục static/css của các tệp tài nguyên của ứng dụng mẫu. Điều cần thiết là phải đảm bảo rằng thuộc tính th:href được gán biểu thức URL thích hợp khi liên kết đến tệp CSS này.
Thymeleaf cung cấp nhiều thuộc tính cho phép các nhà phát triển tinh chỉnh thiết kế trang của họ. Trong số các thuộc tính này có thuộc tính th:style , cho phép tích hợp các yếu tố hình ảnh trong bố cục.
<div id="showcase" th:style="'background: url(/images/background.jpg) no-repeat center center fixed;'">
Đánh dấu sử dụng thuộc tính th:style để đưa hình nền vào một phân đoạn cụ thể của bố cục. Thymeleaf tự hào có hơn một trăm thuộc tính, có thể được sử dụng để mang lại các đặc điểm về phong cách và chức năng trong bố cục.
Biểu thức biến
Các biểu thức biến là một khía cạnh phổ biến và phức tạp trong cú pháp của Thymeleaf, cho phép truy xuất thông tin từ ngữ cảnh ứng dụng hoặc một đối tượng bên trong nó để kết hợp vào các mẫu. Có hai loại biểu thức biến có sẵn dựa trên tính chất của dữ liệu dự định hiển thị trong dạng xem.
Việc sử dụng ký hiệu đô la như một phần của biểu thức biến cho phép người ta trích xuất thông tin liên quan đến các tác vụ cụ thể xảy ra trong ngữ cảnh của ứng dụng. Một minh họa thích hợp liên quan đến việc thu thập thông tin chi tiết liên quan đến người dùng từ một phương thức cụ thể. Khi thực thi dự án mẫu được cung cấp và điều hướng đến http://localhost:8080/ trong trình duyệt web, cá nhân sẽ gặp một giao diện phương thức.
Khi đóng cửa sổ phương thức hoặc gửi tên qua nó, ứng dụng sẽ chuyển hướng đến trang chủ của nó. Khi đến trang chủ nói trên, người dùng sẽ bắt gặp một trang web tiêu chuẩn có lời chào “Chào mừng” và sau đó hiển thị văn bản đã nhập từ phương thức trong chuỗi.
Ứng dụng nói trên sử dụng việc sử dụng các biểu thức có thể thay đổi để đạt được mục đích của nó. Trong tài liệu modal.html, cấu trúc cơ bản được trình bày thông qua việc kết hợp đánh dấu tiếp theo:
<form id="form" th:action="@{/home}" method="post">
<input type="text" name="userName"class="form-control" placeholder="Your Name" />
<button type="submit" class="btn">Submit</button>
</form>
Khi người dùng gửi biểu mẫu, thuộc tính th:action sẽ được kích hoạt, có giá trị tương ứng với URL POST được phát hiện trong lớp WebController.
@PostMapping("/home")
public String processName(String userName, Model model) {
model.addAttribute("userName", userName);
return "home";
}
Phương thức processName() lấy chuỗi do người dùng cung cấp thông qua phương thức làm đầu vào và lưu nó trong một biến có tên userName . Sau đó, bằng cách sử dụng biểu thức biến, bộ điều khiển sẽ đưa biến userName vào bố cục.
<h1>Welcome <span th:text="${userName}"></span>!</h1>
Việc sử dụng biểu thức biến lựa chọn được tăng cường bằng dấu hoa thị ngày càng trở nên có giá trị khi độ phức tạp trong hệ thống phần mềm tăng lên. Một minh họa thực tế bao gồm các cơ chế xác thực trong đó việc thu thập tên người dùng từ các đối tượng người dùng và việc kết hợp chúng vào thiết kế giao diện minh họa chức năng này một cách hiệu quả.
Tùy chọn mẫu và kiểu dáng thay thế
Mặc dù Thymeleaf đã nổi tiếng là giải pháp tạo khuôn mẫu được ưa thích cho các dự án Spring Boot, nhưng điều quan trọng là phải xem xét các lựa chọn thay thế có chức năng tương đương. Trong số các lựa chọn thay thế này có JavaServer Pages (JSP), cung cấp khả năng tạo mã Java phía máy chủ; Mẫu Groovy, cho phép tạo nội dung động bằng ngôn ngữ tập lệnh Groovy; Các mẫu FreeMarker, một công cụ tạo mẫu nguồn mở có hỗ trợ nhiều ngôn ngữ lập trình; và các mẫu Mustache, nổi tiếng vì tính đơn giản và dễ tích hợp. Hơn nữa, các nhà phát triển có thể linh hoạt sử dụng các kiểu CSS tùy chỉnh hoặc sử dụng các khung CSS có sẵn để thiết kế bố cục trang của họ.