整體步驟:
1.在pom.xml中引入thymeleaf依賴
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2.application.yml 設(shè)置 thyemleaf
Thymeleaf緩存在開發(fā)過程中,肯定是不行的,那么就要在開發(fā)的時候把緩存關(guān)閉
在 resource/templates下面創(chuàng)建 用來存放我們的html頁面
順便設(shè)置下編碼
spring:
thymeleaf:
cache: false
prefix: classpath:/templates/
suffix: .html
encoding: UTF-8
content-type: text/html
mode: HTML5
這里我創(chuàng)建的是HTML5
HTML5相比XHTML,新增一些特性:
1. 用于繪畫的 canvas 元素;
2. 用于媒介回放的 video 和 audio 元素;
3. 對本地離線存儲的更好的支持;
4. 新的特殊內(nèi)容元素,比如 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>
我們需要改寫下
這個一開始是沒有結(jié)束符號的,不改會報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文件中已經(jīng)設(shè)置了編碼
引入所需的th標(biāo)簽
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可能會標(biāo)紅,但是不影響
<!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,而不是跳轉(zhuǎn)頁面
@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
得到的結(jié)果就是
Hello
你好
title不作為輸出
關(guān)于thymeleaf2.0和3.0也是有很大區(qū)別的:
1.完整的HTML5 標(biāo)記支持
Thymeleaf 3.0 不再是基于XML結(jié)構(gòu)的。由于引入新的解析引擎,模板的內(nèi)容格式不再需要嚴格遵守XML規(guī)范。即不在要求標(biāo)簽閉合,屬性加引號等等。
2.模板類型
Thymeleaf 3 移除了之前版本的模板類型,新的模板類型為:
HTML
XML
TEXT
JAVASCRIPT
CSS
RAW
2個標(biāo)記型模板(HTML和XML),3個文本型模板(TEXT, JAVASCRIPT和CSS) 一個無操作(no-op)模板 (RAW)。
HTML模板支持包括HTML5,HTML4和XHTML在內(nèi)的所有類型的HTML標(biāo)記。且不會檢查標(biāo)記是否完整閉合。此時,標(biāo)記的作用范圍按可能的最大化處理。
3.片段(Fragment)表達式;
4.無操作標(biāo)記;
5.模板邏輯解耦:Thymeleaf 3.0 允許 HTML和XML模式下的模板內(nèi)容和控制邏輯完全解耦。
6.性能提示:
7.不依賴于Servlet API;
8.新的方言系統(tǒng);
9.重構(gòu)了核心API;
具體可見http://www.tuicool.com/articles/ayeQ3qn
在項目中可能遇到的問題
1.使用th:onclick()事件時出現(xiàn)的問題
org.thymeleaf.exceptions.TemplateProcessingException: Only variable expressions returning
numbers or booleans are allowed in this context, any other datatypes are not trusted in the context of this expression,
including Strings or any other object that could be rendered as a text literal.
A typical case is HTML attributes for event handlers (e.g. "onload"),
in which textual data from variables should better be output to "data-*" attributes and then
read from the event handler. (template: "xxx" - line xx, col xx)
這是Thymeleaf語法問題
Thymeleaf獲取值得方法:[[${xx.name}]],可以直接獲取xx里面的name值
錯誤寫法:th:onclick="'getName(\''+${person.name}+'\');'"
正確寫法:th:onclick="getName([[${person.name}]]);"