2.Thymeleaf： The Standard Dialect标准方言

左手的ㄟ右手 2022-05-17 04:16 206阅读 0赞

### Thymeleaf.html ###

###    一.声明当前文件是thymeleaf，避免编辑器出现html验证错误 ###

将包含以th前缀开头的属性，如<span th:text="...">。

### 二.5种表达式类型 ###

1.  $\{...\} : 变量表达式。例如：<p th:text="$\{username\}"></p>
2.  \*\{...\} : 选择表达式。例如：<p th:text="\*\{product.name\}"></p>
3.  \#\{...\} : 消息 (i18n) 表达式。通常称为文本外部化，国际化或i18n)允许从外部源(如:`.properties`)文件中检索特定于语言环境的消息，通过键来引用这引用消息。
4.  @\{...\} : 链接 (URL) 表达式。用来配合link src href使用的语法。例如： <script type="text/javascript"   
            src="../../webapp/static/js/thymeleaf.js" th:src="@\{/static/js/thymeleaf.js\}"></script>使用的是相对路径。
5.  ~\{...\} : 片段表达式。用来引入公共部分代码片段，并进行传值操作使用的语法，最常见的是使用th:insert或th:replace来插入片段:。例如：
    
        <div th:with="frag=~{footer :: #main/text()}">
          <p th:insert="${frag}">
        </div>

### 三.文字和操作 ###

有很多类型的文字和操作可用，它们分别如下:

*  文字
    
     *  文本文字，例如:`'one text'`, `'Another one!'`,`…`
     *  数字文字，例如:`0`,`10`, `314`, `31.01`, `112.83`,`…`
     *  布尔文字，例如:`true`,`false`
     *  Null文字，例如:`Null`
     *  文字标记，例如:`one`, `sometext`, `main`,`…`
 *  文本操作:
    
     *  字符串连接:`+`
     *  文字替换:`|The name is ${name}|`
 *  算术运算:
    
     *  二进制操作:`+`, `-`, `*`, `/`, `%`
     *  减号(一元运算符):`-`
 *  布尔运算:
    
     *  二进制运算符，`and`,`or`
     *  布尔否定(一元运算符):`!`,`not`
 *  比较和相等:
    
     *  比较运算符:`>`,`<`,`>=`,`<=`(`gt`,`lt`,`ge`,`le`)
     *  相等运算符:`==`, `!=` (`eq`, `ne`)
 *  条件操作符:
    
     *  If-then:`(if) ? (then)`
     *  If-then-else:`(if) ? (then) : (else)`
     *  Default: `(value) ?: (defaultvalue)`

### 四. 表达式预处理 ###

关于表达式的最后一件事是知道表达式预处理，在`__`之间指定，如下所示:

#{selection.__${sel.code}__}

### 五.输出内容 ###

1. <p th:text="\#\{name\}">Welcome to our grocery store!</   
        说明：$\{name\} 用来引用 name 变量  
     2.字符串转义与未转义，未转义可以渲染文本中的标签。

string s="<p style='color:red'> 红色文字</p>";
    <p th:text="${s}"></p> 显示的结果为：<p style='color:red'> 红色文字</p>
    <p th:utext="${s}"></p>显示的结果为：红色文字

3.获取对象属性的两种方式，直接调用方法  
        例如:<p th:text="$\{product.name\}"></p>  
             <p th:text="$\{product.getName()"></p>  
    4.使用\*\{\}方式获得当前对象的属性  
        例如：<p th:text="\*\{name\}"></p>  
    5.算数运算，只演示了加法，其他的减法，乘法什么的略过不表  
        例如:<p th:text="$\{product.price+1000\}"></p>

### 六.访问对象       ###

$\{param.x\} 返回名为x 的 request参数。（可能有多个值）  
       $\{session.x\} 返回名为x的Session参数。  
       $\{application.x\} 返回名为 servlet context 的参数。

### 七.其他语法 ###

1.字符串连接

方式一：使用加号<p  th:text="$\{name\}+'hello world'"></p>  
        方式二：在前后放上|  <p  th:text="|$\{name\}hello world|"></p>

2.标准的URL用法

2.1 关于url：在使用html的过程，我们需要用到css和js，怎么引入它们？  
    第一步：在webapp在创建一个新的目录：static（表示静态文件），再创建js目录放入js文件，创建css目录放入css文件。  
    第二步：引入css和js文件。  
    引入css:<link th:href="@\{/static/css/style.css\}"/>  
    引入js:<script th:src="@\{/static/js/main.js\}"/>  
    注：使用 @这种方式引入，在渲染后的html 里会自动生成 上下文路径

2.2 在使用超链接的时候

<a href="product/list.html" th:href="@{/product/list}">Product List</a>
    <a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>

3.包含(include)  
    例如：在include.html中

<footer th:fragment="footer1">
            <p>all rights reserved</p>
        </footer>
        <footer th:fragment="footer2(start,now)">
            <p th:text="|${start}-${now}all rights reserved|"></p>
        </footer>

在测试test.html中

<div th:replace="include::footer1"></div>结果显示 all rights reserved
    <div th:repalce="include::footer2(2015,2018)"></div>

4.条件判断

4.1 if和unless

<p th:if="${boolean}">如果boolean为真，则显示这句话</p> 
    <p th:if="{not boolean}" >如果boolean为假，则显示这句话</p>
    <p th:unless="${boolean}">如果boolean为假，则显示这句话</p> 
    <p th:text="${boolean}?'boolean为真显示这句话':'不然显示这句话'">三相表达式作为条件判断</p>

4.2 switch语句

<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 some other thing</p>    --默认的 case 相当于default
    </div>

5.遍历（循环、迭代）：四种遍历的方式  
  第一种：普通遍历

第二种：带状态的遍历，更多信息查看官网文档

第三种：下拉框遍历

第四种：单选框遍历

6.设置属性值（更多信息查看官网文档）  
6.1 设置任何Attribute 的方法

6.2 设置一些内置的Attribute的方法

<li><a href="product/list.html" th:href="@{/product/list}">Product List</a></li>
    <form action="subscribe.html" th:action="@{/subscribe}">
        <input type="submit" value="Subscribe!" th:value="#{subscribe.submit}"/>
        <img src="../../images/gtvglogo.png"  th:src="@{/images/gtvglogo.png}" th:alt-title="#{logo}" /> -- 一次设置多个（alt title）的方法
    </form>

6.3 设置html里没有指的任何属性的语法  
        <span th:whatever="$\{user.name\}">...</span>   ---whatever 可以换成任何你想设的属性

7.内置工具：什么是内置工具？作用？为了模板更加易用，Thymeleaf还提供了一系列Utility对象（内置于Context中），可以通过\#直接访问。一共有16种，详情查看官网文档  
    date为例  
    Date date=new Date();  
    model.addAttribute("now",date);

直接输出日期：${now},<p th:text="${now}"></p>
    默认格式化：${#dates.format(now)},<p th:text="{$dates.format(now)}"></p>
    自定义格式化:${#dates.format(now,'yyyy-MM-dd,HH:mm:ss'},<p th:text="${#dates.format(now,'yyyy-MM-dd,HH:dd:ss')}"></p>

八.应用（在表单、curd和分页中应用）

很好的thymeleaf模板 入门例子：[https://blog.csdn.net/f0rd\_/article/details/80580225][https_blog.csdn.net_f0rd_article_details_80580225]

[https_blog.csdn.net_f0rd_article_details_80580225]: https://blog.csdn.net/f0rd_/article/details/80580225