ずっと寝ていたい

プログラミングやガジェット、ゲームや商品レビューについて書いていきます。

SpringBoot + Thymeleafでフォームの中身をまるごと取得する方法

こんにちは。
今日はSpring boot + Thymeleafを使用して、フォームの中身をまるごと取得する方法について書こうと思います。

難しいことは何もありません。とっても簡単です。

これからやることは

  • フォームの値をまるごと入れるBeanをつくる
  • formタグに名前をつけたHTMLをつくる
  • Controllerでformタグにつけた名前を呼び出して値を取得する

これだけです。とりあえずシンプルなログイン画面で試してみましょう。
こんなのです。

f:id:Alupi:20180322230925p:plain

このフォームのログインボタン押下時に、IDとパスワードに入力した値をまとめて取得したいと思います。

では早速実装していきましょう。

開発環境


  • Spring Tool Suite 3.9.2
  • Spring Boot 2
  • Thymeleaf

Beanの用意


まずはフォームから受信した内容をまるごと入れる為のBeanを用意しましょう。
ここではLog101Form.javaというBeanを用意しました。

クラス名上部の@Getter/@Setterは、Lombokgetter/setter自動生成機能です。
普通にgetter/setterを書いてしまっても構いません。

HTMLの用意


次にHTMLを用意しましょう。
ここではLOG101.htmlというHTMLファイルを用意しました。

まずはHTMLのformタグにth:object属性を設定しましょう。
ここではth:object="${log101Form}"としました。

先ほど作成したBeanの名称と合わせると分かりやすいかもしれませんね。
そして、送信するラベルにもname属性を設定します。

ここで設定する値は、先ほど作成したBeanのフィールド名と一致させてください。

name属性に設定した値が異なると、フォームの値がどこにも入りません。
今回の例だとmemberNopasswordですね。

Controllerの用意


最後にControllerを用意しましょう。 @ModelAttributeを使用します。

先ほどHTMLのth:objectに設定した値log101Formと、最初に作成したLog101Formクラスをメソッドの引数に設定します。

@ModelAttributeの引数に設定する値は、th:objectに設定した値と一致させてください。

こちらも値が一致しないと、フォームの値を取得することができません。

実装は以上となります。 とてもシンプルですね。

実行


今回はIDに1、パスワードに123を入力しました。

f:id:Alupi:20180322231001p:plain

デバッグで入力した値が取得できているか確認してみましょう。

f:id:Alupi:20180322222023p:plain

入力した値である、1123が取得できていることが確認できますね。
このメソッドに到達した時点で、値が取得できていればOKです。

まとめ


以上、SpringBoot + Thymeleafでフォームの中身をまるごと取得する方法についてご紹介しました。

@RequestParamで一つひとつ受け取るのも良いですが、
個人的にはまとめて受け取る方が好きです。

取得したい値が増えてもBeanにフィールドを追加すればいいだけですからね。
プロジェクトの規模が大きければ大きいほど、クライアントから値を取得する方法が統一されていた方が良いのではないかと思います。

ポイントはth:objectと@ModelAttributeに紐づける値を一致させることです。

それでは、また。