thymleaf的使用

th:*属性

  • 标准表达式通常需要搭配th:*属性来使用，这样Thymeleaf引擎才能正确的解析出表达式的结果。

  • 使用文本

th:text,在标签中显示表达式的值的文本内容

<span th:text="${message}"></span>

使用外部化文本内容：

<span th:text="${message}">Welcome to BeiJing!</span>

当它作为静态文件直接允许时，浏览器会自动忽略不能识别的 th:text 标签，而显示 span 标签体的文本内容。

当它作为模板文件直接运行在服务器时， th:text 属性标签的值 会直接替换 span 里的文本内容。

th:utext

th:text和th:utext的区别在于：th:text默认会对含有HTML标签的内容进行转义。th:utext则不会对含有HTML标签的内容进行转义。

假设：后台String message = “Welcome to BeiJing!”

<span th:text="${message}"></span>      th:text 结果：<b>Welcome to BeiJing!</b>

<span th:utext="${message}"></span>		th:utext 结果：Welcome to BeiJing!
  • 设置属性值

其中th:中的可以是HTML5支持的任意属性名称，甚至这些属性名称可以是自定义的

一般属性,属性值为正常类型

<a th:href="@{https://www.google.com.hk}">谷歌一下你能知道的更多</a>
<link rel="stylesheet" type="text/css" th:href="@{/css/easyui/themes/color.css}">
<script type="text/javascript" th:src="@{/js/weui.min.js}"></script>
<!-- <div item-id="1001">Welcome to BeiJing!</div> -->
<div th:item-id="${user.id}">Welcome to BeiJing!</div>
<div th:class='box'></div>
<input th:value='123' />

布尔属性, 如readonly、checked、selected等。它们若存在那就意味着值为true。

<input type="checkbox" name="rememberme" checked /> 记住我
<input type="radio" name="sex" value="male" checked> 男
<input type="radio" name="sex" value="female"> 女
<input type="text" name="appId" value="J123654" readonly>
<select>
 <option selected>北京</option>
 <option>上海</option>
 <option>广州</option>
 <option>深圳</option>
</select>

<input type="checkbox" name="rememberme" ch:checked="${rememberme}" /> 记住我

th:* - *,同时为标签的多个不同属性设置相同的一个值，可以使用th:-的语法

<img src="logo.png" th:alt-title="LOGO图片">

它相当于：

<img src='logo.png' th:alt="LOGO图片" th:title="LOGO图片" />

th:attrappend & th:attrprepend,可以将表达式的结果分别追加到指定的属性值之后和之前。

<!-- <button class="btn enable">购买</button> -->
<button class="btn" th:attrappend="class=${outOfStock} ? ' enable' : ' disable'">购买</button>
<!-- <button class="enable btn">购买</button> -->
<button class="btn" th:attrprepend="class=${outOfStock} ? 'enable ' : 'disable '">购买</button>

Thymeleaf还提供了两个常用的具体附加属性th:classappend=“…“和th:styleappend=””。它们分别用来代替th:attrappend=“class=…” 和th:attrappend=“style=…”。

<!-- <button class="btn enable">购买</button> -->
<button class="btn" th:classappend="${outOfStock} ? ' enable' : ' disable'">购买</button>
  • 遍历

th:each=“自定义的元素变量名称 : ${集合变量名称}” ：

<div>
    <spn>你所在城市：</spn>
    <select name="mycity">
        <option th:each="city : ${cities}" th:text="${city.name}"></option>
    </select>
</div>

th:each提供了一个用于跟踪迭代的状态变量，它包含以下几个属性

属性 类型 描述
index int 当前迭代的索引，从0开始
count int 当前迭代的计数，从1开始
size int 集合中元素的总个数
current int 当前元素的对象
even boolean 当前迭代的计数是否是偶数
odd boolean 当前迭代的计数是否是奇数
first boolean 当前迭代的计数是否是奇数
last boolean 当前元素是否是集合的最后一个元素

状态变量的使用语法：th:each=“自定义的元素变量名称, 自定义的状态变量名称:${集合变量名称}”

<div>
    <spn>所在城市：</spn>
    <select name="mycity">
        <option th:each="city, status : ${cities}" th:text="${city.name}" th:item-index="${status.count}">
        </option>
    </select>
</div>

管什么时候，Thymeleaf始终会为每个th:each创建一个状态变量，默认的状态变量名称就是自定义的元素变量名称后面加 Stat字符串组成

<div>
    <spn>所在城市：</spn>
    <select name="mycity">
 		<option th:each="city : ${cities}" th:text="${city.name}" th:item-index="${cityStat.count}">
 		</option>
 	</select>
</div>
  • 条件判断

th:if,当表达式的评估结果为真时则显示内容，否则不显示

<a th:href="@{/user/order(uid=${user.id})}" th:if="${user != null}">我的订单</a>

简写

<a th:href="@{/user/order(uid=${user.id})}" th:if="${user}">我的订单</a>

当上述表达式的值不为null时

如果表达式的值是一个布尔类型，且值为true评估为真，否则为假；
如果表达式的值是一个数字类型，且值为非0评估为真，否则为假；
如果表达式的值是一个字符类型，且值为非0评估为真，否则为假；
如果表达式的值是一个字符串类型，且值为非“false”、“off”、“no”评估为真，否则为假；
如果表达式的值是一个字符串类型，且值为非“false”、“off”、“no”评估为真，否则为假；

当上述表达式的值为null时，评估为假。

th:unless,与th:if相反,当表达式的评估结果为假时则显示内容，否则不显示

<a th:href="@{/user/order(uid=${user.id})}" th:unless="${user == null}">我的订单</a>

th:switch,多路选择语句，它需要搭配th:case来使用

<div th:switch="${user.role}">
    <p th:case="admin">管理员</p>
    <p th:case="user">普通用户</p>
</div>

-模板布局

th:fragment,定义一段公用的代码片段

templates/footer.html文件下

<div th:fragment="base">© 2017 fanlychie</div>

使用th:fragment来定义一个代码片段时，它允许你指定一组参数

<font color='red'>th:fragment="fragmentname(arg1, arg2, ...)"</font>
<div th:fragment="crumbs(parent, child)">
 <span th:text="|${parent} > ${child}|"></span>
</div>
<!-- 用户中心 > 我的订单 -->
<div th:replace="::crumbs('用户中心', '我的订单')"></div>

类选择器、ID选择器等定义一段公用的代码片段

templates/footer.html文件下

<div id="base">© 2017 fanlychie</div>

templates/welcome.html文件中引用footer.html中id=“base”片段的方式为：

<div th:insert="footer :: #base"></div>

th:insert,将公用的代码片段插入到标签体内

文件中引用footer.html中base代码片段的方式为

templates/welcome.html文件下

<div th:insert="~{footer :: base}"></div>

其中，~{ }是可选的，我们可以去掉这层的包裹

<div th:insert="footer :: base"></div>

如果footer.html与welcome.html不在同级目录，如templates/commons/footer.html

<div th:insert="@{commons/footer} :: base"></div>

th:replace,将公用的代码片段直接替换标签体内容

<!-- <div><div id="base">© 2017 fanlychie</div></div> -->
<div th:insert="footer :: base"></div>
<!-- <div id="base">© 2017 fanlychie</div> -->
<div th:replace="footer :: base"></div>

th:assert,断言，它可以同时指定多个表达式，每个表达式的结果评估值必须为true，否则它将会抛出一个异常。

语法：th:assert=“expression1, expression2…” ：

<div th:replace="::crumbs(${parentMenuName}, ${childMenuName})" th:assert="${!#strings.isEmpty(parentMenuName), !#strings.isEmpty(childMenuName)}">
</div>
  • 定义局部变量

th:with,可以定义局部变量

<p th:with="name='fanlychie'">
    <span th:text="${name}"></span>
</p>

同时定义多个局部变量时，用英文,号分隔开

<p th:with="name=${user.name},age={user.age}">
</p>