[Day 24] 遠征 Kotlin × Spring Boot 介紹 Template Engine (1)

2020-IThome鐵人賽 Comments

Thymeleaf 是什麼

Thymeleaf 是一個 XML/HTML5 模板引擎，能夠應用於模板設計檔案，非常適合 Spring 框架進行開發 HTML5 Web 應用程式

環境設置

以下將介紹使用 Thymeleaf 進行專案開發時，所需要設定的環境：

  1. Spring Boot 在使用 Thymeleaf 時，須在配置加入 Thymeleaf 依賴套件

    1
    2
    <!-- thymeleaf 相關依賴 -->
    implementation("org.springframework.boot:spring-boot-starter-thymeleaf")

  2. 在 application.yml 新增 Thymeleaf 相關配置，具體配置如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    spring:
    h2: # 設定 H2 資料庫相關配置
        console:
        enabled: true
        path: /h2-console
    datasource: # 設定資料庫相關配置
        url: jdbc:h2:file:./src/main/resources/data/ironman;AUTO_SERVER=true
        username: sa
        password: Ironman0924!
    jpa: # 設定 JPA 相關配置
        hibernate:
            ddl-auto: update
            database-platform: H2
            show-sql: true
            generate-ddl: false
    thymeleaf:
        cache: false    # 關閉 Cache
        encoding: UTF-8 # 編碼設定
        mode: HTML5     # 模式
        suffix: .html   # 檔案副檔名
        prefix: classpath:/templates/ # 檔案儲存位置

  3. 撰寫 Controller，新增 HomeController.kt 檔案，內容如下：

    1
    2
    3
    4
    5
    6
    7
    8
    @Controller
    class HomeController {

        @RequestMapping("/")
        fun home() : String {
            return "home"
        }
    }

  4. 在 resources/templates 路徑下新增頁面檔案 home.html，並新增內容如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    Hi, Thymeleaf
    </body>
    </html>

  5. 開啟瀏覽器進行測試，會發現以下頁面內容：

    https://ithelp.ithome.com.tw/upload/images/20201003/20121179n1hePMgN14.png

Thymeleaf 常用語法

變數表達式

Thymeleaf 預設帶有標準方言 Standard，它們定義了一組功能，這些功能足以讓我們應付大多數專案需求，而這些標準方言在模板的使用方式會包含以th字首開頭的屬性，如<span th:text="...">，表達式共有五種型別，分別整理如下：

  • ${...}  變數表示式
  • {...}  選擇表示式
  • #{...}  訊息 (i18n) 表示式
  • @{...}  連結 (URL) 表示式
  • ~{...} : 片段表示式

變量表達式

變量表達式即 OGNL 表示式或 Spring EL 表示式（在 Spring 術語中也叫 model attributes）

1
2
3
4
${session.user.name}

<span th:text="${book.author.name}">
<li th:each="book : ${books}">

選擇(星號)表示式

選擇表示式很像變量表達式，不過它們用一個預先選擇的物件來代替上下文變數容器（map）來執行

1
2
3
4
5
6
7
*{customer.name}

<div th:object="${book}">
  ...
  <span th:text="*{title}">...</span>
  ...
</div>

文字國際化表示式

文字國際化表示式允許我們從一個外部檔案獲取區域文字資訊(.properties)，用 Key 索引 Value，還可以提供一組引數

1
2
3
4
5
6
7
8
9
#{main.title}  
#{message.entrycreated(${entryId})}

<table>
  ...
  <th th:text="#{header.address.city}">...</th>
  <th th:text="#{header.address.country}">...</th>
  ...
</table>

URL表示式

URL 表示式指的是把一個有用的上下文資訊新增到 URL，這個過程經常被叫做 URL Rewrite

1
2
3
4
5
6
7
@{/order/list}

@{/order/details(id=${orderId})}
@{../documents/report}

<form th:action="@{/createOrder}">
<a href="main.html" th:href="@{/main}">

以上主要介紹 Thymeleaf 環境建置與基本的變數表達用法，下一篇將進行實作範例，實作會讓我們對於 Thymeleaf 的使用上更加了解。