SpringMVC 中的视图如何使用 Thymeleaf

简介: SpringMVC 中的视图如何使用 Thymeleaf

SpringMVC 中的视图如何使用 Thymeleaf


SpringMVC 是一个基于 Java 的 Web 框架,它是 Spring 框架的一部分,提供了一系列的组件和工具,帮助开发人员构建 Web 应用程序。其中,视图是 Spring MVC 中的核心组件之一,它负责将模型数据渲染成 HTML 页面并返回给客户端。Thymeleaf 是一种流行的模板引擎,它可以方便地将模型数据渲染成 HTML 页面。本文将介绍 SpringMVC 中的视图如何使用 Thymeleaf,并提供示例代码。


image.png


Thymeleaf 简介


Thymeleaf 是一个流行的模板引擎,它可以方便地将模型数据渲染成 HTML 页面。Thymeleaf 的模板语法与 HTML 语法非常相似,可以直接在 HTML 页面中嵌入 Thymeleaf 表达式。Thymeleaf 还提供了一系列的标准标签和属性,可以对 HTML 页面进行动态渲染。


下面是一个简单的 Thymeleaf 表达式示例:


<!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>

在上面的代码中,我们使用了 Thymeleaf 的 th:text 属性来渲染模型数据。这个属性会将 ${message} 表达式替换为模型中的 message 变量。


Thymeleaf 集成到 SpringMVC 中


Thymeleaf 可以与 SpringMVC 集成,用于渲染视图。下面我们来看一下如何将 Thymeleaf 集成到 SpringMVC 中。


步骤一:添加 Thymeleaf 依赖

在 pom.xml 文件中添加 Thymeleaf 的依赖:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

骤二:配置 Thymeleaf 模板解析器

在 SpringMVC 的配置文件中,配置 Thymeleaf 模板解析器:


@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;
    }
}

在上面的代码中,我们创建了一个 SpringResourceTemplateResolver 对象,指定了 Thymeleaf 模板文件的位置和后缀名。然后,我们创建了一个 SpringTemplateEngine 对象,并将模板解析器设置为其属性。最后,我们创建了一个 ThymeleafViewResolver 对象,并将模板引擎设置为其属性。


步骤三:使用 Thymeleaf 视图

在控制器中,我们可以使用 Thymeleaf 视图来渲染模型数据。例如:

@Controller
public class HelloWorldController {
    @GetMapping("/hello")
    public String helloWorld(Model model) {
        model.addAttribute("message", "Hello, World!");
        return "hello";
    }
}

在上面的代码中,我们使用了 Model 对象来添加模型数据,并将 Thymeleaf 视图名称设置为 “hello”。Thymeleaf 视图名称的格式为 “文件名:后缀”,其中文件名是在 Thymeleaf 模板文件夹中的相对路径,后缀是 Thymeleaf 模板文件的后缀名。


步骤四:创建 Thymeleaf 模板文件

最后,我们需要在 Thymeleaf 模板文件夹中创建一个对应的模板文件。例如,在上面的示例中,我们需要在 “/WEB-INF/views/” 目录下创建一个名为 “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>

在上面的代码中,我们使用了 Thymeleaf 的 th:text 属性来渲染模型数据。这个属性会将 ${message} 表达式替换为模型中的 message 变量。


完整示例代码


下面是一个完整的使用 Thymeleaf 的 SpringMVC 示例代码:


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>

总结


本文介绍了如何在 SpringMVC 中使用 Thymeleaf 来渲染视图。我们首先简要介绍了 Thymeleaf 的基本语法和特点,然后详细介绍了如何将 Thymeleaf 集成到 SpringMVC 中,并提供了示例代码。使用 Thymeleaf 可以方便地将模型数据渲染成 HTML 页面,并且 Thymeleaf 的语法与 HTML 的语法非常相似,易于上手。


相关文章
|
安全 前端开发 Java
SpringMVC的视图
SpringMVC的视图
|
XML 前端开发 数据格式
SpringMVC的视图~
SpringMVC的视图~
|
Java Maven
springboot项目--freemarker使用ftl模板文件动态生成图片
springboot项目--freemarker使用ftl模板文件动态生成图片
851 0
|
7月前
|
JSON 前端开发 Java
SpringMVC概述、SpringMVC的工作流程、创建SpringMVC的项目
SpringMVC概述、SpringMVC的工作流程、创建SpringMVC的项目
52 2
|
7月前
|
缓存 前端开发 Java
视图映射掌握:解析Spring MVC视图解析器的全方位指南
视图映射掌握:解析Spring MVC视图解析器的全方位指南
168 1
SpringMVC 中的视图如何使用 Velocity
SpringMVC 中的视图如何使用 Velocity
|
7月前
|
开发框架 前端开发 Java
SpringMVC视图
SpringMVC视图
35 0
|
7月前
|
Java
Springboot视图解析与模板引擎~
Springboot视图解析与模板引擎~
|
7月前
|
XML 前端开发 数据格式
springMVC之视图
springMVC之视图
|
前端开发 Java
SpringMVC 各组件功能
SpringMVC 各组件功能
75 0