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

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

今回は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