springboot入门之Thymeleaf篇

最新推荐文章于 2024-05-30 08:15:00 发布

老志锅

最新推荐文章于 2024-05-30 08:15:00 发布

阅读量6.9k

点赞数 2

分类专栏： springboot 文章标签： springboot thymeleaf

springboot 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

Thymeleaf是一款模板引擎。她不同于一般地在模板里编码实现逻辑，而是利用了XML标签和属性，由模板引擎来执行这些DOM上预定义好的逻辑。

Thymeleaf入门

参考v2.1官方入门文档
参考v2.1集成spring入门文档

指定DOCTYPE

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-thymeleaf-4.dtd">

声明命名空间

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >

th属性

th:text把表达式对应的值代替标签内的文本。

 <p th:text="#{home.welcome}">welcome</p>

th:utext显示非转义文本。
th:object在父标签选择对象，子标签使用*{…}选择表达式选取值。没有选择对象，那子标签使用选择表达式和${…}变量表达式是一样的效果。同时即使选择了对象，子标签仍然可以使用变量表达式。

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

th:href修改a标签的href属性，使用@{…}URL表达式展示路径。URL参数也可以被写进表达式。

<a href="list.html" th:href="@{/users/list(id=${o.id},name=${o.name})}">查询</a>

th:with在当前标签范围内，创建一个本地变量(local variable)，并添加到上下文的变量map。

<div th:with="name=${user.name},nickname=${name}+'用户'">...

th:attr设置或者修改标签属性（不推荐），推荐使用th:value、th:action、th:class，相当于th:attr=”value=…”、th:attr=”action=…”等等。

<input type="submit" value="submit" th:attr="value=#{submit.text}" />

th:classappend、th:styleappend、th:attrappend、th:attrprepend属性前或者后添加属性值。

<tr class="r" th:attrappend="class=' odd'">
<tr class="r" th:classapend="'odd'">

th:checked、th:disabled、th:selected根据判断条件结果来决定是否给该checked等属性设定固定值。

<input type="checkbox" th:checked="${user.active}"/>

th:assert断言，支持逗号分隔的多条件。

<div th:assert="${var1},${var2}==2,#lists.isEmpty(${list})">

th:remove被处理时会被删除，支持参数all，tag，body，all-but-first，none。顾名思义，举例all-but-first应用场景。

<tbody th:remove="all-but-first">
<tr th:each="prod:${prods}">...</tr>
<tr><td>示例数据</td></tr>
</tbody>

th:if判断是否需要展示此标签，当null、0、’0’、’false’、’off’、’no’时为false，否则为true。

<div th:if="${user.isAdmin()}">...

th:unless与th:if相反
th:switch、th:case同java中的switch、case用法

<div th:switch="${user.role}">
    <p th:case="'admin'">administrator</p>
    <p th:case="*">other</p>
</div>

th:each迭代，支持Iterable、Map（迭代局部变量为Map.Entry）、数组、包含对象本身的单值对象。

<tr th:each="prod : ${prods}">
    <td th:text="${prod.name}">..</td>
</tr>

${prods}是迭代变量，prod是本地变量(local variable)，上例中在tr范围内有效。
th:each迭代状态变量，支持获取参数如index、count、size、current、even/odd、fisrt、last。

<tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}?'odd'">
    <td th:text="${iterStat.current.name}">...</td>
</tr>

隐式支持迭代局部变量+Stat作为本地变量，上例中不声明iterStat可直接使用prodStat。

th:fragment、th:include、th:replace引入或替换模板内容，支持引入其他模板文件的部分templatename::domselector（支持XPath语法或者css选择器）、templatename::fragmentname，也支持引入整个模板templatename或者本模板内的部分::domselector

<div th:include="footer::#{footer.admin}">
----------分割线----------
<div th:fragment="#{footer.admin}">
    copyright 2017
</div>

th:replace不同于th:include，它将引用模板的整个dom替换当前dom。th:include是将引用模板的dom下子元素引入到当前dom内。
fragment可引入类函数机制，同时函数参数可以不声明即使用。

<div th:fragment="frag(var1,var2)">
<div th:include="::flag(var1=${var1},var2=${var2})">

th:block作为属性容器，处理属性时会消失。

<table>
    <th:block th:each="r:${rs}">
        <tr><td th:text="${r.name}">1</td></tr>
    </th:block>
</table>

th:inline内联，即把表达式直接写进html文本而不是属性，支持模式text、javascript、none。

<!-- 同 <p th:text="'hello,'+${session.user.name}+'!'">abc</p> -->
<p th:inline="text">hello,[[${session.user.name}]]!</p>
<!-- 利用javascript注释/*..*/，保证静态或被thymeleaf处理后都能正确展示页面 -->
<script th:inline="javascript">
    var user = /*[[${session.user}]]*/ null;
</script>

data-{prefix}-{name}对html5更友好的语法，等同于{prefix}:{name}

<td data-th-text="${user.name}">...</td>

th:field作用于input、select、textarea。

<input type="text" th:field="*{date1}" />——id、name为date1，value绑定date1属性值
<ul>
    <li th:each="feat: ${allFeats}">
        <input type="checkbox" th:field="*{feats}" th:value="${feat}">——id为feats1类推，name为feats，value为当前遍历feat的值。feats属性的值所在input会加上checked属性。
        <lable th:for="${#ids.prev('feats')}"——for为feats字段当前遍历序列中最后一个id
            th:text="#{${'feature.'+feat}}">abc</label>
    </li>
</ul>
<select th:field="*{type}">
    <option th:each="type:${types}"
        th:value="${type}"
        th:text="#${'type.'+type}}">选项</option>
</select>

th属性优先级

在同一个标签内出现，处理的先后顺序

优先级	特征	属性
1	引入模板片段	th:include th:replace
2	片段迭代	th:each
3	条件判断	h:if th:unless th:switch th:case
4	本地变量定义	th:object th:with
5	本地变量定义	th:object th:with
6	通用属性修改	th:attr th:attrappend
7	文本修改	th:text th:utext
8	片段定义	th:fragment
9	片段移除	th:remove

标准表达式语法

支持以下类型：
变量表达式(OGNL表达式或EL表达式)：${...}
选择表达式：*{...}
文字国际化表达式：#{...}
URL表达式：@{...}
字面值：0，true，null，'123'
字符串连接符：+
文本替换：|...|，| the name is ${name}|
常用运算符：+，-，*，/，and，or，!，not，>，<，>=，<=，==，!=
操作符：(if)?(then)，(if)?(then):(else)，(value)?:(defaultValue)

springboot集成相关

application.properties下一些常用配置(org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties)：

#使用前检查模板是否存在
spring.thymeleaf.check-template=true
#模板url前缀
spring.thymeleaf.prefix=classpath:/templates/  
#模板url后缀
spring.thymeleaf.suffix=.html  
spring.thymeleaf.mode=HTML5  
spring.thymeleaf.encoding=UTF-8  
spring.thymeleaf.content-type=text/html    
spring.thymeleaf.cache=false

常用工具类对象

${#dates.format(date,'yyyy-MM-dd HH:mm:ss')}
${#numbers.formatDecimal(num,3,2)}
${#strings.isEmpty(name)}
${#objects.nullSafe(obj,default)}
${#bools.isTrue(obj)}
${#arrays.length(array)}
${#lists.size(list)}
${#maps.size(map)}
${#aggregates.sum(array)}
${#messages.msg('msgKey')}

常用技巧

使用数字占位符展示动态内容，参考java.text.MessageFormat类实现

home.welcome=welcome,{0}!
<p th:text="#{home.welcome(${session.user.name})}">
    welcome!
</p>

注释使用技巧1

<!--/* .........*/ -->注释，非常方便的原型化table。
<table>
    <tr th:each="x:${xs}"></tr>
    <!-- /* -->
    <tr>1</tr>
    <tr>2</tr>
    <!-- */ -->
</table>

注释使用技巧2

<!-- /*/ ..../*/-->，解析引擎跳过解析两个/*/中间的内容，原样输出。结合th:block体验尤佳。
<table>
    <!-- /*/ <th:block th:each="r:${rs}"> /*/ -->
        <tr><td th:text="${r.index}">1</td></tr>
    <!-- /*/ </th:block> /*/ -->
</table>

javascript内联调试技巧

<script th:inline="javascript">
/*[+
    var msg='这段话静态时被注释，而thymeleaf处理时会展示';
+]*/

/*[- */
    var msg='这段话静态时会展示，而thymeleaf处理时被移除';
/* -]*/
</script>