【Java】Spring Bootを使ったToDoアプリケーションを作成しよう-⑧戻る機能の実装-

Last updated at 2024-07-17Posted at 2024-07-17

戻る機能を作成していきましょう。

2.設計で検討した一覧機能をおさらい

1.画面遷移
一覧画面　⇔　登録画面　⇔　確認画面　→　完了画面　（→　一覧画面）
　　　　　⇔　変更画面　⇔　確認画面　→　完了画面　（→　一覧画面）
　　　　　→削除確認画面　→　完了画面（→　一覧画面）

URL設計
画面名: タスク確認画面からタスク変更画面
URL: /task/back
HTTPメソッド: GET

＊

画面遷移図にて両矢印（⇔）になっているところは、前の画面に戻ることができます。登録画面、確認画面周りで戻る処理を追加していきましょう。

controllerクラスを書いてみよう

URL設計で検討したURLをもとにcontrollerクラスのメソッドを書いていきましょう。

確認画面から登録画面に戻る際は、入力した値がクリアされないようにしたいです。そのため、確認画面で表示した値をオブジェクトで引数として受け取り、画面に表示するようにします。

    @GetMapping("/task/back")
    public String backToEditPage(TaskForm taskForm,Model model) {
    	model.addAttribute("taskForm", taskForm);
    	return "task/edit";
    }

htmlを修正しよう

次にhtmlを修正していきましょう。

まず、登録画面から一覧画面に戻る遷移では、入力値の移動がないので、htmlでリンクで遷移します。

edit.htmlの戻るボタンは以下のようになっていると思います。

<a type="button" class="btn btn-outline-secondary" href="/task/list">back</a>

hrefを修正します。

<a type="button" class="btn btn-outline-secondary" th:href="@{/task/list}">back</a>

削除確認画面から一覧画面への戻る遷移も同様の修正を行います。

＊

確認画面から登録画面への戻る処理を追加していきます。
controllerクラスにbackメソッドを書いたので、htmlでは、このbackメソッドに値を渡してあげるような記述を行います。

修正前

        <div class="d-flex justify-content-start">
            <form th:action="@{/task/save}" method="post" th:object="${taskForm}"class="mb-3">
                <input type="hidden" name="title" th:field="*{title}">
                <input type="hidden" name="description" th:field="*{description}">
                <input type="hidden" name="deadline" th:field="*{deadline}">
                <input type="hidden" name="taskId" th:field="*{taskId}">
                <input type="hidden" name="status" th:field="*{status}">
                <input type="hidden" name="updatedAt" th:value="*{updatedAt}">
                <!-- 送信ボタン -->
                <button type="submit" class="btn btn-primary me-2" value="submit">submit</button>
            </form> 
                <button type="submit" class="btn btn-outline-secondary">back</button> 
        </div>

修正後

        <div class="d-flex justify-content-start">
            <form th:action="@{/task/save}" method="post" th:object="${taskForm}"class="mb-3">
                <input type="hidden" name="title" th:field="*{title}">
                <input type="hidden" name="description" th:field="*{description}">
                <input type="hidden" name="deadline" th:field="*{deadline}">
                <input type="hidden" name="taskId" th:field="*{taskId}">
                <input type="hidden" name="status" th:field="*{status}">
                <input type="hidden" name="updatedAt" th:value="*{updatedAt}">
                <!-- 送信ボタン -->
                <button type="submit" class="btn btn-primary me-2" value="submit">submit</button>
            </form> 
            <form th:action="@{/task/back}" method="get" th:object="${taskForm}">
				<input type="hidden" name="title" th:field="*{title}">
    			<input type="hidden" name="description" th:field="*{description}">
    			<input type="hidden" name="deadline" th:field="*{deadline}">
    			<input type="hidden" name="taskId" th:field="*{taskId}">
    			<input type="hidden" name="status" th:field="*{status}">
    			<input type="hidden" name="updatedAt" th:value="*{updatedAt}">
    			<button type="submit" class="btn btn-outline-secondary">back</button>
		    </form>
        </div>

これで戻る処理の実装は終わりです。

次の投稿では、例外処理の実装を行います。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up