Spring Boot + Thymeleafで一覧画面を作成する

Java

Spring Boot + Thymeleafで一覧画面を作成する

はじめに

Javaのフレームワーク「Spring Boot」とテンプレートエンジン「Thymeleaf」を使用して、一覧画面、詳細画面、編集画面、登録画面を作成する手順を紹介します。

スポンサーリンク

本記事で作成する「一覧画面」のイメージとテーブル定義は以下の通り。

[画面イメージ]

一覧画面

[テーブル定義]

物理名 論理名 データ型 NOT NULL 説明
id ID BIGINT(20) 主キー(AUTO_INCREMENT)
name 名前 VARCHAR(100) ユーザーの名前
address 住所 VARCHAR(255)   ユーザーの住所
phone 電話番号 VARCHAR(50)   ユーザーの電話番号
update_date 更新日時 DATETIME 最終更新日時
create_date 更新日時 DATETIME 登録日時
delete_date 更新日時 DATETIME   論理削除した日時

バックエンド(サーバー)側のソースコード

コントローラークラス(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
  private 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";
  }
}

サービスクラス(UserService.java)

サービスクラスの内容は以下の通り。データベース接続はJPA、トランザクション管理は@Transactionalのアノテーションを使用しています。

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();
  }
}

エンティティクラス(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(list.html)

画面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>

スタイルシート(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;
}

動作確認

Spring Bootプロジェクトを実行して http://localhost:8080/user/list へアクセスします。

一覧画面が表示され、デーベースから取得した値が一覧に表示されていれば完了です。

一覧画面

「新規登録はこちら」リンク押下 → Spring Boot + Thymeleafで新規登録画面を作成する

「詳細」リンク押下 → Spring Boot + Thymeleafで詳細画面を作成する

\ 参考になりましたか? /

© 2020 ITを分かりやすく解説