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

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

spring bootを使用してログイン画面とユーザー登録画面の作成方法を紹介します。

長くなりますので、何回かに分けて説明していきます。

CSSに関しては一切設定しておりません。

使用環境

MacBook Pro (15-inch, 2016)

Eclipse:Oxygen.3a Release (4.7.3a)

spring boot バージョン:2.1.0

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

作成するプログラム

まずは、ログイン画面

今の段階では「ログイン」ボタンは機能しません。

「ユーザー新規登録はこちら」をクリックすると

ユーザ登録画面が出てきます。

まずはここまでの流れを作っていきます。

作って行く中で、今回は女性のみがユーザー登録できるシステムを作っていきます。

使用するコード

使用するファイルは以下の4つ

① LoginController.java

② login.html

③ SignupController.java

④ signup.html

① LoginController.java

@GetMapping(“/login”)で url/login でlogin.htmlに遷移するように設定

@PostMapping(“/login”)で postで受け取ったデータを、今の段階では同じlogin.htmlに遷移するように設定しておきます。

② login.html

<a>タグ内の「th:href」属性は、この後にコントローラークラスで@GetMapping(“/signup”)をつけることで動作するようになります。

③ SignupController.java

15~21行目まではinitRadioSex()の中で、次のsignup.htmlで使うradioボタンの作成をしています。

23行目からの@GetMapping(“/signup”)の中でinitRadioSex();を初期化して変数radioSexに代入し、

model.addAttributeを使って値をセットしています。

これによってsignup.htmlにてradioボタンを作る準備が完成です。

@PostMapping(“/signup”)でsignup.htmlのformから値を受け取り、

return “redirect:/login”; とすることでlogin.htmlにリダイレクトさせる設定をしています。

login.htmlにリダイレクトさせると、

LoginController.javaの@GetMapping(“/login”)を呼び出し、

login.htmlに遷移させることができます。

④ signup.html

 

56行目の「th:each」は拡張for文のように使用できます。

SignupController.javaを確認しながらみてください。

model.addAttributeした”radioSex”キーから

itemに値を取り出して繰り返し使用していきます。

th:text=”${item.key}” では「女性・男性」を、

th:value=”${item.value}” では「true/false」を呼び出しています。

これによって女性・男性それぞれのradioボタンが作られます。

補足

signup.htmlでは<form>タグに

th:action=”@{/signup}”と記載しています。

この形を取ることで簡単にSpringセキュリティを使うことで出来ます。

やって損なしです。