springboot(四)thymeleaf使用详解

thymeleaf介绍

简单说,Thymeleaf是一个跟Velocity、FreeMarker类似的模板引擎,它完全可以替代JSP,相比较其他的模板引擎,它有以下三个特点:

• –1 Thymeleaf在有网络和无网络的环境下都可以运行,它可以让美工在浏览器查看到页面的静态效果,也可以让程序在服务器查看带数据的动态页面效果, 这是由于它支持html原型, 然后在html标签里增加额外的属性来达到模板+数据的展示方式,浏览器介绍html是会胡烈未定义的标签属性,所以thymeleaf的模板可以静态的运行;当有数据返回到页面时,thymeleaf标签会动态的替换到静态内容,使页面动态显示.
• –2 Thymeleaf开箱即用的特性 它提供标准和spring标准两种方言,可以直接套用模板实现JSTL、OGNL表达式效果,避免每天套用模板,改jstl、改标签的困扰,同时开发人员也可以扩展和创建自定义的方面.
• –3 Thymeleaf提供spring标准方言和一个与SpringMVC完美集成的可选模块,可以快速实现表单绑定、属性编辑器、国际化等功能

标准表达式语法

• –1 变量表达式
• –2 选择或性好表达式
• –3 文字国际化表达
• –4 URL表达式

变量表达式

变量表达式即OGNL表达式或Spring EL表达式(在Spring术语中也叫model atrributes),如下图所示:

${session.user.name}

它们将以HTML标签的一个属性来表示

<span th:text="${book.author.name}">  
<li th:each="book : ${books}">  

选择(星号)表达式

选择表达式很想变量表达式,不过他们用 一个预先选择的对象来代替上下文变量容器(map)来执行,如下:

*{customer.name}

被指定的object由th:object属性定义

<div th:object="${book}">  
      ...  
      <span th:text="*{title}">...</span>  
      ...  
    </div> 

文字国际化表达式

文字国际化表达式允许我们从一个外部文件获取区域文字信息(.properties), 用key索引Value, 还可以提供一组参数(可选).

 #{main.title}  
 #{message.entrycreated(${entryId})}  

可以在模板文件中找到这样的表达式代码:

    <table>  
      ...  
      <th th:text="#{header.address.city}">...</th>  
      <th th:text="#{header.address.country}">...</th>  
      ...  
    </table>  

URL表达式

URL表达式指的是把一个有用的上下文或回话信息添加到URL,这个过程经常被叫做URL重写

@{/order/lsit}

URL还可以设置参数

@{/oeder/details(id=${orderId}))}

相对路径

@{../document/report}

变量表达式和星号有什么区别么?

–如果不考虑上下文的情况,两者没有区别, 星号语法评估在选定对象上,而不是整个上下文.
什么是选定对象? 就是父标签的值,如下:

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

这完全是等价于

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