Thymeleaf学习

理解Thymeleaf

Java模板引擎。能够处理HTML、XML，JavaScript、CSS甚至纯文本。类似JSP、Freemarker
自然模板。原型即页面
语法优雅易懂。OGNL、SpringEl
遵从Web标准。支持HTML5

Thymeleaf标准方言

如何识别标准方言

<span th:text="...">
<span data-th-text="...">

变量表达式

语法：${...}

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

消息表达式

语法：#{...}

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

也称为文本外部话、国际化或i18n

选择表达式

语法：*{...}

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

与变量表达式区别：他们是在当前选择的对象而不似乎整个上下文变量映射上执行

链接表达式

语法：@{...}

链接表达式可以是相对的，在这种情况下，应用程序上下文将不会作为URL的前缀。

<a th:href="@{../documents/report}">...</a>

也可以是服务器相对（同样，没有应用程序上下文前缀）：

<a th:href="@{~/documents/report}">...</a>

和协议相对（就像绝对URL，但浏览器将使用在显示的页面中使用的相同的HTTP或HTTPS协议）：

<a th:href="@{//static.mycompany.com/res/initial}">...</a>

当然，Link表达式可以是绝对的：

<a th:href="@{http://www.mycompany.com/main}">...</a>

分段表达式

语法：th:insert或th:replace

字面量（文字）

文本

<p>
  Now you are looking at a <span th:text = "'working web application'">template file</span>
</p>

数字

<p>The year is <span th:text="2013">1492</span>.</p>

布尔

<div th:if="${user.isAdmin()} == false">...</div>

null

<div th:if="${variable.something} == null">...

算术操作

+、-、*、/、%

比较和等价

比较：>、<、>=、<= (gt、lt、ge、le)

<ul class="pagination" data-th-if="${page.totalPages le 7}" >

等价：== ,!= (eq、ne)

<option data-th-each="i : ${#arrays.toIntegerArray({5,10,40,100})}" data-th-calue="${i}" data-th-selected="${i eq page.size}" data-th-text="${i}"></option>

条件运算符

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

无操作

_

<span th:text"${user.name} ? : _">no user authenticated<?span>

设置属性值

设置任意属性值th:attr

<form action="subscribe.html" th:attr="action=@{/subscribe}">
  <fieldset>
    <input type="text" name="email" />
    <input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}" />
  </fieldset>
<form>

设置值到指定的属性

<form action="subscribe.html" th:action="@{/subscribe}">
  <fieldset>
    <input type="text" name="email" />
    <input type="submit" value="Subscribe!" th:value="#{subscribe.submit}" />
  </fieldset>
<form>

固定值布尔属性

<input type="checkbox" name="active" th:checked="${user.active}">

迭代器

基本的迭代th:each

<li th:each="book : ${books}" th:text="${book.title}">En las Orillas del Sar</li>

状态变量

index,count,size,current,even/odd.first,last

<table>
  <tr>
    <th>NAME</th>
    <th>PRICE</th>
    <th>IN STOCK</th>
  </tr>
  <tr th:each="prod,iterStat : ${pords}" 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>

条件语句

th:if 、th:unless

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

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

条件语句

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

模板布局

定义和引用片段

<!DOCTYPE html>
<body>
  <div th:fragment="copy">
    &copy;2017<a href="https://waylau.com">waulau.com</a>
  </div>
</body>
</html>

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

不使用th:fragment

...
  <div id="copy-section">
    &copy;2017<a href="https://waylau.com">waulau.com</a>
  </div>
...

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

th:insert、th:replace、th:include三者区别

th:insert它将简单地插入指定的片段作为正文的主标签
th:replace用指定实际片段来替换其主标签
th:include类似于th:insert,但不插入片段它只插入此片段的内容。（3.x版本后，不再推荐使用）

注释

Thymeleaf解析器级注释块
删除<!--/和/--!>之间的所有内容

<!--/*-->
  <div>
    you can see me onlu before Thymeleaf processes me!
  </div>
<!--*/-->

原型注释块

当模块静态打开时（比如原型设计），原型注释块所注释的代码将被注释，而在模板执行时，这些注释的代码，就能被显示出来。

<span>hello!</span>
<!--/*/
  <div th:text="${...}">
  ...
  </div>
/*/-->
<span>goodbye!</span>

内联

内联表达式

[[...]]或[(...)]分别对应于th:text和th:utext

<p>The message is "[(${msg})]"</p>

禁用内联

有时需要金庸这种机制，比如，想输出[[...]]或[(...)]文本内容

<p th:inline="none">A double array looks like this :  [[1,2,3],[4,5]]!</p>

JavaScript内联

<script th:inline="javascript">
  ...
  var username = /*[[${session.uer.name}]]*/ "Gertrud Kiwifruit"
  ...
</script>

##### CSS内联
<style th:inline="css"> .[[${classname}]] { text-align: [[${align}]]; } </style>

表达式基本对象

基本对象

ctx:上下文对象。是org,thymeleaf.context.IContext后者org.thymeleaf.context.IWebContext的实现
locale:字节访问与java.util.Locale关联的当前的请求

request/session等属性
param:用于检索请求参数
session:用于减速session属性
application：用于检索application/servlet上下文属性

Web上下文对象
request:直接访问与当前请求关联的javax.servlet.http.HttpServletRequest对象
session：直接访问与当前请求关联的javax.servlet.http.HttpSession对象
servletContext：直接访问与当前请求关联的javax.servlet.ServletContext对象

Thymeleaf学习

Thymeleaf学习

理解Thymeleaf

Thymeleaf标准方言

变量表达式

语法：${...}

消息表达式

语法：#{...}

选择表达式

语法：*{...}

链接表达式

语法：@{...}

分段表达式

语法：th:insert或th:replace

字面量（文字）

文本

数字

布尔

null

算术操作

+、-、*、/、%

比较和等价

比较：>、<、>=、<= (gt、lt、ge、le)

等价：== ,!= (eq、ne)

条件运算符

无操作

_

设置属性值

设置任意属性值th:attr

设置值到指定的属性

固定值布尔属性

迭代器

基本的迭代th:each

状态变量

条件语句

th:if 、th:unless

条件语句

switch

模板布局

定义和引用片段

不使用th:fragment

th:insert、th:replace、th:include三者区别

注释

Thymeleaf解析器级注释块

原型注释块

内联

内联表达式

禁用内联

JavaScript内联

表达式基本对象

基本对象

ctx:上下文对象。是org,thymeleaf.context.IContext后者org.thymeleaf.context.IWebContext的实现

locale:字节访问与java.util.Locale关联的当前的请求

request/session等属性

Web上下文对象

request:直接访问与当前请求关联的javax.servlet.http.HttpServletRequest对象

session：直接访问与当前请求关联的javax.servlet.http.HttpSession对象

servletContext：直接访问与当前请求关联的javax.servlet.ServletContext对象

猜你喜欢