前→https://qiita.com/19960417akiho/items/3fa636e6a26c371bcaa8
以下の動画を参考に、ハンズオン形式でSpring BootでWebアプリを制作していきます。
今回はPart6。
正しいペアのIDとパスワードを入力した際にはトップメニュー画面に遷移し、
誤ったペアのIDとパスワードを入力した際は、ログイン画面にその旨をテキストで表示します。
まずはトップメニュー画面のhtmlとコントローラーを用意します。
menu.html＆MenuControler.java
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>トップメニュー</title>
</head>
<body>
トップメニューだよ
</body>
</html>
@Controller
public class MenuController {
@GetMapping("/menu")
public String view(){
return "menu";
}
}
/menuにアクセスがあった際はmenu.htmlを表示するような設定です。
次に、LoginControllerを変更して、IDとパスが一致したとき、そうでないときの動きを実装しましょう。
LoginController.java
@Controller
public class LoginController {
private static final String LOGIN_ID = "user";
private static final String PASSWORD = "pwd";
@GetMapping("/login")
public String view(Model model, LoginForm form) {
return "login"; //login.htmlをする
}
@PostMapping("/login")
public String login(Model model, LoginForm form) {
var isCorrectUserAuth = form.getLoginId().equals(LOGIN_ID)&&form.getPassword().equals(PASSWORD);
if(isCorrectUserAuth) {
return "redirect:/menu";
}else {
model.addAttribute("errorMsg","IDとPASSの組み合わせが間違っています。");
return "login";
}
}
}
前回は入力された値をコンソールに出力するだけでしたが、今回はその値をあらかじめ用意した定数と比較して、正誤の判断をします。
今回仮で設定した定数は以下です。本当はDBから引っ張ってきて確認しますが、本題はそこではないので簡易Verです。
private static final String LOGIN_ID = "user";
private static final String PASSWORD = "pwd";
ログイン時の挙動は以下です。
@PostMapping("/login")
public String login(Model model, LoginForm form) {
var isCorrectUserAuth = form.getLoginId().equals(LOGIN_ID)&&form.getPassword().equals(PASSWORD);
if(isCorrectUserAuth) {
return "redirect:/menu";
}else {
model.addAttribute("errorMsg","IDとPASSの組み合わせが間違っています。");
return "login";
}
}
isCorrectUserAuthはboolean型の変数となります。
getLoginId()とgetPassword()なんて定義した覚えないよ！
となりますが、これまた@Dataのおかげで、loginIdとpasswordという変数を用意したときに、自動的にその変数に対するゲッターとセッターが同一クラス内に用意されます。
getLoginId()とLが大文字になっているのは、Javaの命名規則に従って自動的に大文字に変換されているからです。
なので、formのloginIdとpasswordがそれぞれLOGIN_ID・PASSWORDと一致した場合は、isCorrectUserAuthはtrueとなり、そうでない場合はfalseとなります。
if文以下はログイン成功時と失敗時の分岐です。
まず成功時。（isCorrectUserAuthはtrue）
return "redirect:/menu";
menu.htmlにリダイレクトします。
次に失敗時。（isCorrectUserAuthはfalse）
model.addAttribute("errorMsg","IDとPASSの組み合わせが間違っています。");
return "login";
modelというオブジェクトにerrorMsgというキーと「IDと～」という値を追加しています。
そもそも modelってなんやねんって思いますよね、私も思ってのでChatGPTに聞きました。
modelはModel型のオブジェクトの名前ってことであってる？
ChatGPT:
はい、その通りです。modelはModel型のオブジェクトを指します。Model型はSpring Frameworkが提供するクラスで、ビューとコントローラー間でデータをやり取りするために使用されます。コントローラーからビューにデータを渡す際に、Modelオブジェクトを使用してデータを保持し、ビューに渡します。
通常、Spring MVCのコントローラーメソッドの引数としてModel型のパラメータを指定することで、Springが自動的にModelオブジェクトを作成し、それをコントローラーメソッドに渡してくれます。そして、コントローラーはこのModelオブジェクトを使用してデータをビューに渡します。
なるほど、Springがあらかじめ用意してくれているクラスのようです。
要は、コントローラーにmodelという空箱（コンテナ）を用意し、そこに入れたデータを画面側（今回でいうとlogin.html）に反映することができるということですね。
javaとhtmlの架け橋的存在です。
コントローラー側でその空箱にデータを追加するときのメソッドがaddAttribute()で、これはキーと値というセットでmodelにデータを追加します。
return以下でmodelにデータを追加した後に、再びlogin.htmlがされます。
このままでは、modelにデータが追加されただけで、html側にそれが表示されるようにはなっていません。
最後にlogin.htmlを変更しましょう。
login.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>ログイン画面</title>
</head>
<body>
<h2>ログイン画面だよ</h2>
<span th:text="${errorMsg}"></span>
<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>
</body>
</html>
変更が加わった部分は以下の2行目です。
<h2>ログイン画面だよ</h2>
<span th:text="${errorMsg}"></span>
<form th:action="@{/login}" method="post" th:object="${loginForm}">
今回はerrorMsgに「IDと～」という値がはいっているので、その部分が表示されます。
このようにして、コントローラーで用意したデータをビューに提供することができます。
次→https://qiita.com/19960417akiho/items/2aa16ce876c4937b0cc3