コントローラー＆ビュー

コントローラー
ビュー

コントローラー

コントローラーのListControllerを作成していきます。

package com.example.demo;

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

@Controller
public class ListController {

	private ListService listservice;

	public ListController() {
	}

	@Autowired
	public ListController(ListService listservice) {
		this.listservice = listservice;
	}

	@GetMapping("/")
	public String form(Model model) {
		listservice.all();
		model.addAttribute("service", listservice);
		return "index";
	}

}

package com.example.demo;

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

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.GetMapping;

@Controller

public class ListController {

private ListService listservice;

public ListController() {

}

@Autowired

public ListController(ListService listservice) {

this.listservice = listservice;

}

@GetMapping("/")

public String form(Model model) {

listservice.all();

model.addAttribute("service", listservice);

return "index";

}

8行目の「@Controller」がこのクラスがコントローラーであることを宣言しています。

@Controller

8	@Controller

21行目「@GetMapping(“/”)」でURLがルート、Get要求があった際に実行するメソッドを宣言しています。実行されるメソッドは次の行の「form」になります。

	@GetMapping("/")

21	@GetMapping("/")

例：http://localhost:8080/

1	例：http://localhost:8080/

ユーザ要求に応じてメソッドformが実行されます。その23行目でサービスを呼び出し一覧を取得しています。

		listservice.all();

23	listservice.all();

24行目でビューに一覧情報を引き渡すため設定を行っています。ビュー側ではオブジェクト「service」として扱うことができます。

		model.addAttribute("service", listservice);

24	model.addAttribute("service", listservice);

最後の25行目でビューindex.htmlを呼び出しています。

		return "index";

25	return "index";

ビュー

ビューindex.htmlを作成します。

<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">

  <head>
    <meta charset="utf-8">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <title>商品一覧</title>
  </head>
  <body>
    <div class="container">
   		 <p class="h3">商品一覧</p>
   		 <HR>
	    <table   class="table table-striped table-sm">
	      <tr><th>ID</th><th>商品名</th><th>種類</th><th >価格</th></tr>
		  	<tr th:each="pro : ${service.item}">
		  		<td th:text="${pro.item.id}"></td>
			    <td th:text="${pro.item.name}"></td>
			    <td th:text="${pro.kindName}"></td>
			    <td align="right" th:text="${pro.priceEdit}"></td>
			</tr>
	    </table>
  </div>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<HR>

</tr>

</table>

</div>

</body>

</html>

25行目の「th:each=”pro : ${service.item}”>」で件数分繰り返しを行っています。「${service.item}」がクラスListServiceで定義されたクラスItemDaoの配列になります。この配列の値が変数proに1件ずつ格納されてループします。

		  	<tr th:each="pro : ${service.item}">

25	<tr th:each="pro : ${service.item}">

変数proはクラスItemDaoになりますので、ItemDaoの変数、item.name、kindName、priceEditを16行目~19行目で設定しています。

		  		<td th:text="${pro.item.id}"></td>
			    <td th:text="${pro.item.name}"></td>
			    <td th:text="${pro.kindName}"></td>
			    <td align="right" th:text="${pro.priceEdit}"></td>