この記事では、DBに登録した登録内容を画面に一覧表示する方法(repository.findAll()
の使用例)を説明します。
なお、接続先のDBはPostgresSQLを前提にしています。
完成イメージ図
以下の画面遷移になるように作ります。
入力画面で「送信」ボタンを押すと登録完了画面に遷移します。
入力画面または登録完了画面で「一覧取得」ボタンを押すと一覧画面に遷移し、DBのデータを一覧表示します。
プロジェクトの作成
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
実行結果
上記のソースを実行すると、以下のように画面遷移するアプリが起動します。
DBのデータが0件の場合
なお、DBにデータが1件も登録されていない場合に「一覧取得」ボタンを押すと、一覧画面には以下のように表示されます。
以上で記事の解説はお終い!
もっとJavaやSpringを勉強したい方にはUdemyがオススメ!同僚に差をつけよう!