Spring Boot + Thymeleaf ユーザの入力を Controller で取得

Spring Boot + Thymeleaf の基本です。ユーザのフォーム入力をコントローラで取得する方法をメモしておきます。

JSP でも応用可能です。Controller クラスはそのまま使えます。

１つの文字列を受け取る場合

単純な１つの文字列を受け取るこのような画面を作成します。

初期表示
f:id:yyama1556:20180527160804p:plain

テキストボックスに適当な文字列を入力し、送信ボタンをクリックすると画面遷移し、文字列が表示されます。。
f:id:yyama1556:20180527160846p:plain

Thymeleaf のテンプレートとしては１つだけ作成します。

Thymeleaf テンプレートを作成

まずテンプレートを準備します。ファイル名は「index.html」としました。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <title>demo</title>
</head>
<body>
<p>
  <label>前回のメッセージ：</label>
  <label th:text="${msg}">前回のメッセージ</label>
</p>
<form action="#" th:action="@{/confirm}" method="GET">
  <p>
    <label for="message">メッセージ：</label>
    <input id="message" name="msg" type="text" size="40" />
  </p>
  <p>
    <input type="submit" value="送信" />
  </p>
</form>
</body>
</html>

フォームの中にテキストボックスとサブミットボタンがひとつずつ置いてあります。name 属性は「msg」としました。このパラメータ名でコントローラに値が渡されます。

    <input id="message" name="msg" type="text" size="40" />

Controller の作成

続いてコントローラを作成します。

package org.yyama;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class DemoController {
	@RequestMapping("/")
	public String index() {
		return "index";
	}

	@RequestMapping("/confirm")
	public String confirm(@ModelAttribute("msg") String arg) {
		System.out.println("msg:" + arg);
		return "index";
	}
}

送信ボタンが押されたときの処理を以下に抜粋します。

	@RequestMapping("/confirm")
	public String confirm(@ModelAttribute("msg") String arg) {
		System.out.println("msg:" + arg);
		return "index";
	}

「@ModelAttribute("msg") String arg」という引数の宣言があります。
何が書いてあるのか説明しますと、

「@ModelAttribute("msg") 」が「URL パラメータの msg を」となります。
「String arg」が「String 型の変数 arg に格納します。」となります。

つまり、「@ModelAttribute("msg") String arg」は「URL パラメータの msg をString 型の変数 arg に格納します。」ですね。

２つの文字列を受け取る場合

入力ボックスをもう一つ増やしてみます。

初期画面
f:id:yyama1556:20180527163117p:plain

２つのテキストボックスに適当な文字列を入力して送信ボタンを押した後
f:id:yyama1556:20180527163709p:plain

Thmeleaf テンプレート

テンプレートを少し変更しました。単純に入力テキストボックスや出力ラベルを増やしています。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <title>demo</title>
</head>
<body>
<p>
  <label>前回のメッセージ１：</label>
  <label th:text="${msg1}">前回のメッセージ１</label>
</p>
<p>
  <label>前回のメッセージ２：</label>
  <label th:text="${msg2}">前回のメッセージ２</label>
</p>
<form action="#" th:action="@{/confirm}" method="GET">
  <p>
    <label for="message1">メッセージ１：</label>
    <input id="message1" name="msg1" type="text" size="40" />
  </p>
  <p>
    <label for="message2">メッセージ２：</label>
    <input id="message2" name="msg2" type="text" size="40" />
  </p>
  <p>
    <input type="submit" value="送信" />
  </p>
</form>
</body>
</html>

コントローラ

修正したメソッドのみ抜粋します。

	@RequestMapping("/confirm")
	public String confirm(@ModelAttribute("msg1") String arg1, @ModelAttribute("msg2") String arg2) {
		System.out.println("msg1:" + arg1);
		System.out.println("msg2:" + arg2);
		return "index";
	}

引数で msg1 と msg2 を取得するように修正されているのが分かると思います。

単純に引数指定が増えているだけです。簡単ですね。