Thymeleaf-模板引擎

時間 2019-11-21

標籤 thymeleaf 模板引擎简体版

原文原文鏈接

一，Thymeleaf 簡介

Thymeleaf 是一個跟 Velocity、FreeMarker 相似的模板引擎，它能夠徹底替代 JSP 。相較與其餘的模板引擎，它有以下三個極吸引人的特色： javascript

1，Thymeleaf 在有網絡和無網絡的環境下皆可運行，即它可讓美工在瀏覽器查看頁面的靜態效果，也可讓程序員在服務器查看帶數據的動態頁面效果。這是因爲它支持 html 原型，而後在 html 標籤裏增長額外的屬性來達到模板+數據的展現方式。瀏覽器解釋 html 時會忽略未定義的標籤屬性，因此 thymeleaf 的模板能夠靜態地運行；當有數據返回到頁面時，Thymeleaf 標籤會動態地替換掉靜態內容，使頁面動態顯示。 css

2，Thymeleaf 開箱即用的特性。它提供標準和spring標準兩種方言，能夠直接套用模板實現JSTL、 OGNL表達式效果，避免天天套模板、該jstl、改標籤的困擾。同時開發人員也能夠擴展和建立自定義的方言。 html

3.，Thymeleaf 提供spring標準方言和一個與 SpringMVC 完美集成的可選模塊，能夠快速的實現表單綁定、屬性編輯器、國際化等功能。 java

二，Hello Thymeleaf實例

1，建立Maven項目 jquery

具體步驟參照：Eclipse中建立Maven Web項目程序員

2，添加Spring的依賴 spring

具體步驟參考：Maven建立Spring MVC項目 bootstrap

3，修改pom.xml文件，加入Thymeleaf 瀏覽器

<!-- thymeleaf模板引擎 -->
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>2.1.4.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring4</artifactId>
    <version>2.1.4.RELEASE</version>
</dependency>

4，在Spring MVC配置文件中添加thymeleaf視圖解釋器緩存

<!-- 視圖解析器 -->
<!-- 使用thymeleaf解析  -->
<bean id="templateResolver"
    class="org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver">
    <property name="prefix" value="/WEB-INF/views/" />
    <property name="suffix" value=".html" />
    <property name="templateMode" value="HTML5" />
    <!-- 緩存-->
    <property name="cacheable" value="false"/>
</bean>
<bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
    <property name="templateResolver" ref="templateResolver" />
</bean>
 
<bean class="org.thymeleaf.spring4.view.ThymeleafViewResolver">
    <property name="templateEngine" ref="templateEngine" />
    <!--解決中文亂碼-->  
    <property name="characterEncoding" value="UTF-8"/>
</bean>

關閉Thymeleaf頁面的緩存，可讓對頁面的改動及時反映到視圖中。

5，建立一個頁面

html頁面標籤中引入以下：

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

具體html頁面以下：

<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>index</title>
</head>
<body>
    Hello Thymeleaf!
</body>
</html>

6，建立一個Controller

@Controller
@RequestMapping("/index")
public class IndexController {
    
    @RequestMapping("returnString")
    public String returnString(){
        return "index";
    }
}

7，運行項目訪問IndexController

三，頁面參數獲取/回顯

1，建立一個pojo

public class Person {
    private int id;
    private String name;
    private String addrs;
    public Person(int id, String name, String addrs) {
        super();
        this.id = id;
        this.name = name;
        this.addrs = addrs;
    }
    public Person() {
        super();
    }
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getAddrs() {
        return addrs;
    }
    public void setAddrs(String addrs) {
        this.addrs = addrs;
    }
    @Override
    public String toString() {
        return "Person [id=" + id + ", name=" + name + ", addrs=" + addrs + "]";
    }
}

2，建立提交表單頁面person.html

<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>person</title>
<link href="css/bootstrap.css" rel="stylesheet"/>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
    <form th:action="@{savePerson}" th:method="post">
        <div class="form-group">
            <label class="col-sm-2 control-label">id</label> 
            <div class="col-sm-10">
                <input type="text" class="form-control" name="id" placeholder="id" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">名稱</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="name" placeholder="name" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">地址</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="addrs" placeholder="addrs" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">提交</button>
            </div>
        </div>
    </form>
</body>
</html>

解釋：

th:action屬性	表示其值代替靜態頁面的action的值。等價action='/savePerson'。
th:method屬性	表示其值將代替靜態頁面的method的值。等價method='post'。

3，建立回顯頁面return.html

<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>return</title>
<link href="css/bootstrap.css" rel="stylesheet"/>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
    <!-- from表單獲取提交過來的數據 -->
    <h3>from表單獲取提交過來的數據</h3>
    <form th:action="@{savePerson}" th:method="post" th:object="${person}">
        <div class="form-group">
            <label class="col-sm-2 control-label">id</label> 
            <div class="col-sm-10">
                <input type="text" class="form-control" name="id" placeholder="id" th:value="*{id}"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">名稱</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="name" placeholder="name" th:value="*{name}"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">地址</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="addrs" placeholder="addrs" th:value="*{addrs}"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">提交</button>
            </div>
        </div>
    </form>
    <!-- 表格獲取提交過來的數據 -->
    <h3>表格獲取提交過來的數據 </h3>
    <table class="table" th:object="${person}">
      <tr>
        <td>id</td>
        <td>name</td>
        <td>addrs</td>
      </tr>
      <tr>
        <td th:text="${person.id}"></td>
        <td th:text="${person.name}"></td>
        <td th:text="${person.addrs}"></td>
      </tr>
    </table>
</body>
</html>

解釋：

th:object屬性	表示有一個屬性名爲"person"的Java bean傳遞到頁面上來。能夠經過表達式*{fieldName}才能取得其值。
th:value屬性	表示取得Person實例中的屬性值，也就是經過調用Java bean的get方法得到。等價於標籤value='xxx'
th:text屬性	文本顯示。等價於標籤text='xxx'

4，建立PersonController

@Controller
public class PersonController {
    @RequestMapping
    public String returnString(){
        return "person";
    }
    
    @RequestMapping("/savePerson")
    public String savePerson(Model Model ,Person person){
        Model.addAttribute("person", person);
        return "return";
    }
}

運行訪問：http://localhost:8081/Thymeleaf/，點擊提交

運行結果：

四，基本表達式

1，${}

變量表達式（美圓表達式），用於訪問容器上下文環境中的數據，功能與jstl中${}的相同。

<td th:text="${person.id}"></td>
<td th:text="${person.name}"></td>
<td th:text="${person.addrs}"></td>

2，*{}

選擇表達式（星號表達式），獲取選定對象裏的數據域（th:object屬性用於綁定對象）。

選擇表達式與變量表達式的區別：

選擇表達式計算的是選定的對象，而不是整個環境變量映射。也就是：只要是沒有選擇的對象，選擇表達式與變量表達式的語法是徹底同樣的。

<!-- from表單獲取提交過來的數據 -->
<h3>from表單獲取提交過來的數據</h3>
<form th:action="@{savePerson}" th:method="post" th:object="${person}">
    <div class="form-group">
        <label class="col-sm-2 control-label">id</label> 
        <div class="col-sm-10">
            <input type="text" class="form-control" name="id" placeholder="id" th:value="*{id}"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">名稱</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="name" placeholder="name" th:value="*{name}"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">地址</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="addrs" placeholder="addrs" th:value="*{addrs}"/>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">提交</button>
        </div>
    </div>
</form>

3，#{}

沒明白怎麼使用！本身測試不出來。但願看見的大佬能指點迷津。

4，@{}

超連接url表達式。

<script th:src="@{/js/jquery/jquery.js}"></script>

五，經常使用屬性

1，th:action

定義後臺控制器路徑，相似<form>標籤的action屬性。
2，th:each

對象遍歷，功能相似jstl中的<c:forEach>標籤

Controller

@RequestMapping("/listPerson")
public String listPerson(Model Model){
    List<Person> list = new ArrayList<Person>();
    list.add(new Person(1, "Zender", "Shanghai"));
    list.add(new Person(2, "Zender2", "Shanghai2"));
    list.add(new Person(3, "Zender3", "Shanghai3"));
    Model.addAttribute("listPerson", list);
    return "listPerson";
}

頁面

<head>
<meta charset="UTF-8"/>
<title>listPerson</title>
<link th:href="@{/css/bootstrap.css}" rel="stylesheet"/>
<script th:src="@{/js/jquery-3.2.1.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>
</head>
<body>
    <h3>each循環</h3>
    <table class="table">
      <tr>
        <td>id</td>
        <td>name</td>
        <td>addrs</td>
      </tr>
      <tbody th:each="person,personStat:${listPerson}">
          <tr>
            <td th:text="${person.id}"></td>
            <td th:text="${person.name}"></td>
            <td th:text="${person.addrs}"></td>
          </tr>
      </tbody>
    </table>
</body>
</html>

personStat稱做狀態變量，屬性有：

index	當前迭代對象的index（從0開始計算）。
count	當前迭代對象的index(從1開始計算)。
size	被迭代對象的大小。
current	當前迭代變量。
even/odd	布爾值，當前循環是不是偶數/奇數（從0開始計算）。
first	布爾值，當前循環是不是第一個。
last	布爾值，當前循環是不是最後一個。

3，th:field

經常使用於表單字段綁定。一般與th:object一塊兒使用。屬性綁定、集合綁定。

Controller

@RequestMapping("/person")
public String returnString(){
    return "person";
}
 
@RequestMapping("/savePerson")
public String savePerson(Model Model ,Person person){
    Model.addAttribute("person", person);
    return "return";
}

表單頁面

<form th:action="@{savePerson}" th:method="post">
    <div class="form-group">
        <label class="col-sm-2 control-label">id</label> 
        <div class="col-sm-10">
            <input type="text" class="form-control" name="id" placeholder="id" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">名稱</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="name" placeholder="name" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">地址</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="addrs" placeholder="addrs" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">提交</button>
        </div>
    </div>
</form>

回顯頁面

<!-- from表單獲取提交過來的數據 -->
<h3>from表單獲取提交過來的數據</h3>
<form th:action="@{savePerson}" th:method="post" th:object="${person}">
    <div class="form-group">
        <label class="col-sm-2 control-label">id</label> 
        <div class="col-sm-10">
            <input type="text" class="form-control" name="id" placeholder="id" th:field="*{id}"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">名稱</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="name" placeholder="name" th:field="*{name}"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">地址</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="addrs" placeholder="addrs" th:field="*{addrs}"/>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">提交</button>
        </div>
    </div>
</form>

4，th:href

定義超連接。

<link th:href="@{/css/bootstrap.css}" rel="stylesheet"/>

5，th:id

id聲明，相似html標籤中的id屬性。

<div th:id="ids"></div>

6，th:if，th:unless

th:if條件判斷，th:if中條件成立時才顯示。

th:unless於th:if剛好相反，表達式中的條件不成立，纔會顯示其內容。

<div th:if="${person.id} == 0">123</div>

7，th:include，th:replace和th:fragment

th:fragment	佈局標籤，定義一個代碼片斷，方便其它地方引用。常與th:include，th:replace一塊兒使用。
th:include	佈局標籤，替換內容到引入的文件。
th:replace	佈局標籤，替換整個標籤到引入的文件。

模板文件footer.html：

<div th:fragment="footer" >
    Copyright ©2018 Zender
</div>
<div th:fragment="head" >
    頭部 Zender
</div>

頁面index.html

<body>
    <div th:include="../templates/footer :: head"></div>
    Hello Thymeleaf!
    <div th:include="../templates/footer :: footer"></div>
</body>

文件路徑

訪問

8，th:src

用於外部資源引入，相似於<script>標籤的src屬性，常與@{}一塊兒使用。

<script th:src="@{/js/jquery-3.2.1.js}"></script>

9，th:text

文本顯示。

<td class="text" th:text="${username}" ></td>

10，th:value

用於標籤複製，相似<option>標籤的value屬性。

<input type="text" class="form-control" name="name" placeholder="name" th:value="*{name}"/>

11，th:switch

默認屬性default能夠用*表示。

<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:id	替換id	<input th:id="'xxx' + ${collect.id}"/>
th:text	文本替換	<p th:text="${collect.description}">description</p>
th:utext	支持html的文本替換	<p th:utext="${htmlcontent}">conten</p>
th:object	替換對象	<div th:object="${session.user}">
th:value	屬性賦值	<input th:value="${user.name}" />
th:with	變量賦值運算	<div th:with="isEven=${prodStat.count}%2==0"></div>
th:style	設置樣式	th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"
th:onclick	點擊事件	th:onclick="'getCollect()'"
th:each	屬性賦值	tr th:each="user,userStat:${users}">
th:if	判斷條件	<a th:if="${userId == collect.userId}" >
th:unless	和th:if判斷相反	<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
th:href	連接地址	<a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />
th:switch	多路選擇配合th:case 使用	<div th:switch="${user.role}">
th:case	th:switch的一個分支	<p th:case="'admin'">User is an administrator</p>
th:fragment	佈局標籤，定義一個代碼片斷，方便其它地方引用	<div th:fragment="alert">
th:include	佈局標籤，替換內容到引入的文件	<head th:include="layout :: htmlhead" th:with="title='xx'"></head> />
th:replace	佈局標籤，替換整個標籤到引入的文件	<div th:replace="fragments/header :: title"></div>
th:selected	selected選擇框選中	th:selected="(${xxx.id} == ${configObj.dd})"
th:src	圖片類地址引入	<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />
th:inline	定義js腳本可使用變量	<script type="text/javascript" th:inline="javascript">
th:action	表單提交的地址	<form action="subscribe.html" th:action="@{/subscribe}">
th:remove	刪除某個屬性	<tr th:remove="all"> 1.all:刪除包含標籤和全部的孩子。2.body:不包含標記刪除,但刪除其全部的孩子。3.tag:包含標記的刪除,但不刪除它的孩子。4.all-but-first:刪除全部包含標籤的孩子,除了第一個。5.none:什麼也不作。這個值是有用的動態評估。
th:attr	設置標籤屬性，多個屬性能夠用逗號分隔	好比 th:attr="src=@{/image/aa.jpg},title=#{logo}"，此標籤不太優雅，通常用的比較少。

相關標籤/搜索

每日一句

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