thymeleaf教程

時間 2019-11-20

標籤 thymeleaf 教程简体版

原文原文鏈接

本教程涵蓋了常見的前端操做，好比，判斷，循環，引入模板，經常使用函數（日期格式化，字符串操做）下拉，js和css中使用，基本能夠應對通常場景。javascript

怎麼使用？

前端html頁面標籤中引入以下：css

<html xmlns:th="http://www.thymeleaf.org">

表達式

簡單表達式 html
- 可用值表達式(後臺設置): ${…}
- 全部可用值表達式: *{…}前端
好比*{name} 從可用值中查找name，若是有上下文，好比上層是object，則查object中的name屬性。html5
消息表達式: #{…}

國際化時使用，也可使用內置的對象，好比date格式化數據java
連接表達式: @{…}
用來配合link src href使用的語法
片斷表達式: ~{…}
用來引入公共部分代碼片斷，並進行傳值操做使用的語法。
文字app
- 文本： ‘one text’,’another text’,…
- 數字： 1,2,1.2，…
- 布爾: true,false
- 空值：null
- 單詞: something,main,name,…
文本操做less
- 連接：+
- 替換：|The name is ${name}|
  html <a href="" th:href="@{|/name/${test.size()}|}">連接地址：</a> //渲染後的結果 <a href="/name/3">連接地址：</a>
數學操做async
- 二元操做：+, - , * , / , %
- 一元操做: - （負）
布爾操做函數
- 一元 : and or
- 二元 : !,not
比較
- 比較：> , < , >= , <= ( gt , lt , ge , le )
- 等於：== , != ( eq , ne )
條件
- If-then: (if) ? (then)
- If-then-else: (if) ? (then) : (else)
- Default: (value) ?: (defaultvalue)
無操做
使用_ 來禁止轉義。

支持的操做

html5的操做支持：

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:fragment
th:frame             th:frameborder             th:headers
th:height             th:high             th:href
th:hreflang             th:hspace             th:http-equiv

th:icon             th:id             th:inline
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:onabort            th:onafterprint
th:onbeforeprint            th:onbeforeunload            th:onblur
th:oncanplay            th:oncanplaythrough            th:onchange
th:onclick            th:oncontextmenu            th:ondblclick
th:ondrag            th:ondragend            th:ondragenter
th:ondragleave            th:ondragover            th:ondragstart
th:ondrop            th:ondurationchange            th:onemptied
th:onended            th:onerror            th:onfocus
th:onformchange            th:onforminput            th:onhashchange
th:oninput            th:oninvalid            th:onkeydown
th:onkeypress            th:onkeyup            th:onload
th:onloadeddata            th:onloadedmetadata            th:onloadstart
th:onmessage            th:onmousedown            th:onmousemove
th:onmouseout            th:onmouseover            th:onmouseup
th:onmousewheel            th:onoffline            th:ononline
th:onpause            th:onplay            th:onplaying
th:onpopstate            th:onprogress            th:onratechange
th:onreadystatechange            th:onredo            th:onreset
th:onresize            th:onscroll            th:onseeked
th:onseeking            th:onselect            th:onshow
th:onstalled            th:onstorage            th:onsubmit
th:onsuspend            th:ontimeupdate            th:onundo
th:onunload            th:onvolumechange            th:onwaiting
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:vspace            th:width            th:wrap
th:xmlbase            th:xmllang            th:xmlspace

布爾類型

th:async th:autofocus th:autoplay
th:checked th:controls th:declare
th:default th:defer th:disabled
th:formnovalidate th:hidden th:ismap
th:loop th:multiple th:novalidate
th:nowrap th:open th:pubdate
th:readonly th:required th:reversed
th:scoped th:seamless th:selected

判斷操做

thymeleaf提供了幾種判斷，if、switch

後臺數據

public class TestVo { private String name; private Integer Score; private Integer male; private Date birthday; public TestVo(String name, Integer score, Date birthday, Integer male) { this.name = name; Score = score; this.male = male; this.birthday = birthday; }

@RequestMapping("/test01") public String thymeleaf(ModelMap map){ List<TestVo> testVos=new ArrayList<>(); testVos.add(new TestVo("數學",10,new Date(),1)); testVos.add(new TestVo("數學0001",70,new Date(),2)); testVos.add(new TestVo("數學01",100,new Date(),3)); map.put("test",testVos); return "/back/import/test"; }

前端語法

<table> <thead> <th></th> </thead> <tbody> <tr th:each="test:${test}"> <!--判斷成績--> <td th:if="${test.Score} gt 0 and ${test.Score} lt 60">差</td> <td th:if="${test.Score} ge 60 and ${test.Score} le 70">中</td> <td th:if="${test.Score} gt 70 and ${test.Score} le 80">良</td> <td th:if="${test.Score} gt 80 and ${test.Score} le 90">優</td> <td th:if="${test.Score} gt 90 and ${test.Score} le 100">超級優秀</td> </tr> <br> <tr th:each="test:${test}"> <!--判斷成績 通常只有兩種狀況的時候可使用這種方式--> <td th:if="${test.Score} gt 0 and ${test.Score} lt 60">差</td> <!--除了這些條件以外的--> <td th:unless="${test.Score} gt 0 and ${test.Score} lt 60">及格</td> </tr> <tr th:each="test:${test}"> <td th:switch="${test.male}"> <span th:case="1">男</span> <span th:case="2">女</span> <!--其餘狀況--> <span th:case="*">未知</span> </td> </tr> </tbody> </table>

結果

差
中
超級優秀

差
及格
及格

男
女

模板操做

主要引入公共頭部和底部相關代碼使用，固然也能夠其餘地方使用
- 示例

底部模板代碼

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"> <body> <div th:fragment="footer"> © 2016 xxx </div> </body> </html>

Springboot整合引入模塊

<!--寫入絕對路徑便可引入 --> <div th:include="/back/import/footer :: footer"></div>

文本和帶格式文本

用來輸入內容到標籤內部，而不是attr中。分爲th:text和th:utext兩種，後者能夠渲染文本中的標籤。
- th:utext

map.put("msgutext","<b>1111</b>");

<div th:utext="${msgutext}"></div>

結果：被渲染了

th:text

<div th:text="${msgutext}"></div>

結果:原樣輸出到頁面。

外圍包裹–block

有時候須要在代碼外部加層條件，但寫div之類的又影響樣式，此狀況下你能夠用下面這種方式:

<th:block th:with="score=${test.Score}"> <td th:if="${score} ge 60">及格啦</td> </th:block>

循環

遍歷元素

示例：

<tr th:each="test:${test}"> <td th:text="${test.Score}"></td> </tr>

循環下標判斷

List<String> list=new ArrayList<String>(); list.add("1s"); list.add("2s"); list.add("3s"); map.put("list",list);

<th:block th:each="mylist,iterStat:${list}"> 111 <span th:text="${mylist}"></span> <th:block th:if="${iterStat.index le 1}"> <span th:text="${mylist}"></span> </th:block> </th:block>

經常使用操做

日期格式化

<td th:text="${#dates.format(content.createDate,'yyyy-MM-dd HH:mm:ss')}" ></td>

字符截取長度

<td th:if="${#strings.length(content.title) gt 5 } " th:text="${#strings.substring(content.title,0,5) + '…'}"></td>

下拉選擇

<select name="subId" id="subId" lay-verify="" > <option value="">請選擇</option> <option th:each="channelsub:${subchannels}" th:selected="${channelsub.id == subId}" th:value="${channelsub.id}" th:text="${channelsub.name}"></option> </select>

js取值

有時候須要傳遞參數到js中，按以下方式：

<script th:inline="javascript" > var size= [[${test.size()}]]; console.info(size) </script>

進階
ps: 下面涉及到thymeleaf的語法出，能夠替換成其餘thymeleaf的語法來用

<script th:inline="javascript" > //尺寸等於3時打印日誌.. /*[# th:if="${test.size() eq 3}"]*/ console.info('Welcome admin'); /*[/]*/ </script>

css取值

首先須要後臺設置classname、align的值，以後按以下方式：

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

結語

thymeleaf還有不少其餘的語法，這裏只是作個入門，方便上手，詳細教程請參閱官方教程。固然也能夠加羣交流。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。