SpringでWeb+DB

# 本記事について

* Spring bootを使ってDB接続Webアプリを開発する
* **参考資料**: 参考にしたのは以下のサイト
  * https://www.shookuro.com/entry/2017/11/23/121436
* source: https://github.com/koh1/springwebdbsample.git


# Spring projectの作成

## 環境

* eclipse Photon Release (4.8)
* STS 3.9.7.RELEASE
* MySQL

## Project
Eclipseにて、New -> Spring Starter Projectから以下の条件で作成する

* Spring Boot 2.1.1
* Java 8
* Dependencies
    * JDBC, MySQL, Thymleaf, Web


# DB準備

* Docker使ってMySQLを起動
* database作成

```shell:DB準備
$ docker run --name mysql -e MYSQL_ROOT_PASSWORD=mysql -d -p 3306:3306 mysql
$ mysql -u root -p
Enter password:
...
mysql> create database springwebdbsample default character set utf8;
Query OK, 1 row affected, 1 warning (0.05 sec)

mysql> create table springwebdbsample.footballers (id int auto_increment, name varchar(256), nationality varchar(128), index(id));
Query OK, 0 rows affected (0.17 sec)

mysql> show columns from footballers;
+-------------+--------------+------+-----+---------+----------------+
| Field       | Type         | Null | Key | Default | Extra          |
+-------------+--------------+------+-----+---------+----------------+
| id          | int(11)      | NO   | MUL | NULL    | auto_increment |
| name        | varchar(256) | YES  |     | NULL    |                |
| nationality | varchar(128) | YES  |     | NULL    |                |
+-------------+--------------+------+-----+---------+----------------+
3 rows in set (0.01 sec)

mysql> insert into footballers(name, nationality) values('andres iniesta', 'spain');
Query OK, 1 row affected (0.05 sec)

```

# DB接続情報設定
`resources`配下の`application.properties`に以下の設定を施す。

```properties:application.properties
spring.jpa.hibernate.ddl-auto=create
spring.datasource.url=jdbc:mysql://localhost:3306/springwebdbsample
spring.datasource.username=root
spring.datasource.password=mysql
```

# Thymleaf Template作成

DB selectの結果をTableに表示するためのTemplate `index.html`を `resources/templates`配下に作成する。

```html:index.html
<html>
<head>
  <meta charset="utf-8" />
  <title>spring web+db sample</title>
</head>

<body>
<table>
<thead><th>#</th><th>name</th><th>nationality</th></thead>
<tbody th:each="footballer : ${footballers}">
  <tr>
    <td th:text="${footballer.get('id')}" />
    <td th:text="${footballer.get('name')}" />
    <td th:text="${footballer.get('nationality')}" />
  </tr>
</tbody>
</table>
</body>
</html>
```

# Controller作成

Requestを処理するためのController `IndexController.java`を作成する。

* `@Controller` annotationを付与したClassを作成
* APIたるMethodには `@RequestMapping` annotationを付与
* DBアクセスにはJdbcTemplateを用い、JdbcTemplateは`@Autowired`により、Injectする
* `JdbcTemplate.queryForList(query)`を用いてDB Queryを発行
* `Model model`にQuery結果をセット
* template名 `"index"` を返す

```java:IndexController.java
@Controller
public class IndexController {
	
  @Autowired
  JdbcTemplate jdbcTemplate;
	
  @RequestMapping("/")
  public String index(Model model) {
    List<Map<String, Object>> list;
    list = jdbcTemplate.queryForList("select * from footballers");
    model.addAttribute("footballers", list);

    return "index";
  }
}
```

# 実行

* Webアプリにアクセスし、DBから取得した結果を得る

![Screenshot from 2019-01-06 16-14-32.png](https://qiita-image-store.s3.amazonaws.com/0/152593/d70545a2-92ee-694b-83d2-0749edcc121c.png)