Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết hơn về Thymeleaf và sử dụng nó để làm một trang web đơn giản
Lá húng tây
Thymeleaf là một Công cụ mẫu Java. Có nhiệm vụ xử lý và tạo ra các tệp HTML, XML, v. v
Các tệp HTML to Thymeleaf tạo ra là nhờ kết hợp dữ liệu và mẫu + quy tắc để sinh ra một tệp HTML chứa đầy đủ thông tin
Công việc của bạn là cung cấp dữ liệu và quy định mẫu như thế nào, còn việc sử dụng các thông tin đó để hiển thị ra HTML sẽ thực hiện Thymeleaf giải quyết
cú pháp
Cú pháp của Thymeleaf sẽ là một thuộc tính [Thuộc tính] của thẻ HTML và bắt đầu bằng chữ
// Giả sử String name = "loda"
Loda
9Với cách tiếp cận này, bạn sẽ chỉ cần sử dụng các thẻ HTML cơ bản đã biết mà không cần bổ sung thêm cú pháp hay thẻ mới như JSP truyền thống
Ví dụ
Để truyền dữ liệu từ biến
model.addAttribute["today", "Monday"];
0 trong Java vào thẻ model.addAttribute["today", "Monday"];
1 của HTML
Chúng ta viết thẻ H1 như bình thường, nhưng không chứa bất kỳ văn bản nào trong thẻ. Máy sử dụng cú pháp
model.addAttribute["today", "Monday"];
2 để Thymeleaf lấy thông tin từ biến model.addAttribute["today", "Monday"];
0 và đưa vào thẻ model.addAttribute["today", "Monday"];
1Kết quả khi render ra
// Giả sử String name = "loda"
Loda
thuộc tính
model.addAttribute["today", "Monday"];
5 biến mất và biến giá trị model.addAttribute["today", "Monday"];
0 được đưa vào trong thẻ model.addAttribute["today", "Monday"];
1Đó là cách Thymeleaf hoạt động
Model & View Trong Spring Boot
Trong bài trước, tôi đã demo cách sử dụng các đối tượng
model.addAttribute["today", "Monday"];
8. Bây giờ tôi sẽ nói kỹ hơn một chútmodel.addAttribute["today", "Monday"];
8 là đối tượng được lưu giữ thông tin và được sử dụng bởi Template Engine để tạo ra trang web. Có thể hiểu nó là Today is: .
0 của Thymeleafmodel.addAttribute["today", "Monday"];
8 lưu giữ thông tin dưới dạng khóa-giá trịIn template thymeleaf, to get the information in __
model.addAttribute["today", "Monday"];
8. bạn sẽ sử dụng Today is: .
3
4. Giá trị của một biếnToday is: .
5. Giá trị của một biến được chỉ định [sẽ giải thích ở bên dưới]Today is: .
Ngoài ra, để lấy thông tin đặc biệt hơn
6. Nhận tin nhắnToday is: .
7. Lấy đường dẫn URL dựa trên ngữ cảnh của máy chủToday is: .
Nói tới đây có thể hơi khó hiểu, chúng ta sẽ dùng ví dụ để hiểu từng loại Biểu thức
${. } - Biểu thức biến
Trên Bộ điều khiển, bạn đã nhập một số giá trị
model.addAttribute["today", "Monday"];
Để lấy giá trị của biến
Today is: .
8, tôi sử dụng Today is: .
4Today is: .
Biểu thức cú pháp trên tương thích với
ctx.getVariable["today"];
Today is: .
5 - Biến Biểu thức trên vùng chọn
Today is: .
Dấu
ctx.getVariable["today"];
1 còn gọi là ctx.getVariable["today"];
2. Chức năng của nó giống với Today is: .
4 là lấy giá trị của một biếnĐiểm khác biệt là nó sẽ lấy giá trị của một biến cho trước bởi
ctx.getVariable["today"];
4
Name: .
Surname: .