Thymeleaf語法


Thymeleaf 官網:https://www.thymeleaf.org/

1.入門示例

(1)在controller編寫一個請求,放進去一些數據;

@RequestMapping("/success")
public String success(Model model){
    //存入數據
    model.addAttribute("msg","Hello,Thymeleaf");
    //classpath:/templates/success.html
    return "success";
}

(2)我們要使用thymeleaf,需要在html文件中導入命名空間的約束,方便提示。我們可以去官方文檔的#3中看一下命名空間拿來過來

 xmlns:th="http://www.thymeleaf.org"

(3)我們去編寫下前端頁面 success,html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>BAO</title>
</head>
<body>

<div th:text="${msg}">hello</div>
</body>
</html>

注意: $ 表達式只能寫在th標簽內部,不然不會生效

(4)訪問localhost:8080/success

(5)表達式的使用選擇

Variable Expressions: ${...}:獲取變量值;OGNL;
Selection Variable Expressions: *{...}:選擇表達式:和${}在功能上是一樣
Message Expressions: #{...}:獲取國際化內容
Link URL Expressions: @{...}:定義URL;
Fragment Expressions: ~{...}:片段引用表達式

(6)關閉緩存,實現頁面刷新加載

spring:
  thymeleaf:
    cache: false # 開發時關閉緩存,不然沒法看到實時頁面
    mode: HTML # 用非嚴格的 HTML
    encoding: UTF-8
    servlet:
      content-type: text/html

2.測試練習

(1)我們編寫一個Controller,放一些數據

@RequestMapping("/success2")
public String success2(Map<String,Object> map){
    //存入數據
    map.put("msg","<h1>Hello</h1>");
    map.put("users", Arrays.asList("bsq","qin"));
    //classpath:/templates/success.html
    return "success";
}

(2)前端頁面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>BAO說</title>
</head>
<body>
<h1>Success</h1>

<div th:text="${msg}"></div>
<!--不轉義-->
<div th:utext="${msg}"></div>

<!--遍歷數據-->
<!--th:each每次遍歷都會生成當前這個標簽:-->
<h4 th:each="us :${users}" th:text="${us}"></h4>

<h4>
    <!--行內寫法:官網#12-->
    <span th:each="user:${users}">[[${user}]]</span>
</h4>

</body>
</html>

(4).使用工具類

​ ${#工具類.方法}

(5)引入資源

​ @{/資源地址}

3.常用語法

(1)th:text :獲取變量值

 <p th:text="'Hello!, ' + ${name} + '!'" >name</p>

可以看出獲取變量值用 $ 符號,對於javaBean的話使用 變量名.屬性名 方式獲取,這點和 EL 表達式一樣.

另外 $ 表達式只能寫在th標簽內部,不然不會生效,上面例子就是使用 th:text 標簽的值替換 p 標簽里面的值,至於 p 里面的原有的值只是為了給前端開發時做展示用的.這樣的話很好的做到了前后端分離.

(2)Thymeleaf 對於 URL 的處理是通過語法 @{…} 來處理的

<a th:href="@{http://www.baidu.com}">絕對路徑</a>
<a th:href="@{/}">相對路徑</a>
<a th:href="@{css/bootstrap.min.css}">Content路徑,默認訪問static下的css文件夾</a>

(3)字符串替換

很多時候可能我們只需要對一大段文字中的某一處地方進行替換,可以通過字符串拼接操作完成:

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

一種更簡潔的方式是:

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

當然這種形式限制比較多,|…|中只能包含變量表達式${…},不能包含其他常量、條件表達式等。

(4)th:each :循環

渲染列表數據是一種非常常見的場景,例如現在有 n 條記錄需要渲染成一個表格,該數據集合必須是可以遍歷的,使用 th:each 標簽:

(5)運算符

在表達式中可以使用各類算術運算符,例如+, -, *, /, %

th:with="isEven=(${prodStat.count} % 2 == 0)" 

邏輯運算符>, <, <=,>=,==,!=都可以使用,唯一需要注意的是使用<,>時需要用它的HTML轉義符:

th:if="${prodStat.count} > 1" th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"

(6)條件

if/unless

Thymeleaf 中使用 th:if 和 th:unless 屬性進行條件判斷,下面的例子中,標簽只有在 th:if 中條件成立時才顯示:

<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>

th:unless 於 th:if 恰好相反,只有表達式中的條件不成立,才會顯示其內容。

switch

Thymeleaf 同樣支持多路選擇 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>
</div>

默認屬性 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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM