Spring Bootを使ってWebアプリを作成するその3

Webアプリケーションを起動するたびにデータベースが初期化されてしまう設定になっていたので、それを修正する。

application.properties

spring.datasource.url=jdbc:hsqldb:hsql://localhost/shindan
spring.datasource.username=SA
spring.datasource.password=
spring.datasource.driver-class-name=org.hsqldb.jdbc.JDBCDriver
spring.jpa.hibernate.ddl-auto=update

IndexController.java

package jp.kpc;

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.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class IndexController {
	@Autowired
	private ShindanRepository repository;

	@RequestMapping("/")
	public String index() {
		return "index";
	}

	@RequestMapping(value="/form", method=RequestMethod.GET)
	public ModelAndView form(ModelAndView mav) {
		mav.setViewName("form");
		List<Shindan> list = repository.findAll();
		mav.addObject("list", list);
		return mav;
	}

	@RequestMapping(value="/form", method=RequestMethod.POST)
	public ModelAndView formPost(ModelAndView mav,
			@RequestParam("name") String name,
			@RequestParam("eval") String eval) {
		int percent = (name + eval).hashCode() % 101;
		percent = Math.abs(percent);

		Shindan shindan = new Shindan();
		shindan.setName(name);
		shindan.setEval(eval);
		shindan.setPercent(percent);
		repository.saveAndFlush(shindan);
		String result = name + " さんの" + eval + "度は" + percent + "%です！！！";
		mav.addObject("result", result);

		List<Shindan> list = repository.findAll();
		mav.addObject("list", list);
		mav.setViewName("form");
		return mav;
	}

}

form.html

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

<h1>診断ページ</h1>

<p th:text="${result}"></p>

<form action="/form" method="post">
	おなまえ: <input type="text" name="name" />
	<br />
	診断: <input type="text" name="eval" />
	<input type="submit" value="診断" />
</form>

<hr />

<h3>これまでの診断結果</h3>
<table>
	<tr th:each="s : ${list}">
		<td th:text="${s.name} + ' さんの ' + ${s.eval} + '度は ' + ${s.percent} + '%です！！！'"></td>
	</tr>
</table>

</body>
</html>

CSSを使ってみる。

SpringBootの場合は、CSSファイルをsrc/main/resources の下の static 内に置く。

styles.css

@charset "UTF-8";

header {
	text-align: center;
	background: lightblue;
}

footer {
	text-align: center;
	background: lightblue;
}

form.html にヘッダーとフッターを追加する。
head要素内でCSSファイルを読み込む。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>診断ページ</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>

<header>
この部分はヘッダーですよ
</header>

<h1>診断ページ</h1>

<p th:text="${result}"></p>

<form action="/form" method="post">
	おなまえ: <input type="text" name="name" />
	<br />
	診断: <input type="text" name="eval" />
	<input type="submit" value="診断" />
</form>

<hr />

<h3>これまでの診断結果</h3>
<table>
	<tr th:each="s : ${list}">
		<td th:text="${s.name} + ' さんの ' + ${s.eval} + '度は ' + ${s.percent} + '%です！！！'"></td>
	</tr>
</table>


<footer>
この部分はフッターですよ
</footer>

</body>
</html>

入力フォーム部分などを中央寄せにする。

form.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>診断ページ</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>

<header>
この部分はヘッダーですよ
</header>

<h1>診断ページ</h1>

<p th:text="${result}"></p>

<form action="/form" method="post">
	<div>おなまえ</div>
	<div><input type="text" name="name" /></div>
	<div>なに度を診断しますか？</div>
	<div><input type="text" name="eval" /></div>
	<div><input id="submit" type="submit" value="診断" /></div>
</form>

<hr />

<h3>これまでの診断結果</h3>
<table>
	<tr th:each="s : ${list}">
		<td th:text="${s.name} + ' さんの ' + ${s.eval} + '度は ' + ${s.percent} + '%です！！！'"></td>
	</tr>
</table>


<footer>
この部分はフッターですよ
</footer>

</body>
</html>

styles.css

@charset "UTF-8";

header {
	text-align: center;
	background: #ffc107;
	color: white;
}

h1 {
	text-align: center;
	color: darkblue;
}

form {
	text-align: center;
}

footer {
	text-align: center;
	background: #ffc107;
	color: white;
}

#submit {
	background: lightgray;
	border: outset;
}