【Day - 20】Spring Boot 集成 Thymeleaf構建動態Web應用 (下) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 20

Mobile Development

Spring Boot+Android 30天實戰開發系列第 20 篇

【Day - 20】Spring Boot 集成 Thymeleaf構建動態Web應用 (下)

15th鐵人賽 spring boot thymeleaf

ian_liu

團隊nutc_imac_FewFew

2023-09-30 19:28:17

1082 瀏覽

分享至

4 表單處理

在動態Web應用中，表單是與使用者交互的重要組成部分之一。使用者可以填寫表單並將數據提交給伺服器進行處理。在本節中，我們將學習如何在Spring Boot和Thymeleaf應用中處理表單。

4.1 創建HTML表單

首先，讓我們創建一個包含表單的HTML頁面。假設我們要創建一個使用者註冊表單。以下是一個簡化的表單示例：

<!DOCTYPE html>
<html lang="zh-Hant-TW" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>使用者註冊</title>
</head>
<body>
    <h1>使用者註冊</h1>
    <form th:action="@{/register}" method="post">
        <label for="username">使用者名稱：</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">密碼：</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button type="submit">註冊</button>
    </form>
</body>
</html>

在上述表單中，我們使用了Thymeleaf的屬性th:action，它會將表單的提交目標設置為/register，這是我們將在控制器中處理的路徑。

4.2 創建控制器方法

接下來，我們需要創建一個控制器方法，用於處理表單提交。在您的Spring Boot應用中，創建一個控制器類，並添加以下方法：

@Controller
public class UserController {

    @PostMapping("/register")
    public String registerUser(@RequestParam("username") String username,
                               @RequestParam("password") String password) {
        // 在這裡處理使用者註冊邏輯，例如將使用者信息保存到數據庫

        return "redirect:/success"; // 重定向到成功頁面
    }
}

在上述程式碼中，我們使用@PostMapping注解來映射HTTP POST請求到/register路徑。該方法接受表單提交的username和password參數，並在方法中處理使用者註冊邏輯。

4.3 處理表單數據

當使用者提交表單後，表單數據將被傳遞到registerUser方法中。在實際應用中，您可以在此方法中執行必要的業務邏輯，例如將使用者信息保存到數據庫中。最後，我們使用重定向來導航到成功頁面或其他頁面，以反饋使用者註冊操作的結果。

5 靜態資源管理

在Web應用程式中，靜態資源如CSS、JavaScript和圖像等起著重要作用。Thymeleaf與Spring Boot一起使用時，您可以輕鬆地管理和引用這些靜態資源。本節將介紹如何處理靜態資源。

5.1 靜態資源目錄

首先，確保您的靜態資源文件存儲在專案中的正確位置。Spring Boot默認情況下會在以下目錄中查找靜態資源：

src/main/resources/static/
src/main/resources/public/
src/main/resources/resources/
src/main/resources/META-INF/resources/
您可以將CSS、JavaScript文件和圖像等放置在這些目錄中。例如，將style.css文件放在src/main/resources/static/css/目錄下。

5.2 引用靜態資源

在Thymeleaf模板中引用靜態資源非常簡單。您可以使用Thymeleaf提供的th:src、th:href等屬性來引用靜態資源。以下是一個示例：

<!DOCTYPE html>
<html lang="zh-Hant-TW" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>靜態資源示例</title>
    <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css">
</head>
<body>
    <h1>歡迎使用靜態資源</h1>
    <img th:src="@{/images/logo.png}" alt="Logo">
    <script th:src="@{/js/script.js}" type="text/javascript"></script>
</body>
</html>

在上面的示例中，我們使用了th:href和th:src屬性來引用CSS、圖像和JavaScript文件。請注意，我們使用了@{/}前綴，這是Thymeleaf的一種路徑解析方式，它會自動為資源路徑添加上下文路徑。。

5.3 小結

靜態資源在Web應用中扮演著關鍵角色，Thymeleaf與Spring Boot的整合使管理和引用靜態資源變得非常簡單。通過遵循指定的目錄結構，並使用Thymeleaf的屬性來引用資源，您可以輕鬆地將CSS、JavaScript和圖像等靜態資源整合到您的Web應用中。

6 國際化和本地化

國際化（Internationalization，通常縮寫為i18n）是一種設計應用程式以支援不同地區和語言的能力。本地化（Localization，通常縮寫為l10n）是指根據使用者的地理位置和語言首選項，以可讀性良好的方式呈現內容。Spring Boot 和 Thymeleaf 使國際化和本地化變得相對容易實現。

6.1 實現多語言支援

1. 配置消息源
首先，需要配置一個消息源（MessageSource），它包含了應用程式中的所有文本消息。在 Spring Boot 中，您可以在 application.properties 或 application.yml 中定義消息源的基本配置：

spring.messages.basename=messages
spring.messages.encoding=UTF-8

這裡，messages 是消息文件的基本名稱，它對應於src/main/resources目錄下的多個屬性文件，如messages_en.properties、messages_fr.properties等。

2. 創建消息屬性文件
針對每種語言，您需要創建一個對應的消息屬性文件。例如，對於英語和法語：

messages_en.properties：
```
greeting=Hello, World!
```
messages_fr.properties：
```
greeting=Bonjour, le Monde!
```

3. 使用消息
在 Thymeleaf 模板中，您可以使用#{}語法引用消息。例如：

<p th:text="#{greeting}"></p>

6.2 切換語言首選項

通常，使用者的語言首選項是在應用程式中根據使用者配置或瀏覽器設置來確定的。您可以使用 Spring Boot的LocaleResolver來處理使用者的語言選擇。

添加 LocaleResolver 配置
在 Spring Boot 中，可以通過以下方式配置LocaleResolver：

@Bean
public LocaleResolver localeResolver() {
    SessionLocaleResolver localeResolver = new SessionLocaleResolver();
    localeResolver.setDefaultLocale(Locale.US); // 設定默認語言
    return localeResolver;
}

這將創建一個SessionLocaleResolver，並將默認語言設定為英語（Locale.US）。

切換語言
在您的應用程式中，您可以提供一種方式來切換使用者的語言首選項，通常是通過一個下拉菜單或按鈕。然後，您可以使用HttpServletRequest將用使用者選擇的語言設定為當前 Locale：

@RequestMapping("/change-lang")
public String changeLang(@RequestParam("lang") String lang, HttpServletRequest request) {
    LocaleResolver localeResolver = RequestContextUtils.getLocaleResolver(request);
    localeResolver.setLocale(request, response, new Locale(lang));
    return "redirect:/"; // 重定向回首頁或其他頁面
}

6.3 其他國際化特性

Thymeleaf 和 Spring Boot 還提供了其他國際化相關的特性，如日期和數字格式化、消息參數傳遞等，以滿足不同語言和文化的需求。通過實施國際化和本地化，您可以為全球使用者提供更友好的使用者體驗。

7 常見問題和調試技巧

在使用Spring Boot和Thymeleaf構建動態Web應用時，可能會遇到一些常見的問題。這些問題可能涉及模板渲染、數據綁定、靜態資源管理等方面。在本節中，我們將提供一些解決這些問題的常見方法。

7.1 模板不渲染

問題描述
有時，Thymeleaf模板可能不會按預期渲染到HTML頁面中。
解決方法
- 檢查模板路徑：確保模板文件的路徑和文件名正確，位於專案的正確位置。Thymeleaf默認會在resources/templates目錄下查找模板文件。
- 檢查模板語法：仔細檢查模板中的Thymeleaf語法，確保標籤、屬性和表達式沒有錯誤。
- 模板快取：在開發階段，可以禁用模板快取以方便調試。在application.properties中添加以下配置：
```
spring.thymeleaf.cache=false
```

7.2 數據綁定問題

問題描述
在將數據傳遞到Thymeleaf模板時，數據可能無法正確綁定到模板中。
解決方法
- 檢查模型屬性：確保控制器方法中的模型屬性名稱與模板中使用的屬性名稱一致。大小寫敏感。
- 檢查屬性值：確保模型中的屬性值不為null，否則可能導致模板中的部分數據不渲染。

7.3 靜態資源加載問題

問題描述
靜態資源如CSS、JavaScript和圖像可能無法加載或應用到頁面中。
解決方法
靜態資源目錄：確保靜態資源存放在正確的目錄下，通常是resources/static或resources/public。
資源路徑：在模板中引用靜態資源時，使用相對於根目錄的路徑。例如：
```
<link rel="stylesheet" th:href="@{/css/style.css}" />
```

8 總結

在本中，我們深入探討了如何使用Spring Boot和Thymeleaf構建動態Web應用。以下是我們在這篇中學到的關鍵知識點：

我們選擇了Spring Boot和Thymeleaf作為構建動態Web應用的強大工具組合。Spring Boot簡化了應用程式的配置和開發，而Thymeleaf提供了一個靈活且強大的模板引擎，用於生成動態內容。
我們學習了Thymeleaf的基本語法，包括表達式、屬性綁定、條件語句和循環。這些基本概念幫助我們在模板中嵌入動態數據，創建交互性的Web頁面。
通過創建Spring Boot控制器，我們能夠處理HTTP請求並將動態數據傳遞給Thymeleaf模板進行渲染。這為我們提供了將後端數據與前端界面無縫集成的能力。
我們探討了表單處理的方法，包括創建表單頁面、驗證使用者輸入並處理提交數據。這有助於構建使用者友好的交互式Web應用。
我們了解了如何管理靜態資源，如CSS、JavaScript和圖像，以及如何在模板中引用它們。這使我們能夠美化和增強應用的用使用者界面。
多語言支持是一個重要的主題，我們學習了如何實現國際化和本地化，以便應用程式能夠適應不同的地區和語言。
最後，我們分享了一些常見問題的解決方案和調試技巧，幫助您更好地管理和維護Spring Boot和Thymeleaf應用。

通過本教程，您應該已經建立了構建動態Web應用所需的基礎知識。Spring Boot和Thymeleaf為Web開發提供了強大而靈活的工具，使您能夠輕松創建交互性和可擴展的應用程式。不斷實踐和探索這些工具將幫助您不斷提高Web開發技能。祝您在構建Web應用方面取得成功！

【Day - 19】Spring Boot 集成 Thymeleaf構建動態Web應用 (上)

【Day - 21】Spring Security 6.1.x：實現基本認證(Basic Authentication)

系列文

Spring Boot+Android 30天實戰開發共 30 篇

RSS系列文訂閱系列文

13 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

Spring Boot+Android 30天 實戰開發 系列 第 20 篇