Spring Boot学習①～ログイン画面の入力値を受け取る～

以下の動画を参考に、ハンズオン形式でSpring BootでWebアプリを制作していきます。

https://www.youtube.com/watch?v=Usf1sh0pTWQ&list=PLD6WyeaFzSSbS0q1unoPpBpnBNyzPWo3j&index=6

今回はPart5、ログイン画面に入力された値（ユーザー名とパスワード）をコンソールに出力するところまでを実装します。

分からない部分はChatGPTに聞きながら進めていきます。
あくまで、躓いた部分等を個人的な備忘録として記録するための記事です。

# login.html
ログイン画面のhtml部分は以下です。
本記事に必要な部分だけを抜粋しています。

```login.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

入力データのバインディング先です。

```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

```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