Thymeleaf 2-基礎語法

時間 2020-06-22

標籤 thymeleaf 基礎語法简体版

原文原文鏈接

3、基礎語法

　　1.建立HTMLhtml

　　　　由上文也能夠知道須要在html中添加：前端

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

　　　　這樣，下文才能正確使用th:*形式的標籤！java

　　2.獲取變量值${...}express

　　　　經過${…}進行取值，這點和ONGL表達式語法一致！後端

　　<!--/*@thymesVar id="name" type="java.lang.String"*/-->
    <p th:text="'Hello！, ' + ${name} + '!'">3333</p>

　　　選擇變量表達式*{...}網絡

<div th:object="${session.user}">
    <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
    <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p> 
    <p>Nationality: <span th:text={nationality}">Saturn</span>.</p>
</div> 
等價於
<div>
    <p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p> 
    <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p> 
    <p>Nationality: <span th:text="${session.user.nationality}">Saturn</span>.</p>
</div>

　　　　至於p裏面的原有的值只是爲了給前端開發時作展現用的.這樣的話很好的作到了先後端分離。session

　　　　這也是Thymeleaf很是好的一個特性：在無網絡的狀況下也能運行，也就是徹底能夠前端先寫出頁面，模擬數據展示效果，後端人員再拿此模板修改便可！app

　　3.連接表達式: @{…} less

　　　　用來配合link src href使用的語法，相似的標籤有:th:href和th:src前後端分離

<!-- Will produce 'http://localhost:8080/gtvg/order/details?orderId=3' (plus rewriting) --> 

<a href="details.html" th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a> <!-- Will produce '/gtvg/order/details?orderId=3' (plus rewriting) -->

<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>

<a href="details.html" th:href="@{order/{orderId}/details(orderId=${o.id})}">Content路徑,默認訪問static下的order文件夾</a>

　　4.文本替換

<span th:text="'Welcome to our application, ' + ${user.name} + '!'">

　　或者下面的表達方式：（只能包含表達式變量，而不能有條件判斷等！）

<span th:text="|Welcome to our application, ${user.name}!|">

　　5.運算符

　　　　數學運算

二元操做：+, - , * , / , %
一元操做: - （負）

　　　　邏輯運算

一元 : and or
二元 : !,not

　　　　比較運算（爲避免轉義尷尬，可使用括號中的英文進行比較運算！）

比較：> , < , >= , <= ( gt , lt , ge , le )
等於：== , != ( eq , ne )

　　　　條件運算

If-then: (if) ? (then)
If-then-else: (if) ? (then) : (else)
Default: (value) ?: (defaultvalue)

'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))

6.條件

　　　if/unless

　　　使用th:if和th:unless屬性進行條件判斷，th:unless於th:if剛好相反，只有表達式中的條件不成立，纔會顯示其內容。

<a th:href="@{/login}" th:unless=${session.user != null}>Login</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>
  <p th:case="*">User is some other thing</p>
</div>

　　7.循環

　　　　經過th:each

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
    <!-- 不存在則忽略，顯示hello null!(能夠經過默認值進行設置)-->
    <p th:text="'Hello ' + (${name}?:'admin')">3333</p>
    <table>
        <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>AGE</th>
        </tr>
        <tr th:each="emp : ${empList}">
            <td th:text="${emp.id}">1</td>
            <td th:text="${emp.name}">海</td>
            <td th:text="${emp.age}">18</td>
        </tr>
    </table>
</body>
</html>

　　　　後臺：

@GetMapping(value = "/hello")
    public String hello(Model model) {
        List<Emp> empList = new ArrayList<>();
        empList.add(new Emp(1, "校長", 24));
        empList.add(new Emp(2, "書記", 28));
        empList.add(new Emp(3, "小海", 25));
        model.addAttribute("empList", empList);
        return "hello";
    }

　　　　效果：

　　更多循環深刻，iterStat等示例，參考：http://blog.csdn.net/sun_jy2011/article/details/40710429

　8.內置對象Utilites

　　　　通常不推薦在前端進行這些處理，前端頁面以減小邏輯爲宜

按 Ctrl+C 複製代碼

　　經常使用示例：

按 Ctrl+C 複製代碼

String

　　完整參考：點擊查看