學(xué)習(xí)完整課程請(qǐng)移步 互聯(lián)網(wǎng) Java 全棧工程師
本章為 Thymeleaf 語(yǔ)法參考牍白，主要介紹如：循環(huán)首有、判斷戒洼、模板布局俏橘、內(nèi)置對(duì)象等。
聲明
修改 html 標(biāo)簽用于引入 thymeleaf 引擎圈浇，這樣才可以在其他標(biāo)簽里使用 th:* 語(yǔ)法寥掐。
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
使用文本
| 語(yǔ)法 | 說(shuō)明 |
|---|---|
{home.welcome} |
使用國(guó)際化文本,國(guó)際化傳參直接追加 (value…) |
${user.name} |
使用會(huì)話(huà)屬性 |
@{} 表達(dá)式中使用超鏈接 |
<link rel="stylesheet" type="text/css" media="all"href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" /> |
| - | - |
${} |
表達(dá)式中基本對(duì)象 |
| param | 獲取請(qǐng)求參數(shù)，比如 ${param.name}, http://localhost:8080?name=jeff
|
| session | 獲取 session 的屬性 |
| application | 獲取 application 的屬性 |
| execInfo | 有兩個(gè)屬性 templateName 和 now (是 java 的 Calendar 對(duì)象) |
| ctx | |
| vars | |
| locale | |
| httpServletRequest | |
| httpSession | |
| - | - |
| th 擴(kuò)展標(biāo)簽 | |
th:text |
普通字符串 |
th:utext |
轉(zhuǎn)義文本 |
th:href |
鏈接 |
th:attr 設(shè)置元素屬性 |
<img src="../../images/gtvglogo.png" th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" /> |
th:with |
定義常量 |
th:attrappend |
追加屬性 |
th:classappend |
追加類(lèi)樣式 |
th:styleappend |
追加樣式 |
其他標(biāo)簽
| 語(yǔ)法 | 說(shuō)明 |
|---|---|
th:abbr |
|
th:accept |
|
th:accept-charset |
|
th:accesskey |
|
th:action |
|
th:align |
|
th:alt |
|
th:archive |
|
th:audio |
|
th:autocomplete |
|
th:axis |
|
th:background |
|
th:bgcolor |
|
th:border |
|
th:cellpadding |
|
th:cellspacing |
|
th:challenge |
|
th:charset |
|
th:cite |
|
th:class |
|
th:classid |
|
th:codebase |
|
th:codetype |
|
th:cols |
|
th:colspan |
|
th:compact |
|
th:content |
|
th:contenteditable |
|
th:contextmenu |
|
th:data |
|
th:datetime |
|
th:dir |
|
th:draggable |
|
th:dropzone |
|
th:enctype |
|
th:for |
|
th:form |
|
th:formaction |
|
th:formenctype |
|
th:formmethod |
|
th:formtarget |
|
th:frame |
|
th:frameborder |
|
th:headers |
|
th:height |
|
th:high |
|
th:href |
|
th:hreflang |
|
th:hspace |
|
th:http-equiv |
|
th:icon |
|
th:id |
|
th:keytype |
|
th:kind |
|
th:label |
|
th:lang |
|
th:list |
|
th:longdesc |
|
th:low |
|
th:manifest |
|
th:marginheight |
|
th:marginwidth |
|
th:max |
|
th:maxlength |
|
th:media |
|
th:method |
|
th:min |
|
th:name |
|
th:optimum |
|
th:pattern |
|
th:placeholder |
|
th:poster |
|
th:preload |
|
th:radiogroup |
|
th:rel |
|
th:rev |
|
th:rows |
|
th:rowspan |
|
th:rules |
|
th:sandbox |
|
th:scheme |
|
th:scope |
|
th:scrolling |
|
th:size |
|
th:sizes |
|
th:span |
|
th:spellcheck |
|
th:src |
|
th:srclang |
|
th:standby |
|
th:start |
|
th:step |
|
th:style |
|
th:summary |
|
th:tabindex |
|
th:target |
|
th:title |
|
th:type |
|
th:usemap |
|
th:value |
|
th:valuetype |
|
th:vspace |
|
th:width |
|
th:wrap |
|
th:xmlbase |
|
th:xmllang |
|
th:xmlspace |
|
th:alt-title |
|
th:lang-xmllang |
循環(huán)
<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>
<tr>
<th>NAME</th>
<th>PRICE</th>
<th>IN STOCK</th>
</tr>
<tr th:each="prod,iterStat : ${prods}" 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>
迭代器的狀態(tài)：
- index: 當(dāng)前的索引磷蜀，從0開(kāi)始
- count: 當(dāng)前的索引召耘，從1開(kāi)始
- size：總數(shù)
- current:
- even/odd:
- first
- last
判斷
if
<a href="comments.html" th:href="@{/product/comments(prodId=${prod.id})}" th:if="${not #lists.isEmpty(prod.comments)}">view</a>
unless
<a href="comments.html" th:href="@{/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>
</div>
<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>
th:block
<table>
<th:block th:each="user : ${users}">
<tr>
<td th:text="${user.login}">...</td> <td th:text="${user.name}">...</td>
</tr>
<tr>
<td colspan="2" th:text="${user.address}">...</td>
</tr>
</th:block>
</table>
推薦下面寫(xiě)法（編譯前看不見(jiàn)）
<table>
<tr>
<td th:text="${user.login}">...</td>
<td th:text="${user.name}">...</td> </tr>
<tr>
<td colspan="2" th:text="${user.address}">...</td>
</tr>
<!--/*/ </th:block> /*/-->
</table>
th:inline
th:inline 用法
th:inline 可以等于 text , javascript(dart) , none
text: [[…]]
<p th:inline="text">Hello, [[#{test}]]</p>
javascript: /[[…]]/
<script th:inline="javascript">
var username = /*[[
#{test}
]]*/;
var name = /*[[
${param.name[0]}+${execInfo.templateName}+'-'+${#dates.createNow()}+'-'+${#locale}
]]*/;
</script>
<script th:inline="javascript">
/*<![CDATA[*/
var username = [[#{test}]];
var name = [[${param.name[0]}+${execInfo.templateName}+'-'+${#dates.createNow()}+'-'+${#locale}]];
/*]]>*/
</script>
adding code: /* [+…+]*/
var x = 23;
/*[+
var msg = 'Hello, ' + [[${session.user.name}]]; +]*/
var f = function() {
...
removind code: /[- / and /* -]*/
var x = 23;
/*[- */
var msg = 'This is a non-working template'; /* -]*/
var f = function() {
...
