Thymeleaf

概述

模板引擎，类似于JSP

动静结合，不破坏文档结构

//jsp
<span>${username}</span>

//thymeleaf
<span th:text="${username}">tom</span>

Thymeleaf可以运行在服务器里面，也可以本地运行，它既可以让美工在浏览器查看页面的静态效果，也可以让开发人员在服务器端看动态数据渲染之后的效果。
Thymeleaf是一个java的模板引擎，是用来显示数据的，Thymeleaf有一个要求，不能直接通过请求访问到Thymeleaf，Thymeleaf在用的时候，要访问Thymeleaf，必须得经过controller，由controller跳转到Thymeleaf，它才能得到一个正确的显示。
thymeLea支持Spring Expression Language语言作为方言，也就是SpEL，在学习JSP时我们对EL表达式都有一定的认识了，SpEL是可以用于Spring中的一种EL表达式。
多方言支持：它提供了 Thymeleaf 标准和 Spring 标准两种方言，可以直接套用模板实现 JSTL、 OGNL 表达式；必要时，开发人员也可以扩展和创建自定义的方言。
与 SpringBoot 完美整合：SpringBoot 为 Thymeleaf 提供了的默认配置，并且还为 Thymeleaf 设置了视图解析器，因此 Thymeleaf 可以与 Spring Boot 完美整合。

使用

导入起步依赖

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

取消缓存
```
spring.thymeleaf.cache=false
```
创建页面
- 在src/main/resources/templates下添加html页面，如：index.html，在idea中，可以直接添加thymeleaf

从上下文中取值

<p th:text="${name}"></p>

@RequestMapping("test1")
    public String test1(Model model) {
        model.addAttribute("title", "<h1>标题</h1>");
        
        return "index";
    }
    
//index.html	
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <p th:utext="${title}"></p>
</body>
</html>
<script>

</script>

th:text:进行文本替换，不会解析html（页面与后台设置值一致）
th:utext:进行文本替换，会解析html（html页面源码与后台设置值一致）

拼接字符串（文本替换）

<p th:text="|欢迎，${name}!!!|">marry</p>

选择表达式

<div th:object="${dept}">
           <p th:text="*{deptno}"></p>
           <p th:text="*{dname}"></p>
           <p th:text="*{loc}"></p>
</div>

<p th:if="${user.isVip}" th:text="会员"></p>

each

<table border="1" width="400">
       <tbody >
           <tr th:each="dept,status : ${depts}" th:object="${dept}">
               <td th:text="*{deptno}"></td>
               <td th:text="*{dname}"></td>
               <td th:text="*{loc}"></td>
               <td th:text="${status.index}"></td>
               <td th:text="${status.count}"></td>
               <td th:text="${status.first}"></td>
               <td th:text="${status.last}"></td>
               <td th:text="${status.even}"></td>
               <td th:text="${status.odd}"></td>
               <td th:text="${status.size}"></td>
           </tr>
       </tbody>
   </table>

switch

<p th:switch="${sex}">
       <span th:case="1">男</span>
       <span th:case="2">女</span>
       <span th:case="*">默认</span>
   </p>

引入样式表

/resources/static/css/style1.css

<link rel="stylesheet" th:href="@{/css/style1.css}">

javascript

<script th:inline="javascript" type="text/javascript">
       alert([[${sex}]]);
</script>

动态添加样式

<style>
    .active{
        color:blue;
    }
</style>

<p th:text="${sex}" th:classappend="${sex=='3'}?'active'"></p>

日期格式化

<p th:text="${#dates.format(hiredate,'yyyy-MM-dd HH:mm:ss')}"></p>

生成数值序列

<a href="#" th:each="num : ${#numbers.sequence(1,10)}" th:text="| ${num} |"></a>

得到请求参数

//请求参数为数组
<p th:text="${param.username[1]}"></p>

<p th:text="${param.size()}"></p>
<p th:text="${param.isEmpty()}"></p>
<p th:text="${param.containsKey('username')}"></p>

从 HttpServletRequest 和 HttpSession中取值

<p th:text="${#request.getAttribute('msg')}"></p>
<p th:text="${#session.getAttribute('msg')}"></p>

使用外部js

<script type="text/javascript" th:src="@{/js/script1.js}"></script>

得到应用程序上下文：contextPath

<p th:text="${#request.contextPath}"></p>
<p th:text="${#request.getContextPath()}"></p>

组件

/resources/templates/component/coms.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
   <div th:fragment="com1">
           div1
   </div>
   
   <div id="com2">
           div2
   </div>
</body>
</html>

引用组件：

//~{}:片段表达式
<div th:insert="~{/component/coms::com1}"></div>

<div th:replace="~{/component/coms::com1}"></div>

<div th:replace="~{/component/coms::#com2}"></div>

Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。它与 JSP，Velocity，FreeMaker 等模板引擎类似，也可以轻易地与 Spring MVC 等 Web 框架集成。与其它模板引擎相比，Thymeleaf 最大的特点是，即使不启动 Web 应用，也可以直接在浏览器中打开并正确显示模板页面。

1. Thymeleaf 简介

Thymeleaf 是新一代 Java 模板引擎，与 Velocity、FreeMarker 等传统 Java 模板引擎不同，Thymeleaf 支持 HTML 原型，其文件后缀为“.html”，因此它可以直接被浏览器打开，此时浏览器会忽略未定义的 Thymeleaf 标签属性，展示 thymeleaf 模板的静态页面效果；当通过 Web 应用程序访问时，Thymeleaf 会动态地替换掉静态内容，使页面动态显示。

Thymeleaf 通过在 html 标签中，增加额外属性来达到“模板+数据”的展示方式，示例代码如下。

<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><!--th:text 为 Thymeleaf 属性，用于在展示文本--><h1 th:text="迎您来到Thymeleaf">欢迎您访问静态页面 HTML</h1></body></html>

当直接使用浏览器打开时，浏览器展示结果如下。

欢迎您访问静态页面HTML

当通过 Web 应用程序访问时，浏览器展示结果如下。

迎您来到Thymeleaf

Thymeleaf 的特点

Thymeleaf 模板引擎具有以下特点：

动静结合：Thymeleaf 既可以直接使用浏览器打开，查看页面的静态效果，也可以通过 Web 应用程序进行访问，查看动态页面效果。
开箱即用：Thymeleaf 提供了 Spring 标准方言以及一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。
多方言支持：它提供了 Thymeleaf 标准和 Spring 标准两种方言，可以直接套用模板实现 JSTL、 OGNL 表达式；必要时，开发人员也可以扩展和创建自定义的方言。
与 SpringBoot 完美整合：SpringBoot 为 Thymeleaf 提供了的默认配置，并且还为 Thymeleaf 设置了视图解析器，因此 Thymeleaf 可以与 Spring Boot 完美整合。

2. Thymeleaf 语法规则

在使用 Thymeleaf 之前，首先要在页面的 html 标签中声明名称空间，示例代码如下。

xmlns:th="http://www.thymeleaf.org"

在 html 标签中声明此名称空间，可避免编辑器出现 html 验证错误，但这一步并非必须进行的，即使我们不声明该命名空间，也不影响 Thymeleaf 的使用。

Thymeleaf 作为一种模板引擎，它拥有自己的语法规则。Thymeleaf 语法分为以下 2 类：

标准表达式语法
th 属性

2.1 标准表达式语法

Thymeleaf 模板引擎支持多种表达式：

变量表达式：${...}
选择变量表达式：*{...}
链接表达式：@{...}
国际化表达式：#{...}
片段引用表达式：~{...}

2.1.1 变量表达式

使用 ${} 包裹的表达式被称为变量表达式，该表达式具有以下功能：

获取对象的属性和方法
使用内置的基本对象
使用内置的工具对象

① 获取对象的属性和方法

使用变量表达式可以获取对象的属性和方法，例如，获取 person 对象的 lastName 属性，表达式形式如下：

${person.lastName}

② 使用内置的基本对象

使用变量表达式还可以使用内置基本对象，获取内置对象的属性，调用内置对象的方法。 Thymeleaf 中常用的内置基本对象如下：

#ctx ：上下文对象；
#vars ：上下文变量；
#locale：上下文的语言环境；
#request：HttpServletRequest 对象（仅在 Web 应用中可用）；
#response：HttpServletResponse 对象（仅在 Web 应用中可用）；
#session：HttpSession 对象（仅在 Web 应用中可用）；
#servletContext：ServletContext 对象（仅在 Web 应用中可用）。

例如，我们通过以下 2 种形式，都可以获取到 session 对象中的 map 属性：

${#session.getAttribute('map')}${session.map}

③ 使用内置的工具对象

除了能使用内置的基本对象外，变量表达式还可以使用一些内置的工具对象。

strings：字符串工具对象，常用方法有：equals、equalsIgnoreCase、length、trim、toUpperCase、toLowerCase、indexOf、substring、replace、startsWith、endsWith，contains 和 containsIgnoreCase 等；
numbers：数字工具对象，常用的方法有：formatDecimal 等；
bools：布尔工具对象，常用的方法有：isTrue 和 isFalse 等；
arrays：数组工具对象，常用的方法有：toArray、length、isEmpty、contains 和 containsAll 等；
lists/sets：List/Set 集合工具对象，常用的方法有：toList、size、isEmpty、contains、containsAll 和 sort 等；
maps：Map 集合工具对象，常用的方法有：size、isEmpty、containsKey 和 containsValue 等；
dates：日期工具对象，常用的方法有：format、year、month、hour 和 createNow 等。

例如，我们可以使用内置工具对象 strings 的 equals 方法，来判断字符串与对象的某个属性是否相等，代码如下。

${#strings.equals('编程帮',name)}

2.1.2 选择变量表达式

选择变量表达式与变量表达式功能基本一致，只是在变量表达式的基础上增加了与 th:object 的配合使用。当使用 th:object 存储一个对象后，我们可以在其后代中使用选择变量表达式（*{...}）获取该对象中的属性，其中，“*”即代表该对象。

<div th:object="${session.user}" >    
    <p th:text="*{fisrtName}">firstname</p>
</div>

th:object 用于存储一个临时变量，该变量只在该标签及其后代中有效，在后面的内容“th 属性”中我详细介绍。

2.1.3 链接表达式

不管是静态资源的引用，还是 form 表单的请求，凡是链接都可以用链接表达式（@{...}）。

链接表达式的形式结构如下：

无参请求：@{/xxx}
有参请求：@{/xxx(k1=v1,k2=v2)}

例如使用链接表达式引入 css 样式表，代码如下。

<link href="asserts/css/signin.css" th:href="@{/asserts/css/signin.css}" rel="stylesheet">

2.1.4 国际化表达式

消息表达式一般用于国际化的场景。结构如下。

th:text="#{msg}"

注意：此处了解即可，我们会在后面的章节中详细介绍。

2.1.5 片段引用表达式

片段引用表达式用于在模板页面中引用其他的模板片段，该表达式支持以下 2 中语法结构：

推荐：~{templatename::fragmentname}
支持：~{templatename::#id}

以上语法结构说明如下：

templatename：模版名，Thymeleaf 会根据模版名解析完整路径：/resources/templates/templatename.html，要注意文件的路径。
fragmentname：片段名，Thymeleaf 通过 th:fragment 声明定义代码块，即：th:fragment="fragmentname"
id：HTML 的 id 选择器，使用时要在前面加上 # 号，不支持 class 选择器。

2.2 th 属性

Thymeleaf 还提供了大量的 th 属性，这些属性可以直接在 HTML 标签中使用，其中常用 th 属性及其示例如下表。

属性	描述	示例
th:id	替换 HTML 的 id 属性	`<input id="html-id" th:id="thymeleaf-id" />`
th:text	文本替换，转义特殊字符	`<h1 th:text="hello，bianchengbang" >hello</h1>`
th:utext	文本替换，不转义特殊字符	`<div th:utext="'<h1>欢迎来到编程帮！</h1>'" >欢迎你</div>`
th:object	在父标签选择对象，子标签使用 *{…} 选择表达式选取值。没有选择对象，那子标签使用选择表达式和 ${…} 变量表达式是一样的效果。同时即使选择了对象，子标签仍然可以使用变量表达式。	`<div th:object="${session.user}" > <p th:text="*{fisrtName}">firstname</p></div>`
th:value	替换 value 属性	`<input th:value = "${user.name}" />`
th:with	局部变量赋值运算	`<div th:with="isEvens = ${prodStat.count}%2 == 0" th:text="${isEvens}"></div>`
th:style	设置样式	`<div th:style="'color:#F00; font-weight:bold'">编程帮 www.biancheng.net</div>`
th:onclick	点击事件	`<td th:onclick = "'getInfo()'"></td>`
th:each	遍历，支持 Iterable、Map、数组等。	`<table> <tr th:each="m:${session.map}"> <td th:text="${m.getKey()}"></td> <td th:text="${m.getValue()}"></td> </tr></table>`
th:if	根据条件判断是否需要展示此标签	`<a th:if ="${userId == collect.userId}">`
th:unless	和 th:if 判断相反，满足条件时不显示	`<div th:unless="${m.getKey()=='name'}" ></div>`
th:switch	与 Java 的 switch case语句类似通常与 th:case 配合使用，根据不同的条件展示不同的内容	`<div th:switch="${name}"> <span th:case="a">编程帮</span> <span th:case="b">www.biancheng.net</span></div>`
th:fragment	模板布局，类似 JSP 的 tag，用来定义一段被引用或包含的模板片段	`<footer th:fragment="footer">插入的内容</footer>`
th:insert	布局标签；将使用 th:fragment 属性指定的模板片段（包含标签）插入到当前标签中。	`<div th:insert="commons/bar::footer"></div>`
th:replace	布局标签；使用 th:fragment 属性指定的模板片段（包含标签）替换当前整个标签。	`<div th:replace="commons/bar::footer"></div>`
th:selected	select 选择框选中	`<select> <option>---</option> <option th:selected="${name=='a'}"> 编程帮 </option> <option th:selected="${name=='b'}"> www.biancheng.net </option></select>`
th:src	替换 HTML 中的 src 属性	`<img th:src="@{/asserts/img/bootstrap-solid.svg}" src="asserts/img/bootstrap-solid.svg" />`
th:inline	内联属性；该属性有 text、none、javascript 三种取值，在