以下の動画を参考に、ハンズオン形式でSpring BootでWebアプリを制作していきます。
今回はPart5、ログイン画面に入力された値（ユーザー名とパスワード）をコンソールに出力するところまでを実装します。
分からない部分はChatGPTに聞きながら進めていきます。
あくまで、躓いた部分等を個人的な備忘録として記録するための記事です。
login.html
ログイン画面のhtml部分は以下です。
本記事に必要な部分だけを抜粋しています。
<form th:action="@{/login}" method="post" th:object="${loginForm}">
<div>
<label>ログインID</label>
<input type="text" th:field="*{loginId}">
</div>
<div>
<label>パスワード</label>
<input type="password" th:field="*{password}">
</div>
<div>
<input type="submit" value="ログイン">
</div>
</form>
以下の三つに分けられます。
1.formタグ
ChatGPT:
<form th:action="@{/login}" method="post" th:object="${loginForm}">
ログイン情報を送信するためのフォームを定義します。th:actionはフォームの送信先URLを指定し、methodはHTTPメソッドを指定しています。th:objectはフォームのデータをバインドするオブジェクトを指定します。ここでは${loginForm}となっており、Thymeleafがこのオブジェクトの属性とHTMLフォームのフィールドを結びつけます。
要するに、以下で入力された値はLoginFormクラスにデータバインディングしていくよという宣言です。
2.ログイン情報の入力欄（IDとpassword）
ChatGPT:
<input type="text" th:field="*{loginId}">
<input type="password" th:field="*{password}">
入力フィールドを表示し、th:field属性によってThymeleafによるデータバインドが行われます。*{loginId}はloginFormオブジェクトのloginId属性と結びつけられます。
後述するLoginFormクラス内のloginIdとpasswordにそれぞれ入力した値を紐づけるよという宣言です。
3.ログインボタン
ChatGPT:
<input type="submit" value="ログイン">
データ送信のためのsubmitボタンです。
LoginForm.java
入力データのバインディング先です。
package com.example.demo.form;
import lombok.Data;
@Data
public class LoginForm {
private String loginId;
private String password;
}
LoginFormクラスを定義しています。
loginIdとpasswordという二つの値を持っています。
@Dataというアノテーションによって、明示されていないいくつかのメソッドが追加されていますが、それはコントローラーの方を見てから説明します。
LoginController.java
@Controller
public class LoginController {
@GetMapping("/login")
public String view(Model model, LoginForm form) {
return "login"; //login.htmlをする
}
@PostMapping("/login")
public void login(LoginForm form) {
System.out.println(form.toString());
}
}
viewとloginの二つのメソッドがあります。
viewメソッドは、@GetMappingのおかげで、"/login" パスにアクセスがあった際に、login.htmlを表示することができます。
loginメソッドは、@PostMappingのおかげで、HTTP POSTメソッドで "/login" パスに対するリクエストを処理することができます。
つまり、IDとパスワードを入力して送信を押すと、loginメソッドで定義した処理が行われます。
loginメソッドで定義した処理は
System.out.println(form.toString());
なので、パラメーターに設定したもの(LoginForm form)にtoString()という処理を加えてコンソールに表示します。
結果から言うと、以下のような文が表示されます。
LoginForm(loginId=user, password=1234)
なぜこのような文章がtoString()によって表示されるかを知るには、以下の二つの知識が必要です。
ChatGPT:
@Dataアノテーションは、Lombokと呼ばれるライブラリに含まれており、Javaクラスに自動的にゲッター、セッター、toStringメソッド、equalsメソッド、hashCodeメソッドなどを生成するためのものです。
つまり、LoginFormクラスに@Dataというアノテーションをつけることで、何も書かなくてもオーバーライドされたtoStringメソッドを使うことができます。便利ですね～。
オーバーライドされたtoStringメソッドは今回だと以下のような感じです。
@Override
public String toString() {
return "LoginForm{" +
"loginId='" + loginId + '\'' +
", password='" + password + '\'' +
'}';
}
つまり、
オブジェクト名(変数名＝xx,変数名=yy)
のようになります。
今回実装した部分の流れは以下の通りです。
ChatGPT：
1.ユーザーがログインフォームを提出すると、HTMLのフォーム内のデータがリクエストとしてサーバーに送信されます。2.Spring MVCはこのリクエストを処理し、@PostMapping("/login")で注釈付けされたメソッドを呼び出します。
3.メソッドのパラメータであるLoginForm formに対して、Spring MVCはリクエスト内のデータをLoginForm型としてバインドします。バインディングのプロセスは、フォームの各フィールドに対応するLoginFormのプロパティにデータを格納することを含みます。
4.メソッド内では、このLoginFormオブジェクトを使用して、ユーザーが提供したログイン情報を処理できます。この例では、単純にSystem.out.println(form.toString())でコンソールに表示しています。
次→https://qiita.com/19960417akiho/items/faf9b88b9b3348ef38ff