Thymeleaf

最新推荐文章于 2024-03-19 17:10:08 发布

Mephisto180502

最新推荐文章于 2024-03-19 17:10:08 发布

阅读量227

点赞数

分类专栏：前端控件

本文链接：https://blog.csdn.net/qq_33800083/article/details/103641428

版权

前端控件专栏收录该内容

8 篇文章 1 订阅

订阅专栏

开发传统Java WEB工程时，我们可以使用JSP页面模板语言，但是在SpringBoot中已经不推荐使用了。Thymeleaf是SpringBoot官方所推荐使用的。

Thymeleaf的特点

动静结合：Thymeleaf 在有网络和无网络的环境下皆可运行，它既可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
开箱即用：它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
多方言支持：Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。
与SpringBoot完美整合，SpringBoot提供了Thymeleaf的默认配置，并且为Thymeleaf设置了视图解析器，我们可以像以前操作jsp一样来操作Thymeleaf。代码几乎没有任何区别，就是在模板语法上有区别。

Thymeleaf 字面量

文本字面量

用单引号'...'包围的字符串为文字面量，表示单引号本身需要转义\'。

<p>
    Now you are looking at a <span th:text="'working web application'">template file</span>.
</p>

数字字面量

所见即所得，0,1,2,3…。

<p>The year is <span th:text="2013">1492</span>.</p>

boolean字面量

<div th:if="${user.isAdmin()} == false"> ...
<!-- false在花括号外面，解析识别由Thymleaf自身完成 -->

<div th:if="${user.isAdmin() == false}"> ...
<!-- false写在花括号里面，解析识别由OGNL或者SpringEL负责 -->

null字面量

<div th:if="${variable.something} == null">

字符串拼接

方式一：

<span th:text="'Welcome to our application, ' + ${user.name} + '!'">

方式二：

使用“|”减少了字符串的拼接

<span th:text="|当前是第${page}页，共${page}页|"></span>

三目运算符

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

基本运算和关系判断

算术运算：+ , - , * , / , %
关系比较: > , < , >= , <= ( gt , lt , ge , le )
相等判断：== , != ( eq , ne )

标准表达式语法

${...} 变量表达式

用于访问容器上下文环境中的变量,例如:

<span th:text="${information}">

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

选择表达式计算的是选定的对象 (th:object对象属性绑定的对象)，例如：

<div th:object="${session. user}" >
    Name: <span th: text=" *{firstName}" >Sebastian.
    Surname: <span th: text=" *{lastName}" >Pepper.
    Nationality: <span th: text=" *{nationality}" >Saturn.
</div>

#{...} 消息表达式

一般用于显示页面静态文本。将可能需要根据需求而整体变动的静态文本放在properties文件中,方便维护。通常与th:text属性一起使用。例如:

<!-- 新建 application.properties -->
<p th: text=" #{application. username}" >
<!-- 引用 application.properties 文件中的变量。 -->

@{...} 链接url表达式

用于链接。可以链接目录下的静态资源,也可以链接到后端请求处理接口,如:

<link th:src="@{/resources/css/bootstrap.min.css}" />
<li><a th:href="@{/forIndex}">首页</a></li>
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>

工具对象表达式#maps

常用于日期、集合、数组对象的访问。这些工具对象就像是java对象,可以访问对应java对象的方法来进行各种操作。

<div th:if="${#maps.size(stu)!=0}">
...do something...
</div>

常用的对象表达式总结如下：

#dates	java.util的实用方法。对象:日期格式、组件提取等。
#calendars	类似#dates，与java.util.Calendar对象对应
#numbers	格式化数字对象的工具方法
#strings	与java.lang.String对应的工具方法：contains、startsWith、prepending/appending等等
#objects	用于对象的工具方法
#bools	用于布尔运算的工具方法
#arrays	用于数组的工具方法
#lists	用于列表的工具方法
#sets	用于set的工具方法
#maps	用于map的工具方法
#aggregates	用于创建数组或集合的聚合的工具方法
#messages	用于在变量表达式内部获取外化消息的工具方法，与#{…}语法获取的方式相同
#ids	用于处理可能重复出现（例如，作为遍历的结果）的id属性的工具方法
#httpServletRequest	用于web应用中获取request请求的参数
#session	用于web应用中获取session的参数

常用属性

Thymeleaf语法的使用,都是通过在html页面的标签中添加th:xx关键字来实现模板套用,且其属性与html页面标签基本类似。

常用属性有:

th:attr	设置属性值。 <div th:attr="action=@{/subscribe}"> 多个属性一起设置，用逗号隔开。 <div th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" /> 设置自定义属性。 <div th:oldLogoUrl="#{logo}" />
th:each	对象遍历,用于遍历展示或者遍历录入。 <tr th:each="prod : ${prods}">
th:action	定义后台控制器路径,类似<form>标签的action属性。 <form th:action="@{/login}">...</form>
th:field	常用于表单字段绑定。通常与th:object一起使用。属性绑定、集合绑定。注意：th:field取值时，后台不能用reques.setAttribute(）来传值，可以用model.addAttribute()来传值；而这两种方式th:value都可以接收。 <input type="text" value="" th:field="*{username}"/>
th:object	用于表单数据对象绑定，将表单绑定到后台controller的一个JavaBean参数。常与th:field一起使用进行表单数据绑定。 @RequestMapping(value = "/login", method = RequestMethod.POST) public String login(@ModelAttribute(value = "loginBean") LoginBean loginBean，ModelMap model) {...} <form th:action="@{/login}" th:object="${loginBean}">...</form>
th:href	定义超链接,类似<a>标签的href 属性。 <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />
th:id	id声明,类似html标签中的id属性。 <div th:id = "stu+(${rowStat.index}+1)"></div>
th:if	条件判断。如果为否则标签不显示。 <div th:if="${rowStat.index} == 0">... do something ...</div>
th:include	布局标签,替换内容到引入的文件 <head th:include="layout :: htmlhead" th:with="title='xx'"></head> />
th:fragment	布局标签,定义代码片段,其它引用 <div th:fragment="alert">
th:src	用于外部资源引入,类似于<script>标签的src属性,常与@{}一起使用。 <script th:src="@{/resources/js/jquery/jquery.json-2.4.min.js}"
th:text	文本显示，用th:text不会解析html。 <td th:text="${username}" ></td>
th:utext	用th:utext会解析html，在页面中显示相应的样式
th:value	属性赋值，类似<option>标签的value属性。 <input th:value="${user.name}" />
th:inline	定义js脚本可以使用变量。 <script th:inline="javascript"> function form_submit() { var data={ userId:[[${userId}]], //js引用后端传来的值 password:$("#password").val(), }
th:remove	用于移除标签。 <a th:remove="${status}!=0?all:none" >未提交</a> 其中th:remove的参数有如下几种： all 删除当前标签和其内容和子标签 body 不删除当前标签，但是删除其内容和子标签 tag 删除当前标签，但不删除子标签 all-but-first 删除除第一个子标签外的其他子标签 none 啥也不干
th:style	用于设置标签style。 th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"
th:onclick	用于设置点击事件。 <button th:οnclick="'getCollect()'"></button>

Thymeleaf 遍历

遍历表格

<tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
　　<td th:text="${prod.name}">Onions</td>
　　<td th:text="${prod.price}">2.41</td>
　　<td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>

若不指定状态变量，Thymeleaf会默认生成一个名为“变量名Stat”的状态变量：

<tr th:each="prod : ${prods}" th:class="${prodStat.odd}? 'odd'">
　　<td th:text="${prod.name}">Onions</td>
　　<td th:text="${prod.price}">2.41</td>
　　<td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>

遍历下拉框

model.addObject("supplierTypeList",sysCommonTypeInfoBoDao.selSysCommonTypeInfo2List(sysCommonTypeInfoBo));

<select id="supTypeSelect">
    <option value="">请选择供应商分类</option>
    <option th:each="supplierType : ${supplierTypeList}" th:attr="value=${supplierType.id}" th:text="${supplierType.name}"></option>
</select>

遍历状态：

当前遍历索引，从0开始，index属性
当前遍历索引，从1开始，count属性
总元素数量，size属性
每一次遍历的iter变量,current属性
当前遍历是even还是odd，even/odd布尔属性
当前遍历是第一个，first布尔属性
当前遍历是最后一个，last布尔属性

Thymeleaf 条件运算

th:if

th:if 不只运算布尔条件，它对以下情况也运算为true:

值不为null

　　值为boolean且为true
　　值为数字且非0
　　值为字符且非0
　　值是字符串且不是：“false”,“off”，“no”
　　值不是boolean、数字、字符、字符串

如果值为null，则th:if运算结果为false

th:unless

相当于if 中的 else，使用 if 和 unless 可以实现状态的判断显示达到 if-else 逻辑判断的效果

<td th:if="${test.Score} gt 0 and ${test.Score} lt 60">不及格</td>
<td th:unless="${test.Score} gt 0 and ${test.Score} lt 60">及格</td>

th:switch 和 th:case

如果要实现if else if else 判断表达式，在thymeleaf要使用th:switch代替，th:case="*"表示默认，需写在最后

<div th:switch="${user.role}">
　　<p th:case="'admin'" >User is an administrator</p>
　　<p th:case="#{roles.manager}" >User is a manager</p>
    <p th:case="*" >User is the manager</p>
</div>

Thymeleaf 常用操作整理

在js中获取后台数据

<script th:inline="javascript">
    var tag = [[${obj.tag}]];
</script>

select下拉框预选中

<select th:value="${questionBean.review}" id="review" name="review" class="form-control">
     <option th:selected="${questionBean.review}=='0'" value="0">已发布</option>
     <option th:selected="${questionBean.review}=='1'" value="1">审核中</option>
     <option th:selected="${questionBean.review}=='2'" value="2">通过审核</option>
     <option th:selected="${questionBean.review}=='3'" value="3">未通过审核</option>
</select>