如何优雅的将Thymeleaf集成到SpringBoot

1. 什么是Thymeleaf？

Thymeleaf是用于Web和独立环境的现代服务器端Java模板引擎。Thymeleaf的主要目标是将优雅的自然模板带到您的开发工作流程中—HTML能够在浏览器中正确显示，并且可以作为静态原型，从而在开发团队中实现更强大的协作。Thymeleaf能够处理HTML，XML，JavaScript，CSS甚至纯文本。

在使用Thymeleaf时，可以使用以下五种标准表达式：

${...} : 变量表达式。
*{...} : 选择表达式。
#{...} : 消息 (i18n) 表达式。
@{...} : 链接 (URL) 表达式。
~{...} : 片段表达式。

现在你可能看不太懂这几个表达式想要表达的意思，但是通过后面的实例相信能很容易的理解这些表达式的意思。

2. 使用SpringBoot集成Thymeleaf

首先创建一个SpringBoot项目，项目的结构如下：

java文件夹中存放所有的java代码

static文件夹中存放所需要的一些静态资源

templates中用来存放html代码

在pom.xml中导入Thymeleaf相关的依赖

<!--thymeleaf-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
    <groupId>net.sourceforge.nekohtml</groupId>
    <artifactId>nekohtml</artifactId>
    <version>1.9.22</version>
</dependency>

导入依赖后就可以使用Thymeleaf了，在templates下创建一个index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"><!--引入thymeleaf-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p th:text="${msg}">你好</p>
</body>
</html>

在Controller包下新建一个indexController.java

@Controller
public class indexController {
    @GetMapping("/index")
    public String index(Model model){
        model.addAttribute("msg","集成thymeleaf");
        return "index";
    }
}

启动SpringBoot，在浏览器中输入 http://localhost:8080/index

接下来就开始正式学习thymeleaf的相关内容

2.1 Thymeleaf变量表达式

${...} : 变量表达式。

我们可以通过${...}这样的语法在html文件内获取变量。依旧以学生为实例，在entity包下新建student.java

public class Student {
    private int id;
    private String name;
    private String age;
    public Student(int id,String name,String age){
        this.id=id;
        this.name=name;
        this.age=age;
    }
    //省略getter and setter方法
}

继续新建一个studentController

@Controller
public class studentController {
    @GetMapping("/student")
    public String student(Model model){
        Student student=new Student(1,"少掉下巴","22");
        model.addAttribute("student",student);
        return "student";
    }
}

再新建一个student.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"><!--引入thymeleaf-->
<head>
    <meta charset="UTF-8">
    <title>student information</title>
</head>
<body>
<h1 th:text="${student.id}"/>
<h1 th:text="${student.name}"/>
<h1 th:text="${student.age}"/>
</body>
</html>

通过运行结果观察到Thymeleaf中的变量表达式使用${变量名}的方式获取其中的数据

2.2 thymeleaf选择表达式

*{...} : 选择表达式。

选择表达式的用法和变量表达式相似，只不过选择表达式先使用th:object选择变量，再用*{属性}取值

修改上面的student.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"><!--引入thymeleaf-->
<head>
    <meta charset="UTF-8">
    <title>student information</title>
</head>
<body>
<h1>使用变量表达式</h1>
<h2 th:text="${student.id}"/>
<h2 th:text="${student.name}"/>
<h2 th:text="${student.age}"/>
<h1>使用选择表达式</h1>
<div th:object="${student}">
    <h2 th:text="*{id}"/>
    <h2 th:text="*{name}"/>
    <h2 th:text="*{age}"/>
</div>
</body>
</html>

两者所达到的效果是一样的。

2.3 thymeleaf消息表达式

#{...} : 消息 (i18n) 表达式。

消息表达式(通常称为文本外部化，国际化或i18n)允许从外部源(如:.properties)文件中检索，通过键值对的方式引用

首先创建一个properties文件

在application.properties中设置messages的路径：

spring.messages.basename=i8bn

在i8bn.properties中设置键值对

hello=hello

继续在student.html中使用：

<h1>使用消息表达式</h1> <h2 th:text="#{hello}"/>

即可以引用到外部文件的内容。

2.4 thymeleaf链接表达式

@{...} : 链接 (URL) 表达式。

从名字上就能看出链接表达式是设置链接时最常用的表达式，一般和th:action和th:href配合使用

在上述的student.html中继续增加以下内容

<a href="index.html" th:href="@{'http://localhost:8080/student?name='+${student.name}}">index</a>
<a href="index.html" th:href="@{'student?name='+${student.name}}">index2</a>
<a href="index.html" th:href="@{'/student?name='+${student.name}}">index3</a>

通过链接的方式可以在链接后增加指定参数，方便request调用

2.5 thymeleaf片段表达式

~{...} : 片段表达式。

片段表达式是一种简单的方法用来表示标记的片段并将其移动到模板中，一般和th:insert、th:replace搭配使用，我们实际来操作一下：

我在hello.html中写两个div

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"><!--引入thymeleaf-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:fragment="header">
    <h3>头部</h3>
</div>
<!--尾部-->
<div th:fragment="footer" id="footer">
    <h3>尾部</h3>
</div>
</body>
</html>

然后在student.html中用片段表达式来引用它