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

Nội dung chính Show

• Lá húng tây
• Model & View Trong Spring Boot
• ${. } - Biểu thức biến

• Today is: .

  5 - Biến Biểu thức trên vùng chọn
• ctx.getVariable("today");8 - Biểu thức thông báo

• Today is: .

  7 - Biểu thức URL
• Demo minh họa
• Configure thymeleaf
• Chức năng tin nhắn
• Tĩnh và Mẫu
• mục lục. html
• Thêm @Controller cho đường dẫn /profile
• Chạy thử lần 2

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

9

Vớ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");

1

Kế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út

model.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 Thymeleaf

model.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

1. Today is: .

   4. Giá trị của một biến

2. Today is: .

   5. Giá trị của một biến được chỉ định (sẽ giải thích ở bên dưới)

Ngoài ra, để lấy thông tin đặc biệt hơn

1. Today is: .

   6. Nhận tin nhắn

2. Today is: .

   7. Lấy đường dẫn URL dựa trên ngữ cảnh của máy chủ

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: .

4

Today 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

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: .
  

Còn 

Today is: .

Today is: .

model.addAttribute("today", "Monday");

Do đó đoạn mã ở trên tương thích với

  
Name: .
  
Surname: .

ctx.getVariable("today");8 - Biểu thức thông báo

Ví dụ, trong file config 

ctx.getVariable("today");

  
Name: .
  
Surname: .

Thì cách lấy nó ra nhanh nhất là

Xin chào các bạn!

Đoạn văn bản tiếng việt bên trong thẻ 

 
    

    
    
Name: .
 
    
    
Surname: .
  

 
    

    
    
Name: .
 
    
    
Surname: .
  

Today is: .

7 - Biểu thức URL

Today is: .

Ví dụ

view


view


view

Nếu bắt dầu bằng dấu 

 
    

    
    
Name: .
 
    
    
Surname: .
  

Demo minh họa

Chúng ta sẽ tạo ra một trang web đơn giản để hiểu các loại biểu thức trong Thymeleaf

quả bông. xml

// Giả sử String name = "loda"
Loda

Constructor directory

Configure thymeleaf

Chúng ta sẽ cấu hình ứng dụng bằng tệp _______31_______5

ứng dụng. của cải

// Giả sử String name = "loda"
Loda

Chức năng tin nhắn

Các trang web hỗ trợ ngôn ngữ đã được hỗ trợ (i18n) thì các thông báo sẽ được lưu dưới dạng khóa-giá trị. And option theo từng vùng địa lý mà chọn sử dụng giá trị cho hợp lý

Thymeleaf sẽ tự động làm điều này cho chúng ta, vì ở trên chúng ta đã cấu hình cho nó vị trí lưu trữ các tin nhắn này rồi

Ví dụ

Tôi có một câu trả lời đơn giản cho 2 vùng và US và VN

i18n/messages_vi. của cải

// Giả sử String name = "loda"
Loda

i18n/messages_vi. của cải

// Giả sử String name = "loda"
Loda

Tĩnh và Mẫu

Làm Web thì không thể thiếu 

 
    

    
    
Name: .
 
    
    
Surname: .
  

 
    

    
    
Name: .
 
    
    
Surname: .
  

 
    

    
    
Name: .
 
    
    
Surname: .
  

Tệp 

 
    

    
    
Name: .
 
    
    
Surname: .
  

  
Name: .
  
Surname: .

Thymeleaf sẽ tự biết tìm đường đến các tài nguyên này

mục lục. html

  
Name: .
  
Surname: .

 
    

    
    
Name: .
 
    
    
Surname: .
  

  
Name: .
  
Surname: .

Trong 

  
Name: .
  
Surname: .

1. Gọi ra 

   
     
   Name: .
     
   Surname: .
   

   5 và 

   
     
   Name: .
     
   Surname: .
   

   6 trong thư mục 

   
     
   Name: .
     
   Surname: .
   

   7 bằng biểu thức 

   Today is: .

   7
2. Hiển thị dòng chữ chào 

   
     
   Name: .
     
   Surname: .
   

   9 trong thư mục 

   
     
   Name: .
     
   Surname: .
   

   0 bằng biểu thức 

   Today is: .

   6

mục lục. html

// Giả sử String name = "loda"
Loda

Run try 1

Sau khi định cấu hình và tạo tệp 

  
Name: .
  
Surname: .

Please run try application Spring Boot của mình

Ứng dụng. java

// Giả sử String name = "loda"
Loda

Truy cập vào địa chỉ 

  
Name: .
  
Surname: .

Ứng dụng hiện ra dòng chữ chào mừng từ 

  
Name: .
  
Surname: .

  
Name: .
  
Surname: .

Thêm @Controller cho đường dẫn /profile

Bây giờ chúng ta sẽ bổ sung thêm 

  
Name: .
  
Surname: .

  
Name: .
  
Surname: .

Tại đây, tôi đang sử dụng Lombok, hãy chắc chắn rằng bạn biết nó trước khi thiết lập chương trình Spring Boot

Thông tin. java

// Giả sử String name = "loda"
Loda

Trình điều khiển web. java

// Giả sử String name = "loda"
Loda

Sau đó chúng ta tạo thêm mẫu 

  
Name: .
  
Surname: .

model.addAttribute("today", "Monday");

tài nguyên/mẫu/hồ sơ. html

// Giả sử String name = "loda"
Loda

Ở đây, chúng ta sử dụng

1. Today is: .

   4 để lấy giá trị của biến 

   Xin chào các bạn!

   1 trong 

   model.addAttribute("today", "Monday");

   8

2. Today is: .

   5 để lấy giá trị của biến 

   Xin chào các bạn!

   4 đã chỉ định,

Chạy thử lần 2

Chúng ta chạy lại chương trình một lần nữa và truy cập vào địa chỉ 

  
Name: .
  
Surname: .

Nhấp vào Nút Hồ sơ Loda. Trình duyệt sẽ đi tới đại chỉ _____39_______6

Show ra toàn bộ thông tin

Vì vậy, chúng ta đã thành công

Bài viết nằm trong sê-ri Làm chủ Spring Boot, Zero to Hero

Bài viết đã được đăng tải lại dưới sự cho phép của tác giả - Thầy Nam là giảng viên Lộ trình Java Spring Boot Full Stack