Thymeleaf笔记总结

悠悠 2022-01-28 08:45 285阅读 0赞

### **前言：** ###

Thymeleaf是一个流行的模板引擎，该模板引擎采用Java语言开发，模板引擎是一个技术名词，是跨领域跨平台的概念，在Java语言体系下有模板引擎，在C\#、PHP语言体系下也有模板引擎，甚至在JavaScript中也会用到模板引擎技术，Java生态下的模板引擎有 Thymeleaf 、Freemaker、Velocity、Beetl（国产） 等。Thymeleaf模板既能用于web环境下，也能用于非web环境下，在非web环境下，它能直接显示模板上的静态数据，在web环境下，它能像JSP一样从后台接收数据并替换掉模板上的静态数据。Thymeleaf 它是基于HTML的，以HTML标签为载体，Thymeleaf 要寄托在HTML的标签下实现对数据的展示，Thymeleaf的官方网站：[http://www.thymeleaf.org][http_www.thymeleaf.org]，Spring boot 集成了thymeleaf模板技术，并且spring boot官方也推荐使用thymeleaf来替代JSP技术，thymeleaf是另外的一种模板技术，它本身并不属于springboot，springboot只是很好地集成这种模板技术，作为前端页面的数据展示。

### **一、Spring boot 集成 Thymeleaf** ###

1、在SpringBoot中使用Thymeleaf模板引擎，添加依赖

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

2、在Spring boot的核心配置文件application.properties中对Thymeleaf进行配置

#开发阶段，建议关闭thymeleaf的缓存
    spring.thymeleaf.cache=false

3、写一个Controller去映射到模板页面（和SpringMVC基本一致），比如：

@RequestMapping("/index")
    public String index (Model model) {
        model.addAttribute("data", "恭喜，Spring boot集成 Thymeleaf成功！");
        //return 中就是你页面的名字（不带.html后缀）
        return "index";
    }

4、在src/main/resources的templates下新建一个index.html页面用于展示数据：

HTML页面的<html>元素中加入以下属性：<html xmlns:th="http://www.thymeleaf.org">

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="UTF-8"/>
    <title>Spring boot集成 Thymeleaf</title>
    </head>
    <body>
    <p th:text="${data}">Spring boot集成 Thymeleaf</p>
    </body>
    </html>

Springboot使用thymeleaf作为视图展示，约定将模板文件放置在src/main/resource/templates目录下，静态资源放置在src/main/resource/static目录下

### **二、Thymeleaf 的标准表达式** ###

**Thymeleaf 的标准表达式主要有如下几类：**

1、标准变量表达式

语法：$\{...\}，变量表达式用于访问容器（tomcat）上下文环境中的变量，功能和 JSTL 中的 $\{\} 相同，Thymeleaf 中的变量表达式使用 $\{变量名\} 的方式获取其中的数据，比如在Spring mvc 的 Controllar中使用model.addAttribute向前端传输数据，代码如下：

@RequestMapping(value="/userinfo")
    public String userinfo (Model model) {
        User user = new User();
        user.setId(1);
        user.setNick("昵称");
        user.setPhone("13700020000");
        user.setAddress("北京朝阳区");
        model.addAttribute("user", user);
        model.addAttribute("hello", "helloworld");
        return "user";
    }

前端接收代码：

<td th:text="${user.nick}">x</td>
    <td th:text="${user.phone}">137xxxxxxxx</td>
    <td th:text="${user.email}">xxx@xx.com</td>
    <td th:text="${user.address}">北京.xxx</td>
    
    <span th:text="${hello}">你好</span>

其中，th:text="" 是Thymeleaf的一个属性，用于文本的显示；

2、选择变量表达式

语法：\*\{...\}，选择变量表达式，也叫星号变量表达式，使用 th:object 属性来绑定对象，比如：

前端接收代码

<div th:object="${user}" >
        <p>nick: <span th:text="*{nick}">张</span></p>
        <p>phone: <span th:text="*{phone}" >三</span></p>
        <p>email: <span th:text="*{email}" >北京</span></p>
        <p>address: <span th:text="*{address}" >北京</span></p>
    </div>

选择表达式首先使用th:object来邦定后台传来的User对象，然后使用 \* 来代表这个对象，后面 \{\} 中的值是此对象中的属性，选择变量表达式 \*\{...\} 是另一种类似于变量表达式 $\{...\} 表示变量的方法；选择变量表达式在执行时是在选择的对象上求解，而$\{...\}是在上下文的变量Model上求解；通过 th:object 属性指明选择变量表达式的求解对象；上述代码等价于：

<div>
        <p>nick: <span th:text="${user.nick}">张</span></p>
        <p>phone: <span th:text="${user.phone}" >三</span></p>
        <p>email: <span th:text="${user.email}" >北京</span></p>
        <p>address: <span th:text="${user.address}" >北京</span></p>
    </div>

标准变量表达式和选择变量表达式可以混合一起使用，比如：

<div th:object="${user}" >
        <p>nick: <span th:text="*{nick}">张</span></p>
        <p>phone: <span th:text="${user.phone}" >三</span></p>
        <p>email: <span th:text="${user.email}" >北京</span></p>
        <p>address: <span th:text="*{address}" >北京</span></p>
    </div>

也可以不使用 th:object 进行对象的选择，而直接使用 \*\{...\} 获取数据，比如：

<div>
        <p>nick: <span th:text="*{user.nick}">张</span></p>
        <p>phone: <span th:text="*{user.phone}" >三</span></p>
        <p>email: <span th:text="*{user.email}" >北京</span></p>
        <p>address: <span th:text="*{user.address}" >北京</span></p>
    </div>

3、URL表达式

语法：@\{...\}，URL表达式可用于 <script src="...">、<link href="...">、<a href="...">、<form action="...">等，

①：绝对URL，比如：

②：相对URL，相对于页面，比如：

③：相对URL，相对于项目上下文，比如：

<a th:href="@{'/user/info?id='+${user.id}}">查看</a> （项目的上下文名会被自动添加）/ ${pageContext.request.contextPath}

### 三、Thymeleaf 的常见属性 ###

**如下为thymeleaf的常见属性：**

th:action

定义后台控制器的路径，类似<form>标签的action属性，比如：<form id="login" th:action="@\{/login\}">......</form>

th:each

这个属性非常常用，比如从后台传来一个对象集合那么就可以使用此属性遍历输出，它与JSTL中的<c: forEach>类似，此属性既可以循环遍历集合，也可以循环遍历数组及Map，比如：

List类型的循环：

以上代码解读如下：

th:each="user, iterStat : $\{userlist\}" 中的 $\{userList\} 是后台传来的Key，  
user是$\{userList\} 中的一个数据，  
iterStat 是 $\{userList\} 循环体的信息，  
其中user及iterStat自己可以随便写；

interStat是循环体的信息，通过该变量可以获取如下信息：

index、size、count、even、odd、first、last，其含义如下：

index: 当前迭代对象的index（从0开始计算）  
count: 当前迭代对象的个数（从1开始计算）  
size: 被迭代对象的大小  
current: 当前迭代变量  
even/odd: 布尔值，当前循环是否是偶数/奇数（从0开始计算）  
first: 布尔值，当前循环是否是第一个  
last: 布尔值，当前循环是否是最后一个

注意：循环体信息interStat也可以不定义，则默认采用迭代变量加上Stat后缀，即userStat

Map类型的循环：

$\{myMapVal.key\} 是获取map中的key，$\{myMapVal.value\} 是获取map中的value；

数组类型的循环：

th:href

定义超链接，比如：<a  class="login" th:href="@\{/login\}">登录</a>

th:id

类似html标签中的id属性，比如：<span th:id="$\{hello\}">aaa</span>

th:if

条件判断，比如后台传来一个变量，判断该变量的值，1为男，2为女：

th:unless

th:unless是th:if的一个相反操作，上面的例子可以改写为：

th:switch/th:case

switch，case判断语句，比如：

一旦某个case判断值为true，剩余的case则都当做false，“\*”表示默认的case，前面的case都不匹配时候，执行默认的case；

th:object

用于数据对象绑定，通常用于选择变量表达式（星号表达式），例如：

th:src

用于外部资源引入，比如<script>标签的src属性，<img>标签的src属性，常与@\{\}表达式结合使用；

th:text

用于文本的显示，比如：<input type="text" id="realName" name="reaName" th:text="$\{realName\}">

th:value

类似html标签中的value属性，能对某元素的value属性进行赋值，比如：<input type="hidden" id="userId" name="userId" th:value="$\{userId\}">

th:attr

该属性也是用于给HTML中某元素的某属性赋值，但该方式写法不够优雅，比如上面的例子可以写成如下形式：<input type="hidden" id="userId" name="userId" th:attr="value=$\{userId\}" >

th:onclick

点击事件：th:οnclick="'getCollect()'"

th:style

设置样式：th:style="'display:none;'"

th:method

设置请求方法，比如：<form id="login" th:action="@\{/login\}" th:method="post">......</form>

th:name

设置表单名称，比如：<input th:type="text" th:id="userName" th:name="userName">

th:inline

th:inline 有三个取值类型 (text, javascript 和 none)

该属性使用内联表达式\[\[…\]\]展示变量数据，比如：

内联文本

<span th:inline="text">Hello, [[${user.nick}]]</span>
    等同于：
    <span>Hello, <span th:text="${user.nick}"></span></span>

th:inline写在任何父标签都可以，比如如下也是可以的：

内联脚本

### **四、Thymeleaf 字面量** ###

文本字面量

用单引号'...'包围的字符串为文本字面量，比如：<a th:href="@\{'api/getUser?id=' + $\{user.id\}\}">修改</a>

数字字面量

boolean字面量

true和false

null字面量

<p th:if="${userlist == null}">
    userlist为空
    </p>
    
    
    <p th:if="${userlist != null}">
    userlist不为空
    </p>

### 五、Thymeleaf 字符串拼接 ###

一种是字面量拼接：<span th:text="'当前是第'+$\{sex\}+'页 ,共'+$\{sex\}+'页'"></span>

另一种更优雅的方式，使用“|”减少了字符串的拼接：<span th:text="|当前是第$\{sex\}页，共$\{sex\}页|"></span>

### 六、Thymeleaf 三元运算判断 ###

<span th:text="$\{sex eq 1\} ? '男' : '女'">未知</span>、

### 七、Thymeleaf 运算和关系判断 ###

算术运算：+ , - , \* , / , %

关系比较: > , < , >= , <= ( gt , lt , ge , le )

相等判断：== , != ( eq , ne )

### 八、Thymaleaf 表达式基本对象 ###

1、模板引擎提供了一组内置的对象，这些内置的对象可以直接在模板中使用，这些对象由\#号开始引用：

2、官方手册：http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

\#request：

相当于HttpServletRequest 对象，这是3.x版本，若是2.x版本使用 \#httpServletRequest；

$\{\#request.getContextPath()\}

$\{\#request.getAttribute("phone")\}

\#session：

相当于HttpSession 对象，这是3.x版本，若是2.x版本使用\#httpSession；

需要在后台controller中设置了session

$\{\#session.getAttribute("phone")\}

$\{\#session.id\}

$\{\#session.lastAccessedTime\}

### 九、Thymaleaf 表达式功能对象 ###

1、模板引擎提供的一组功能性内置对象，可以在模板中直接使用这些对象提供的功能方法：

2、工作中常使用的数据类型，如集合，时间，数值，可以使用thymeleaf的提供的功能性对象来处理它们；

3、内置功能对象前都需要加\#号，内置对象一般都以s结尾；

4、官方手册：http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

\#dates: java.util.Date对象的实用方法，<span th:text="$\{\#dates.format(curDate, 'yyyy-MM-dd HH:mm:ss')\}"></span>

\#calendars: 和dates类似, 但是 java.util.Calendar 对象；

\#numbers: 格式化数字对象的实用方法；

\#strings: 字符串对象的实用方法： contains, startsWith, prepending/appending等；

\#objects: 对objects操作的实用方法；

\#bools: 对布尔值求值的实用方法；

\#arrays: 数组的实用方法；

\#lists: list的实用方法，比如<span th:text="$\{\#lists.size(datas)\}"></span>

\#sets: set的实用方法；

\#maps: map的实用方法；

\#aggregates: 对数组或集合创建聚合的实用方法；

常规用法案例：

<p th:inline="text">
     
        [[${#request.getContextPath()}]]
    
        [[${#session.id}]]
    
        [[${#session.lastAccessedTime}]]
    
        <span th:text="${#dates.format(mydate , 'yyyy年MM月dd日 HH:mm:ss')}"></span>
    
        <span th:text="${#numbers.formatDecimal(myNumber, 8, 3)}"></span>
    
        <span th:text="${#aggregates.avg(myInt)}"></span>
    </p>

### 十、常用标签属性 ###

1、<base>

在head标签中使用<base>标签：

<base> 标签为页面上的所有链接规定默认地址或默认目标

<base>我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将会追加这个基准地址去请求静态资源。只作用于相对地址。

2、Thymeleaf一张页面引入另一张HTML文件

公共页面（子页面）

<!doctype html>
    <html lang="zh" xmlns:th="http://www.thymeleaf.org">
    
    <div th:fragment="head">
       
    </div>
    </html>

需要导入公共页面的页面（父页面）

<div th:include="common/head::head"></div>

可参考:[Thymeleaf layout 布局][Thymeleaf layout]

持续总结中.........

推荐较好的文章：

[前端渲染模板（一）：Thymeleaf][Thymeleaf]

[http_www.thymeleaf.org]: http://www.thymeleaf.org
[Thymeleaf layout]: http://www.jianshu.com/p/db16d4d8d9c7
[Thymeleaf]: https://www.cnblogs.com/laowangc/p/8884074.html