7月6日 – 2020年度Webアプリ

いまの設定だと、Spring Bootアプリケーションを起動するたびにデータベースのテーブルが初期化されてしまうので、データを維持するために、以下の設定を追加する。

application.properties に1行を追加。

spring.datasource.url=jdbc:hsqldb:hsql://localhost/mydata
spring.datasource.username=sa
spring.datasource.password=
spring.datasource.driver-class-name=org.hsqldb.jdbc.JDBCDriver
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.HSQLDialect
spring.jpa.hibernate.ddl-auto=update

コントローラで、MyDataのテーブルのデータをすべて取得してModelAndViewに渡す。

package jp.abc;

import java.util.List;

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;

@Controller
public class IndexController {
	@Autowired
	MyDataRepository myDataRepository;

	@RequestMapping("/")
	public ModelAndView index(ModelAndView mav) {
		List<MyData> list = myDataRepository.findAll();
		mav.addObject("list", list);
		mav.addObject("template", "mydata");
		mav.addObject("fragment", "mydata");
		mav.setViewName("layout");
		return mav;
	}
}

テンプレートで、Listで受け取ったデータをループで表示する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>linux.html</title>
</head>
<body>

<div th:fragment="mydata">
<h1>MyData</h1>
<p>MyDataフラグメント</p>
<table>
  <tr>
    <th>ID</th>
    <th>名前</th>
    <th>メール</th>
    <th>年齢</th>
  </tr>
  <tr th:each="mydata : ${list}">
    <td th:text="${mydata.id}"></td>
    <td th:text="${mydata.name}"></td>
    <td th:text="${mydata.mail}"></td>
    <td th:text="${mydata.age}"></td>
  </tr>
</table>

</div>

</body>
</html>

mydataテンプレートに入力フォームを追加する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>linux.html</title>
</head>
<body>

<div th:fragment="mydata">
<h1>MyData</h1>
<p>MyDataフラグメント</p>

<form action="/" method="post">

<table>
  <tr>
    <th>名前</th>
    <td><input type="text" name="name" th:value="*{name}" /></td>
  </tr>
  <tr>
    <th>メール</th>
    <td><input type="text" name="mail" th:value="*{mail}" /></td>
  </tr>
  <tr>
    <th>年齢</th>
    <td><input type="text" name="age" th:value="*{age}" /></td>
  </tr>
  <tr>
    <th>メモ</th>
    <td><textarea rows="5" cols="20" name="memo" th:text="*{memo}"></textarea></td>
  </tr>
  <tr>
    <th></th><td><input type="submit" value="登録" /></td>
  </tr>
</table>

</form>


<table>
  <tr>
    <th>ID</th>
    <th>名前</th>
    <th>メール</th>
    <th>年齢</th>
  </tr>
  <tr th:each="mydata : ${list}">
    <td th:text="${mydata.id}"></td>
    <td th:text="${mydata.name}"></td>
    <td th:text="${mydata.mail}"></td>
    <td th:text="${mydata.age}"></td>
  </tr>
</table>

</div>

</body>
</html>

テンプレートの入力フォームのデータを mydata オブジェクトに格納するタグを追加。

<form action="/" method="post" th:object="${mydata}">

コントローラで、入力フォームの内容を受け取るために、postメソッドを受け付けるメソッドを追加する。
前に作った index() メソッドは、getメソッドだけを受け付けるように、アノテーションを追加する。

package jp.abc;

import java.util.List;

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;

@Controller
public class IndexController {
	@Autowired
	MyDataRepository myDataRepository;

	@RequestMapping(value = "/", method = RequestMethod.GET)
	public ModelAndView index(
			@ModelAttribute("mydata") MyData mydata,
			ModelAndView mav) {
		List<MyData> list = myDataRepository.findAll();
		mav.addObject("list", list);
		mav.addObject("template", "mydata");
		mav.addObject("fragment", "mydata");
		mav.setViewName("layout");
		return mav;
	}

	@RequestMapping(value = "/", method = RequestMethod.POST)
	public ModelAndView post(
			@ModelAttribute("mydata") MyData mydata,
			ModelAndView mav) {
		myDataRepository.saveAndFlush(mydata);
		return new ModelAndView("redirect:/");
	}
}

CRUD の Update をサポートする。
mydata.html を修正する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>linux.html</title>
</head>
<body>

<div th:fragment="mydata">
<h1>MyData</h1>
<p>MyDataフラグメント</p>

<form action="/" method="post" th:object="${mydata}">

<table>
  <tr>
    <th>名前</th>
    <td><input type="text" name="name" th:value="*{name}" /></td>
  </tr>
  <tr>
    <th>メール</th>
    <td><input type="text" name="mail" th:value="*{mail}" /></td>
  </tr>
  <tr>
    <th>年齢</th>
    <td><input type="text" name="age" th:value="*{age}" /></td>
  </tr>
  <tr>
    <th>メモ</th>
    <td><textarea rows="5" cols="20" name="memo" th:text="*{memo}"></textarea></td>
  </tr>
  <tr>
    <th></th><td><input type="submit" value="登録" /></td>
  </tr>
</table>

</form>


<table>
  <tr>
    <th>ID</th>
    <th>名前</th>
    <th>メール</th>
    <th>年齢</th>
    <th>操作</th>
  </tr>
  <tr th:each="mydata : ${list}">
    <td th:text="${mydata.id}"></td>
    <td th:text="${mydata.name}"></td>
    <td th:text="${mydata.mail}"></td>
    <td th:text="${mydata.age}"></td>
    <td><a th:href="@{'/edit/' + ${mydata.id}}">編集</a></td>
  </tr>
</table>

</div>


<div th:fragment="edit">
</div>

</body>
</html>