Thymeleaf 学习笔记

https://www.yiibai.com/thymeleaf 具体教程

目前只粘贴一些常见的用法

如何向使用`@{...}`表达式创建的URL添加参数？

1.一个参数 <a th:href="@{/order/details(id=3)}">   输出结果  <a href="/order/details?id=3">

2.多个参数 <a th:href="@{/order/details(id=3,action='show_all')}"> 输出结果  <a href="/order/details?id=3&action=show_all">

3.还可以使用正常参数的路径变量的形式包含参数，但在URL的路径中指定一个占位符:  <a th:href="@{/order/{id}/details(id=3,action='show_all')}">
　　输出结果   <a th:href="@{/order/{id}/details(id=3,action='show_all')}">

th:attr 为元素属性赋值一般不适用都是用 th:value th:action th:text th:src th:href

1.一个属性  <input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/> 
　　　　　　　　输出结果　　<input type="submit" value="¡Suscríbe!"/>

2.多个属性  <img src="../../images/gtvglogo.png" th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />
　　　　　　　　输出结果　　<img src="/gtgv/images/gtvglogo.png" title="Logo de Good Thymes" alt="Logo de Good Thymes" />

`th:attrappend`和`th:attrprepend`属性标准方言中还有两个特定的附加属性：`th:classappend`和`th:styleappend`属性类似上面的方言 th:attr

它们将评估结果附加（后缀）或前置（前缀）到现有属性值。

<input type="button" value="Do it!" class="btn" th:attrappend="class=${' ' + cssStyle}" />

如果您在cssStyle变量设置为的情况下处理此模板"warning"，您将获得：

<input type="button" value="Do it!" class="btn warning" />

使用th：each 迭代实现表格数据

　　　　<tr th:each="prod : ${prods}">
        <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>

状态变量在th:each属性中定义，包含以下数据：

当前迭代索引，从0开始。这是index属性。
当前迭代索引，从1开始。这是count属性。
迭代变量中元素的总量。这是size酒店。
每次迭代的iter变量。这是current酒店。
当前迭代是偶数还是奇数。这些是even/odd布尔属性。
当前迭代是否是第一个迭代。这是first布尔属性。
当前迭代是否是最后一次。这是last布尔属性。

使用th：if th:unless `th:switch`，`th:case` 条件语句

th:if标记在模板中迭代显示产品列表，如果产品的价格大于100，则会显示:“特殊提供”

　　　　　　　 <tr th:each="product : ${productList}">
            　　<td th:text="${productStat.count}">1</td>
                <td th:text="${product.description}">Red chair</td>
                <td th:text="${'￥' + #numbers.formatDecimal(product.price, 1, 2)}">￥350</td>
                <td th:text="${#dates.format(product.availableFrom, 'dd-MM-yyyy')}">2018-02-20</td>
                <td><span th:if="${product.price gt 100}" class="offer">特殊提供</span></td>    例子：th:if ="${not #lists.isEmpty(prod.comments)}
　　　　　　　　</tr>

如果有生成页面为<td><span class="offer">特殊提供</span></td>

th:case

            <tr th:each="product : ${productList}">
           　　　<td th:text="${productStat.count}">1</td>
                <td th:text="${product.description}">Red chair</td>
                <td th:text="${'￥' + #numbers.formatDecimal(product.price, 1, 2)}">￥350</td>
                <td th:text="${#dates.format(product.availableFrom, 'dd-MM-yyyy')}">2018-02-20</td>
                <td th:switch="${product.saleType}">
                    <span th:case="'CG'">闪购</span>
                    <span th:case="'PT'">拼团</span>
                    <span th:case="'CX'">促销</span>
                    <span th:case="*">其它</span>
                </td>
                <td>
　　　　　　　　　　　　<span th:class="${product.price gt 100}?'offer'" th:text="${product.price}">特殊提供</span>
　　　　　　　　　　</td>
            </tr>

定义和引用片段：引用页面如后台模板的头部，底部，菜单栏

　　　　因此我们创建一个/WEB-INF/templates/footer.html包含以下代码的文件：

　　　　接着我们在主页 index.html中使用th:insert或th:replace属性引入该copy片段

　　　　<div th:insert="~{footer :: copy}"></div> th:insert需要一个片段表达式 ~{页面：：片段名称}

　　　重点：片段表达式的三种格式区别

<footer th:fragment="copy">
  &copy; 2011 The Good Thymes Virtual Grocery
</footer>

<body>
  <div th:insert="footer :: copy"></div>

  <div th:replace="footer :: copy"></div>

  <div th:include="footer :: copy"></div>
  
</body>

将导致：

<body>
  <div>
    <footer>
      &copy; 2011 The Good Thymes Virtual Grocery
    </footer>
  </div>

  <footer>
    &copy; 2011 The Good Thymes Virtual Grocery
  </footer>

  <div>
    &copy; 2011 The Good Thymes Virtual Grocery
  </div>
</body>

1,th:inssert:保留当前主标签，保留th:fragment主标签；

2,th:replace:舍弃当前主标签，保留th:fragment主标签；

3,th:include:保留当前主标签，舍弃th:fragment主标签。

JavaScript内联

JavaScript内联允许<script>在HTML模板模式下处理的模板中更好地集成JavaScript 块。

与文本内联一样，这实际上相当于处理脚本内容，就好像它们是JAVASCRIPT模板模式中的模板一样，因此文本模板模式的所有功能（见下一章）都将在眼前。但是，在本节中，我们将重点介绍如何使用它将Thymeleaf表达式的输出添加到JavaScript块中。

必须使用th:inline="javascript"以下方式明确启用此模式：

首先，JavaScript内联不仅会输出所需的文本，而且还会用引号和JavaScript来包含它 - 转义其内容，以便将表达式结果输出为格式良好的JavaScript文字。

其次，发生这种情况是因为我们将${session.user.name}表达式输出为转义，即使用双括号表达式：[[${session.user.name}]]。如果相反，我们使用非转义，如：

<script th:inline="javascript">
    ...
    var username = [(${session.user.name})];
    ...
</script>

thymeleaf 对java8 localDate LocalDateTime的支持

<!--依赖-->

<groupId>org.thymeleaf.extras</groupId>

<artifactId>thymeleaf-extras-java8time</artifactId>

<version>3.0.0.RELEASE</version>

</dependency>

<p th:text=”${#dates.format(standardDate, ‘dd-MM-yyyy HH:mm’)}”></p> 这还是之前对 thymeleaf对java.util.date 时间的支持