SpringBoot集成Thymeleaf模板引擎

時間 2019-11-10

標籤 springboot 集成 thymeleaf 模板引擎欄目 Spring 简体版

原文原文鏈接

一.Thymeleaf 簡介

Thymeleaf 是一個跟 Velocity、FreeMarker 相似的模板引擎，它能夠徹底替代 JSP 。相較與其餘的模板引擎，它有以下三個極吸引人的特色

Thymeleaf 在有網絡和無網絡的環境下皆可運行，即它可讓美工在瀏覽器查看頁面的靜態效果，也可讓程序員在服務器查看帶數據的動態頁面效果。這是因爲它支持 html 原型，而後在 html 標籤裏增長額外的屬性來達到模板 + 數據的展現方式。瀏覽器解釋 html 時會忽略未定義的標籤屬性，因此 thymeleaf 的模板能夠靜態地運行；當有數據返回到頁面時，Thymeleaf 標籤會動態地替換掉靜態內容，使頁面動態顯示。
Thymeleaf 開箱即用的特性。它提供標準和 Spring 標準兩種方言，能夠直接套用模板實現 JSTL、 OGNL 表達式效果，避免天天套模板、改 JSTL、改標籤的困擾。同時開發人員也能夠擴展和建立自定義的方言。
Thymeleaf 提供 Spring 標準方言和一個與 SpringMVC 完美集成的可選模塊，能夠快速的實現表單綁定、屬性編輯器、國際化等功能。

二.Spring Boot 與 Thymeleaf

若是但願以 Jar 形式發佈模塊則儘可能不要使用 JSP 相關知識，這是由於 JSP 在內嵌的 Servlet 容器上運行有一些問題 (內嵌 Tomcat、 Jetty 不支持 Jar 形式運行 JSP，Undertow 不支持 JSP)。javascript

Spring Boot 中推薦使用 Thymeleaf 做爲模板引擎，由於 Thymeleaf 提供了完美的 Spring MVC 支持css

Spring Boot 提供了大量模板引擎，包括html

FreeMarker
Groovy
Mustache
Thymeleaf
Velocity
Beetl(很強大,完爆上面全部的引擎)

三.第一個 Thymeleaf 模板頁

新建一個名爲 spring-boot-thymeleaf 的 Spring Boot 項目，並引入 Thymeleaf 的 starter pom

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

這裏的依賴記得後面添加上去，這裏的依賴是非嚴格的html5的依賴，使用它以後咱們對未w3c的文件嚴格度會下降

<dependency>
    <groupId>net.sourceforge.nekohtml</groupId>
    <artifactId>nekohtml</artifactId>
    <version>1.9.22</version>
</dependency>

在 application.yml 中配置屬性解析器(複製便可)

# Thymeleaf Start
spring:
  thymeleaf:
    cache: false # 開發時關閉緩存,否則無法看到實時頁面
    mode: LEGACYHTML5 # 用非嚴格的 HTML
    encoding: UTF-8
    content-type: text/html
# Thymeleaf End

演示頁面

根據默認原則，頁面應該放置在 src/main/resources/templates 下，在該目錄下新建 index.html前端

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="text/html;charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width-device-width, initial-scale=1" />
    <link th:src="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
    <link th:src="@{bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet" />
</head>
<body>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">訪問 model</h3>
        <div class="panel-body">
            <span th:text="${singlePerson.name}" />
        </div>
    </div>
</div>

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">列表</h3>
        <div class="panel-body">
            <ul class="list-group">
                <li class="list-group-item" th:each="person:${people}">
                    <span th:text="${person.name}"></span>
                    <span th:text="${person.age}"></span>
                    <button class="btn" th:onclick="'getName(\'' + ${person.name} + '\');'">得到名字</button>
                </li>
            </ul>
        </div>
    </div>
</div>

<script th:src="@{jquery.min.js}" type="text/javascript"></script>
<script th:src="@{bootstrap/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:inline="javascript">
    var single = [[${singlePerson}]];
    console.log(single.name + "/" + single.age);

    function getName(name) {
        console.log(name)
    }
</script>
</body>
</html>

腳本樣式靜態文件html5

根據默認原則，腳本樣式、圖片等靜態文件應該放置在 src/main/resources/static 下，這裏引入 Bootstrap 和 jQueryjava

示例 JavaBeanjquery

此類用來在模板頁面展現數據用，包含 name 和 age 屬性程序員

package com.example.springbootthymeleaf.entity;

public class Student {
    
    private String name;
    private Integer age;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }
}

數據準備web

package com.example.springbootthymeleaf.controller;

import com.example.springbootthymeleaf.entity.Student;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class IndexController {
    List<Student> stuList = new ArrayList<Student>();

    public void init(){
        Student stu1 = new Student();
        stu1.setName("張三");
        stu1.setAge(18);
        Student stu2 = new Student();
        stu2.setName("李四");
        stu2.setAge(18);
        Student stu3 = new Student();
        stu3.setName("張三");
        stu3.setAge(18);
        stuList.add(stu1);
        stuList.add(stu2);
        stuList.add(stu3);
    }

    @RequestMapping("/toIndex")
    public String toIndex(Model model){
        init();
        model.addAttribute("stuList" , stuList);
        return "index";
    }

}

測試運行spring

四.Thymeleaf 經常使用語法

引入 Thymeleaf

修改 html 標籤用於引入 thymeleaf 引擎，這樣才能夠在其餘標籤裏使用 th:* 語法，這是下面語法的前提。

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

獲取變量值
```
<p th:text="'Hello！, ' + ${name} + '!'" >name</p>
```
能夠看出獲取變量值用 $ 符號,對於javaBean的話使用 變量名.屬性名 方式獲取,這點和 EL 表達式同樣.

另外 $ 表達式只能寫在th標籤內部,否則不會生效,上面例子就是使用 th:text 標籤的值替換 p 標籤裏面的值,至於 p 裏面的原有的值只是爲了給前端開發時作展現用的.這樣的話很好的作到了先後端分離.

引入 URL

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>

相似的標籤有:th:href 和 th:src

字符串替換

不少時候可能咱們只須要對一大段文字中的某一處地方進行替換，能夠經過字符串拼接操做完成：

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

一種更簡潔的方式是：

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

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

運算符
在表達式中可使用各種算術運算符，例如+, -, *, /, %
```
th:with="isEven=(${prodStat.count} % 2 == 0)"
```
邏輯運算符>, <, <=,>=，==,!=均可以使用，惟一須要注意的是使用<,>時須要用它的HTML轉義符：
```
th:if="${prodStat.count} &gt; 1"
```
```
th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"
```

條件

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>

循環

渲染列表數據是一種很是常見的場景，例如如今有 n 條記錄須要渲染成一個表格，該數據集合必須是能夠遍歷的，使用 th:each 標籤：

<body>
  <h1>Product list</h1>
 
  <table>
    <tr>
      <th>NAME</th>
      <th>PRICE</th>
      <th>IN STOCK</th>
    </tr>
    <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>
  </table>
 
  <p>
    <a href="../home.html" th:href="@{/}">Return to home</a>
  </p>
</body>