一、基本介绍
1、什么是 Thymeleaf
- Thymeleaf是新一代Java模板引擎,类似于Velocity、FreeMarker等传统Java模板引擎。
- Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。
- Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言,可以直接套用模板实现JSTL、 OGNL表达式效果,避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言
- Thymeleaf 也是 Spring Boot 官方推荐使用的模版引擎。同时 Spring Boot 也为 Thymeleaf 提供了完整的自动化配置解决方案。
2、基本语法
(1)常用表达式
- ${...}:获取变量值。
- *{...}:选择变量表达式。
- #{...}:消息文字表达式。
- @{...}:链接表达式。
- #maps:工具对象表达式。
(2)常用标签
- th:action:定义后台控制器路径。
- th:each:循环语句。
- th:field:表单字段绑定。
- th:id:div 标签中的 ID 声明,类似 HTML 标签中的归属性。
- th:if:条件判断语句。
- th:href:定义超链接。
- th:include:布局标签,替换内容到引入文件。
- th:src:图片类地址引入。
- th:text:显示文本。
- th:fragment:布局标签,定义一个代码片段,方便其他地方引用。
- th:object:替换对象。
- th:value:属性赋值。
(3)常用函数
- #dates:日期函数。
- #lists:列表函数。
- #arrays:数组函数。
- #objects:对象函数。
- #bools:逻辑函数
- #strings:字符串函数。
- #numbers:数字函数。
- #calendars:日历函数。
3、添加依赖及配置
(1)、在SpringBoot 项目的 pom.xml 文件中添加 spring-boot-starter-web 和 spring-boot-starter-thymeleaf 依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
(2)、Spring Boot为Thymeleaf提供了默认的配置,如果想更改默认配置只需在 application.properties 中添加配置即可,下面是一些常见的配置:
#是否开启缓存,开发时可以设置为 false,默认为 true
spring.thymeleaf.cache=true
#检查模版是否存在,默认为 true
spring.thymeleaf.check-template=true
#检查模版位置是否存在,默认为 true
spring.thymeleaf.check-template-location=true
#模版文件编码
spring.thymeleaf.encoding=UTF-8
#模版文件位置
spring.thymeleaf.prefix=classpath:/templates/
#Content-Type配置
spring.thymeleaf.servlet.content-type=text/html
#模版文件后缀
spring.thymeleaf.suffix=.html
Spring Boot为Thymeleaf提供的默认的相关的配置属性在ThymeleafProperties类中
二、实例展示
1、编写控制类
(2)、首先创建一个实体类
public class Book {
private String name;
private String author;
private Double price;
public Book(String name, String author, Double price) {
this.name = name;
this.author = author;
this.price = price;
}
// 省略 getter 和 setter 方法
}
(2)、创建 BookController 控制类
@Controller
public class BookController {
@GetMapping("/books")
public ModelAndView boolInfo(){
//创建返回数据
List<Book> books = Arrays.asList(
new Book("金瓶梅", "兰陵笑笑生", 100.0),
new Book("红楼梦", "曹雪芹", 200.0),
new Book("MySQL从入门到删库", "佚名", 200.0));
// 创建返回的视图对象
ModelAndView view = new ModelAndView();
view.addObject("books", books);
view.setViewName("index");
return view;
}
}
2、创建视图
(1)、在resources目录下的 classpath:/templates 目录中创建 index.html
<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table style="border: 1px; collapse: 0;">
<tr>
<th>书名</th>
<th>作者</th>
<th>价格</th>
</tr>
<tr th:each="book:${books}">
<td th:text="${book.name}"></td>
<td th:text="${book.author}"></td>
<td th:text="${book.price}"></td>
</tr>
</table>
</body>
</html>
由上文也可以知道需要在html中添加:<html xmlns:th="http://www.thymeleaf.org"> 这样,下文才能正确使用th:*形式的标签!
3、启动项目
启动项目后访问 http://localhost:8080/books