目次
はじめに
前回の記事では「Spring Boot」と「Thymeleaf」を使用して一覧画面を作成しました。本記事では一覧画面の表から「詳細」リンクを押下して、対象データの詳細画面を表示させる方法について紹介します。
スポンサーリンク
前回の記事はこちら → Spring Boot + Thymeleafで一覧画面を作成する
[前回の記事で作成した一覧画面]
[本記事で作成する詳細画面]
バックエンド(サーバー)側のソースコード
コントローラークラス(UserController.java)
package com.example.demo.controller; import java.util.ArrayList; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.validation.BindingResult; import org.springframework.validation.ObjectError; import org.springframework.validation.annotation.Validated; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import com.example.demo.dto.UserRequest; import com.example.demo.dto.UserUpdateRequest; 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"; } }
詳細画面の表示には「displayView」メソッドを使用します。HTTP GETで対象のIDをURLに付与し、そのIDをサービスクラスに渡し、サービスクラスが対象データを取得し、その取得したデータを画面に返却する流れです。
サービスクラス(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.UserRepository; /** * ユーザー情報 Service */ @Service @Transactional(rollbackOn = Exception.class) public class UserService { /** * ユーザー情報 Repository */ @Autowired private UserRepository userRepository; /** * ユーザー情報 全検索 * @return 検索結果 */ public List<User> searchAll() { return userRepository.findAll(); } /** * ユーザー情報 主キー検索 * @return 検索結果 */ public User findById(Long id) { return userRepository.findById(id).get(); } }
詳細情報の取得はJPAが提供している「findById」関数を使い対象データをデータベースから抽出しています。
エンティティクラス(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> {}
フロントエンド(クライアント)側のソースコード
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>
スタイルシート(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で編集画面を作成する
「削除」リンク押下 → 対象データを削除して一覧画面へ戻る
「一覧に戻る」リンク押下 → Spring Boot + Thymeleafで一覧画面を作成する