thymeleaf

thymeleaf

一 简介

1.Thymeleaf是一个Java库。它是XML、XHTML、HTML5等格式的模板引擎,可以用于Web项目和非Web项目。Thymeleaf很适合作为Web应用的视图的业务逻辑层,还可以在离线环境下处理XML文件。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式,因此也可以用作静态建模。Thymeleaf是一个跟Velocity、FreeMarker类似的模板引擎,它可以完全替代JSP,在spring4.0中推荐使用thymeleaf来做前端模版引擎。
2.它有如下三个极吸引人的特点:
(1)Thymeleaf在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html时会忽略未定义的标签属性,所以thymeleaf的模板可以静态地运行;当有数据返回到页面时,Thymeleaf标签会动态地替换掉静态内容,使页面动态显示。
(2)Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言,可以直接套用模板实现JSTL、OGNL表达式效果,避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
(3)Thymeleaf提供spring标准方言和一个与SpringMVC完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能
 
二 配置
1.通过Maven加入依赖
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.0.0</version>
</dependency>
2.然后增加头文件
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
3.用th标签动态替换掉静态数据,如下,后台传出的message会将静态数据“Red Chair”替换掉,若访问静态页面,则显示数据“Red Chair”。
<td th:text="${message}">Red Chair</td>
 
三 整合spring
1.通过Maven加入依赖
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring3</artifactId>
    <version>2.1.4</version>
</dependency>
2.在servlet配置文件中加入如下代码
<bean id="templateResolver" class="org.thymeleaf.templateresolver.ServletContextTemplateResolver">
         <property name="prefix" value="/WEB-INF/views/" />
         <property name="suffix" value=".html" />
         <property name="templateMode" value="HTML5" />
</bean>
<bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
          <property name="templateResolver" ref="templateResolver" />
</bean>
<bean class="org.thymeleaf.spring4.view.ThymeleafViewResolver">
         <property name="templateEngine" ref="templateEngine" />
</bean>

 

四 标准表达式语法

1.变量表达式  ${……}
<input type="text" name="userName" value="James Carrot" th:value="${user.name}" />
2.选择或星号表达式  *{……}
<div th:object="${session.user}">                                                                       
     <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>   
</div>
选择表达式一般跟在th:object后,直接取object中的属性
3.文字国际化表达式  #{……}
<p th:utext="#{home.welcome}">Welcome to our grocery store!</p>
4.URL表达式
URL表达式指的是把一个有用的上下文或回话信息添加到URL,这个过程经常被叫做URL重写。
@{/order/list}
URL还可以设置参数:
@{/order/details(id=${orderId})}
相对路径:
@{../documents/report}
让我们看这些表达式:
<form th:action="@{/createOrder}"> 
<a href="main.html" th:href="@{/main}">

 

五 常用th标签   
关键字     功能介绍     案例
th:id     替换id     <input th:id="'xxx' + ${collect.id}"/>
th:text     文本替换     <p th:text="${collect.description}">description</p>
th:utext     支持html的文本替换     <p th:utext="${htmlcontent}">conten</p>
th:object     替换对象     <div th:object="${session.user}">
th:value     属性赋值     <input th:value="${user.name}" />
th:with     变量赋值运算     <div th:with="isEven=${prodStat.count}%2==0"></div>
th:style     设置样式     th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"
th:onclick     点击事件     th:onclick="'getCollect()'"
th:each     属性赋值     tr th:each="user,userStat:${users}">
th:if     判断条件     <a th:if="${userId == collect.userId}" >
th:unless     和th:if判断相反     <a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
th:href     链接地址     <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />
th:switch     多路选择 配合th:case 使用     <div th:switch="${user.role}">
th:case     th:switch的一个分支     <p th:case="'admin'">User is an administrator</p>
th:fragment     布局标签,定义一个代码片段,方便其它地方引用     <div th:fragment="alert">
th:include     布局标签,替换内容到引入的文件     <head th:include="layout :: htmlhead" th:with="title='xx'"></head> />
th:replace     布局标签,替换整个标签到引入的文件     <div th:replace="fragments/header :: title"></div>
th:selected     selected选择框 选中     th:selected="(${xxx.id} == ${configObj.dd})"
th:src     图片类地址引入     <img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />
th:inline     定义js脚本可以使用变量     <script type="text/javascript" th:inline="javascript">
th:action     表单提交的地址     <form action="subscribe.html" th:action="@{/subscribe}">
th:remove     删除某个属性     
<tr th:remove="all"> 1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。
th:attr     设置标签属性,多个属性可以用逗号分隔     比如 th:attr="src=@{/image/aa.jpg},title=#{logo}",此标签不太优雅,一般用的比较少。

六 常用方式
1.简单数据转换(数字,日期)
<dt>价格</dt>
    <dd th:text="${#numbers.formatDecimal(product.price, 1, 2)}">180</dd>
<dt>进货日期</dt>
    <dd th:text="${#dates.format(product.availableFrom, 'yyyy-MM-dd')}">2014-12-01</dd>
2.字符串拼接
<dd th:text="${'$'+product.price}">235</dd>
3.循环
<tr th:each="product:${productList}">
    <td th:text="${product.description}">product</td>
    <td th:text="${product.price}">price</td>       
</tr>

4.使用thymeleaf布局

<footer th:fragment="copy">
&copy; 2016
</footer> 
在页面任何地方引入:
<body>
  <div th:include="footer :: copy"></div>
  <div th:replace="footer :: copy"></div>
 </body>   
 
 
 
 
posted @ 2017-02-07 23:50  LittleMoon  阅读(1391)  评论(0编辑  收藏  举报