トレノキャンプ

Spring

2022.08.25

Springでフォームの完了処理を作成！リダイレクト実装手順をわかりやすく

2023.11.18

1．Controllerクラスでリダイレクトを実装
2．HTMLで画面に出力
3．ブラウザからアクセスして確認

この記事は「Javaで学習するSpringによるWebアプリ開発」というトレノキャンプのeラーニング講座を基に解説した記事です。

前回の記事では、リダイレクト処理とフラッシュスコープについて解説を行いました。

この記事では、前回の記事の内容をもとに実際に登録の完了処理を組んでいきます。

記事内で使用している問い合わせアプリのプロジェクトの完全版は、以下のコース内にてダウンロードいただけます。

1．Controllerクラスでリダイレクトを実装

それではInquiryController.javaを開いてください。

EclipseでWebBeginnerStarter内のInquiryController.javaを選択

「@PostMapping(“/complete”)」のcomplete()メソッドを変更していきます。

	@PostMapping("/complete")
	public String complete(/*Add parameters. */) {

		//hands-on

		//redirect

		return "";
	}

	@PostMapping("/complete")
	public String complete(@Validated InquiryForm inquiryForm,
			BindingResult result,
			Model model,
			RedirectAttributes redirectAttributes) {

		if(result.hasErrors()) {
			model.addAttribute("title", "Inquiry Form");
			return "inquiry/form";
		}

		redirectAttributes.addFlashAttribute("complete", "Registered!");

		return "redirect:/inquiry/form";
	}

まずは引数を記述していきます。

1つ目、「InquiryForm inquiryForm」ですが、ここに「@Validated」を付けてバリデーションをかけておきます。こちらは、確認ページには入力欄はありませんが、実は裏から書き換え可能なのでここでも確実にバリデーションを行う必要があるということを覚えておいてください。

そして、2つ目が「BindingResult result」、3つ目が「Model model」として、最後4つ目にリダイレクトのための「RedirectAttributes redirectAttribures」を記述しておきます。こちらはインポートする必要があるので、「Ctrl + Shift + O(オー)」でインポートをしておいてください。以上で引数の設定は完了です。

RedirectAttributesはフラッシュスコープを使うためのクラスですが、フラッシュスコープはページ間を飛び越えてデータを保持するための「セッション」という仕組みを使って実現されています。

今回はデータベースへの登録処理があるため、二重クリックへの対策としてリダイレクトさせる必要があり、リクエストスコープのModelを使用してデータをやり取りすることができません。そのため、専用の仕組みとしてここではRedirectAttributesを用いています。

続いてメソッドブロックでは、まず初めにバリデーションの分岐処理を入れています。

確認ページと同様に、「result.hasErrors()」の戻り値に応じてif文で処理を分岐し、エラーが見つかった場合は「”inquiry/form”」をreturnしています。こちらはリダイレクトではないため、タイトルはmodelを介して送信しています。

バリデーションによる条件分岐をパスした後には、本来データベースへの登録処理が入りますが、そちらの処理については後の章で学習しますので、ここでは一旦飛ばします。

データベースへの登録処理が完了したという体で、if文の後ろにはフラッシュスコープへの値の登録処理を記述しています。

使い方は基本的にはModelと同じで、今回は「redirectAttributes.addFlashAttribute(“complete”, “Registered!”)」という形で、キー「”complete”」、値「”Registered!”」というペアになっています。こちらは実際にはセッションに値が格納されます。

そして、この「”Registered!”」という値が一度表示されるとその時点でセッションからデータが破棄されるため、フラッシュスコープと呼ばれています。

最後にreturn文が記述されていますが、ここで重要ポイントです。

こちらのreturnで返す内容は今までと異なり、まず「redirect:」と書いてから、その後ろにリダイレクト先のURLを記述します。

これまでリダイレクトでない場所で記述してきたreturn文には「HTMLのファイル名」を指定していましたが、リダイレクトの場合は「リダイレクト先のURL」を指定するということを覚えておいてください。

このように記述することで、一度レスポンスを返して、クライアントから再びリクエストが送られてくることになります。そのため、リクエストスコープではデータを繋ぐことができません。

それでは、これでデータベース操作以外の処理を組めたので、続いてリダイレクト先のメソッドでフラッシュスコープのデータを受け取る処理を組んでいきます。

同じファイルの「@GetMapping(“/form”)」のメソッドを変更します。

	@GetMapping("/form")
	public String form(InquiryForm inquiryForm, Model model) {

		model.addAttribute("title", "Inquiry Form");

		return "inquiry/form";
	}

form()メソッドです。

	@GetMapping("/form")
	public String form(InquiryForm inquiryForm, Model model,
			@ModelAttribute("complete") String complete) {

		model.addAttribute("title", "Inquiry Form");

		return "inquiry/form";
	}

こちらの引数を追記しますので、「Model model」の記述の後ろにカンマを打ち、改行を入れています。

そして、新たにフラッシュスコープでデータを受け取るためのString型引数「@ModelAttribute(“complete”) String complete」を指定しています。

「@ModelAttribute」はフラッシュスコープを受け取るために必要となるアノテーションですので、インポートしておいてください。

このように記述することによって、フラッシュスコープの値をHTMLでレンダリングできるようになります。

2．HTMLで画面に出力

それでは続いて、フラッシュスコープから受け取ったデータをHTMLで画面上に出力させる処理を確認していきますので、保存をかけてからform.htmlを開いてください。

EclipseでWebBeginnerStarter内のform.htmlを選択

<div th:replace="~{block/header::headerA}"></div>
<h1 th:text="${title}">仮のタイトル</h1>
<div th:if="${param.complete}" >
	更新が完了しました。
</div>
<h2 th:text="${complete}"></h2>

<body>要素の中にある<h2>タグに「th:text=”${complete}”」が指定されています。

このように記述することで、completeの中身が入っている場合だけ画面に表示するということが可能です。

そのため、データベースへの登録が完了しリダイレクトされた時のみここに「”Registered!”」と表示されます。