【Spring Boot】モデルの作成（@ModelAttribute）

プロジェクトの作成
用意するソース
実行結果

目次へ

プロジェクトの作成

VSCodeでSpringBootのMavenプロジェクトを作成します。
手順は以下の記事を参照。

2021年11月28日【Windows版】VSCodeで始めるSpringBoot(Mavenプロジェクト編)

用意するソース

SpringBootで新規プロジェクトを作成したら、以下のソースを用意して実行できる状態にします。

コントローラー`(BaseController.java)`

BaseController.java

package com.example.demo3;

import com.example.demo3.model.Person;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class BaseController{

    @GetMapping("/")
    public String home(@ModelAttribute Person person) {
      return "form";
    }

    @PostMapping("/form")
    public String result(@ModelAttribute Person person){
        return "result";
    }
}

解説

@ModelAttributeアノテーション
モデルクラスとバインドします。
form要素の項目数分@RequestParamをかいていた処理が不要になります。
model.addAttribute("person",person)のようにモデル登録していた処理が不要になります。
上記例ではPersonクラスのpersonオブジェクトを受け取る。という意味になります。

モデル`(Person.java)`

Person.java

package com.example.demo3.model;

import lombok.Data;
@Data
public class Person {
    private String name;
    private int age;
    private String business;

}

解説

Lombokの@Dataアノテーション
これを使用することでGetterやSetterの定型コードを自動生成してくれます。

遷移元ページ`(form.html)`

form.html

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>form</title>
<script type="text/javascript"></script>
</head>
<body>
<form th:action="@{/form}" th:object="${person}" method="post">
    <label for="name">名前：</label>
    <input type="text" th:field="*{name}"><br>
    <label for="age">年齢：</label>
    <input type="number" th:field="*{age}"><br>
    <label for="business">職業：</label>
    <input type="text" th:field="*{business}"><br>
    <button>送信</button>
</form>
</body>
</html>

解説

th:object
formにバインドするオブジェクトを設定します。
th:object="${person}"と記述するとpersonオブジェクトを設定するという意味になります。

解説

"*{name}"
*{フィールド名}"を設定します。
th:objectのスコープ内では、オブジェクト名を省略してフィールド名のみ記述できるようになります。
th:objectを使用しない場合は、${オブジェクト名.フィールド名}の形式で記述する必要があります。
例${person.age}

解説

th:field
input要素のid属性、name属性、value属性をHTMLに出力することができます。
th:field="*{age}"と指定すると、id属性とname属性の値はageになります。

遷移先ページ`(result.html)`

result.html

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>result</title>
<script type="text/javascript"></script>
</head>
<body>
    <p>名前：[[${person.name}]]</p>
    <p>年齢：[[${person.age}]]</p>
    <p>職業：[[${person.business}]]</p>
</body>
</html>

解説

[[ ]]
インライン処理です。th:textと同じように文中に値を埋め込むことができます。

実行結果

上記のソースを実行してブラウザでhttp://localhost:8080/にアクセスすると以下の画面が表示されます。これは遷移元ページ(form.html)が表示されています。

遷移元ページ(form.html)にはinput要素が3つ表示されているので、それぞれ入力してみます。

入力後、「送信」ボタンを押します。
遷移先ページ(result.html)に遷移して値が表示されていることを確認できました。