iT邦幫忙

2023 iThome 鐵人賽

DAY 29
0
Mobile Development

Android Studio 30天進階學習系列 第 29

Android Studio 30天進階學習-DAY29_SpringBoot_Thymeleaf的說明與簡易POST傳值功能

  • 分享至 

  • xImage
  •  

今天來說明 Thymeleaf模板,後面結合RESTful Web的功能參數來製作一個簡易的輸入資料並顯示在頁面上。

這邊會先做簡單的介紹與實作說明,再來會直接結合RESTful Web的參數來製作簡易的輸入顯示功能。

Thymeleaf的初步說明與簡易實作

根據官方網站所述,以下是關於 Thymeleaf 的概述說明:

Thymeleaf 是一個現代伺服器端 Java 模板引擎,適用於 Web 和獨立環境。

Thymeleaf 的主要目標是將優雅的自然模板引入您的開發工作流程 - HTML 可以在瀏覽器中正確顯示,也可以用作靜態原型,從而允許開發團隊進行更強有力的協作。

憑藉 Spring Framework 的模組、與您喜愛的工具的大量整合以及插入您自己的功能的能力, Thymeleaf 非常適合現代 HTML5 JVM Web 開發 - 儘管它還有更多功能。

pom.xml依附元件

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

參數值接收的撰寫格式

要將參數值傳給HTML中設置的資料中,簡單的用法是在方法中使用Model來定義,並使用當中的一個 Key-Value 用法來綁定參數,以下是程式碼的撰寫格式。

public String function(Model model){
    model.addAttribute("outputText", outputText);
}

Demo程式碼

具體來說,這邊的 "/hello" 方法是回傳了字串 "Hello",這將被Spring解釋為要尋找名為 "Hello" 的視圖範本檔案(通常是一個HTML檔案)。 Spring Boot預設使用Thymeleaf作為視圖模板引擎,因此它將嘗試尋找名為 "Hello.html" 的模板檔案來渲染視圖。

  • model.addAttribute("message", "Hello from Thymeleaf!"):這行程式碼是將一個名為 "message" 的屬性加入 model 物件中,並且參數值為 "Hello from Thymeleaf!"。 這個屬性將在html視圖中使用被引用。
  • 且回傳"Hello"會將其導向到resources/templates中所建立的Hello.html檔案
@Controller
public class HelloController {
    @GetMapping("/hello")
    public String hello(Model model) {
        model.addAttribute("message", "Hello from Thymeleaf!");
        return "Hello";
    }
}

Html撰寫

因為這邊SpringBoot似乎會預設指到的檔案為Thymeleaf,所以這邊就算不加入後面的xmlns也是能夠抓取到所傳入的字串

這邊將文字用以下的參數格式 ${"參數名稱"} 進行設定,就能夠抓取到參數並設立數值。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf Test</title>
</head>
<body>
    <h1 th:text="${message}">Hello, World!</h1>
</body>
</html>

效果檢視

https://ithelp.ithome.com.tw/upload/images/20231009/201503706NgSZe3oZN.png

結合RESTful Web功能實作輸入顯示

這邊名稱可以不做修改,但為了方便辨識這邊我改了名稱。

  • GetUserInfo.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf Test</title>
</head>
<body>
    <h1 th:text="${message}">Hello, World!</h1>
    <!-- 表單 -->
    <form method="post" action="/process">
        <!-- 輸入框 -->
        <label for="inputText">Enter text:</label>
        <input type="text" id="inputText" name="inputText" th:value="${inputText}" />

        <!-- 提交按鈕 -->
        <button type="submit">Submit</button>
    </form>

    <!-- 顯示輸出 -->
    <h2 th:if="${outputText}" th:text="${'Output: ' + outputText}"></h2>
</body>
</html>
  • GetUserInfoController.java
@Controller
public class GetUserInfoController {

    private String outputText;

    @GetMapping("/home")
    public String hello(Model model) {
        model.addAttribute("message", "Hello from Thymeleaf!");
        return "GetUserInfo";
    }

    @PostMapping("/process")
    public String processInput(@RequestParam("inputText") String inputText, Model model) {
        model.addAttribute("message", "Hello from Thymeleaf!");
        // Add code to process inputText
        this.outputText = inputText;
        model.addAttribute("outputText", outputText);
        return "GetUserInfo";
    }
    @GetMapping("/get-process")
    public String getProcess(Model model) {
        model.addAttribute("message", "Hello from Thymeleaf!");
        model.addAttribute("outputText", outputText);
        return "GetUserInfo";
    }
}

結果顯示

從以下的結果截圖中可以看到原本為/home網址,透過輸入送出之後來到了/process,並且將輸入的數值Post出去後獲取到輸入的值顯示在HTML文件上。

後面添加了Get方法來驗證是否有將資料Post出去,而不是單純的文字顯示。

  • 主頁面
    https://ithelp.ithome.com.tw/upload/images/20231009/20150370oz5j5tU3p1.png
  • 輸入後的顯示結果
    https://ithelp.ithome.com.tw/upload/images/20231009/20150370fxXPVFVv5z.png
  • Get輸入顯示
    https://ithelp.ithome.com.tw/upload/images/20231009/20150370v7mPNJiUJ7.png

以上是今天關於Thymeleaf模板的使用與簡易Post傳值功能顯示在畫面上。/images/emoticon/emoticon06.gif


上一篇
Android Studio 30天進階學習-DAY28_SpringBoot_將資料以Json格式進行讀寫的方式(ResponseEntity使用與說明)
下一篇
Android Studio 30天進階學習-DAY30_SpringBoot_H2資料庫的建立及說明&建立簡易的網頁寫入資料庫Demo
系列文
Android Studio 30天進階學習30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言