[spring boot 4]ログインとユーザー登録画面を作ろう②

[spring boot 4]ログインとユーザー登録画面を作ろう②

前回の[spring boot 3]ログインとユーザー登録画面を作ろう①で作成したものに

データバインドを実装していきます。

ここで使うデータバインドは、

ユーザー登録画面の入力項目を次のSignupForm.javaのフィールドのデータ型に合わせて変換します。

使用環境

MacBook Pro (15-inch, 2016)

Eclipse:Oxygen.3a Release (4.7.3a)

spring boot バージョン:2.1.0

使用ライブラリ:DevTool,Lombok,H2,JDBC,Thymeleaf,Web

作成するプログラム

このようにデータを入れてユーザー登録を行うと、ログイン画面に遷移します。

その時、Eclipseのコンソールでは

このようになっており、データを受け取れていることが確認出来ます。

(まだDBとの接続を指定ない状態ですので、コンソールで確認します)

次に

誕生日の欄に1990だけ

年齢の欄に文字

を入れてみると

こんなエラーが出てきます!

英語ですけど、入力項目が違うよーと言うのを出しています。

エラー内容の出力を変更すると

エラーメッセージが日本語になりました。

ここまでを今回は作成していこうと思います。

使用するコード

① SignupForm.java

② SignupController.java

③ signup.html

④ messages.properties

① SignupForm.java

@DateTimeFormatをつけることで、signup.htmlの誕生日入力欄から渡された文字列を日付型に変換しています。

② SignupController.java

@ModelAttributeを引数につけると自動でaddAttributeしてくれます。

この時クラス名の最初の文字を小文字にしてキー名に登録されています。

BindingResultを引数に設定することでデータバインドの結果を受け取ることが出来ます。

BindingResultの中の .hasErrors() を使うことでデータバインドのエラーを検出することが出来ます。

この仕組みにif文を使い

データバインドでエラーが発生したらgetSignUp()を呼び出してsignup.htmlに戻るよう設定しています。

③ signup.html

<form>タグ内で「th:object=”${signupForm}”」を使うことで

SignupController.javaにて自動的にaddAttributeされたキー名:”signupForm”を呼び出し、

「th:field=”*{userId}”」などを使ってobjectの中のフィールド名に合わせてControllerクラスに値を渡しています。

th:each=”error:${#fields.detailedErrors()は

errorという変数に「th:field=」を設定した中でデータバインドエラーが発生した際に

エラー内容を表出します。

ここまで出来たら、

初めの「作成するプログラム」の流れでデータ入力をしてみて確認してください。

と出て入れば成功です。

この後に、英語のエラーメッセージを日本語に変換していきます。

④ messages.properties

エクスプローラーの画面で右クリック

新規 → その他 → 一般 → ファイル

から作成すればOKです。

この後にもう一度入力してみてください。

になっていれば今回は完成です。

次回は他項目に関してもエラーメッセージを設定できるように実装していきます。