目次
はじめに
前回の記事では「Spring Boot」と「Thymeleaf」を使用して詳細画面を作成しました。本記事では詳細画面から「削除」リンクを押下して、対象データを物理削除する方法を紹介します。
※論理削除をするのが一般的ですが、本記事では物理削除しています。
前回の記事はこちら → Spring Boot + Thymeleafで詳細画面を作成する
スポンサーリンク
[前回の記事で紹介した一覧画面]
[前回の記事で紹介した詳細画面]
ユーザー情報一覧画面の「詳細」リンク押下で、ユーザー詳細画面に遷移。
今回は、ユーザー詳細画面の「削除」リンクを押下したら、対象データを物理削除し、ユーザー情報一覧画面へ戻るまでの流れを紹介します。
バックエンド(サーバー)側のソースコード
コントローラークラス(UserController.java)
package com.example.demo.controller; import java.util.List; 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.PathVariable; import com.example.demo.entity.User; import com.example.demo.service.UserService; /** * ユーザー情報 Controller */ @Controller public class UserController { /** * ユーザー情報 Service */ @Autowired UserService userService; /** * ユーザー情報一覧画面を表示 * @param model Model * @return ユーザー情報一覧画面 */ @GetMapping(value = "/user/list") public String displayList(Model model) { List<User> userlist = userService.searchAll(); model.addAttribute("userlist", userlist); return "user/list"; } /** * ユーザー情報詳細画面を表示 * @param id 表示するユーザーID * @param model Model * @return ユーザー情報詳細画面 */ @GetMapping("/user/{id}") public String displayView(@PathVariable Long id, Model model) { User user = userService.findById(id); model.addAttribute("userRequest", user); return "user/view"; } /** * ユーザー情報削除 * @param id 表示するユーザーID * @param model Model * @return ユーザー情報詳細画面 */ @GetMapping("/user/{id}/delete") public String delete(@PathVariable Long id, Model model) { // ユーザー情報の削除 userService.delete(id); return "redirect:/user/list"; } }
ユーザー情報の削除は「delete」メソッドで実装しています。サービスクラスを呼び出し、物理削除後、ユーザー情報一覧画面へリダイレクトしています。
ユーザー情報一覧画面へリダイレクトすると「displayList」メソッドが呼ばれます。「displayList」メソッドでは、一覧に表示する最新データを取得しています。
サービスクラス(UserService.java)
package com.example.demo.service; import java.util.List; import javax.transaction.Transactional; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.example.demo.entity.User; import com.example.demo.repository.UserMapper; import com.example.demo.repository.UserRepository; /** * ユーザー情報 Service */ @Service @Transactional(rollbackOn = Exception.class) public class UserService { /** * ユーザー情報 Repository */ @Autowired private UserRepository userRepository; /** * ユーザー情報 Mapper */ @Autowired private UserMapper userMapper; /** * ユーザー情報 全検索 * @return 検索結果 */ public List<User> searchAll() { return userRepository.findAll(); } /** * ユーザー情報 主キー検索 * @return 検索結果 */ public User findById(Long id) { return userRepository.findById(id).get(); } /** * ユーザー情報 物理削除 * @param id ユーザーID */ public void delete(Long id) { User user = findById(id); userRepository.delete(user); } }
JPAが提供している「findById」で対象データを抽出後、「delete」関数を使用してユーザー情報を物理削除しています。
エンティティクラス(User.java)
データベースから取得したデータを格納するエンティティクラスの内容は以下の通り。@Dataアノテーションを使用して、getter、setterの定義を省略しています。
package com.example.demo.entity; import java.io.Serializable; import java.util.Date; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.Table; import lombok.Data; /** * ユーザー情報 Entity */ @Entity @Data @Table(name="user") public class User implements Serializable { /** * ID */ @Id @Column(name="id") @GeneratedValue(strategy=GenerationType.IDENTITY) private Long id; /** * 名前 */ @Column(name="name") private String name; /** * 住所 */ @Column(name="address") private String address; /** * 電話番号 */ @Column(name="phone") private String phone; /** * 更新日時 */ @Column(name="update_date") private Date updateDate; /** * 登録日時 */ @Column(name="create_date") private Date createDate; /** * 削除日時 */ @Column(name="delete_date") private Date deleteDate; }
リポジトリクラス(UserRepository.java)
データベースにアクセスする為のリポジトリクラスの内容は以下の通り。
package com.example.demo.repository; import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.stereotype.Repository; import com.example.demo.entity.User; /** * ユーザー情報 Repository */ @Repository public interface UserRepository extends JpaRepository<User, Long> {}
フロントエンド(クライアント)側のソースコード
スポンサーリンク
一覧画面(list.html)
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head> <title>ユーザー情報一覧</title> <link href="/css/list.css" rel="stylesheet"></link> <meta charset="utf-8" /> </head> <body> <h1>ユーザー情報一覧</h1> <div><a th:href="@{/user/add}">新規登録はこちら</a></div> <table> <thead> <tr> <th>ID</th> <th>名前</th> <th>住所</th> <th>電話番号</th> <th>更新日時</th> <th>登録日時</th> <th>削除日時</th> <th> </th> </tr> </thead> <tbody> <tr th:each="user : ${userlist}" th:object="${user}"> <td class="center" th:text="*{id}"></td> <td th:text="*{name}"></td> <td th:text="*{address}"></td> <td class="center" th:text="*{phone}"></td> <td class="center" th:text="${#dates.format(user.updateDate, 'yyyy/MM/dd')}"></td> <td class="center" th:text="${#dates.format(user.createDate, 'yyyy/MM/dd')}"></td> <td class="center" th:text="${#dates.format(user.deleteDate, 'yyyy/MM/dd')}"></td> <td class="center"><a th:href="@{/user/{id}(id=*{id})}">詳細</a></td> </tr> </tbody> </table> </body> </html>
詳細画面(view.html)
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head> <title>ユーザー情報詳細</title> <link href="/css/add.css" rel="stylesheet"></link> <meta charset="utf-8" /> </head> <body> <h1>ユーザー情報詳細</h1> <table th:object="${userRequest}"> <tr> <th class="cell_title">名前</th> <th class="cell_required"></th> <td th:text="*{name}"></td> </tr> <tr> <th class="cell_title">住所</th> <th class="cell_required"></th> <td th:text="*{address}"></td> </tr> <tr> <th class="cell_title">電話番号</th> <th class="cell_required"></th> <td th:text="*{phone}"></td> </tr> </table> <div class="btn_area_center"> <a th:href="@{/user/{id}/edit(id=*{id})}">編集</a> <a th:href="@{/user/{id}/delete(id=*{id})}">削除</a> <a href="/user/list">一覧に戻る</a> </div> </body> </html>
スタイルシート
[list.css]
body { width: 90%; } table{ width: 100%; border-collapse: collapse; font-size: 12px; } table th, table td { border: 1px solid #ddd; padding: 6px; } table th { background-color: #F2F2F2; } .center { text-align: center; }
[add.css]
body { width: 80%; } table{ width: 100%; border-collapse: collapse; font-size: 13px; } table th, table td { border: 1px solid #ddd; padding: 6px; } table th { background-color: #F2F2F2; } table input { width:90%; } .cell_title { border-right: 0; } .cell_required{ color: red; font-size: 12px; width: 10px; border-left: 0; } .btn { width: 100px; text-align: center; } .btn_area_center { margin-top: 20px; text-align: center; }
動作確認
Spring Bootプロジェクトを実行して http://localhost:8080/user/1 へアクセスします。ユーザー情報詳細画面が表示されるので、「削除」リンクを押下して、ユーザー情報一覧画面へ戻ります。そして削除したデータがユーザー情報一覧画面に表示されていなければ完了です。
※1の部分は対象データのIDです。データがない場合は「Spring Boot + Thymeleafで新規登録画面を作成する」を参考にデータを作成してください。
[ユーザー情報詳細]
↓ 「削除」リンク押下
[ユーザー情報一覧]