thymeleaf使用入门

1. 获取变量值

<p th:text="'Hello！, ' + ${name} + '!'" >3333</p>

对于javaBean的话使用变量名.属性名方式获取,这点和EL表达式一样
$表达式只能写在th标签内部,不然不会生效,上面例子就是使用th:text标签的值替换p标签里面的值,至于p里面的原有的值只是为了给前端开发时做展示用的.这样的话很好的做到了前后端分离.

2. 引入url

Thymeleaf对于URL的处理是通过语法@{…}来处理的

<a th:href="@{http://}">绝对路径</a>
<a th:href="@{/}">相对路径</a>
<a th:href="@{css/bootstrap.min.css}">Content路径,默认访问static下的css文件夹</a>

类似的标签有:th:href和th:src

3. 字符串替换

很多时候可能我们只需要对一大段文字中的某一处地方进行替换，可以通过字符串拼接操作完成:

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

简洁的方式是：

<span th:text="|Welcome to our application, ${user.name}!|">

当然这种形式限制比较多，|…|中只能包含变量表达式${…}，不能包含其他常量、条件表达式等。

4. 运算符

在表达式中可以使用各类算术运算符，例如+, -, *, /, %

th:with="isEven=(${prodStat.count} % 2 == 0)"

逻辑运算符>, <, <=,>=，==,!=都可以使用，唯一需要注意的是使用<,>时需要用它的HTML转义符：

th:if="${prodStat.count} &gt; 1"
th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"

5. 条件表达式

if/unless
Thymeleaf中使用th:if和th:unless属性进行条件判断，下面的例子中，标签只有在th:if中条件成立时才显示：

<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>

th:unless于th:if恰好相反，只有表达式中的条件不成立，才会显示其内容。

6. Switch

Thymeleaf同样支持多路选择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>
</div>

默认属性default可以用*表示：

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

7. 循环th:each

<table>
      <tr>
       <th>NAME</th>
       <th>PRICE</th>
       <th>IN STOCK</th>
     </tr>
     <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>
</table>

8. Utilities工具类

为了模板更加易用，Thymeleaf还提供了一系列Utility对象（内置于Context中），可以通过#直接访问：
• #dates
• #calendars
• #numbers
• #strings
• arrays
• lists
• sets
• maps
• …

8.1 date

${#dates.format(date, 'dd/MMM/yyyy HH:mm')}
${#dates.arrayFormat(datesArray, 'dd/MMM/yyyy HH:mm')}
${#dates.listFormat(datesList, 'dd/MMM/yyyy HH:mm')}
${#dates.setFormat(datesSet, 'dd/MMM/yyyy HH:mm')}
${#dates.createNow()}
${#dates.createToday()}

8.2 string

${#strings.isEmpty(name)}
${#strings.arrayIsEmpty(nameArr)}
${#strings.listIsEmpty(nameList)}
${#strings.setIsEmpty(nameSet)}
${#strings.startsWith(name,'Don')}
//also array*, list* and set*
${#strings.endsWith(name,endingFragment)}
//also array*, list* and set*
${#strings.length(str)}
${#strings.equals(str)}
${#strings.equalsIgnoreCase(str)}
${#strings.concat(str)}
${#strings.concatReplaceNulls(str)}
${#strings.randomAlphanumeric(count)}

8.3 Other

<dd th:text="${product.description}">red Chair</dd>
<dd th:text="${#numbers.formatDecimal(product.price, 1, 2)}">180</dd>
<dd th:text="${#dates.format(product.avail, 'yyyy-MM-dd')}">2014-12-01</dd>
<p class="answer" th:text="${4 * -6 * -2 % 7}">123</p>
<p class="answer" th:text="${new java.util.Date().getTime()}">22-Jun-2013</p>
<p class="answer" th:text="${T(java.lang.Math).random()}">123456</p>
<td th:class="${customer.balance gt 10000} ? 'enhanced'" th:text="${customer.balance}">350</td>

8.4文字国际化表达式

<th th:text="#{header.address.city}">...</th>
<th th:text="#{header.address.country}">...</th>
文字国际化表达式允许我们从一个外部文件获取区域文字信息(.properties)，用Key索引Value，还可以提供一组参数(可选).

8.5布局

定义代码片段：

<footer th:fragment="copy">
&copy; 2016
</footer>

在页面任何地方引入：

<body>
  <div th:include="footer :: copy"></div>
  <div th:replace="footer :: copy"></div>
 </body>
th:include 和 th:replace区别，include只是加载，replace是替换
<body>
   <div> &copy; 2016 </div>
  <footer>&copy; 2016 </footer>
</body>

常用的页面布局：
头部，尾部、菜单栏、隐藏栏，点击菜单只改变content区域的页面 ``` html
Header left sidebar footer

<head th:include="layout :: htmlhead" th:with="title='Hello'"></head>

layout 是文件地址，如果有文件夹可以这样写 fileName/layout:htmlheadhtmlhead 是指定义的代码片段如 th:fragment="copy"