thymeleaf语法

github项目代码—thymeleaf-hello-world

github项目代码—thymeleaf-user-demo

Thymeleaf 基本demo

一、引用命名空间

在html中引入此命名空间，可避免编辑器出现html验证错误，虽然加不加命名空间对Thymeleaf的功能没有任何影响。

二、输出内容

2.1

<p th:text="#{home.welcome}">Welcome to our grocery store!</p>

    说明：

             1. th:text  用来将内容输出到所在标签的body中。

             2. #{home.welcome} 用来引入数据home对象中的 welcome属性。

             3. 可以用th:utext 用来显示“unescaped ” 的html内容。

2.2

<p>Today is: <span th:text="${today}">13 February 2011</span></p>

    说明：${today} 用来引用 today 变量

三、访问对象

   ${param.x} 返回名为x 的 request参数。（可能有多个值）

   ${session.x} 返回名为x的Session参数。

   ${application.x} 返回名为 servlet context 的参数。

四、基本语法

4.1 #｛home.welcome｝ – 访问数据

4.2 #{home.welcome(${session.user.name})} – 格式化数据 当 home.welcome 为 “abcdegf{0}” 类似这种内容时。（多个参数以逗句分隔）。

4.3 ${today} — 访问变量

4.4 访问基本对象

#ctx: the context object.
#vars: the context variables.
#locale: the context locale.
#request: (only in Web Contexts) the HttpServletRequest object.
#response: (only in Web Contexts) the HttpServletResponse object.
#session: (only in Web Contexts) the HttpSession object.
#servletContext: (only in Web Contexts) the ServletContext object.

其它公共对象参考: http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-a-expression-basic-objects

4.5 日期的输出

<span th:text="${#calendars.format(today,'dd MMMM yyyy')}">13 May 2011</span>

4.6 星号语法

<div th:object="${session.user}">
    <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
    <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
    <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
</div>

4.7 输出URL

   <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>

4.8 使用代码段

<div th:insert="~{commons :: main}">...</div>

4.9 直接输出内容

<span th:text="'working web application'"> -- 输出字符

<span th:text="2013 + 2">  -- 输出数据表达式

<div th:if="${user.isAdmin()} == false">  --输出布尔表达式

<span th:text="'Welcome to our application, ' + ${user.name} + '!'"> -- 带变量的

4.10 条件表达式

<tr th:class="${row.even}? 'even' : 'odd'">
...  
</tr>

<tr th:class="${row.even}? 'alt'">
...省略 false 结果的表达方式
</tr>

<div th:object="${session.user}">
...省略 true 结果的表达方式
<p>Age: <span th:text="*{age}?: '(no age specified)'">27</span>.</p>
</div>

<span th:text="${user.name} ?: _">no user authenticated</span> --不做任何处理时用下划线 _ 表示

4.11 格式化

   <td th:text="${{user.lastAccessDate}}">...</td> --${{.}}  调用默认的格式化器来输出结果。

4.12 预处理

   <p th:text="${__#{article.text('textVar')}__}">Some text here...</p>  

   说明：thymeleaf 的处理模板内容的顺序与书写顺序无关，只能通过  __${expression}__ ，来将需要先一步计算出来后面          要用的变量指定为优化处理。

五、设置 Attribute 值

5.1 设置任何Attribute 的方法

   <input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/>   --设置单个

   <img src="../../images/gtvglogo.png"  th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />  --一次设置多个

5.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）的方法

   其它的可用属性：http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#setting-value-to-specific-attributes

5.3 设置html里没有指的任何属性的语法

    <span th:whatever="${user.name}">...</span>   ---whatever 可以换成任何你想设的属性

六、循环输出的语法

6.1 基本循环

<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>

6.2 循环状态的使用

<table>
    <tr>
        <th>NAME</th>
        <th>PRICE</th>
        <th>IN STOCK</th>
    </tr>
        <tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
        <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>
</table>

关于状态的其它信息的使用详细参考：http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#keeping-iteration-status

七、条件判断

7.1 if 和 unless

   <a href="comments.html" th:href="@{/comments(prodId=${prod.id})}" th:unless="${#lists.isEmpty(prod.comments)}">view</a>

   <a href="comments.html"  th:href="@{/product/comments(prodId=${prod.id})}"   th:if="${not #lists.isEmpty(prod.comments)}">view</a>

7.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>

八、模板 include

8.1 定义和引用代码块

定义代码块

<!DOCTYPE html>

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

<body>

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

</body>

</html>

引用代码块

<body>

...

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

</body>

引用未用fragment 标注的代码块 

<div id="copy-section">
&copy; 2011 The Good Thymes Virtual Grocery
</div>

<body>

...

<div th:insert="~{footer :: #copy-section}"></div>

</body>

8.2 th:insert th:replace th:include 之间的区别

th:insert  --- 插入代码块    th:replace -- 替换代码块会替换掉容器标签   th:include ---- 和insert相似但只会插入fragment标注body内的内容。

8.3 带参数的代码段

<div th:fragment="frag (onevar,twovar)">
    <p th:text="${onevar} + ' - ' + ${twovar}">...</p>
</div>

 <div th:replace="::frag (${value1},${value2})">...</div>
 <div th:replace="::frag (onevar=${value1},twovar=${value2})">...</div>

九、局部变量的使用示例

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

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

十、注释

<!-- ... -->  

十一、说明

以上只列出Thymeleaf了简要常用的语法和使用方式，更多详情的说明和规则请参见：http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#introducing-thymeleaf

hello.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>thymeleaf</title>

</head>
<body>
<h1>1.变量表达式</h1>
<div>语法: ${...}</div>
<div>
    <!-- th:text 不会转义 -->
    <!-- th:utext 会转义 -->
    用户1：<span th:text="${user1.name}"></span>
    <br>
    用户1：<span th:utext="${user1.name}"></span>
    <br>
    用户2：<span th:text="${user2.name}"></span>
</div>

<h1>2.选择表达式</h1>
<div>语法: *{...}</div>
<div th:object="${user1}">
    姓名：<span th:text="*{name}"></span>
    </br>
    年龄：<span th:text="*{age}"></span>
</div>

<h1>2.选择表达式</h1>
<div>语法: *{...}</div>
<div th:object="${user1}">
    姓名：<span th:text="*{name}"></span>
    </br>
    年龄：<span th:text="*{age}"></span>
</div>

<h1>3.链接表达式</h1>
<h3>绝对路径</h3>
<div th:object="${user1}">
    <!-- 绝对路径 -->
    <!-- Will produce 'http://localhost:8080/details?userId=3' (plus rewriting) -->
    <a href="details.html" th:href="@{http://localhost:8080/details(userId=*{id})}">根据id查看</a>
</div>
<h3>相对路径</h3>
<div th:object="${user2}">
    <!-- 相对路径 -->
    <!-- Will produce 'http://localhost:8080/details?userId=3' (plus rewriting) -->
    <a href="details.html" th:href="@{~/details(userId=*{id})}">根据id查看</a>
</div>
<h3>和协议相对路径</h3>
<div th:object="${user2}">
    <!-- 相对路径 -->
    <!-- Will produce 'details?userId=3' (plus rewriting) -->
    <a href="details.html" th:href="@{//details(userId=*{id})}">根据id查看</a>
</div>

<h1>4.分段表达式/ 模版布局 </h1>
<!-- footer.html中 -->
<div th:insert="~{footer :: copy}">
</div>

<!-- 引用未用fragment 标注的代码块 -->
<div th:insert="~{footer :: #copy-section}">
</div>

<!--8.2 th:insert th:replace th:include 之间的区别

th:insert  -&#45;&#45; 插入代码块    th:replace &#45;&#45; 替换代码块会替换掉容器标签   th:include &#45;&#45;&#45;&#45; 和insert相似但只会插入fragment标注body内的内容。

8.3  带参数的代码段

<div th:fragment="frag (onevar,twovar)">
    <p th:text="${onevar} + ' - ' + ${twovar}">...</p>
</div>

<div th:replace="::frag (${value1},${value2})">...</div>
<div th:replace="::frag (onevar=${value1},twovar=${value2})">...</div>-->

<body>

<h1>5.字面量</h1>
<div>
    <p>
        Now you are looking at a <span th:text="'文本内容'">模板部分</span>.
    </p>
</div>

<h1>6.条件表达式</h1>
<div th:if="${user1.isAdmin()} == true" >
    <div>是管理员</div>
</div>
<div th:if="${user1} != null" >
    <div>user1不是null</div>
</div>
<a href="details.html" th:href="@{~/details(userId=${user1.id})}" th:if="${not #lists.isEmpty(user1.address)}">如果list为空不显示</a>
<!-- 算数操作 + - * / %-->
<!-- 局部变量的使用示例 -->
<div th:with="isEvenAge=(${user2.age} % 2 == 0)">
    user的age对2取余为0么？ ： <span th:text="${isEvenAge}"></span>
</div>
<!-- > < >= <= gt, lt, ge ,le == != eq, ne-->
<!-- 条件运算符 三目 -->
<style>
    .even {
        background: aqua;
    }
    .odd {
        background: brown;
    }
</style>
<table>
    <tr th:class="(${user1.age} % 2 == 0 ? 'even' : 'odd')">
        <td th:text="${user1.name}"></td>
    </tr>
    <tr th:class="(${user2.age} lt 30 ? 'odd' : 'even')">
        <td th:text="${user2.name}"></td>
    </tr>
    <!-- 无操作 -->
    <tr>
        <td th:text="${user1.name} == '张三' ?: _">no user</td>
    </tr>
</table>
<!-- switch -->
<div th:switch="${user1.age}">
    <p th:case="18">user1 age is eq 18</p>
    <p th:case="15">user1 age is eq 16</p>
    <p th:case="*">User is some other thing</p>    --默认的 case 相当于default
</div>

<h1>7.设置属性值</h1>
<div>
    <!-- 5.1 设置任何Attribute 的方法 -->
    <input type="submit" value="Subscribe!" th:attr="value='http://www.baidu.com'"/>   --设置单个
    <!-- 将input赋值 -->
    <input type="text" value="default" th:attr="value=${user1.name}" >
    <!-- 一次设置多个 -->
    <img src=""  th:attr="src=@{/images/1.jpg},title=${user1.name}" />

    <!-- 5.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}" /> &#45;&#45; 一次设置多个（alt title）的方法-->

    <!--其它的可用属性：http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#setting-value-to-specific-attributes-->

    <!--5.3 设置html里没有指的任何属性的语法-->
    <span th:whatever="${user1.name}">...</span>
    <!-- whatever可以换成任意你想换的 比如下面：-->
    <input th:mengqa-data-id="${user1.id}"/>

    <!-- 固定值布尔值 checked disabled readonly hidden selected -->
    <br>
    <span th:text="'user1的age为' + ${user1.age}"></span>
    <input type="checkbox" name="more18" th:checked="${user1.age} ge 18" />
    <br>
    <span th:text="'user2的age为' + ${user2.age}"></span>
    <input type="checkbox" name="more18" th:checked="${user2.age} ge 18" />
    <br>
</div>

<h1>8.迭代器</h1>
<!-- 状态变量 index(从0开始) count(从1开始) size current even/odd first last-->
<li th:each="address : ${user1.address}" th:text="${address.area} + ${address.street}"></li>

<table>
    <tr th:each="address, state : ${user1.address}" th:class="${state.odd} ? 'odd' : 'even'">
        <td th:text="${address.area}"></td>
        <td th:text="${address.street}"></td>
    </tr>
</table>

<!-- Thymeleaf 解析器注释块 -->
<!--/*-->
<div>我被注释掉了</div>
<!--*/-->

<h1>9.内联</h1>
<div>
    <!-- [[...]] 对应 th:text  [(...)]对应 th:utext -->
    <!-- The message is "张三" -->
    <p>The message is "[[${user1.name}]]"</p>
    <p>The message is "[(${user1.name})]" == > th:utext</p>
    <!-- 禁用内联 -->
    <p th:inline="none">A double array looks list this: [[1,2,3], [4,5]]!</p>
</div>

<h1>10.js内联</h1>
<script th:inline="javascript">
    var user1Name = '[(${user1.name})]';
    console.log(user1Name);
</script>

<h1>11.css内联</h1>
<style th:inline="css">
    .[[${className}]] {
        background : brown;
        font-size:20px;
    }
</style>
<div th:class="${className}"> agbc</div>

<h1>12.表达基本对象</h1>
#ctx: the context object.
#vars: the context variables.
#locale: the context locale.
#request: (only in Web Contexts) the HttpServletRequest object.
#response: (only in Web Contexts) the HttpServletResponse object.
#session: (only in Web Contexts) the HttpSession object.
#servletContext: (only in Web Contexts) the ServletContext object.

其它公共对象参考: http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-a-expression-basic-objects


</body>
</html>

footer-html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>footer</title>
</head>
<body>

<!-- th:fragment -->
<div th:fragment="copy">
    &copy; 2017 <a href="https://www.baidu.com">版权所有</a>
</div>

<!-- 未用fragment -->
<div id="copy-section">
    &copy; 2011 The Good Thymes Virtual Grocery
</div>

</body>
</html>
``` 后台代码
/**
 * @author mengqa
 * @create 2018-05-03 15:06
 **/
@Controller
public class HelloController {

    @RequestMapping("/hello")
    public String hello(Model model) {
        User zs = new User("<b>张三</b>", 16);
        zs.setId(1);
        User ls = new User("李四", 21);
        ls.setId(2);
        List<Address> list = new ArrayList<>();
        Address a1 = new Address();
        a1.setArea("铁西区");
        a1.setStreet("兴华街");
        Address a2 = new Address();
        a2.setArea("和平区");
        a2.setStreet("三好街");
        Address a3 = new Address();
        a3.setArea("大东区");
        a3.setStreet("未知街");
        list.add(a1);
        list.add(a2);
        list.add(a3);
        zs.setAddress(list);

        model.addAttribute("user1", zs);
        model.addAttribute("user2", ls);
        model.addAttribute("className", "redClass");
        return "hello";
    }

    @RequestMapping("/details")
    public String details(@RequestParam("userId") Integer userId, Model model) {
        User zs = new User("张三", 16);
        zs.setId(1);
        User ls = new User("李四", 21);
        ls.setId(2);
        if (userId == 1) {
            model.addAttribute("user", zs);
        } else if (userId == 2) {
            model.addAttribute("user", ls);
        }
        return "details";
    }
}