thymeleaf⼊门
thymeleaf
简介
Thymeleaf模版引擎使⽤
Thymeleaf开发传统Java WEB⼯程时，我们可以使⽤JSP页⾯模板语⾔，但是在SpringBoot中已经不推荐使⽤了。
SpringBoot⽀持如下页⾯模板语⾔:
Thymeleaf
FreeMarker
Velocity
Groovy
JSP
其中Thymeleaf是SpringBoot官⽅所推荐使⽤的，Thymeleaf是动静分离的，页⾯中的动态标签是需要传递有数据的时候才会渲染，不然就是原本默认的静态的样⼦。
模板引擎的作⽤就是取得数据并加以处理，最后显⽰出数据。
Thymeleaf与JSP的区别在于，不运⾏项⽬之前，Thymeleaf也是纯HTML（不需要服务端的⽀持）⽽JSP需要进⾏⼀定的转换，这样就⽅便前端⼈员进⾏独⽴的设计、调试。相较与其他的模板引擎，它有如下三个极吸引⼈的特点：
1.Thymeleaf 在有⽹络和⽆⽹络的环境下皆可运⾏，即它可以让美⼯在浏览器查看页⾯的静态效果，也可以让程序员在服务器查看带
数据的动态页⾯效果。这是由于它⽀持 html 原型，然后在 html 标签⾥增加额外的属性来达到模板+数据的展⽰⽅式。浏览器解释html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运⾏；当有数据返回到页⾯时，Thymeleaf 标签会动态地替换掉静态内容，使页⾯动态显⽰。
2.Thymeleaf 开箱即⽤的特性。它提供标准和spring标准两种⽅⾔，可以直接套⽤模板实现JSTL、 OGNL表达式效果，避免每天套模
板、改jstl、改标签的困扰。同时开发⼈员也可以扩展和创建⾃定义的⽅⾔。
3.Thymeleaf 提供spring标准⽅⾔和⼀个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功
能。 ----
使⽤教程
在使⽤thymele之前 先导⼊依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
在【resources】下的【templates】下新建⼀个【hello.html】⽂件，使⽤这个⽬录的原因是当你使⽤模板引擎时Spring Boot会默认
在src/main/resources/templates下去，当然你也可以修改这个默认路径。
HTML页⾯中，还需要引⽤th名字空间。
<html th="">
在yaml配置⽂件中可以设置开发时关闭thymeleaf缓存
spring.thymeleaf.cache=false
开发运⾏时，可以开启idea的资源更新
[外链图⽚转存失败，源站可能有防盗链机制，建议将图⽚保存下来直接上传(img-DAnYB0Mh-1616982388410) (springboot.assets/image-20210329091348190.png)]
thymeleaf常⽤表达式
简单表达式：
变量表达式： ${...}
选择变量表达式： *{...}
thymeleaf用法消息表达： #{...}
链接URL表达式： @{...}
⽚段表达式： ~{...}
⽂字
⽂本⽂字：'one text'，'Another one!'，...
号码⽂字：0，34，3.0，12.3，...
布尔⽂字：true，false
空⽂字： null
⽂字标记：one，sometext，main，...
⽂字操作：
字符串串联： +
⽂字替换： |The name is ${name}|
算术运算：
⼆元运算符：+，-，*，/，%
减号（⼀元运算符）： -
布尔运算：
⼆元运算符：and，or
布尔否定（⼀元运算符）： !，not
⽐较和平等：
⽐较：>，<，>=，<=（gt，lt，ge，le）
等号运算符：==，!=（eq，ne）
条件运算符：
如果-则： (if) ? (then)
如果-则-否则： (if) ? (then) : (else)
默认： (value) ?: (defaultvalue)
特殊令牌：
⽆操作： _
表达式使⽤案例
${x}将返回x存储在Thymeleaf上下⽂中或作为请求属性的变量。
[[${abc+'123'}]] ==[[${}]]== 是将控制器中abc的值在页⾯显⽰
model.addAttribute("abc","这是我的第⼀个thymeleaf页⾯");
渲染User对象的信息我们可以这样
<div>
<h2 text="${Username()}"></h2>
<p text="${Age()}"></p>
</div>
也可以将User定义为临时变量，接着使⽤ *{xxx} 就能取到值了
<div object="${user}">
<h2 text="*{username}"></h2>
<p text="*{age}"></p>
</div>
还可以不使⽤get的⽅式，直接使⽤属性名
<h2 text="${user.username}"></h2>
th:if
th:if 通过布尔值决定这个元素是否渲染
⽐如：
<p if="${user.isVip}">会员</p>
th:each
th:each 可以迭代循环出数据，前⾯我们User对象⾥⾯的tags是⼀个数组，我们来渲染⼀下
<ul>
<li each="tag:${Tags()}"text="${tag}"></li>
</ul>
状态变量在 th:each 属性中定义，并且包含以下数据：
当前的迭代索引，从0开始。这是 index 属性。
从1开始的当前迭代索引。这是 count 属性。
迭代变量中元素的总数。这是 size 财产。
每次迭代的iter变量。这是 current 财产。
当前迭代是偶数还是奇数。这些是 even/odd 布尔属性。
当前迭代是否是第⼀个。这是 first 布尔属性。
当前迭代是否为最后⼀次。这是 last 布尔属性。
th:switch
th:switch 选择语句
<div switch="${Sex()}">
<p case="'1'">男</p>
<p case="'2'">⼥</p>
<p case="*">默认</p>
</div>
url
如果在springboot中需要引⼊static⽬录下的静态资源可以使⽤ @{xxx} 的⽅式
<link href="@{/app.css}"rel="stylesheet">
JavaScript动态渲染
<script inline="javascript">
const user =/*[[${customer}]]*/{};
console.log(user);
</script>
同理css也是可以的
<style inline="css">
.isSelect{
color:/*[[${selectColor}]]*/red ;
}
</style>
碎⽚（组件）
⽇常开发中呢我们经常将有些可以复⽤的部分抽离出来新建⼀个fragment.html ,⼀个⽂件⾥⾯可以写多个碎⽚，使⽤ th:fragment来定义
<!DOCTYPE html>
<html lang="en"th="">
<footer fragment="com1"> this is com1
</footer>
<footer fragment="com2"> this is com2
</footer>
在其它页⾯中引⽤
<!--replace fragment表⽰fragment.html⽂件-->
<div replace="~{fragment::com1}"></div>
<!--insert fragment表⽰fragment.html⽂件->
<div insert="~{fragment::com2}"></div>
这两种⽅式的区别就是，replace会将新标签完全替换原本的标签，也就是说原本写 th:replace 属性的标签就不会渲染出来， insert 是往这个地⽅插⼊标签。
直接通过选择器使⽤
对于碎⽚，甚⾄可以不定义，我们再次添加⼀个碎⽚
<footer id="com2">
this is com2
</footer>
然后使⽤它
<div insert="~{fragment::#com2}"></div>
注释类型
在碎⽚⾥⾯，我们是可以使⽤控制传递的数据的，⽐如上⾯的User对象，但是开发⼯具在 component.html 页⾯中可能不能识别到User对象，我们可以打⼀个注释
<footer fragment="com1">
this is com1 <!--/*@thymesVar id="customer" type="com.igeekhom.cloud.customer.pojo.Customer"*/-->
<p text="${customer.name}">p</p></footer>
组件传递参数
组件也是可以传递数据的
<div fragment="com3(message)">
<p text="${message}"></p>
</div>
使⽤的时候
<div insert="~{ fragment::com3('传递数据')}"></div>
基本对象
#ctx：上下⽂对象
- ${#quest}
- ${#sponse}
- ${#ctx.session}
- ${#ctx.servletContext}
请求/会话属性
${}
${}
${#Attribute('xxx')}
⼯具类
在thymeleaf⾥⾯是可以直接使⽤⼀些Java的函数的，并且你可以通过传递参数的⽅式把⼀些⾃⼰写的⽅法传递给页⾯，在⾥⾯调⽤也是可以的⼀些可以直接的使⽤函数
#dates
#calendars
#strings
#numbers
#objects
#bools
#arrays
#lists
#sets
#maps
#aggregates
以⽇期格式化来举例
<!--⽇期格式化-->
<p text="${#dates.ateTime,'yyyy\-MM\-dd HH:mm')}"></p>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。