SpringBoot默认模板引擎Thymeleaf

官网地址

https://www.thymeleaf.org/index.html

image.png

概念：

Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎，能够处理Html，xml，JavaScript，css甚至存文本。

Thymeleaf 在提供一个优雅的，高度可维护的创建模式模板的方式。为了实现这一目标，Thymeleaf建立在自然模板的概念上，将其逻辑注入到模板文件中，不会影响模板设计原型。

Thymeleaf从设计之初就遵守web标准-特别是HTml5标准，如果需要，Thymeleaf允许创建完全符合HTML5验证标准模板。

SpringBoot 体系中默认推荐Thymeleaf作为前端页面模板，并且SpringBoot2.0中默认使用Thymeleaf3.0，性能提升幅度很大。

Thymeleaf特点

1 .Thymeleaf不管是否连接服务器的环境下皆可运行
2 .开箱即用。支持标准的方言和Spring方言，可以直接套用模板实现JSTL，OGNL表达式效果。

Thymeleaf提供Spring标准方言和一个与SpringMVC完美集成的可选模块，可以快速的实现表单绑定，属性编辑器，国际化等功能

SpringBoot集成Thymeleaf

1.在pom.xml导入依赖

        
            org.springframework.boot
            spring-boot-starter-thymeleaf

2.application.properties配置Thymeleaf

# thymeleaf 缓存,生产环境要放开
spring.thymeleaf.cache=false

3.spring boot对Thymeleaf的自动配置支持
org.springframework.boot.autoconfigure.thymeleaf

image.png

4.新建HTML文件




    
    Title




    这是静态标签文字

Thymeleaf语法

th属性

官方文档地址
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#setting-value-to-specific-attributes

image.png

文本属性

文本拼接： |内容|
文本信息： th:text , th:id , th:value

条件属性

if 判断： th:if
unless判断： th:unless
switch判断：th:switch th:case


baidu_1


baidu_2



baidu_3




    18岁
    19岁
    20岁
    未知

循环属性 th:each

th:each迭代list
th:each的内置属性
th:tach迭代map




    
    Title



常用的方式

    
        名字
        年龄
        密码
    
    
        
        
        
    


list 详细信息

    
        名字
        年龄
        密码
    
    
        
        
        
        
    



遍历map

    
        
        
    


遍历map的value是一个user对象

    
        
        
        
        
    


遍历map的value是一个list user对象

表达式语法

1 .简单表达式：
变量表达式： ${...}
选择变量表达式： *{...}
消息表达： #{...}
链接URL表达式： @{...}
片段表达式： ~{...}

2 . 文字
文本文字：'one text'，'Another one!'，...
号码文字：0，34，3.0，12.3，...
布尔文字：true，false
空文字： null
文字标记：one，sometext，main，...

3 .文字操作：
字符串串联： +
文字替换： |The name is ${name}|

4 .算术运算：
二元运算符：+，-，*，/，%
减号（一元运算符）： -

5 .布尔运算：
二元运算符：and，or
布尔否定（一元运算符）： !，not

6 .比较和平等：
比较：>，<，>=，<=（gt，lt，ge，le）
等号运算符：==，!=（eq，ne）

7 .条件运算符：
如果-则： (if) ? (then)
如果-则-否则： (if) ? (then) : (else)
默认： (value) ?: (defaultvalue)

8 .特殊令牌：
无操作： _

${...} ：

变量表达式，也叫SpringEL表达式，OGNL
1 .用于调用各种属性和方法；
2 .获取对象的属性和方法
3 .可以使用ctx,vars,locale,request,response,session,servletContext内置对象
4 .可以使用dates,numbers,strings,objects,arrays,lists,sets,maps等内置方法

@{...} ：

链接表达式，不管是静态资源的引用，form表单的请求，凡是链接都可以用@{..}
1 .无参： @{/xxx}
2 .有参： @{/xxx(k1=v1,k2=v2)} , 对应url结构：xxx?k1=v1&k2=v2
3 .引入本地资源：@{/项目本地的资源路径}
4 .引入外部资源： @{/webjars/资源在jar包中的路径}











中文
English

webjars 网站资源：https://www.webjars.org/

image.png

例如：集成bootstrap


        
            org.webjars
            bootstrap
            4.5.0

image.png

#{...} :消息表达式：

用于从消息源中提取消息内容实现国际化
1 .语法与变量表达式相比多了个获取参数的方式
2 .消息源主要是properties文件

~{...} 代码块表达式：

把某一段定义好的代码插入到另一个页面中，一般用于定义出一套通用的header或者footer

语法：~{templatename::fragmentname} 或者 ~{templatename::#id} , 如果省略templatename,它将在当前页面进行寻找指定的代码块，注意，~{} 可以省略；
1 . templatename: 模板名，定义模板的写法：

2 . fragmentname: 片段名，引入模板的写法：

3 .id: HTML 的id选择器，使用时要在前面加上#号，不支持class选择器

代码表达式需要配合th属性（th:insert,th:replace,th:include）一起使用功能：
1 .th:insert : 将代码块整个插入到使用了 th:insert 的HTML标签中
2 .th:replace : 将代码块段整个替换使用了 th:replace 的HTML标签中
3 . th:include : 将代码块片段包含的内容插入到使用了 th:include 的HTML标签

*{...} 选择变量表达式：

是另一种类似 ${...},在某些时候，两者是等价的，选择变量表达式在执行时是在选择的对象上求解（使用th:object来选择对象），而$ {...} 是在上下文的变量Map上求解。
两者获取对象里面属性的方式
两者混用的条件

基础对象

官方文档：4.2 基础对象
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#expression-basic-objects
在上下文变量上评估OGNL表达式时，某些对象可用于表达式，以提高灵活性。这些对象将以#符号开头（按照OGNL标准）被引用：

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

param:获取请求参数
session:访问session属性
application:获取应用程序 Servlet上下文属性
param,session,application都有方法：size(),isEmpty(),containsKey(), .key




    
    base object



base object 上下文 ctx保存了所有的信息

 ctx 获取map 数据


 vars上下文对象 和 ctx 内容差不多


 获取 local区域对象 



 param 使用 



 session 使用

常用工具类

除了这些基本对象之外，Thymeleaf将为我们提供一组实用程序对象，这些对象将帮助我们在表达式中执行常见任务。

#execInfo：有关正在处理的模板的信息。
#messages：用于获取变量表达式内的外部化消息的方法，与使用＃{…}语法获得消息的方法相同。
#uris：用于转义部分URL / URI的方法
#conversions：用于执行已配置的转换服务（如果有）的方法。
#dates：java.util.Date对象的方法：格式化，组件提取等。
#calendars：类似于#dates，但用于java.util.Calendar对象。
#numbers：格式化数字对象的方法。
#strings：String对象的方法：包含，startsWith，前置/附加等。
#objects：一般对象的方法。
#bools：布尔值评估的方法。
#arrays：数组方法。
#lists：列表方法。
#sets：套方法。
#maps：地图方法。
#aggregates：用于在数组或集合上创建聚合的方法。
#ids：用于处理可能重复的id属性的方法（例如，由于迭代的结果）。

表达工具对象官方文档：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-b-expression-utility-objects

image.png

详细介绍用法：

image.png

内联标签 body 内的内联

官方文档：
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#inlining

image.png

内联表达式：
[[...]] 或 [(...)]
[[...]]对应于th:text（即结果将被HTML转义）
[(...)]对应于th:utext 且将不执行任何HTML转义


hello ,[[|welcome   ,${text}|]]

[('welcome ,'+${text})]

[('welcome ')]

Js内联

JavaScript中使用内联标签（默认不支持）：
在script 标签上引入对内联的支持：

官方文档：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining

image.png

在JavaScript中实现前后端分离（即JavaScript自然模板）：
Thymeleaf 的目标是希望前后端分离，即同一个html文件前端开发以静态原型打开，看到的是他们的内容，而后端开发打开通过服务器，看到是动态的数据；
直接在数据上使用js注释实现前后端分离：

在JavaScript中自动进行对象序列化：
内联表达式的计算结果不限于字符串，它能自动将后台的数据序列化为JavaScript对象。
js开启内联标签模式只能在html文件内部的JavaScript代码中，不能在引入外部的JavaScript文件中操作。

CSS内联

官方文档：
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#css-inlining

image.png

在CSS中使用内联标签（默认不支持）：
在style标签引入对内联的支持：
在css中，因为css自然模板，所以不能在css中添加注释说明，Thymeleaf会将它们当成模板处理。
CSS内联标签模式只能在html文件内部的style标签中，不能在引入外部关联的css文件中操作。

在style标签里书写 [[]],[()]来获取后端数据

在CSS中实现前后端分离（即CSS自然模板）：
CSS内联也允许 //使用 p 标签

hello china

SpringBoot默认模板引擎Thymeleaf