thymeleaf 常用标签用法

介绍一下什么是thymeleaf

thymeleaf是基于Java的模板引擎，支持xml/xhtml/HTML5。

thymeleaf解析原理

lthymeleaf在指定的模式下处理文件之前会首先将文件转换为格式良好的XML文件，而此XML文件仍然是完全有效的HTML5.

l解析xml方式为SAX.所以web页面要求严格格式，一定要有封闭标签：/> 或 </>，这一点再最新版本的thymeleaf中，是可以配置的。

thymeleaf标准方言

变量表达式

语法格式为${ }.与OGNL表达式类似，都是取得context map的变量.

选择表达式，又名星号表达式

语法格式为*{ }.一般与th:object配合使用，用于获取对象的属性值

链接表达式

语法格式为@{ }.用于hr ef属性的值

共有五种类型：

(1)绝对URL（Absolute URLs）

通过指定协议名称（包含http://或https://开头）

(2)上下文相关的URL（Context-relative URLs）

最常用的如应用程序myapp的访问地址：http://localhost:8080/myapp，那么myapp就是上下文名称。
e.g.<a th:href="@{/order/list}"></a>
equals：<a href="/myapp/order/list"></a>
说明：“/”表示从应用程序根路径开始访问
去掉“/”表示相对路径

(3)相对于服务器的URL（Server-relative URLs）

用法类似2，连接到同一服务器不同应用程序中
e.g.<a th:href="@{~/billing-app/showDetails.htm}"></a>
equals：
<a href="/billing-app/showDetails.htm"></a>
note:当前应用程序的上下文myapp将被忽略

(4)协议相对URL（Protocol-relative URLs）

通常用于，包括外部资源，如样式，脚本等。保证协议（HTTP，HTTPS）用于显示当前页面的绝对URL。
e.g.<script th:src="@{//scriptserver.example.net/myscript.js}">...</script>
equals:<script src="//scriptserver.example.net/myscript.js">...</script>
(5)带参数的URL表达式

表达式中可以携带一个或多个参数.e.g.
1.<a th:href="@{/order/details(id=3)}"></a>
equals：<a href="/order/details?id=3"></a>
2.携带多参数：<a th:href="@{/order/details(id=3,action='show_all')}"></a>
equals： <a href="/order/details?id=3&action=show_all"></a>

连接符

连接符： + 
特殊：${}还可以用符号|
e.g.
1.<span th:text="|Welcome to our application, ${user.name}!|">
2.<span th:text="'Welcome to our application, ' + ${user.name} + '!'">
3.<span th:text="${onevar} + ' ' + |${twovar}, ${threevar}|">

条件表达式

 ? 'xx' :'xx'(if ? then:else)

e.g.<span th:class="${title} ? 'green' :' red'">样例一</span>

分析：if语句返回null,即为false,走else语句，即返回red;不为null,即为true,返回green.

 ?'xx'(if ? then)

e.g.<span th:class="${title1} ? 'green'">样例二</span>

 设置默认表达式?:

只有if语句值为null时才会设置为默认表达式

e.g.<span th:class="${title2} ?: 'blue'">样例四</span>

th:text属性

可对表达式或变量求值，并将结果显示在其被包含的 html 标签体内替换原有html文本

文本连接：用“+”符号，若是变量表达式也可以用“|”符号

 th:utext属性

e.g.
若home.welcome=Welcome to our <b>fantastic</b> grocery store!
用<p th:text="#{home.welcome}"></p>解析结果为：
<p>Welcome to our <b>fantastic</b> grocery store!</p>
解决方案
<p th:utext="#{home.welcome}"></p>即可。
等效于<p>Welcome to our fantastic grocery store!</p> fantastic会变成粗体

th:attr

用于设置其他属性的值，但不是所有属性的值都能设置，如text。th:attr还可以同时设置多个属性的值，以逗号隔开

th:alt-title

用于设置 alt 和title属性的值相同的两个属性。

th:attrappend和th:attrprepend

th:attrappend属性值前缀，例如一个标签的类名为a，想要变为“a b”，即增加一个类样式，可以使用此属性.

th:attrprepend的用法则相反

th:checked设置复选框的值

thymeleaf解析时不会设置th:checked属性

定义布局变量th:with属性的用法

可以一次性定义多个变量，以逗号隔开

<div th:with="firstPer=${list[0]}">  
    <p>The name of the first person is <span th:text="${firstPer.userName}">Julius Caesar</span>.</p>  
</div> 

<div th:with="firstPer=${list[0]},secondPer=${list[1]}">  
    <p>The name of the first person is <span th:text="${firstPer.userName}">Julius Caesar</span>.</p>  
    <p> But the name of the second person is  <span th:text="${secondPer.userName}">Marcus Antonius</span>.  
    </p>  
</div>  

<div th:with="company=${user.company},account=${accounts[company]}">  
    <div th:text="${company}"></div>  
    <div th:text="${account}"></div>  
</div>  

th:* 属性优先级

我们可以在一个html标签中设置一个或多个th:*属性，有时为了避免冲突，thymeleaf为其设置了属性优先级机制。

优先级由高到低依次为：

Order	Feature	Attributes
1	Fragment inclusion	th:include th:replace
2	Fragment iteration	th:each
3	Conditional evaluation	th:if th:unless th:switch th:case
4	Local variable definition	th:object th:with
5	General attribute modification	th:attr th:attrprepend th:attrappend
6	Specific attribute modification	th:value, th:href, th:src, etc.
7	Text (tag body modification)	th:text th:utext
8	Fragment specification	th:fragment
9	Fragment removal	th:remove

注释

<div>  
        <ol>  
        <li>解释器级注释块(thymeleaf解析时会移除掉注释块所有代码)：  
        <!--/* this is content! */-->  
        </li>  
        <li>针对原型的注释(thymeleaf解析时会移除掉注释标签，但保留标签内的内容)：  
            <!--/*/ this is content! /*/-->  
        </li>  
        <li>与th:block结合(thymeleaf解析时会移除掉th:block注释块，但保留标签内的内容)：  
            <!--/*/<th:block th:each="user:${list}">/*/-->  
            <div th:text="${user.userName}"></div>  
            <!--/*/</th:block>/*/-->  
        </li>  
        </ol>  
    </div>  

th:each

属性用于迭代循环，语法：th:each="obj,iterStat:${objList}"

迭代对象可以是Java.util.List,java.util.Map,数组等;

iterStat称作状态变量，属性有：
    index:当前迭代对象的index（从0开始计算）
    count: 当前迭代对象的index(从1开始计算)
    size:被迭代对象的大小
    current:当前迭代变量
    even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）
    first:布尔值，当前循环是否是第一个
    last:布尔值，当前循环是否是最后一个

thymeleaf内联语法

内联必须通过使用属性th:inline来激活，其值有三种：text,JavaScript,none

 th:inline="text"文本内联

<p th:inline="text">Hello, [[${session.user.name}]]!</p>

 th:inline="javascript"脚本内联

<script th:inline="javascript">
/*<![CDATA[*/
var welcome = [[${welcome}]];
//通过th:inline="javascript"方式
// alert('th:inline="javascript"'+welcome);
/*]]>*/
</script>

在这里需要对以上代码进行一下说明，js内联代码中需要加入/*<![CDATA[*/    ......    /*]]>*/代码块，thymeleaf才能正确解析一些运算符(<等)和操作符号&/&&等。

 

转载于:https://my.oschina.net/zk875/blog/821318