Giới thiệu về cách sử dụng Thymeleaf trong mùa xuân

1. Giới thiệu

Thymeleaf là một công cụ mẫu Java để xử lý và tạo HTML, XML, JavaScript, CSS và văn bản.

Trong bài viết này, chúng ta sẽ thảo luận về cách sử dụng Thymeleaf với Spring cùng với một số trường hợp sử dụng cơ bản trong lớp xem của ứng dụng Spring MVC.

Thư viện cực kỳ dễ mở rộng và khả năng tạo khuôn mẫu tự nhiên của nó đảm bảo các mẫu có thể được tạo mẫu mà không cần back-end - điều này giúp cho việc phát triển rất nhanh khi so sánh với các công cụ mẫu phổ biến khác như JSP.

2. Tích hợp Thymeleaf với Spring

Đầu tiên, chúng ta hãy xem các cấu hình cần thiết để tích hợp với Spring. Các thymeleaf xuân thư viện là cần thiết cho sự hội nhập.

Thêm các phần phụ thuộc sau vào tệp Maven POM của bạn:

 org.thymeleaf thymeleaf 3.0.11.RELEASE   org.thymeleaf thymeleaf-spring5 3.0.11.RELEASE 

Lưu ý rằng, đối với dự án Spring 4, thư viện thymeleaf-spring4 phải được sử dụng thay vì thymeleaf-spring5 .

Lớp SpringTemplateEngine thực hiện tất cả các bước cấu hình. Bạn có thể cấu hình lớp này dưới dạng bean trong tệp cấu hình Java:

@Bean @Description("Thymeleaf Template Resolver") public ServletContextTemplateResolver templateResolver() { ServletContextTemplateResolver templateResolver = new ServletContextTemplateResolver(); templateResolver.setPrefix("/WEB-INF/views/"); templateResolver.setSuffix(".html"); templateResolver.setTemplateMode("HTML5"); return templateResolver; } @Bean @Description("Thymeleaf Template Engine") public SpringTemplateEngine templateEngine() { SpringTemplateEngine templateEngine = new SpringTemplateEngine(); templateEngine.setTemplateResolver(templateResolver()); templateEngine.setTemplateEngineMessageSource(messageSource()); return templateEngine; }

Các templateResolver thuộc tính bean tiền tốhậu tố chỉ ra vị trí của các trang xem trong webapp thư mục và phần mở rộng tên tập tin của họ, tương ứng.

Các ViewResolver giao diện trong Spring MVC bản đồ các tên xem trả về bởi một bộ điều khiển các đối tượng xem thực tế. ThymeleafViewResolver triển khai giao diện ViewResolver và được sử dụng để xác định khung nhìn Thymeleaf sẽ hiển thị, được đặt tên cho khung nhìn.

Bước cuối cùng trong tích hợp là thêm ThymeleafViewResolver dưới dạng bean:

@Bean @Description("Thymeleaf View Resolver") public ThymeleafViewResolver viewResolver() { ThymeleafViewResolver viewResolver = new ThymeleafViewResolver(); viewResolver.setTemplateEngine(templateEngine()); viewResolver.setOrder(1); return viewResolver; }

3. Thymeleaf trong Spring Boot

Spring Boot cung cấp cấu hình tự động cho Thymeleaf bằng cách thêm phụ thuộc spring-boot-starter-thymeleaf :

 org.springframework.boot spring-boot-starter-thymeleaf 2.3.3.RELEASE  

Không cần cấu hình rõ ràng. Theo mặc định, các tệp HTML phải được đặt ở vị trí tài nguyên / mẫu .

4. Hiển thị Giá trị từ Nguồn Thông báo (Tệp Thuộc tính)

Các thứ: text =”# {key}” tag thuộc tính có thể được sử dụng để hiển thị các giá trị từ các tập tin bất động sản. Để điều này hoạt động, tệp thuộc tính phải được định cấu hình dưới dạng messageSource bean:

@Bean @Description("Spring Message Resolver") public ResourceBundleMessageSource messageSource() { ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource(); messageSource.setBasename("messages"); return messageSource; }

Đây là mã HTML Thymeleaf để hiển thị giá trị được liên kết với khóa welcome.message :

5. Hiển thị các thuộc tính của mô hình

5.1. Thuộc tính đơn giản

Các thứ: text =”$ {} AttributeName” tag thuộc tính có thể được sử dụng để hiển thị giá trị của các thuộc tính mô hình. Hãy thêm một thuộc tính model với tên serverTime trong lớp controller:

model.addAttribute("serverTime", dateFormat.format(new Date()));

Mã HTML để hiển thị giá trị của thuộc tính serverTime :

Current time is 

5.2. Thuộc tính Bộ sưu tập

Nếu thuộc tính model là một tập hợp các đối tượng, thuộc tính thẻ th: each có thể được sử dụng để lặp qua nó. Hãy xác định một lớp mô hình Sinh viên với hai trường, idtên :

public class Student implements Serializable { private Integer id; private String name; // standard getters and setters }

Bây giờ chúng ta sẽ thêm một danh sách các sinh viên làm thuộc tính model trong lớp controller:

List students = new ArrayList(); // logic to build student data model.addAttribute("students", students);

Cuối cùng, chúng ta có thể sử dụng mã mẫu Thymeleaf để lặp qua danh sách sinh viên và hiển thị tất cả các giá trị trường:

6. Đánh giá có điều kiện

6.1. nếutrừ khi

Thuộc tính th: if = ”$ {condition}” được sử dụng để hiển thị một phần của dạng xem nếu điều kiện được đáp ứng. Thuộc tính thứ: trừ khi = ”$ {điều kiện}” được sử dụng để hiển thị một phần của dạng xem nếu điều kiện không được đáp ứng.

Thêm trường giới tính vào mô hình Sinh viên :

public class Student implements Serializable { private Integer id; private String name; private Character gender; // standard getters and setters }

Giả sử trường này có hai giá trị có thể có (M hoặc F) để chỉ ra giới tính của học sinh. Nếu chúng tôi muốn hiển thị các từ “Nam” hoặc “Nữ” thay vì một ký tự, chúng tôi có thể thực hiện điều này bằng cách sử dụng mã Thymeleaf sau:

6.2. công tắctrường hợp

Các thuộc tính th: switchth: case được sử dụng để hiển thị nội dung có điều kiện bằng cách sử dụng cấu trúc câu lệnh switch.

Đoạn mã trước đó có thể được viết lại bằng cách sử dụng thuộc tính th: switchth: case :

7. Xử lý đầu vào của người dùng

Form input can be handled using the th:action=”@{url}” and th:object=”${object}” attributes. The th:action is used to provide the form action URL and th:object is used to specify an object to which the submitted form data will be bound. Individual fields are mapped using the th:field=”*{name}” attribute, where the name is the matching property of the object.

For the Student class, we can create an input form:


    

In the above code, /saveStudent is the form action URL and a student is the object that holds the form data submitted.

The StudentController class handles the form submission:

@Controller public class StudentController { @RequestMapping(value = "/saveStudent", method = RequestMethod.POST) public String saveStudent(@ModelAttribute Student student, BindingResult errors, Model model) { // logic to process input data } }

In the code above, the @RequestMapping annotation maps the controller method with URL provided in the form. The annotated method saveStudent() performs the required processing for the submitted form. The @ModelAttribute annotation binds the form fields to the student object.

8. Displaying Validation Errors

The #fields.hasErrors() function can be used to check if a field has any validation errors. The #fields.errors() function can be used to display errors for a particular field. The field name is the input parameter for both these functions.

HTML code to iterate and display the errors for each of the fields in the form:


    

Instead of field name the above functions accept the wild card character * or the constant all to indicate all fields. The th:each attribute is used to iterate the multiple errors that may be present for each of the fields.

The previous HTML code re-written using the wildcard *:


    

or using the constant all:


    

Similarly, global errors in Spring can be displayed using the global constant.

The HTML code to display global errors:


    

The th:errors attribute can also be used to display error messages. The previous code to display errors in the form can be re-written using th:errors attribute:


    

9. Using Conversions

The double bracket syntax {{}} is used to format data for display. This makes use of the formatters configured for that type of field in the conversionService bean of the context file.

The name field in the Student class is formatted:

The above code uses the NameFormatter class, configured by overriding the addFormatters() method from the WebMvcConfigurer interface. For this purpose, our @Configuration class overrides the WebMvcConfigurerAdapter class:

@Configuration public class WebMVCConfig extends WebMvcConfigurerAdapter { // ... @Override @Description("Custom Conversion Service") public void addFormatters(FormatterRegistry registry) { registry.addFormatter(new NameFormatter()); } }

The NameFormatter class implements the Spring Formatter interface.

Các #conversions tiện ích cũng có thể được sử dụng để chuyển đổi đối tượng để trưng bày. Cú pháp của hàm tiện ích là # convert.convert (Đối tượng, Lớp) trong đó Đối tượng được chuyển đổi thành loại Lớp .

Để hiển thị trường phần trăm đối tượng sinh viên với phần phân số đã bị loại bỏ:

10. Kết luận

Trong hướng dẫn này, chúng ta đã biết cách tích hợp và sử dụng Thymeleaf trong ứng dụng Spring MVC.

Chúng tôi cũng đã thấy các ví dụ về cách hiển thị các trường, chấp nhận đầu vào, hiển thị lỗi xác thực và chuyển đổi dữ liệu để hiển thị. Phiên bản làm việc của mã được hiển thị trong bài viết này có sẵn trong kho lưu trữ GitHub.