快捷導(dǎo)航

SpringBoot引入Thymeleaf的實現(xiàn)方法

更新時間：2019年04月04日 10:31:44 作者：Bobby

這篇文章主要介紹了SpringBoot引入Thymeleaf的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.Thymeleaf簡介

Thymeleaf是個XML/XHTML/HTML5模板引擎，可以用于Web與非Web應(yīng)用

Thymeleaf的主要目標(biāo)在于提供一種可被瀏覽器正確顯示的、格式良好的模板創(chuàng)建方式，因此也可以用作靜態(tài)建模,Thymeleaf的可擴(kuò)展性也非常棒。你可以使用它定義自己的模板屬性集合,這樣就可以計算自定義表達(dá)式并使用自定義邏輯,Thymeleaf還可以作為模板引擎框架。

2.引入Thymeleaf

引入依賴

在maven（pom.xml）中直接引入：

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

配置Thymeleaf

在application.yml配置Thymeleaf

server:
 port: 8000
spring:
 thymeleaf:
 cache: false # 關(guān)閉頁面緩存
 encoding: UTF-8 # 模板編碼
 prefix: classpath:/templates/ # 頁面映射路徑
 suffix: .html # 試圖后的后綴
 mode: HTML5 # 模板模式

# 其他具體配置可參考o(jì)rg.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties
# 上面的配置實際上就是注入該類的屬性值

demo示例

創(chuàng)建IndexController

@Controller
public class IndexController {
 // 返回視圖頁面
 @RequestMapping("index")
 public String index(){
  return "index";
 }

}

創(chuàng)建index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
 Hello Thymeleaf!
</body>
</html>

創(chuàng)建TestController

@RestController
public class TestController {
 
 // 返回整個頁面
 @RequestMapping("/test")
 public ModelAndView test(){
  return new ModelAndView("test");
 }
}

創(chuàng)建test.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
Hello Thymeleaf! </br>
By: ModelAndView
</body>
</html>

3.測試結(jié)果

4.Thymeleaf基礎(chǔ)語法及使用

1.引入標(biāo)簽

html標(biāo)簽里引入xmlns:th="http://www.thymeleaf.org"才能使用th:*這樣的語法

2.引入URL

@{...}

例如：

<a th:href="@{http://www.baidu.com}" rel="external nofollow" >絕對路徑</a> 是訪問絕對路徑下的URL， <a th:href="@{/}" rel="external nofollow" >相對路徑</a> 是訪問相對路徑下的URL。

<a th:href="@{css/bootstrap.min.css}" rel="external nofollow" >是引入默認(rèn)的static下的css文件夾下的bootstrap文件，類似的標(biāo)簽有: th:href 和 th:src

3.獲取變量

通過${}取值，對于JavaBean的話，使用變量名.屬性名獲取

4.字符串替換

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

注意：|…|中只能包含變量表達(dá)式${…}，不能包含其他常量、條件表達(dá)式等

5.運算符

   在表達(dá)式中可以使用各類算術(shù)運算符
   例如 (+, -, *, /, %)
   例如:th:with="isEven=(${stat.number} % 1 == 0)"
   邏輯運算符 (>, <, <=,>=，==,!=)
   需要注意的是使用<,>的時候需要轉(zhuǎn)義

th:if="${stat.number} &gt; 1"
th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"

6.條件

if/unless th:if是該標(biāo)簽在滿足條件的時候才會顯示，unless是不成立時候才顯示

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

switch thymeleaf支持switch結(jié)構(gòu)，默認(rèn)屬性（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>

7.循環(huán)

<tr th:each="prod : ${prods}">
 <td th:text="${prod.name}">Onions</td>
 <td th:text="${prod.price}">2.41</td>
 <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>

8.Utilities