Thymeleaf基礎知識

時間 2019-11-19

標籤 thymeleaf 基礎知識简体版

原文原文鏈接

Thymeleaf是一個Java類庫，它是一個xml/xhtml/html5的模板引擎，能夠做爲MVC的Web引用的View層。javascript

Thymeleaf還提供了額外的模塊與SpringMVC集成，所以推薦使用Thymeleaf來替代JSPcss

一、引入Thymeleafhtml

　　下面的diam是一個基本的Thymeleaf模板頁面，在這裏引入Boostrap（做爲樣式控制）和jQuery（DOM操做）html5

<html xmlns:th="http://www.thymeleaf.org"><!--1-->
    <head>
        <meta content="text/html;charset=UTF-8"/>
        <link th:src="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet"/><!--2-->
        <link th:src="@{bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet"/><!--2-->
    </head>

    <body>
        <script th:src="@{jquery-1.10.2.min.js}" type="text/javascript"></script><!--2-->
        <script th:src="@{bootstrap/css/bootstrap.min.js}"></script><!--2-->
    </body>
</html>

Analysize:java

　　a、經過xmlns:th=http://www.thymeleaf.org命名空間，將鏡頭頁面轉換爲動態的視圖。須要進行動態處理的元素將使用「th：」爲前綴；jquery

　　b、經過「@{}」引用web靜態資源，這在JSP下是極易出錯的。web

二、訪問model中的數據bootstrap

　　經過「${}」訪問model中的屬性，這和JSP極爲類似spa

<div lass = "panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">訪問model</h3>
    </div>
    <div class="panel-body">
        <span th:text="${singlePerson.name}"></span>
    </div>
</div>

Analysize:code

　　使用<span th:text="${singlePerson.name}"></span>訪問model中的singlePerson的name屬性。注意：須要處理的動態內容須要加上「th:」前綴。

三、model中的數據迭代

　　Thymeleaf的迭代和JSP的寫法類似

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">列表</h3>
    </div>
    <div class="panel-body">
        <ul class="list-group">
            <li class="list-group-item" th:each="person:${people}">
                <span th:text="${person.name}"></span>
                <span th:text="${person.age}"></span>
            </li>
        </ul>
    </div>
</div>

Analysize：

　　使用th:each來作循環迭代（th:each="person:${people}"）,person做爲迭代元素來使用。而後像上面同樣訪問迭代元素中的屬性。

四、數據判斷

<div th:if="${not #lists.isEmpty(people)}">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">列表</h3>
        </div>
        <div class="panel-body">
            <ul class="list-group">
                <li class="list-group-item" th:each="person:${people}">
                    <span th:text="${person.name}"></span>
                    <span th:text="${person.age}"></span>
                </li>
            </ul>
        </div>
    </div>
</div>

Analysize：

　　經過${not#lists.isEmpty{people}}表達式判斷people是否爲空。Thymeleaf支持>、<、>=、<=、==、！=做爲比較條件，同時也支持將SpringEL表達式語言用於條件中。

五、在JavaScript中訪問model

　　在項目中，須要在JavaScript訪問model中的值，在Thymeleaf裏實現代碼以下：

<script th:inline="javascript">
    var single = [[${singlePerson}]];
    console.log(single.name + "/" + single.age)
</script>

Analysize：

　　經過th:inline="javascript"添加到script標籤，這樣JavaScript代碼便可訪問model中的屬性

　　經過「[[${}]]」格式得到實際的值

還有一種時須要在html的代碼裏訪問model中的屬性，例如須要在列表後單擊每一行後面的按鈕得到model中的值，可作以下處理：

<li class="list-group-item" th:each="person:${people}">
    <span th:text="${person.name}"></span>
    <span th:text="${person.age}"></span>
    <button class="btn" th:onclick="'getName(\'' + ${person.name} + '\');'">得到名字</button>
</li>