Spring boot Thymeleafを使ったアレコレ。

## Thymeleaf

ここでは、事前に用意したデータを取得し、画面に表示する部分まで進めていきます。
構成は、以下の通りとします。
![snap3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1383112/b6706aea-4982-302a-2b89-980766320adc.jpeg)


- controller から Service へロジックの導入。
- Service から Dao を経由して H2 Database からデータを取得します。
- 取得したデータは、オブジェクト型となるため、テーブル定義に合致するように Entity を作成し、変換した上で返却していきます。
- Contoroller では、受け取ったデータを Thymeleaf を利用して HTML を出力するという形です。

必要なもの Contorller からざっと作っていきます。

```java
// src/demo/app/view
// ViewContoroller.java
package com.example.demo.app.view;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import com.example.demo.app.entity.view.View;
import com.example.demo.app.service.view.ViewService;

@Controller
@RequestMapping("/view")
public class ViewController {
	private ViewService viewService;

    // Serviceをインスタンス化（DI)
	@Autowired
	public ViewController(ViewService viewService) {
		this.viewService = viewService;
	}


	@GetMapping
    // GetMappingにパスを指定しないことで、RequestMappingで指定したviewにアクセスすると呼び出される
    // Serviceを経由して取得した、一覧データをHTMLにviewListという名前で受け渡し。→HTMLがレンダリングされる
	public String init(Model model) {
		List<View> view = viewService.getAll();
		model.addAttribute("title", "View title");
		model.addAttribute("viewList", view);
		return "view/index";
	}
}
```

```java
// src/demo/app/service/view
// ViewServiceImpl.java

/**
Interfaceのコードはこれだけ
package com.example.demo.app.service.view;

import java.util.List;

import com.example.demo.app.entity.view.View;

public interface ViewService {
	List<View> getAll();
}
**/

package com.example.demo.app.service.view;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.example.demo.app.entity.view.View;
import com.example.demo.app.repository.view.ViewDao;

@Service
public class ViewServiceImpl implements ViewService {

	private ViewDao viewDao;

    // Daoをインスタンス化（DI）
	@Autowired
	public ViewServiceImpl(ViewDao viewDao) {
		this.viewDao = viewDao;
	}

    // Daoを経由して、取得したデータをControllerに返却するのみ
	@Override
	public List<View> getAll() {
		return viewDao.getAll();
	}

}
```

```java
// Interfaceは、Serviceと同じ感じで記載してください

// src/demo/app/repository/view
// ViewDaoImpl.java
package com.example.demo.app.repository.view;

import java.sql.Timestamp;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Repository;

import com.example.demo.app.entity.view.View;

@Repository
public class ViewDaoImpl implements ViewDao {

	private JdbcTemplate jdbcTemplate;

    // H2よりデータを取得するために、JdbcTemplateを使用しています。
	@Autowired
	public ViewDaoImpl(JdbcTemplate jdbcTemplate) {
		this.jdbcTemplate = jdbcTemplate;
	}

	@Override
	public List<View> getAll() {
        // 作成したSQLを利用してqueryForListでデータObjectを取得します。
		String sql = "select * from band;";
		List<Map<String , Object>> map = jdbcTemplate.queryForList(sql);
		List<View> list = new ArrayList<>();
        // Object型だと、とにかく使いづらいので、データベース定義に該当するEntityに移管する。
		map.stream().forEach(
				target-> {
					View instance = new View();
					instance.setId((int)target.get("id"));
					instance.setBandName((String)target.get("bandName"));
					instance.setBestSong((String)target.get("bestSong"));
					instance.setCreated(((Timestamp)target.get("created")).toLocalDateTime());
					list.add(instance);
					});
		return list;
	}

	@Override
	public void insert(View view) {
		// TODO Auto-generated method stub

	}

	@Override
	public int update(View view) {
		// TODO Auto-generated method stub
		return 0;
	}

}

```

```html
<!-- 
    src/main/resource/template
    index.html
    Contollerから"title","viewList"という形でパラメータを受け取る
-->
<!DOCTYPE html>
<!--  
    ここのオマジナイが無いとThymeleafは使用できないので、注意
-->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <title>View</title>
  </head>
  <body>
    <h1 th:text="${title}">View</h1>
    <table>
      <tr>
        <th>id</th>
        <th>Bandname</th>
        <th>BestSong</th>
        <th>datetime</th>
      </tr>
      <tr th:each="view : ${viewList}">
        <td th:text="${view.id}"></td>
        <td th:text="${view.bandName}"></td>
        <td th:text="${view.bestSong}"></td>
        <td th:text="${view.created}"></td>
      </tr>
    </table>
  </body>
</html>
```

ここまでで、**localhost:8080/view**にアクセスすると DB へ登録した値が一覧表示されてると思います。