How to use Thymeleaf for views in SpringMVC
SpringMVC is a Java-based Web framework that is part of the Spring framework and provides a series of components and tools to help developers build Web applications. Among them, the view is one of the core components in Spring MVC. It is responsible for rendering model data into HTML pages and returning them to the client. Thymeleaf is a popular template engine that can easily render model data into HTML pages. This article will introduce how views in SpringMVC use Thymeleaf and provide sample code.
Thymeleaf Introduction
Thymeleaf is a popular template engine that can easily render model data into HTML pages. Thymeleaf's template syntax is very similar to HTML syntax, and Thymeleaf expressions can be directly embedded in HTML pages. Thymeleaf also provides a series of standard tags and attributes that can dynamically render HTML pages.
Here is a simple Thymeleaf expression example:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf Example</title>
</head>
<body>
<h1 th:text="${message}">Hello, World!</h1>
</body>
</html>
In the above code, we use Thymeleaf's th:text attribute to render model data. This attribute replaces the ${message} expression with the message variable in the model.
Thymeleaf integrated into SpringMVC
Thymeleaf can be integrated with SpringMVC for rendering views. Let's take a look at how to integrate Thymeleaf into SpringMVC.
Step 1: Add Thymeleaf dependency
Add the Thymeleaf dependency in the pom.xml file:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Step 2: Configure Thymeleaf template parser
In the SpringMVC configuration file, configure the Thymeleaf template parser:
@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {
@Bean
public ITemplateResolver templateResolver() {
SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
resolver.setPrefix("/WEB-INF/views/");
resolver.setSuffix(".html");
resolver.setTemplateMode(TemplateMode.HTML);
resolver.setCharacterEncoding("UTF-8");
return resolver;
}
@Bean
public SpringTemplateEngine templateEngine() {
SpringTemplateEngine engine = new SpringTemplateEngine();
engine.setTemplateResolver(templateResolver());
return engine;
}
@Bean
public ViewResolver viewResolver() {
ThymeleafViewResolver resolver = new ThymeleafViewResolver();
resolver.setTemplateEngine(templateEngine());
resolver.setCharacterEncoding("UTF-8");
return resolver;
}
}
In the above code, we create a SpringResourceTemplateResolver object and specify the location and suffix of the Thymeleaf template file. We then created a SpringTemplateEngine object and set the template resolver to its properties. Finally, we create a ThymeleafViewResolver object and set the template engine to its properties.
Step 3: Use Thymeleaf views
In the controller, we can use Thymeleaf views to render model data. For example:
@Controller
public class HelloWorldController {
@GetMapping("/hello")
public String helloWorld(Model model) {
model.addAttribute("message", "Hello, World!");
return "hello";
}
}
In the above code, we use the Model object to add model data and set the Thymeleaf view name to "hello". The format of the Thymeleaf view name is "filename:suffix", where the filename is the relative path in the Thymeleaf template folder, and the suffix is the suffix name of the Thymeleaf template file.
Step 4: Create Thymeleaf template file
Finally, we need to create a corresponding template file in the Thymeleaf template folder. For example, in the above example, we need to create a file named "hello.html" in the "/WEB-INF/views/" directory with the following content:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf Example</title>
</head>
<body>
<h1 th:text="${message}">Hello, World!</h1>
</body>
</html>
In the above code, we use Thymeleaf's th:text attribute to render model data. This attribute replaces the ${message} expression with the message variable in the model.
Complete sample code
The following is a complete SpringMVC sample code using Thymeleaf:
WebConfig.java
@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {
@Bean
public ITemplateResolver templateResolver() {
SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
resolver.setPrefix("/WEB-INF/views/");
resolver.setSuffix(".html");
resolver.setTemplateMode(TemplateMode.HTML);
resolver.setCharacterEncoding("UTF-8");
return resolver;
}
@Bean
public SpringTemplateEngine templateEngine() {
SpringTemplateEngine engine = new SpringTemplateEngine();
engine.setTemplateResolver(templateResolver());
return engine;
}
@Bean
public ViewResolver viewResolver() {
ThymeleafViewResolver resolver = new ThymeleafViewResolver();
resolver.setTemplateEngine(templateEngine());
resolver.setCharacterEncoding("UTF-8");
return resolver;
}
}
HelloWorldController.java
@Controller
public class HelloWorldController {
@GetMapping("/hello")
public String helloWorld(Model model) {
model.addAttribute("message", "Hello, World!");
return "hello";
}
}
hello.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf Example</title>
</head>
<body>
<h1 th:text="${message}">Hello, World!</h1>
</body>
</html>
Summarize
This article describes how to use Thymeleaf to render views in SpringMVC. We first briefly introduced the basic syntax and features of Thymeleaf, and then introduced in detail how to integrate Thymeleaf into SpringMVC and provided sample code. Thymeleaf can be used to easily render model data into HTML pages, and the syntax of Thymeleaf is very similar to that of HTML, making it easy to get started.