1. 什么是Thymeleaf?
Thymeleaf是用于Web和独立环境的现代服务器端Java模板引擎。Thymeleaf的主要目标是将优雅的自然模板带到您的开发工作流程中—HTML能够在浏览器中正确显示,并且可以作为静态原型,从而在开发团队中实现更强大的协作。Thymeleaf能够处理HTML,XML,JavaScript,CSS甚至纯文本。
${...} : 变量表达式。
*{...} : 选择表达式。
#{...} : 消息 (i18n) 表达式。
@{...} : 链接 (URL) 表达式。
~{...} : 片段表达式。
现在你可能看不太懂这几个表达式想要表达的意思,但是通过后面的实例相信能很容易的理解这些表达式的意思。
2. 使用SpringBoot集成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选择变量,再用*{属性}取值
<!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)允许从外部源(如:.properties)文件中检索,通过键值对的方式引用
在application.properties中设置messages的路径:
spring.messages.basename=i8bn
hello=hello
<h1>使用消息表达式</h1> <h2 th:text="#{hello}"/>
2.4 thymeleaf链接表达式
从名字上就能看出链接表达式是设置链接时最常用的表达式,一般和th:action和th:href配合使用
<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搭配使用,我们实际来操作一下:
<!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中用片段表达式来引用它
<div th:replace="hello :: html"></div>
写在hello.html中的内容就被引用过来了。
3. 总结
对后端人员来说,虽然不用精通前端知识,但是必要的前端知识还是掌握一些最好。Thymeleaf是个很强大的框架,这篇文章也只是对其中一部分做了介绍,作为后端程序员来说,用到的时候可以通过查询各种资料代码来使用,不需要深入了解,如果想要深入学习,官方文档是最好的学习资料。