Thymeleaf 使用入门

Thymeleaf是一个模板引擎，它既可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。相对于jsp,thymeleaf能很好的实现前后端的分离； 它可以完全替代JSP 。

使用方法：

前端：

1、增加头文件

<htmlxmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org">

2、用th标签动态替换掉静态数据，例如：

<tdth:text="${message}">Red Chair</td>

后台传入的‘message’会替换掉静态内容‘Red Chair’。

后端：

具体操作参考此篇文章thymeleaf用法部分。

参考文章：

http://www.cnblogs.com/ZSG-DoBestMe/p/5120653.html

常用的th标签及含义：

 

由于一个标签内可以包含多个th:x属性，其生效的优先级顺序为: 

include,each,if/unless/switch/case,with,attr/attrprepend/attrappend,value/href,src,etc,text/utext,fragment,remove。

如何在table中使用：

在静态表格的<tbody>标签上加 th:remove=”all-but-first”标签，在获取后台数据时，将会把除了第一个tr外的其他所有标签替换掉。如下图所示：

参考文章：http://www.open-open.com/lib/view/open1383622135586.html

 

几种常用的使用方法

 

1、赋值、字符串拼接

 <p  th:text="${collect.description}">description</p>

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

字符串拼接还有另外一种简洁的写法

 

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

2、条件判断 If/Unless

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

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

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

也可以使用 (if) ? (then) : (else) 这种语法来判断显示的内容

3、for循环

  <tr  th:each="collect,iterStat : ${collects}"> 

     <th scope="row" th:text="${collect.id}">1</th>

     <td >

        <img th:src="${collect.webLogo}"/>

     </td>

     <td th:text="${collect.url}">Mark</td>

     <td th:text="${collect.title}">Otto</td>

     <td th:text="${collect.description}">@mdo</td>

     <td th:text="${terStat.index}">index</td>

 </tr>

iterStat称作状态变量，属性有：

· index:当前迭代对象的index（从0开始计算）

· count:当前迭代对象的index(从1开始计算)

· size:被迭代对象的大小

· current:当前迭代变量

· even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）

· first:布尔值，当前循环是否是第一个

· last:布尔值，当前循环是否是最后一个

4、URL

URL在Web应用模板中占据着十分重要的地位，需要特别注意的是Thymeleaf对于URL的处理是通过语法@{…}来处理的。 
如果需要Thymeleaf对URL进行渲染，那么务必使用th:href，th:src等属性，下面是一个例子

<!-- Will produce 'http://localhost:8080/standard/unread' (plus rewriting) -->

 <a  th:href="@{/standard/{type}(type=${type})}">view</a>

<!-- Will produce '/gtvg/order/3/details' (plus rewriting) --><a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>

 

设置背景

<div th:style="'background:url(' + @{/<path-to-image>} + ');'"></div>

 

在javaScript中使用表达式：

 

1.先用属性声明一下： <script th:inline="javascript">；

<script th:inline="javascript">

 /*<![CDATA[*/

...

 var username =/*[[${session.user.name}]]*/ 'Sebastian';

... 

/*]]>*/

</script>

/*[[…]]*/表达式的理解如下：

  /*…*/中的内容在用浏览器打开静态 网页时，会被忽略.

‘Sebastian’会在浏览器中显示。静态时。

Thymeleaf解析时，会解析/*[[…]]*/的内容，并把获得的值替换掉/*[[…]]*/后面的内容。

详细参考：http://blog.csdn.net/mygzs/article/details/52667897

 

Javascript 代码中使用 Thymeleaf模板引擎的简单示例：

http://www.cnblogs.com/jinweijie0527/p/6012689.html

 

注：

1、所有的表达式或字符串只能用 th标签引入。

2、#号、$符和*号的区别：

${……}  变量表达式  

 *{……}  选择/星号表达式

 #{……}  文字国际化表达式

 @{……}  URL表达式 

3、th标签中不能用"<"，">"等符号，要用html转义字符代替。

4、内联js<js起止加入如下代码,否则引号嵌套错误

/*<![CDATA[*/……/*]]>*/ 

 

参考文章： http://blog.csdn.net/qwlzxx/article/details/70976509

以上为部门同事整理，在后期的开发中我也会写一些新的关于thymeleaf的文章