Thymeleaf語法

時間 2020-06-22

標籤 thymeleaf 語法简体版

原文原文鏈接

1、前言

Thymeleaf 是什麼？ Thymeleaf 是 Web 和獨立環境的現代服務器端 Java 模板引擎，可以處理HTML，XML，JavaScript，CSS 甚至純文本。
什麼是模板引擎？模板引擎（這裏特指用於Web開發的模板引擎）是爲了使用戶界面與業務數據（內容）分離而產生的，它能夠生成特定格式的文檔，用於網站的模板引擎就會生成一個標準的HTML文檔。
相似的模板引擎有哪些？市面上主流的 Java 模板引擎有：JSP、Velocity、Freemarker、Thymeleaf
模板引擎的做用：將靜態頁面和業務數據進行整合，由服務器端渲染以後返回客戶端進行顯示。不一樣的模板引擎的區別在於使用不一樣的語法。
自我認知從jsp到thymeleaf,再到vue，這是一個先後端逐漸分離的過程。jsp的特色是頁面中能夠嵌套java代碼，這顯然很強大，但致使的結果是頁面邏輯（一些前端界面元素的顯示隱藏，以及動態變化）和業務邏輯（一些須要訪問後臺的操做，如數據庫查詢）經常糾纏在一塊兒，代碼混亂不堪，可維護性差，先後臺人員職責分工不明確，責任難以追蹤。到了thymeleaf，狀況好了不少，由於thymeleaf支持html界面，不管是否是在服務器環境下，界面都能展現，在界面上直接與後臺交互的狀況也少了不少。再到如今很火的vue，纔算實現了真正意義上的先後端分離，前端人員專一於前臺界面，後端人員專一於後臺接口。

2、SpringBoot環境下使用thymeleaf

Springboot整合thymeleaf很簡單，下面只介紹下幾個步驟: 1.導入依賴javascript

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2.簡單配置 application.propertiescss

spring.thymeleaf.enabled=true
spring.thymeleaf.cache=false
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.mode=HTML
spring.thymeleaf.suffix=.html

3.在html界面引入名稱空間html

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    ......
</html>

3、語法詳解

thymeleaf語法都是html標籤加th:*的形式 <br/>前端

一、文本操做

//輸出字符串 thymeleaf
<h2 th:text="'thymeleaf'"></h2>

//輸出字符串 thymeleaf
<h2 th:utext="'thymeleaf'"></h2>

th:text和th:utext的區別：<br/> th:utext中的html標籤會正常翻譯成html標籤，而th:text的內容原樣輸出。以下：vue

<p th:text="'hello <b>thymeleaf</b>'"></p> //原樣輸出
<p th:utext="'hello <b>thymeleaf</b>'"></p>  //thymeleaf加粗

輸出包含空格的文本：<br/>java

<h2 th:text="'thymeleaf home page'"></h2>
<h2 th:utext="|thymeleaf home page|"></h2>

全部th:*標籤均可以用data-th-*替換：spring

<h2 data-th-text="|thymeleaf home page|"></h2>
<h2 data-th-utext="|thymeleaf home page|"></h2>

二、幾種經常使用符號

#號用於國際化 1.在templates文件夾下創建i18n目錄，新建messages_zh_CN.properties文件，內容以下：數據庫

thymeleaf.welcome=welcome to thymeleaf index page

2.在application.properties中配置：後端

spring.messages.basename=i18n/messages

3.在界面中使用：瀏覽器

<p th:text="#{thymeleaf.welcome}"></p>

<code>$</code>用於後端取值

後端要向model存入user對象

<div th:text="${user.name}"></div>

* 用於綁定一個對象的屬性，與$結合使用

<span th:object="${human}">
    姓名：<span th:text="*{name}"></span> <br>
    愛好：<span th:text="*{favorite}"></span> <br>
    國籍：<span th:text="*{nationality}"></span> <br>
</span>

@用於連接

<!--引入static/css目錄中的thymeleaf.css -->
<link rel="stylesheet" href="../static/css/thymeleaf.css" th:href="@{/css/thymeleaf.css}">

<!--超連接 最終路徑爲/user/find?username=id-->
<a th:href="@{/user/find(username=${human.name})}">查找用戶</a> 

<!--最終路徑爲：/user/find/具體的username-->
<a th:href="@{/user/find/{username}(username=${human.name})}">查找用戶</a> <br>

~用於取到項目根路徑

<a th:href="@{~/user/find/jack}">查找用戶</a>

三、操做html元素

<!--修改value屬性-->
<input type="submit" value="提交" th:value="submit">
<br>

<!--等價於-->
<input type="submit" value="提交" th:attr="value='submit'">
<hr>

<!--除了th:value還有不少其它html元素的屬性均可用。-->

<!--追加樣式一個addStyle樣式-->
<input type="text" class="originStyle" th:classappend="'addStyle'">
<hr>

<!--設置選擇狀態-->
<input type="checkbox" th:checked="${isChecked}">

四、幾種表達式

三元表達式

<div th:object="${user}">
    <div th:text="*{username} == null ? 'username is not defined' : *{username}"></div>
</div>

三元表達式省略寫法，表達式爲真，值爲*{favorite}，不然,值爲後面的字符串

<div th:object="${user}">
    <div th:text="*{username}?:'username attribute is not defined'"></div>
</div>

三元表達式省略寫法,表達式爲真，會給標籤加上customStyle樣式，爲假，返回null，什麼也不執行

<div th:class="${customStyleOn} ? 'customStyle'"></div>

switch表達式

<div th:switch="${usernames.get(1)}">
    username:
    <p th:case="'Lorem'">lorem</p>
    <p th:case="'ipsum'">ipsum</p>
    <p th:case="'dolor'">dolor</p>
    <p th:case="*">whatever</p>  <!--都不匹配時執行-->
</div>

五、條件判斷、算數運算

<!--用#引用內置對象判斷字符串是否爲空-->
<div th:if="${not #strings.isEmpty('lorem')}">lorem</div>

<div th:unless="${ #strings.isEmpty('lorem')}">lorem</div>

<div th:text="33 + 22"></div>

<div th:text="${number} + 22 > 30"></div>

六、循環迭代

<ul>
   <!--遍歷user對象，若是是第偶數個則加上自定義樣式，若是是奇數，加上詳情鏈接-->
    <li th:each="user : ${users}" th:classappend="${userStat.even}?'m-list-even'">
        <span th:text="${user}"></span>
        <a th:href="@{/user/find/{username}(username=${user})}" th:if="${userStat.odd}">view detail</a>
    </li>
</ul>

七、fragment的使用

fragment相似於jsp的jsp:include，用於重用一些頁面。在templates目錄下創建一個footer.html用於存放通用的版權片斷：內容以下：

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--copyright是片斷的名字-->
<footer th:fragment="copyright">
    <div>
        &copy;2019-2020 Designed by Oamha, Glad to receive your reply
    </div>
</footer>
</html>

下面就能夠將其引入到其它界面中了：

<!--footer是片斷所在的文件名，copyright是片斷名-->
<div th:insert="footer :: copyright"></div>

<!--上面等價於-->
<div th:insert="~{footer :: copyright}"></div>

<!--引入片斷也能夠用th:replace-->
<div th:replace="footer :: copyright"></div>

<!--還能夠用th:include-->
<div th:include="footer :: copyright"></div>

th:insert保留當前頁面的div根標籤，也保留copyright片斷的footer根標籤
th:replace只保留copyright片斷的footer根標籤,div被替換掉了
th:include保留當前界面的div，但只包含copyright片斷的裏的內容，再也不包含footer根標籤

片斷還能夠傳參數：好比有一個navbar片斷，所在文件templates/nav.html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:fragment="navbar(span, role, username)">
    <span th:replace="${span}"></span>
    <span th:text="${role}"></span>
    <span th:text="${username}"></span>
</div>
</html>

在其餘界面引入：

<!--第一個參數傳入當前界面的span標籤，第二個參數是字符串，第三個參數表明什麼也不傳-->
<div th:replace="nav :: navbar (~{::span}, 'admin', _)">
    <span>這個span將替換片斷中的span</span>
</div>

傳當前界面的標籤也能夠用 ~{this:span}
什麼也不傳另外一種寫法爲 ~{}

八、註釋

<table>
    <!--/*/<th:block th:each="user : ${users}">/*/-->
        <tr>
            <td th:text="${user}">oamha</td>
        </tr>
    <!--/*/</th:block>/*/-->
</table>

thymeleaf註釋格式爲 
內容部分在瀏覽器直接打開時會被當成註釋，只有在服務器環境下才會被模板引擎正確解析

九、行內表達式

<th:block th:with="str='hello <strong>thymeleaf</strong>'">
    <p>[[${str}]]</p>
    <p>[(${str})]</p>
</th:block>

th:block 至關於一個容器，可是不會產生具體的標籤
th:with 爲str變量賦值
[[]]至關於th:text
[()]至關於th:utext

有時咱們須要在JavaScript代碼中訪問session中的值，也能夠用行內表達式

<!--取出session中的user-->
<script th:inline="javascript">
    var user = [[${session.user}]]
</script>

4、總結

thymeleaf的經常使用語法就這些，還有一些內置對象的使用，遇到的話能夠查閱文檔。

原文出處：https://www.cnblogs.com/wotoufahaiduo/p/11354142.html

相關標籤/搜索

每日一句

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