YueXian

YueXian的博客

0%

SpringBoot-整合Thymeleaf

发表于 更新于 分类于
本文字数： 3.9k 阅读时长 ≈ 7 分钟

前言

Thymeleaf是一款用于渲染XML/XHTML/HTML5内容的模板引擎，类似JSP，Velocity，FreeMaker等，它也可以轻易的与Spring MVC等Web框架进行集成作为Web应用的模板引擎。
Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个Web应用，但是总是看到说其效率有点低。

pom.xml文件

NekoHTML是一个简单地HTML扫描器和标签补偿器(tag balancer) ,使得程序能解析HTML文档并用标准的XML接口来访问其中的信息。这个解析器能投扫描HTML文件并“修正”许多作者（人或机器）在编写HTML文档过程中常犯的错误。NekoHTML 能增补缺失的父元素、自动用结束标签关闭相应的元素，以及不匹配的内嵌元素标签。NekoHTML 的开发使用了Xerces Native Interface (XNI)，后者是Xerces2的实现基础。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.7.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <groupId>com.huzh</groupId>
    <artifactId>springboot-thymeleaf</artifactId>
    <version>1.0-SNAPSHOT</version>

    <name>springboot-thymeleaf</name>
    <description>springboot-thymeleaf</description>

    <properties>
        <java.version>1.8</java.version>
        <nekohtml.version>1.9.22</nekohtml.version>
    </properties>

    <dependencies>

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

        <!--HTML解析器和标记平衡器。-->
        <dependency>
            <groupId>net.sourceforge.nekohtml</groupId>
            <artifactId>nekohtml</artifactId>
            <version>${nekohtml.version}</version>
        </dependency>

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

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

配置文件application.yml

1
2
3
4
5
6
7
8
9
spring:
  thymeleaf:
    # 是否开启模板缓存，默认true
    # 建议在开发时关闭缓存,不然没法看到实时页面
    cache: false
    ##去除thymeleaf的html严格校验
    mode: LEGACYHTML5
    # 模板编码
    encoding: utf-8

创建Controller文件

  • Model
    Model是一个接口，它的实现类为ExtendedModelMap，继承ModelMap类。
    1
    public class ExtendedModelMap extends ModelMap implements Model
  • ModelMap
    ModelMap继承LinkedHashMap，spring框架自动创建实例并作为controller的入参，用户无需自己创建
    1
    public class ModelMap extends LinkedHashMap<String,Object>
  • ModelAndView
    顾名思义，ModelAndView指模型和视图的集合，既包含模型又包含视图；ModelAndView的实例是开发者自己手动创建的，这也是和ModelMap主要不同点之一；

Controller文件：

1
2
3
4
5
6
7
8
9
@Controller
public class TestController {

    @RequestMapping("/")
    public String testThymeleaf(Model model) {
        model.addAttribute("msg", "Hello, this is thymeleaf");
        return "thymeleaf";
    }
}

HTML文件

springboot静态文件路径默认为src/main/resources/static/**
thymeleaf文件路径默认为src/main/resources/templates
如需要修改可以修改配置文件

1
2
3
4
5
spring:
  thymeleaf:
    prefix: classpath:/templates/
  mvc:
    static-path-pattern: classpath:/static/**

html文件

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 th:text="${msg}"></h1>
</body>
</html>

访问测试

templates.png

欢迎关注我的其它发布渠道