モデルとデータベース
データベースのテーブルに対応するPOJOクラスとしてMyDataを定義する。
MyDataクラスには、エンティティであることを示すために @Entity アノテーションをつける。
package jp.abc;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
@Entity
public class MyData {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
@Column
private long id;
@Column(length = 50, nullable = false)
private String name;
@Column(length = 200, nullable = true)
private String mail;
@Column(nullable = true)
private Integer age;
@Column(nullable = true)
private String memo;
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 getMail() {
return mail;
}
public void setMail(String mail) {
this.mail = mail;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public String getMemo() {
return memo;
}
public void setMemo(String memo) {
this.memo = memo;
}
}
MyData エンティティをデータベースに格納するためのインタフェースを定義する。
JpaRepositoryを継承して定義する。
テキストでは新たに repositories パッケージを作ってその中に作っているので、それにならう。
package jp.abc.repositories;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import jp.abc.MyData;
@Repository
public interface MyDataRepository extends JpaRepository<MyData, Long> {
}
MyDataを扱うために、コントローラを新しく用意する。
MyDataController
package jp.abc;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import jp.abc.repositories.MyDataRepository;
@Controller
public class MyDataController {
@Autowired
private MyDataRepository repository;
@RequestMapping("/mydata")
public ModelAndView index(ModelAndView mav) {
mav.setViewName("mydata");
mav.addObject("msg", "this is sample content.");
Iterable<MyData> list = repository.findAll();
mav.addObject("data", list);
return mav;
}
}
新たに mydata.html を作成する。
mydata.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>top page</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
h1 {
font-size: 18pt;
font-weight: bold;
color: gray;
}
body {
font-size: 13pt;
color: gray;
margin: 5px 25px;
}
pre {
border: solid 3px #ddd;
padding: 10px;
}
</style>
</head>
<body>
<h1>MyData page</h1>
<pre th:text="${data}"></pre>
</body>
</html>
エンティティのCRUD
フォームでデータを保存するために、HTMLに入力フォームを追加する。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>top page</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
h1 {
font-size: 18pt;
font-weight: bold;
color: gray;
}
body {
font-size: 13pt;
color: gray;
margin: 5px 25px;
}
pre {
border: solid 3px #ddd;
padding: 10px;
}
tr {
margin: 5px;
}
th {
padding: 5px;
color: white;
background: darkgray;
}
td {
padding: 5px;
color: black;
background: #f0f0f0;
}
</style>
</head>
<body>
<h1>MyData page</h1>
<form method="post" action="/mydata" th:object="${formModel}">
<table>
<tr>
<td><label for="name">名前</label></td>
<td><input type="text" name="name" th:value="*{name}" /></td>
</tr>
<tr>
<td><label for="age">年齢</label></td>
<td><input type="text" name="age" th:value="*{age}" /></td>
</tr>
<tr>
<td><label for="mail">メール</label></td>
<td><input type="text" name="mail" th:value="*{mail}" /></td>
</tr>
<tr>
<td><label for="memo">メモ</label></td>
<td><textarea name="memo" th:value="*{memo}" rows="5" cols="20"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" /></td>
</tr>
</table>
</form>
<hr />
<table>
<tr>
<th>ID</th><th>名前</th>
</tr>
<tr th:each="obj : ${datalist}">
<td th:text="${obj.id}"></td>
<td th:text="${obj.name}"></td>
</tr>
</table>
<pre th:text="${data}"></pre>
</body>
</html>
コントローラを変更する。
GETメソッドとPOSTメソッドで別の処理をやりたいので、（Javaクラスの）メソッドを分ける。
そのために、@RequestMapping アノテーションの引数で RequestMethodを指定する。
HTMLテンプレートのフォームから渡されるデータは、@ModelAttribute アノテーションでオブジェクト名を指定する。
package jp.abc;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
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 jp.abc.repositories.MyDataRepository;
@Controller
public class MyDataController {
@Autowired
private MyDataRepository repository;
@RequestMapping(value = "/mydata", method = RequestMethod.GET)
public ModelAndView index(
@ModelAttribute("formModel") MyData mydata,
ModelAndView mav) {
mav.setViewName("mydata");
mav.addObject("msg", "this is sample content.");
Iterable<MyData> list = repository.findAll();
mav.addObject("datalist", list);
mav.addObject("data", list);
return mav;
}
@RequestMapping(value = "/mydata", method = RequestMethod.POST)
public ModelAndView form(
@ModelAttribute("formModel") MyData mydata,
ModelAndView mav) {
repository.saveAndFlush(mydata);
return new ModelAndView("redirect:/mydata");
}
}
MyDataを編集するためのHTMLテンプレート edit.html を作成する。
mydata.html とほぼ同じなので、mydata.html をコピーしてファイル名を edit.html にして保存する。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>top page</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
h1 {
font-size: 18pt;
font-weight: bold;
color: gray;
}
body {
font-size: 13pt;
color: gray;
margin: 5px 25px;
}
pre {
border: solid 3px #ddd;
padding: 10px;
}
tr {
margin: 5px;
}
th {
padding: 5px;
color: white;
background: darkgray;
}
td {
padding: 5px;
color: black;
background: #f0f0f0;
}
</style>
</head>
<body>
<h1>MyData edit page</h1>
<form method="post" action="/edit" th:object="${formModel}">
<input type="hidden" name="id" th:value="*{id}" />
<table>
<tr>
<td><label for="name">名前</label></td>
<td><input type="text" name="name" th:value="*{name}" /></td>
</tr>
<tr>
<td><label for="age">年齢</label></td>
<td><input type="text" name="age" th:value="*{age}" /></td>
</tr>
<tr>
<td><label for="mail">メール</label></td>
<td><input type="text" name="mail" th:value="*{mail}" /></td>
</tr>
<tr>
<td><label for="memo">メモ</label></td>
<td><textarea name="memo" th:value="*{memo}" rows="5" cols="20"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" /></td>
</tr>
</table>
</form>
</body>
</html>
コントローラに初期データを登録するメソッドを追加する。
@PostConstruct アノテーションを指定すると、コンストラクタが呼ばれた直後に、このメソッドが呼び出される。
@PostConstruct
public void init() {
MyData d1 = new MyData();
d1.setName("tuyano");
d1.setAge(123);
d1.setMail("syoda@tuyano.com");
d1.setMemo("this is data!");
repository.saveAndFlush(d1);
MyData d2 = new MyData();
d2.setName("hanako");
d2.setAge(15);
d2.setMail("hanako@flower.com");
d2.setMemo("this is data!");
repository.saveAndFlush(d2);
MyData d3 = new MyData();
d3.setName("sachiko");
d3.setAge(37);
d3.setMail("sachiko@happy");
d3.setMemo("this is data!");
repository.saveAndFlush(d3);
}
