こんにちは。船井総研デジタルのいっちーです。
前回の記事では、プロジェクトの初期構築を行いました。
今回は、画面遷移を作っていきたいと思います。
画面遷移を設計する
このシステム内で発生する画面遷移と、そのきっかけになるイベントを洗い出していきます。
メイン画面
| No | イベント | 遷移先 | リクエスト | 備考 |
|---|---|---|---|---|
| 1 | 初期表示 | メイン画面 | GET | システム初期表示 |
| 2 | つぶやくボタン押下 | メイン画面 | POST | 投稿時にエラーが発生した場合、エラーメッセージを表示して表示中のページを維持する。投稿に成功したら1ページ目に戻す。 |
| 3 | 前のページボタン押下 | メイン画面 | GET | 前のページが無い場合、1ページ目に遷移する。 |
| 4 | 次のページボタン押下 | メイン画面 | GET | 次のページが無い場合、最終ページに遷移する。 |
| 5 | ねぎ登録ボタン押下 | ねぎ登録画面 | GET | - |
通常は、前のページ/次のページが無い場合、ボタンをそのものを非活性にする、という設計にすることが多いと思いますが、今回は実装をシンプルにするためこのような設計としました。
ねぎ登録画面
| No | イベント | 遷移先 | リクエスト | 備考 |
|---|---|---|---|---|
| 1 | 初期表示 | ねぎ登録画面 | GET | - |
| 2 | 登録ボタン押下 | ねぎ登録画面 | POST | 登録時にエラーが発生した場合、エラーメッセージを表示する。 |
| 3 | 修正ボタン押下 | ねぎ登録画面 | POST | 修正時にエラーが発生した場合、エラーメッセージを表示する。 |
| 4 | 削除ボタン押下 | ねぎ登録画面 | POST | 削除時にエラーが発生した場合、エラーメッセージを表示する。 |
| 5 | 戻るボタン押下 | メイン登録画面 | GET | - |
画面遷移を実装する
Controllerクラスを実装する
設計した画面遷移定義に基づいて、Controllerクラスを実装します。Controllerクラスは、リクエストに基づいて処理を行い、遷移先の画面を返します。多くの場合、実際の処理は次回以降作成していくServiceクラスで行い、ControllerクラスはServiceクラスの処理結果だけ受け取って、それによって遷移先の画面を返す、という構成(MVC+S)にすることが多いと思います。
クラスに@Controllerアノテーションを付与することで、そのクラスがControllerクラスであるとみなされます。
Controllerクラス
@Controller
public class NegitterController {
/**
* 初期表示
*
* @return メイン画面
*/
@GetMapping("/")
public String index() {
return "negitter";
}
/**
* ねぎ登録画面に遷移
*
* @return ねぎ登録画面
*/
@GetMapping("/register")
public String register() {
return "register";
}
/**
* 前のページに遷移/次のページに遷移/ねぎ登録画面から戻る
*
* @return メイン画面
*/
@GetMapping("/negitter")
public String negitter() {
return "negitter";
}
/**
* つぶやきを登録
*
* @return メイン画面
*/
@PostMapping("/negiit")
public String negiit() {
return "negitter";
}
/**
* ねぎを登録
*
* @return ねぎ登録画面
*/
@PostMapping("/registerNegi")
public String registerNegi() {
return "register";
}
/**
* ねぎを修正/削除
*
* @return ねぎ登録画面
*/
@PostMapping("/updateNegi")
public String updateNegi() {
return "register";
}
}
ThymeleafテンプレートにPost/GetMappingへの紐付けを埋め込む
Thymeleafテンプレートに、Controllerクラスに定義したPost/GetMappingへの紐付けを埋め込みます。
メイン画面
(略)
-<a id="registerNegiBtn" class="btn btn-light" href="register.html">ねぎを登録</a>
+<a id="registerNegiBtn" class="btn btn-light" href="register.html" th:href="@{/register}">ねぎを登録</a>
(略)
-<a class="btn btn-light">前のページへ</a>
+<a class="btn btn-light" th:href="@{/negitter}">前のページへ</a>
(略)
-<a class="btn btn-light">次のページへ</a>
+<a class="btn btn-light" th:href="@{/negitter}">次のページへ</a>
(略)
-<form method="POST" action="#">
+<form method="POST" action="#" th:action="@{/negiit}">
(略)
ねぎ登録画面
(略)
-<a id="backToNegiitsBtn" class="btn btn-light" href="negitter.html">戻る</a>
+<a id="backToNegiitsBtn" class="btn btn-light" href="negitter.html" th:href="@{/negitter}">戻る</a>
(略)
-<form method="POST" action="#">
+<form method="POST" action="#" th:action="@{/registerNegi}">
(略)
-<form method="POST" action="#">
+<form method="POST" action="#" th:action="@{/updateNegi}">
(略)
動作確認
画面遷移の定義が実装できたら、ビルドして画面遷移できるかどうか確かめてみましょう。
APコンテナ停止
動作確認は、VSCode上で行います。APコンテナとポートが被っているので、APコンテナを停止します。
$ docker stop ap
ap
Tomcat起動
VSCodeの「実行とデバッグ」から、Tomcatを起動します。
ブラウザからhttp://localhost:8080/negitterにアクセスして、メイン画面が表示されたら成功です。
一通り画面遷移を試してみて、想定通りの遷移をするかどうか確認しておきましょう。
まとめ
今回は、Controllerクラスを仮組みして、画面遷移の確認まで行いました。
次回は、Serviceクラスを作って、実際にDBに登録したデータを取れるようにしていきます。
それではまた。