Thymeleaf là một template engine mở với khả năng xử lý nhiều loại ngôn ngữ khác như HTML, XML, Javascript, CSS. Người dùng có thể dùng nó để tuỳ biến template theo nhu cầu của mình. Trong bài viết này, mình sẽ hướng dẫn các bạn các bước cơ bản cách sử dụng Thymeleaf trong Spring MVC các bạn nhé!
Đầu tiên, mình sẽ tạo mới một Maven project để làm ví dụ:
Bạn nào chưa biết cách tạo project Spring MVC thì có thể tham khảo bài viết này. Ở đây, mình chỉnh version của các thư viện như sau:
|
1 2 3 4 5 6 7 8 9 |
<properties> <maven.compiler.source>21</maven.compiler.source> <maven.compiler.target>21</maven.compiler.target> <org.springframework-version>6.1.10</org.springframework-version> <org.slf4j-version>2.0.13</org.slf4j-version> <org.junit-version>5.10.2</org.junit-version> <jakarta.servlet-api-version>6.1.0</jakarta.servlet-api-version> </properties> |
Để sử dụng được Thymeleaf, chúng ta cần phải add dependency của nó:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- Thymeleaf --> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf-spring6</artifactId> <version>3.1.2.RELEASE</version> </dependency> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf</artifactId> <version>3.1.2.RELEASE</version> </dependency> |
Để chạy ví dụ này, mình sẽ sử dụng Maven Jetty Plugin:
|
1 2 3 4 5 |
<plugin> <groupId>org.eclipse.jetty</groupId> <artifactId>jetty-maven-plugin</artifactId> <version>11.0.21</version> </plugin> |
Trước khi bắt đầu vào chủ đề của bài viết này, mình muốn nói với các bạn đôi chút về khái niệm dialect trong Thymeleaf …
Như mình đã nói, Thymeleaf cho phép chúng ta tuỳ biến template của chúng ta một cách dễ dàng. Việc tuỳ biến này sẽ sử dụng những đối tượng được quy định bởi Thymeleaf. Chúng ta sẽ có những xử lý logic trong những đối tượng này do đó những đối tượng này còn được gọi là những processor và tập hợp nhiều đối tượng processor ta sẽ có 1 dialect.
Mặc định Thymeleaf cung cấp cho chúng ta 2 dialect: một cái là Standard Dialect và một cái nữa là SpringStandard Dialect với một số chức năng hỗ trợ cho Spring framework. Trong bài viết này, chúng ta sẽ sử dụng SpringStandard Dialect.
Để sử dụng Thymeleaf trong Spring MVC, đầu tiên chúng ta cần khai báo đối tượng SpringTemplateEngine của Thymeleaf trong Spring container. Đối tượng này sẽ giúp chúng ta khai báo ViewResolver của Thymeleaf với Spring.
Các bạn hãy mở tập tin servlet-context.xml nằm trong thư mục /src/main/webapp/WEB-INF/spring/appServlet, xoá ViewResolver mặc đinh:
|
1 2 3 4 5 |
<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory --> <beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <beans:property name="prefix" value="/WEB-INF/views/" /> <beans:property name="suffix" value=".jsp" /> </beans:bean> |
rồi thêm khai báo của đối tượng SpringTemplateEngine của Thymeleaf vào nhé!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<beans:bean id="viewResolver" class="org.thymeleaf.spring6.templateresolver.SpringResourceTemplateResolver"> <beans:property name="prefix" value="/WEB-INF/views/" /> <beans:property name="suffix" value=".html" /> <beans:property name="cacheable" value="false" /> </beans:bean> <beans:bean id="engine" class="org.thymeleaf.spring6.SpringTemplateEngine"> <beans:property name="templateResolver" ref="viewResolver" /> </beans:bean> <beans:bean id="" class="org.thymeleaf.spring6.view.ThymeleafViewResolver"> <beans:property name="templateEngine" ref="engine" /> </beans:bean> |
Như các bạn thấy, để khai báo đối tượng SpringTemplateEngine của Thymeleaf trong Spring container, chúng ta phải khai báo thêm một đối tượng khác là SpringResourceTemplateResolver để cấu hình location của các tập tin template. Và đối tượng ThymeleafViewResolver sẽ sử dụng đối tượng TemplateEngine này.
Cấu hình của SpringResourceTemplateResolver cũng tương tự như đối tượng InternalResourceViewResolver, điểm khác duy nhất là chúng ta sẽ làm việc trên các tập tin .html chứ không còn là .jsp nữa. Đúng nghĩa là template hơn, vì trong tập tin .jsp, chúng ta có thể khai báo code Java trong đó nữa.
Bây giờ, mình sẽ đổi lại tên file home.jsp nằm trong thư mục /src/main/webapp/WEB-INF/views/ thành home.html để sử dụng với Thymeleaf. Nội dung của tập tin home.html lúc này như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ page session="false" %> <html> <head> <title>Home</title> </head> <body> <h1> Hello world! </h1> <P> The time on the server is ${serverTime}. </P> </body> </html> |
Bằng cách sử dụng namespace của Thymeleaf, mình sẽ sửa lại nội dung của tập tin home.html như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<html xmlns:th="http://www.thymeleaf.org"> <head> <title>Home</title> </head> <body> <h1> Hello world! </h1> <P> The time on the server is <label th:text="${serverTime}"></label>. </P> </body> </html> |
Như các bạn thấy, ở đây mình đã khai báo namespace của Thymeleaf và sử dụng nó như một attribute của một thẻ HTML.
Kết quả cũng tương tự khi các bạn chạy với InternalResourceViewResolver:
manhkm@2022
Hi anh, em hỏi về vấn đề Template Enginer Thymeleaf.
Nếu trước đó project đã định nghĩa các prefix, suffix là .jsp
Nhưng giờ chuyển đổi từ JSP sang Thymeleaf thì có cách nào dùng được cả 2 không anh nhỉ?
Phần config ViewResolver của project đang như sau:
<!– –>
dang
Vậy a ơi từ lúc này mình nên sử dụng html chứ k nên sử dụng jsp nữa à anh.
nghiep
http://www.nakov.com/blog/2016/08/05/creating-a-blog-system-with-spring-mvc-thymeleaf-jpa-and-mysql/
Anh ơi cho em hỏi tại sao trọng tutorial này không cần config gì về Viewsolver mà framework tự biết link đến view là resources/templates hả anh
Khanh Nguyen
Họ đang dùng spring-boot-starter-thymeleaf đó em.
nghiep
vậy còn không cần khai báo các bean như entityManger , hay không cần cấu hình persistence.xml là do đâu hả anh ?
Khanh Nguyen
Xem thử em https://huongdanjava.com/vi/cau-hinh-database-trong-spring-boot-project-voi-jpa-starter-dependency.html
nghiep
dạ em cảm ơn anh ạ , anh tâm huyết quá ..