【Spring Boot入門】フォームから値を取得してデータベースに登録する

今回の記事ではSpring Bootで画面のフォームから入力値を取得して、データベース（PostgreSQL）に登録する方法について解説していきます。

EclipseでSpring Bootの環境構築をする方法、Spring BootでPostgreSQLを使う方法を解説！の記事も参考にしてみてください。

バックエンド（サーバー側）のソースコード
フロントエンド（画面側）のソースコード
1. book-list.html
2. add.html
動作確認

バックエンド（サーバー側）のソースコード

まずはバックエンド側のソースコードから確認していきます。

Book.java

データベースへ登録する値を管理するエンティティのクラスです。

package com.uhablog.model;

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;

@Data
@Entity
@Table(name = "booksinfo")
public class Book {

	@Id
	@GeneratedValue(strategy=GenerationType.IDENTITY)
	@Column(name="id")
	// 本のidを保持するフィールド
	private Integer id;
	
	@Column(name="title")
	// 本のタイトルを保持するフィールド
	private String title;
	
	
	@Column(name="price")
	// 本の値段を保持するフィールド
	private Integer price;
}

BookForm.java

画面からの入力値を保持するためのクラスです。

画面では本のタイトルと値段の入力を受け付けます。
このFormクラスでその値を管理します。

package com.uhablog.form;

import lombok.Data;

@Data
public class BookForm {

	/**
	 * 本のタイトルを保持する
	 */
	private String title;
	
	/**
	 * 本の値段を保持する
	 */
	private Integer price;
}

BookRepository.java

データベースに登録するためのインターフェースです。

JpaRepositoryを継承したインターフェースにします。
継承することで、データベースにアクセスする簡単なメソッドをいくつか実行できるようになります。

package com.uhablog.repository;

import org.springframework.data.jpa.repository.JpaRepository;

import com.uhablog.model.Book;

public interface BookRepository extends JpaRepository<Book, Integer> {

}

BookService.java

画面からの入力値をデータベース登録用のクラスに変換して、データベースへ登録するメソッドを呼び出します。

insertメソッドでデータベースに値を登録しています。

引数として受け取っているBookFormは画面から入力された値を保持しています。
このBookFormをBookに変換する作業を行い、BookをBookRepositoryのsaveメソッドに渡すことでデータベースに登録することができます。

package com.uhablog.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import com.uhablog.form.BookForm;
import com.uhablog.model.Book;
import com.uhablog.repository.BookRepository;

@Service
@Transactional
public class BookService {
	
	@Autowired
	BookRepository repository;
	
	/**
	 * データベースから本の一覧を取得する
	 * @return
	 */
	public List<Book> findAll() {
		return repository.findAll();
	}
	
	public void insert(BookForm bookForm) {
		// データベースに登録する値を保持するインスタンス
		Book book = new Book();
		
		// 画面から受け取った値をデータベースに保存するインスタンスに渡す
		book.setTitle(bookForm.getTitle());
		book.setPrice(bookForm.getPrice());
		
		// データベースに登録する
		repository.save(book);
	}
}

BookController.java

リクエストに対する処理を制御するためのクラスです。

「/book-create」にGetリクエストが来たときには新規登録するためのフォーム（add.html）を画面に表示します。

「/boo-create」にPostでリクエストが来たときにはデータベースに登録する処理を行います。
登録完了した後は一覧画面にリダイレクトしています。

package com.uhablog.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;

import com.uhablog.form.BookForm;
import com.uhablog.model.Book;
import com.uhablog.service.BookService;

@Controller
public class BookController {
	
	@Autowired
	BookService service;
	
	@GetMapping("/book-list")
	public String bookList(Model model) {
		
		// serviceを使って、本の一覧をDBから取得する
		List<Book> bookList = service.findAll();
		// modelに本の一覧を設定して、画面に渡す
		model.addAttribute("bookList", bookList);
		// bookList.htmlの表示
		return "bookList";
	}
	
	/**
	 * 新規登録画面を表示
	 * @param model
	 * @return 新規登録画面
	 */
	@GetMapping("/book-create")
	public String createBook(Model model) {

		model.addAttribute("bookForm", new BookForm());
		
		return "add";
	}
	
	/**
	 * データベースに本を登録する
	 * @param bookForm
	 * @param model
	 * @return
	 */
	@PostMapping("/book-create")
	public String saveBook(@ModelAttribute BookForm bookForm, Model model) {

		// 本を登録する
		service.insert(bookForm);
		
		// 本の一覧表示画面にリダイレクト
		return "redirect:/book-list";
	}

}

フロントエンド（画面側）のソースコード

book-list.html

現在データベースに登録されているデータを一覧で表示する画面のhtmlです。

新規登録画面を表示するためのリンクをaタグを使って設置しています。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>本の一覧表示</title>
</head>
<body>
	<table>
		<tr th:each="book : ${bookList}" th:object="${book}">
			<td th:text="*{id}"></td>
			<td th:text="*{title}"></td>
			<td th:text="*{price}"></td>
		</tr>
	</table>
	<a th:href="@{/book-create}">新規登録</a>
</body>
</html>

add.html

本を新規で登録するための画面です。

th:objectにbookFormを設定します。これを設定することで、サーバー側にbookFormとして値を渡すことが可能です。

th:fieldに入力された値がBookFormのどの項目に対するのか、設定しています。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>本を新規登録する</title>
</head>
<body>
	<h1>本を新規で登録する</h1>
	<form th:action="@{/book-create}" th:object="${bookForm}" method="POST">
		タイトル：<input type="text" th:field="*{title}"><br>
		値段　　：<input type="number" th:field="*{price}"><br>
		<input type="submit" value="新規登録">
	</form>
</body>
</html>