Spring Boot + Thymeleafで詳細画面を作成する

はじめに

前回の記事では「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 org.springframework.transaction.annotation.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(rollbackFor = 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で一覧画面を作成する