(第8回) 日記の削除機能を追加、CRUDのD(Delete、削除)【Spring Boot2で日記ウェブアプリ】

Spring Boot2.7で日記投稿ウェブアプリ入門の第8回です。コントローラクラスに日記の削除処理をするメソッドを追加します。CRUDでいうと、D(Delete、削除)の部分にあたります。また、リダイレクト処理もするようにします。Spring Bootの初心者・入門者の方は、参考にしてみてください。

動作環境と今回の目的

最終更新日:2022/11/25

前回は、Spring Boot2の日記投稿ウェブアプリのフロントエンドに、CSSフレームワークのBootstrapを導入しました。
(第7回) Spring Boot2にBootstrap4を導入、CDNとWebjarsの2つの方法【Spring Boot2で日記ウェブアプリ】

今回は、日記投稿ウェブアプリの開発に戻り、日記の削除機能を作っていきます。CRUDでいうと、D(Delete、データ削除)の部分にあたります。
フロントエンド(HTML、Thymeleaf)の方はすでに作ってあるので、コントローラクラスに日記の削除処理をするメソッドを追加していきます。

◾️動作環境やバージョン情報です。
OS:macOS Big Sur(バージョン11.7.1)
開発環境:Eclipse(Pleiades All in One、4.16(2020-06)、Java Full Edition版)
Spring Bootバージョン:2.7.5
->2.4でも確認済み
Java:11
データベース:H2
Bootstrap5.2.2

コントローラクラスに日記の削除処理メソッドを追加、削除処理後にリダイレクト

第5回のページでコントローラクラスDiaryController.javaを作成し、日記の一覧情報を取得するsummaryメソッドを作成しました。
今回は同じDiaryController.java内に、日記の削除処理を行うdeleteメソッドを追加します。

package com.example.demo;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
@RequestMapping("diary")
public class DiaryController {
  @Autowired
  DiaryRepository diaryRepository;
  
  //日記一覧情報の取得
  @GetMapping("summary")
  public String summary(Model model) {
    Iterable<Diary> diarys = diaryRepository.findAll();
    model.addAttribute("diarys", diarys);
    return "summary";
  }

  //指定されたidの日記を削除する
  @PostMapping("delete")
  public String delete(@RequestParam Integer id) {
    diaryRepository.deleteById(id);
    return "redirect:/diary/summary";
  }
}

deleteメソッドには、@PostMapping("delete")が付いています。@PostMappingは、HTTPのPOSTリクエストのみ受け付けます。GETリクエストは受け付けません。
ですのでdeleteメソッドは、このURLにPOSTリクエストされた時に実行されます。

http://localhost:8080/diary/delete

次に、deleteメソッドの引数は"(@RequestParam Integer id)"としていますが、これでHTTPのPOSTリクエストのリクエストパラメータidを受け取る事ができます。また、@RequestParamの変数名のidは、HTMLフォームのname属性と一致させる必要があります。

前回のページから、Thymeleafのsummary.htmlの一部を抜粋して確認してみます。

<td>
<form th:action="@{/diary/delete}" method="post">
<input type="hidden" name="id" th:value="${diary.id}"/>
<input type="submit" class="btn btn-danger" value="削除"/>
</form>
</td>
hiddenタグで投稿された日記のid情報を保持させて、そのデータがidという名前(name属性)でPOSTリクエストで送信されてくるのがわかると思います。

◾️@RequestParamについて
@RequestParamの扱い方については別ページで詳しく説明していますので、そちらも参考にしてください。参考サイトはHTTPのGETリクエスト時を例にしていますが、POSTリクエスト時でも@RequestParamの使い方は同じです。
【Sprint Boot2】GETリクエストでクライアント側からサーバサイドへデータ送信。サーバサイドのControllerクラスの作成、@RequestParam、@GetMapping

次に、deleteメソッド内の1行目ですが、これで指定したidの日記データをDBのdiaryテーブルから削除します。

diaryRepository.deleteById(id);
diaryテーブルからのレコード削除処理は、第4回ページで作成したリポジトリインタフェースDiaryRepositoryを使用しています。deleteByIdメソッドは、Spring Data JPAのCrudRepositoryが宣言しているメソッドで、実装はSimpleJpaRepositoryクラスにあります。

そして、deleteメソッドの2行目(というか最後の行)は、画面をリダイレクトしています。

return "redirect:/diary/summary";

このコードは、以下のURLにリダイレクトさせています。日記の削除処理が完了したら、日記一覧データを再表示するためです。

http://localhost:8080/diary/summary

Spring Boot 本をAmazonで探す [広告]

アプリの実行とブラウザで動作確認

それではSpring Bootアプリを起動して、ブラウザで動作確認をしてみます。
アクセスするURLは前回と同じで「http://localhost:8080/diary/summary」です。
Spring Bootの削除処理、CRUDのD

日記一覧データが表示されたら、どれでもいいので削除ボタンを押してみて下さい。日記一覧データが再表示されますが、削除ボタンを押した日記は消えるはずです。

ブラウザの動作確認だけでなく、EclipseのコンソールビューでSQLログや、H2 Consoleでdiaryテーブルのデータなどでも確認できるはずです。
コンソールビューではdelete SQLが実行されていますし、H2 Consoleではdiaryテーブルの対象日記データが削除されている事がわかるはずです。

最後に、次回

以上今回は、日記投稿ウェブアプリのサーバサイド(コントローラクラス)の削除機能を追加しました。

次回は、サーバサイドの日記の新規投稿機能を追加していきます。CRUDでいうと、C(Create、データ作成)の部分にあたります。

(第9回) 日記の新規登録機能を追加、CRUDのC(Create、作成)【Spring Boot2で日記ウェブアプリ】
Spring Bootの日記投稿ウェブアプリ開発入門トップ