Spring Bootで簡単なWebアプリケーションを構築_2

こちらで示したWebアプリケーションをSpring Bootで作ってみましょう。

ではまず、STS (Spring Tool Suite)で新規プロジェクトを作成します。

メニューバーの「File」をクリックし、「New」→「Spring Starter Project」と進みます。

「Name」欄を Sample Entry とし、後はデフォルトのまま「Next」。

Dependencies では「Web」のみ選択し「Finish」をクリックします。

pom.xmlを編集します。

画面のテンプレートとしてはThymeleaf、データベースとしてはHSQLDBを使用しているので、各々 <dependencies>タグ下に次のdependencyを追記します。

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>		
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>
		<dependency>
			<groupId>org.hsqldb</groupId>
			<artifactId>hsqldb</artifactId>
		</dependency>

View部分の画面を作成します。src/main/resourcesフォルダにあるtemplatesフォルダを右クリックし、「New」→「File」へ進みます。

「File name」は index.html として「Finish」。

index.htmlは以下です。

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<title>top page</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<style>
		table { border-collapse: collapse; }
		table th { padding: 10px; border: solid 1px black; }
		table td { padding: 3px 10px; border: solid 1px black; }
		</style>
	</head>
	<body>
		<h1>sample entry page</h1>
		<table>
			<form method="post" action="/" th:object="${formModel}">
				<tr>
					<td><label for="name">名前</label></td>
					<td><input type="text" name="name" th:value="*{name}" /></td>
				</tr>
				<tr>
					<td><label for="post">投稿内容</label></td>
					<td><input type="text" name="post" th:value="*{post}" /></td>
				</tr>
				<tr>
					<td><input type="submit" /></td>
				</tr>
			</form>
		</table>
		<br />
		<table>
			<tr><th>名前</th><th>投稿内容</th></tr>
			<tr th:each="obj : ${postlist}">
				<td th:text="${obj.name}"></td>
				<td th:text="${obj.post}"></td>
		</table>
	</body>
</html>

次にEntityクラスを作成します。プロジェクトの src/main/java フォルダを右クリックし、「New」→「Class」。

「Name」は SampleEntryData とします。その他の部分はデフォルト。

SampleEntryData.java は以下。ID、名前、投稿内容のみのシンプルな構造です。

IDはauto_incrementにしたいので、アノテーションにIDENTITYをセットしています。

package com.example.demo;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table
public class SampleEntryData {

	@Id
	@GeneratedValue(strategy=GenerationType.IDENTITY)
	@Column
	private long id;
	
	@Column(length=50, nullable = false)
	private String name;
	
	@Column(length=2000, nullable = false)
	private String post;
	
	public long getId() {
		return id;
		
	}
	
	public void setId(long id) {
		this.id = id;
		
	}
	
	public String getName() {
		return name;
		
	}
	
	public void setName(String name) {
		this.name = name;
		
	}
		
	public String getPost() {
		return post;
		
	}
	
	public void setPost(String post) {
		this.post = post;
		
	}
	
}

データアクセスを行うためのRepositoryインタフェース作成に移ります。com.example.demo パッケージを右クリックし、「New」→「Package」へと進みます。

「Name」欄に com.example.demo.repositories を入れて「Finish」。

今度は先ほど作成した com.example.demo.repositories を右クリックして、interface作成画面を表示させます。

「Name」に SampleDataRepository を入力して「Finish」。

SampleDataRepositoryはこちら。先ほど作成したSampleEntryDataクラスと紐付けられています。

package com.example.demo.repositories;

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

import com.example.demo.SampleEntryData;

@Repository
public interface SampleDataRepository extends JpaRepository<SampleEntryData, Long>{

}

最後のJavaクラスであるコントローラーを作成します。src/main/java フォルダを右クリックしてClass作成画面へ進み、SampleEntryController クラスを作成します。

SampleEntryControllerクラス。画面を表示した際に。データベースに登録されたデータを全て取得します。

これがデータアクセスの役割を担う SampleDataRepository の findAll メソッド一つで実現できてしまいます。

また、送信ボタンを押すと入力した内容をデータベースに書き込み、redirect で同じページを表示します。

データベースへの書き込みは、同じくSampleDataRepository の saveAndFlush メソッドのみです。

package com.example.demo;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;

import com.example.demo.repositories.SampleDataRepository;

@Controller
public class SampleEntryController {

	@Autowired
	SampleDataRepository repository;
	
	@RequestMapping(value="/", method=RequestMethod.GET)
	public ModelAndView index(@ModelAttribute("formModel") SampleEntryData sedata, ModelAndView mav) {
		mav.setViewName("index");
		Iterable<SampleEntryData> list = repository.findAll();
		mav.addObject("postlist", list);
		return mav;
		
	}
	
	@RequestMapping(value="/", method=RequestMethod.POST)
	@Transactional(readOnly=false)
	public ModelAndView form(@ModelAttribute("formModel") SampleEntryData sedata, ModelAndView mav) {
		repository.saveAndFlush(sedata);
		return new ModelAndView("redirect:/");
		
	}
	
}

最後に、src/main/resources 以下の application.properties を開き、次の内容を記述します。

特に最終行の設定は、データを永続化させるのに必要です。これがないと、アプリケーションが終了するたびにテーブルがドロップされてしまう様です。

spring.datasource.url=jdbc:hsqldb:hsql://localhost/
spring.datasource.username=sa
spring.jpa.hibernate.ddl-auto=update

アプリケーションを実行してみましょう。データベースを起動したあと、プロジェクトを右クリックして、「Run As」から「Spring Boot App」を実行。

無事起動したら、ブラウザで http://localhost:8080 へアクセスしてみましょう。こちらのページで示した画面が表示されるはずです。

またデータベースを確認すると、特にテーブルをCREATEしたわけでもないのに、必要なテーブルが自動で作成されていることがわかります。

関連記事: