SpringBoot Thymeleaf使用教程（实用版）

迈不过友情╰ 2024-04-19 09:22 44阅读 0赞

> 使用Thymeleaf 三大理由：
> 
>  *  1.  简洁漂亮 容易理解
>  *  1.  完美支持HTML5 使用浏览器直接打开页面
>  *  1.  不新增标签 只需增强属性

# 学习目标 #

*  快速掌握Thymeleaf的基本使用（五大基础语法+常用内置对象）

# 快速查阅 #

专题阅读：[《SpringBoot 布道系列》][SpringBoot]

源码下载：[springboot-web-thymeleaf-enhance][]

— Hey Man，Don't forget to Star or Fork . —

官方指南：[ Thymleaf 3.0 官方教程][Thymleaf 3.0]

相关教程：[SpringBoot Thymeleaf 基本介绍][SpringBoot Thymeleaf] 、 [SpringBoot 在IDEA中实现热部署(实用版)][SpringBoot _IDEA]

# 使用教程 #

> `温馨提示：Thymeleaf 最为显著的特征是增强属性，任何属性都可以通过th:xx 来完成交互，例如th:value最终会覆盖value属性。`

## 一、基础语法 ##

### 变量表达式 `${}` ###

使用方法：直接使用`th:xx = "${}"` 获取对象属性 。例如：

### 选择变量表达式 `*{}` ###

使用方法：首先通过`th:object` 获取对象，然后使用`th:xx = "*{}"`获取对象属性。

这种简写风格极为清爽，推荐大家在实际项目中使用。 例如：

### 链接表达式 `@{}` ###

使用方法：通过链接表达式`@{}`直接拿到应用路径，然后拼接静态资源路径。例如：

### 片段表达式 `~{}` ###

片段表达式是Thymeleaf的特色之一，细粒度可以达到标签级别，这是JSP无法做到的。  
片段表达式拥有三种语法：

*  `~{ viewName } 表示引入完整页面`
 *  `~{ viewName ::selector} 表示在指定页面寻找片段 其中selector可为片段名、jquery选择器等`
 *  `~{ ::selector} 表示在当前页寻找`

使用方法：首先通过`th:fragment`定制片段 ，然后通过`th:replace` 填写片段路径和片段名。例如：

<head th:fragment="static">
            <script th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
    </head>
    
    
    <div th:replace="~{common/head::static}"></div>

在实际使用中，我们往往使用更简洁的表达，去掉表达式外壳直接填写片段名。例如：

<div th:replace="common/head::static"></div>

值得注意的是，使用替换路径`th:replace` 开头请勿添加斜杠，避免部署运行的时候出现路径报错。（因为默认拼接的路径为`spring.thymeleaf.prefix = classpath:/templates/`）

### 消息表达式 ###

即通常的国际化属性：`#{msg}` 用于获取国际化语言翻译值。例如：

### 其它表达式 ###

在基础语法中，默认支持字符串连接、数学运算、布尔逻辑和三目运算等。例如：

## 二、内置对象 ##

> 官方文档：[ 附录A： Thymeleaf 3.0 基础对象][_A_ Thymeleaf 3.0]  
> 官方文档：[ 附录B： Thymeleaf 3.0 工具类 ][_B_ Thymeleaf 3.0 _]

### 七大基础对象： ###

*  `${#ctx}` 上下文对象，可用于获取其它内置对象。
 *  `${#vars}`: 上下文变量。
 *  `${#locale}`：上下文区域设置。
 *  `${#request}`: HttpServletRequest对象。
 *  `${#response}`: HttpServletResponse对象。
 *  `${#session}`: HttpSession对象。
 *  `${#servletContext}`: ServletContext对象。

### 常用的工具类： ###

*  `#strings`：字符串工具类
 *  `#lists`：List 工具类
 *  `#arrays`：数组工具类
 *  `#sets`：Set 工具类
 *  `#maps`：常用Map方法。
 *  `#objects`：一般对象类，通常用来判断非空
 *  `#bools`：常用的布尔方法。
 *  `#execInfo`：获取页面模板的处理信息。
 *  `#messages`：在变量表达式中获取外部消息的方法，与使用＃\{...\}语法获取的方法相同。
 *  `#uris`：转义部分URL / URI的方法。
 *  `#conversions`：用于执行已配置的转换服务的方法。
 *  `#dates`：时间操作和时间格式化等。
 *  `#calendars`：用于更复杂时间的格式化。
 *  `#numbers`：格式化数字对象的方法。
 *  `#aggregates`：在数组或集合上创建聚合的方法。
 *  `#ids`：处理可能重复的id属性的方法。

## 三、迭代循环 ##

想要遍历`List`集合很简单，配合`th:each` 即可快速完成迭代。例如遍历用户列表：

在集合的迭代过程还可以获取状态变量，只需在变量后面指定状态变量名即可，状态变量可用于获取集合的下标/序号、总数、是否为单数/偶数行、是否为第一个/最后一个。例如：

如果缺省状态变量名，则迭代器会默认帮我们生成以变量名开头的状态变量 `xxStat`， 例如：

## 四、条件判断 ##

条件判断通常用于动态页面的初始化，例如：

如果想取反则使用unless 例如：

## 五、日期格式化 ##

使用默认的日期格式(toString方法) 并不是我们预期的格式：`Mon Dec 03 23:16:50 CST 2018`

此时可以通过时间工具类`#dates`来对日期进行格式化：`2018-12-03 23:16:50`

## 六、内联写法 ##

*  （1）为什么要使用内联写法？·答：因为 JS无法获取服务端返回的变量。
 *  （2）如何使用内联表达式？答：标准格式为：`[[${xx}]]` ，可以读取服务端变量，也可以调用内置对象的方法。例如获取用户变量和应用路径：

*  （3）标签引入的JS里面能使用内联表达式吗？答：不能！内联表达式仅在页面生效，因为`Thymeleaf`只负责解析一级视图，不能识别外部标签JS里面的表达式。

## 七、国际化 ##

> 需要了解更多关于国际化的精彩描述请前往 [SpringBoot 快速实现国际化i18n][SpringBoot _i18n] 。

例如在国际化文件中编写了user.title这个键值，然后使用`#{}`读取这个KEY即可获取翻译。

## 八、详细教程 ##

> ======== 有了上述基础后 下面正式开始Thymeleaf 的详细教程 ==============

首先通过[Spring Initializr][]创建项目，如图所示：

然后在POM文件引入`web 、thymeleaf`等依赖：

<dependencies>
            <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>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-devtools</artifactId>
                <scope>runtime</scope>
            </dependency>
        </dependencies>

然后在`src/main/resources/application.yml` 配置页面路径：

spring:
      thymeleaf:
        cache: false #关闭缓存
        prefix: classpath:/views/ #调整页面路径

接着在`src/main/java/com/hehe/web/UserController` 获取用户信息:

@RestController
    public class UserController {
        private List<User> userList = new ArrayList<>();
        {
            userList.add(new User("1", "socks", "123456", new Date()));
            userList.add(new User("2", "admin", "111111", new Date()));
            userList.add(new User("3", "jacks", "222222", null));
        }
        @GetMapping("/")
        public ModelAndView index() {
            return new ModelAndView("user/user", "userList", userList);
        }
    }
    
    public class User {
        private String id;
        private String username;
        private String password;
        private Date createTime;
        //请读者自行补充 构造器和 get/set方法..
    }

开始编写公共页面：`src/main/resources/views/common/head.html` ，其中`static`为页面片段：

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    
    <head th:fragment="static">
        <link th:href="@{/webjars/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css"/>
        <script th:src="@{/webjars/jquery/jquery.js}"></script>
    </head>
    </html>

接着编写用户列表页：`src/main/resources/views/user/user.html` 配合`th:each`显示用户列表信息。

使用说明：这里 `th:replace="common/head::static"` 表示将引用`${spring.thymeleaf.prefix}/common/head.html`的`static`页面片段，值得注意的是由于替换路径默认会拼接前缀路径，所以开头切勿在添加斜杠，否则在打包成JAR部署运行时将提示报`Templates not found...` 。

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8"/>
        <title th:text="用户信息">User</title>
        
        <script th:replace="common/head::static"></script>
    </head>
    <body>
    
    <div th:each="user,userStat:${userList}" th:class="${userStat.even}?'even':'odd'">
        序号：<input type="text" th:value="${userStat.count}"/>
        账号：<input type="text" th:value="${user.username}"/>
        密码：<input type="password" th:value="${user.password}"/>
        时间：<input type="text" th:value="${user.createTime}"/>
        时间：<input type="text" th:value="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm:ss')}"/>
    </div>
    
    <script th:inline="javascript">
        //通过内联表达式获取用户信息
        var userList = [[${userList}]];
        console.log(userList)
    </script>
    </body>
    </html>

然后编写单个用户页面：

至此大功告成，然后快速启动项目，如图所示：

快速启动项目

然后访问用户列表： [http://localhost:8080][http_localhost_8080] ，如图所示：

然后访问单个用户： [http://localhost:8080/user/1][http_localhost_8080_user_1] ，如图所示：

转载于:https://my.oschina.net/abcijkxyz/blog/3057130

[SpringBoot]: https://www.jianshu.com/p/964370d9374e
[springboot-web-thymeleaf-enhance]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fyizhiwazi%2Fspringboot-socks%2Ftree%2Fmaster%2Fspringboot-web-thymeleaf-enhance
[Thymleaf 3.0]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.thymeleaf.org%2Fdoc%2Ftutorials%2F3.0%2Fusingthymeleaf.html
[SpringBoot Thymeleaf]: https://www.jianshu.com/p/8dc48fa74e7e
[SpringBoot _IDEA]: https://www.jianshu.com/p/f658fed35786
[_A_ Thymeleaf 3.0]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.thymeleaf.org%2Fdoc%2Ftutorials%2F3.0%2Fusingthymeleaf.html%23appendix-a-expression-basic-objects
[_B_ Thymeleaf 3.0 _]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.thymeleaf.org%2Fdoc%2Ftutorials%2F3.0%2Fusingthymeleaf.html%23appendix-b-expression-utility-objects
[SpringBoot _i18n]: https://www.jianshu.com/p/e2eae08f3255
[Spring Initializr]: https://www.jianshu.com/p/d2b08a671e27
[http_localhost_8080]: https://links.jianshu.com/go?to=http%3A%2F%2Flocalhost%3A8080
[http_localhost_8080_user_1]: https://links.jianshu.com/go?to=http%3A%2F%2Flocalhost%3A8080%2Fuser%2F1