【Spring Boot】DBに登録したデータを一覧表示する方法（repository.findAll()）

この記事では、DBに登録した登録内容を画面に一覧表示する方法（repository.findAll()の使用例）を説明します。
なお、接続先のDBはPostgresSQLを前提にしています。

完成イメージ図
プロジェクトの作成
用意するソース
実行結果
- DBのデータが0件の場合

目次へ

完成イメージ図

以下の画面遷移になるように作ります。

入力画面で「送信」ボタンを押すと登録完了画面に遷移します。
入力画面または登録完了画面で「一覧取得」ボタンを押すと一覧画面に遷移し、DBのデータを一覧表示します。

プロジェクトの作成

VSCodeでSpringBootのMavenプロジェクトを作成します。
手順は以下の記事を参照。

2021年11月28日【Windows版】VSCodeで始めるSpringBoot(Mavenプロジェクト編)

プロジェクト作成時、以下の7つの依存関係を選択します。6個目(Spring Data JPA)と7個目(PostgresSQL Driver)を選択しておかないとPostgresSQLに接続ができないので注意してください。

Spring Boot DevTools
Spring Web
Thymeleaf
Lombok
validation
Spring Data JPA
PostgresSQL Driver

用意するソース

SpringBootで新規プロジェクトを作成したら、以下のソースを用意して実行できる状態にします。

コントローラー`(BaseController.java)`

以下の内容でBaseController.javaを作成します。

BaseController.java

package com.example.demo3.controlloer;

import com.example.demo3.model.Person;
import com.example.demo3.repository.PersonRepository;

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.annotation.Validated;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class BaseController{

    private final PersonRepository repository;

    @Autowired
    public BaseController(PersonRepository repository){
        this.repository = repository;
    }

    @GetMapping("/")
    public String home(@ModelAttribute Person person) {
      return "form";
    }

    @PostMapping("/form")
    public String result(@Validated
                        @ModelAttribute Person person,
                        BindingResult result){
        if(result.hasErrors()){
            return "form";
        }
        repository.save(person);
        return "result";
    }

    @PostMapping("/getlist")
    public String resultView(@ModelAttribute Person person,
                            Model model){

        model.addAttribute("personList", repository.findAll());
        return "view";
    }

}

モデル`(Person.java)`

以下の内容でPerson.javaを作成します。

Person.java

package com.example.demo3.model;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.validation.constraints.NotBlank;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;

import org.springframework.format.annotation.NumberFormat;

import javax.validation.constraints.Email;
import javax.validation.constraints.Min;
import lombok.Data;

@Entity
@Data
public class Person {

    @Id
    @GeneratedValue
    private long id;

    /**
     * <p>項目名：名前</p>
     * <p>必須入力かつ、最大10文字まで</p>
     */
    @NotBlank
    @Size(max=10)
    private String name;


    /**
     * <p>項目名：年齢</p>
     * <p>1以上</p>
     */
    @NotNull
    @Min(1)
    @NumberFormat(pattern = "#")
    private Integer age;

    /**
     * <p>項目名：職業</p>
     * <p>必須入力かつ、最大10文字まで</p>
     */
    @NotBlank
    @Size(max=10)
    private String business;

    /**
     * <p>項目名：メールアドレス</p>
     * <p>条件：必須入力かつ、最大64文字まで</p>
     */
    @NotBlank
    @Email
    @Size(max=64)
    private String email;
}

入力画面ページ`(form.html)`

以下の内容でform.htmlを作成します。

form.html

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>入力画面</title>
        <script type="text/javascript"></script>
        <style type="text/css">
            .errorStr {color:red;}
        </style>
    </head>
        <body>
            <h2>入力画面</h2>
            <form th:action="@{/form}" th:object="${person}" method="post" novalidate>
                <label for="name">名前：</label>
                <input type="text" th:field="*{name}" th:errorclass="is-invalid">
                <span class="errorStr" th:errors="*{name}"></span>
                <br>

                <label for="age">年齢：</label>
                <input type="number" th:field="*{age}">
                <span class="errorStr" th:errors="*{age}"></span>
                <br>

                <label for="business">職業：</label>
                <input type="text" th:field="*{business}">
                <span class="errorStr" th:errors="*{business}"></span>
                <br>

                <label for="email">Eメール：</label>
                <input type="text" th:field="*{email}">
                <span class="errorStr" th:errors="*{email}"></span>
                <br>

                <button>送信</button>
            </form>
            <form th:action="@{/getlist}" method="post"><button>一覧取得</button></form>
        </body>
</html>

登録完了画面ページ`(result.html)`

以下の内容でresult.htmlを作成します。

form.html

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>登録完了画面</title>
<script type="text/javascript"></script>
</head>
<body>
    <h2>登録完了画面</h2>
    <p>名前：[[${person.name}]]</p>
    <p>年齢：[[${person.age}]]</p>
    <p>職業：[[${person.business}]]</p>
    <p>Eメール：[[${person.email}]]</p>
    <form th:action="@{/getlist}" method="post"><button>一覧取得</button></form>
</body>
</html>

一覧画面ページ`(view.html)`

以下の内容でview.htmlを作成します。

form.html

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>一覧画面</title>
<script type="text/javascript"></script>
</head>
<body>
    <h2>一覧画面</h2>
    <div th:if="${personList.size() == 0}">
        登録データが1件もありません。
    </div>
    <table th:if="${personList.size() >= 1}">
        <thead>
            <tr>
                <th>id</th>
                <th>名前</th>
                <th>年齢</th>
                <th>職業</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody th:each="person : ${personList}" th:object=${person}>
            <td th:text="*{id}"></td>
            <td th:text="*{name}"></td>
            <td th:text="*{age}"></td>
            <td th:text="*{business}"></td>
            <td th:text="*{email}"></td>
        </tbody>
    </table>

</body>
</html>

設定ファイル`（application.properties)`

DB接続に必要な情報を記述します。

application.properties

spring.datasource.driver-class-name=org.postgresql.Driver
spring.datasource.url=jdbc:postgresql://localhost:5432/postgres
spring.datasource.username=postgres
spring.datasource.password=admin
logging.level.org.hibernate.SQL=DEBUG
spring.jpa.hibernate.ddl-auto=create
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.format_sql=true