SpringBoot - 整合 Thymeleaf 模板引擎

一、基本介绍

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