「Spring Boot+Thymeleaf」でコントローラからビューに値を返却する

バックエンドのコントローラから、フロントエンドのビューに値を返却して表示させます。

この記事が対象とする環境
Eclipse 2023
Java Spring Boot 3.1.2
Thymeleaf 3.1.1

プロジェクト未作成の場合、以下の記事を参考にしてください。

Controller（コントローラ）

9行目：URLルート（/）にGETでアクセスされた時に、
10行目：viewメソッドが実行され、
11-12行目：フロントへの値設定を行い、
14行目：topという名前のhtmlファイルの内容が返却されます。

addAttributeの第1引数が変数名、第2引数が値です。

package com.example.learn.controllers;

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

@Controller
public class TopController {
	@GetMapping("/")
    public String view(Model model) {
    	model.addAttribute("name", "yamada taro");
    	model.addAttribute("address", "japan");

        return "top";
    }
}

View（ビュー）

要素値に表示させる場合、[[と]]の中に「${name}」と記載します。
属性値に表示させる場合、属性名に「th:text」、属性値に「${address}」のように記載します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
    <title>DEMO</title>
    </head>
    <body>
        <h1>TOP PAGE</h1>
                
        ①要素値
        [[ ${name} ]]
        <br>
         
        ②属性値
        <span th:text="${address}"></span>

        <br>
        <button>ボタン1</button>
        <button>ボタン2</button>
    </body>
</html>