網頁

▼

2021/5/20

Spring Boot Thymeleaf 簡單範例

Spring Boot搭配Thymeleaf模板簡單範例。

本篇參考官方教學Serving Web Content with Spring MVC。

範例環境：

  • Java 8
  • Spring Boot 2.3.2
  • Thymeleaf 3
  • Maven 3

首先使用Eclipse STS或IntelliJ IDEA CE建立一個Spring Boot專案。

在專案的pom.xml加入thymeleaf的依賴設定如下。

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

在專案的src/main/resources目錄新增application.properites並設定應用程式context path及port。所以專案在本機的url為http://localhost:8080/demo。

application.properites

#context path
server.servlet.context-path=/demo
#port
server.port=8080

建立一個Controller DemoController及處理/hello請求的方法hello()，並導向thymeleaf模板頁面hello.html。

DemoController

package com.abc.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class DemoController {

    @GetMapping("/hello")
    public String hello(
            @RequestParam(name = "name", required = false, defaultValue = "World") String name,
            Model model) {
        model.addAttribute("name", name); // set request attribute with key "name"
        return "hello"; // forward to hello.html
    }
}

在專案的src/main/resources/statics目錄建立應用程式的首頁index.html。此頁中的連結hello會導向DemoController.hello()。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Index</title>
</head>
<body>
    <p>Go to <a href="hello">hello.html</a></p>
</body>
</html>

在專案的src/main/resources/templates目錄建立thymeleaf模板hello.html，因為Thymeleaf預設讀取此目錄中的模板。Thymeleaf引擎會解析模板中th:text的${name}並填入request attribute名稱為"name"的值，即DemoController.hello()中model.addAttribute("name", name)的name。

th:text為thymeleaf標籤屬性，作用為把後面表示式解析結果取代所屬標籤的內容。
${...}為變數表示式(variable expression)，使用OGNL語法取得環境中的變數值。

其它表示式參考「Thymeleaf 表示式類型」。

hello.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Hello Thymeleaf</title>
</head>
<body>
    <p th:text="'Hello, ' + ${name} + '!'"/>
</body>
</html>


完成以上後啟動專案，在瀏覽器輸入http://localhost:8080/demo進入index.html然後點選hello.html連結即導向hello.html並在頁面顯示Hello, World!。

或直接在瀏覽器輸入http://localhost:8080/demo/hello?name=John，則頁面顯示Hello, John!。


參考github。


如果覺得文章有幫助的話還幫忙點個Google廣告，感恩。


2 則留言:

  1. 匿名2022年5月15日 晚上7:03

    我照著做，除application.properties內的server.servlet.context-path=/demo沒有設定外，其餘都是依樣，結果
    http://127.0.0.1:8080/ 不會導向 src/main/resources/statics/index.html
    但是 http://127.0.0.1:8080/helo>name=john是OK的
    請問，我有可能甚麼地方，沒注意到嗎?

    回覆刪除
  2. Matt2022年5月15日 晚上7:14

    @樓上 server.servlet.context-path是設定環境路徑，若您沒設定的話那首頁就是http://127.0.0.1:8080/。
    建議您可以了解一下context path，參考https://matthung0807.blogspot.com/2017/11/java-context-path-servlet-path-path-info.html

    回覆刪除