springboot中使用thymeleaf模板

ben4發表於2017-03-01
Spring Boot

整體步驟：
1.在pom.xml中引入thymeleaf依賴,(Jan 30, 2017)的版本

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    <version>1.5.1.RELEASE</version>
</dependency>

2.application.yml 設定 thyemleaf
Thymeleaf快取在開發過程中，肯定是不行的，那麼就要在開發的時候把快取關閉
在 resource/templates下面建立 用來存放我們的html頁面
順便設定下編碼

spring:
 thymeleaf:
   cache: false
   prefix: classpath:/templates/
   suffix: .html
   encoding: UTF-8
   content-type: text/html
   mode: HTML5

這裡我建立的是HTML5
HTML5相比XHTML，新增一些特性：
　　1. 用於繪畫的 canvas 元素；
　　2. 用於媒介回放的 video 和 audio 元素；
　　3. 對本地離線儲存的更好的支援；
　　4. 新的特殊內容元素，比如 article、footer、header、nav、section；
　　5. 新的表單控制元件，比如 calendar、date、time、email、url、search。
新建的HTML5是這樣的

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

</body>
</html>

我們需要改寫下

這個一開始是沒有結束符號的，不改會報404

<meta charset="UTF-8">
這是因為springboot預設使用的版本是thymeleaf2.0，如果要使用3.0的話需要加上
<properties>
     <thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>
     <thymeleaf-layout-dialect.version>2.0.4</thymeleaf-layout-dialect.version>
</properties>

要麼改寫為

<meta charset="UTF-8"/>

要麼就刪掉吧 在yaml檔案中已經設定了編碼
引入所需的th標籤

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

xmlns 屬性可以在文件中定義一個或多個可供選擇的名稱空間
詳細的可以參考http://www.w3school.com.cn/tags/tag_prop_xmlns.asp

<html xmlns="http://www.w3.org/1999/xhtml">

${hello}中的hello可能會標紅，但是不影響

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Hello World!</title>
</head>
<body>
    <h1 th:inline="text">Hello</h1>
    <p th:text="${hello}"></p>
</body>
</html>

編寫訪問的controller
注意，這裡只能用@Controller不能用@RestController，後者會直接輸出json格式的/index,而不是跳轉頁面
@RequestMapping("/helloHtml")和@GetMapping("/helloHtml")兩種方式都是可以的，springboot中允許有不同型別的請求方式
另外，我試了下 在返回頁面是寫成index或者//index也是可以的.

@Controller
        //@RestController
public class TemplateController {

//@RequestMapping("/helloHtml")
        @GetMapping("/helloHtml")
public String helloHtml(Map<String,Object> map){
        map.put("hello","你好");
        return "/index";
        }
}

填寫訪問地址的時候記得是
http://localhost:8080/
如果是
https://localhost:8080/
會報java.lang.IllegalArgumentException:Invalid character found in method name. HTTP method names must be tokens
也就是說訪問的頭必須是http而不是https

在瀏覽器中輸入http://127.0.0.1:8080/helloHtml
得到的結果就是

Hello

你好

title不作為輸出

關於thymeleaf2.0和3.0也是有很大區別的：

1.完整的HTML5 標記支援

Thymeleaf 3.0 不再是基於XML結構的。由於引入新的解析引擎，模板的內容格式不再需要嚴格遵守XML規範。即不在要求標籤閉合，屬性加引號等等。

2.模板型別

Thymeleaf 3 移除了之前版本的模板型別，新的模板型別為：
HTML
XML
TEXT
JAVASCRIPT
CSS
RAW
2個標記型模板(HTML和XML)，3個文字型模板(TEXT, JAVASCRIPT和CSS) 一個無操作(no-op)模板 (RAW)。
HTML模板支援包括HTML5，HTML4和XHTML在內的所有型別的HTML標記。且不會檢查標記是否完整閉合。此時，標記的作用範圍按可能的最大化處理。

3.片段（Fragment）表示式；
4.無操作標記；
5.模板邏輯解耦：Thymeleaf 3.0 允許 HTML和XML模式下的模板內容和控制邏輯完全解耦。
6.效能提示：
7.不依賴於Servlet API；
8.新的方言系統；
9.重構了核心API;

具體可見http://www.tuicool.com/articles/ayeQ3qn


相關文章