摘要：如果還在使用以前的版本，想要使用非嚴(yán)格的，需要做以下配置在中引入依賴在中配置更多屬性配置請參考中模塊的屬性介紹。這樣的話很好的做到了前后端分離。

本文首發(fā)于：https://y0ngb1n.github.io/a/5...

  org.springframework.boot
  spring-boot-starter-parent
  2.1.0.RELEASE



  1.8

主要增加 spring-boot-starter-thymeleaf 依賴：

spring-boot-starter-thymeleaf：自動裝配 Thymeleaf 模板引擎

  ...

  
  
    org.springframework.boot
    spring-boot-starter-thymeleaf
  
  
  
  ...

application.yml

spring:
  thymeleaf:
    cache: false                  # 是否開啟模板緩存，默認(rèn)為：true，開發(fā)時關(guān)閉緩存，不然沒法看到實時頁面！
    mode: HTML                    # 指定模板的模式，默認(rèn)為：HTML
    encoding: UTF-8               # 指定模板的編碼，默認(rèn)為：UTF-8
    prefix: classpath:/templates/ # 指定模板的前綴，默認(rèn)為：classpath:/templates/
    suffix: .html                 # 指定模板的后綴，默認(rèn)為：.html
    servlet:
      content-type: text/html     # 指定 Content-Type 值，默認(rèn)為：text/html

從 org.thymeleaf.templatemode.TemplateMode 中可見 Thymeleaf 從 3.0.0 版本開始使用 HTML 替代 HTML5、LEGACYHTML5、XHTML、VALIDXHTML。如果還在使用 3.0.0 以前的版本，想要使用非嚴(yán)格的 HTML，需要做以下配置：

在 pom.xml 中引入 nekohtml 依賴

在 application.yml 中配置 spring.thymeleaf.mode=LEGACYHTML5

更多屬性配置請參考「Appendix A. Common application properties」中 # THYMELEAF (ThymeleafAutoConfiguration) 模塊的屬性介紹。（TIPS：使用 CTRL + F 進(jìn)行快速定位）

創(chuàng)建一個 Controller，為 message 屬性賦值并設(shè)置跳轉(zhuǎn)，代碼如下：

IndexController.java

@Controller
public class IndexController {

  @GetMapping(path = {"/", "index"})
  public String indexPage(Model model) {
    model.addAttribute("message", "Hello Thymeleaf!");
    return "index";
  }
}

在 templates 目錄下創(chuàng)建 index.html 文件，并在 html 標(biāo)簽中聲明 Thymeleaf 命名空間 xmlns:th="http://www.thymeleaf.org"，代碼如下：

index.html

  
    
    
  
  
    
Hello World!
  

其中關(guān)鍵的代碼是：

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

主要是讓 IDE 識別 Thymeleaf 命名空間，這樣在標(biāo)簽里輸入 th: 后，IDE 會提示相應(yīng)的語法，方便開發(fā)！不加入這句代碼也不會影響 Thymeleaf 模板引擎的渲染，以及頁面的正常顯示。

啟動成功后，訪問 http://127.0.0.1:8080，即可看到效果：

訪問結(jié)果：Hello Thymeleaf!

JAVA 源碼路徑：TagsController.java

HTML 源碼路徑：templates 目錄

name

可以看出獲取變量值用 $ 符號，對于 JavaBean 的話使用 變量名.屬性名 方式獲取，這點和 EL 表達(dá)式一樣。

另外 $ 表達(dá)式只能寫在 th 標(biāo)簽內(nèi)部，不然不會生效，上面例子就是使用 th:text 標(biāo)簽的值替換

...

th:text：以純文本的方式輸出

th:utext：以 HTML 標(biāo)簽的方式輸出，瀏覽器能正常渲染

HTML 代碼：

  
以純文本的方式輸出
  
以 HTML 標(biāo)簽的方式輸出，瀏覽器能正常渲染

JAVA 代碼：

@GetMapping("/text-utext")
public String textAndutext(Model model) {
  model.addAttribute("content", "thymeleaf text output");
  return "text-utext";
}

對于 URL 的處理是通過語法 @{…} 來處理的：

HTML 代碼：

  

    

      絕對路徑 1，
      絕對路徑 2
    
    

      相對路徑
    
    

      Content 路徑，默認(rèn)訪問 static 下的 CSS 文件
    
  

JAVA 代碼：

@GetMapping("/refer-url")
public String referUrl(Model model) {
  model.addAttribute("username", "y0ngb1n");
  return "refer-url";
}

類似的標(biāo)簽有：th:href 和 th:src

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

可以用另一種更簡潔的方式：

文字替換本身可以和與其他表達(dá)式聯(lián)合使用：

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

HTML 代碼：

JAVA 代碼：

@GetMapping("replace-text")
public String replaceText(Model model) {
  model.addAttribute("user", user);
  model.addAttribute("onevar", "one");
  model.addAttribute("twovar", "two");
  model.addAttribute("threevar", "three");
  return "replace-text";
}

在表達(dá)式中可以使用各類算術(shù)運(yùn)算符，例如 +, -, *, /, %：

th:with="isEven=(${user.age} % 2 == 0)"

邏輯運(yùn)算符 >, <, <=, >=, ==, != 都可以使用，唯一需要注意的是使用 <, > 時需要用它的 HTML 轉(zhuǎn)義符：

th:if="${user.age} > 1"
th:text=""Environment is " + ((${env} == "dev") ? "Development" : "Production")"

HTML 代碼：

  


  
年齡為偶數(shù)
  
喲，才 18 吶！

  
當(dāng)前年齡大于 18

  


  

JAVA 代碼：

@GetMapping("/operator")
public String operator(Model model) {
  model.addAttribute("user", user);
  model.addAttribute("env", "dev");
  return "operator";
}

使用 th:if 和 th:unless 屬性進(jìn)行條件判斷，下面的例子中，標(biāo)簽只有在 th:if 中條件成立時才顯示：

Login
Login

th:unless 于 th:if 恰好相反，只有表達(dá)式中的條件不成立，才會顯示其內(nèi)容。

支持多路選擇 Switch 結(jié)構(gòu)：

  
User is an administrator
  
User is a manager

默認(rèn)屬性 default 可以用 * 表示：

  
User is an administrator
  
User is a manager
  
User is some other thing

消息表達(dá)式：#{...}，也稱為文本外部化、國際化或 i18n

HTML 代碼：

  登錄
  
歡迎，tony

  

    
User is an administrator
    
User is a manager
    
User is some other thing
  

JAVA 代碼：

@GetMapping("/condition")
public String condition(Model model) {
  model.addAttribute("user", user);
  return "condition";
}

渲染列表數(shù)據(jù)是一種非常常見的場景，例如現(xiàn)在有 n 條記錄需要渲染成一個表格，該數(shù)據(jù)集合必須是可以遍歷的，使用 th:each 標(biāo)簽：

HTML 代碼：

  

    

      
NAME
      
AGE
      
ADMIN
    
    

      
Onions
      
22
      
yes
    
  

可以看到，需要在被循環(huán)渲染的元素（這里是）中加入 th:each 標(biāo)簽，其中 th:each="prod : ${prods}" 意味著對集合變量 prods 進(jìn)行遍歷，循環(huán)變量是 prod 在循環(huán)體中可以通過表達(dá)式訪問。

JAVA 代碼：

@GetMapping("/loop")
public String loop(Model model) {
  List users = new ArrayList<>(3);
  users.add(user);
  users.add(User.builder().name("tony").age(23).role("user").build());
  users.add(User.builder().name("tom").age(21).role("user").build());

  model.addAttribute("users", users);
  return "loop";
}

更多標(biāo)簽用法請參考「Thymeleaf 常用語法」、「Thymeleaf 參考手冊」解鎖更多技巧