Spring Bootでページ分けした内容が表示されない

Question

実現したいこと

掌田津耶乃「Spring Bootプログラミング入門」の本に沿ってSpring Bootを勉強中です。
ページ分けの機能を実装したところ、エラーで内容が表示されません。

前章のコードに追記していく形式の本のため、不要なコードが大量にあるかと思います。

発生している問題・エラーメッセージ

http://localhost:8080/page/1にアクセスすると、ページ分けした1ページ目（3人分のデータ）が表示されるはずが、以下の404エラーが発生します。

Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.

Thu Oct 21 14:36:08 JST 2021
There was an unexpected error (type=Not Found, status=404).

該当のソースコード

MyDataService.java

package com.tuyano.springboot;

import java.util.List;
import javax.persistence.EntityManager;
import javax.persistence.PersistenceContext;
import javax.persistence.criteria.CriteriaBuilder;
import javax.persistence.criteria.CriteriaQuery;
import javax.persistence.criteria.Root;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.stereotype.Service;
import com.tuyano.springboot.repositories.MyDataRepository;

@Service
public class MyDataService {
	@PersistenceContext
	private EntityManager entityManager;
	public List<MyData> getAll() {
		return (List<MyData>) entityManager.createQuery("from MyData")
				.getResultList();
	}
	public MyData get(int num) {
		return (MyData) entityManager.createQuery("from MyData where id=" + num)
				.getSingleResult();
	}
	public List<MyData> find(String fstr) {
		CriteriaBuilder builder = entityManager.getCriteriaBuilder();
		CriteriaQuery<MyData> query = builder.createQuery(MyData.class);
		Root<MyData> root = query.from(MyData.class);
		query.select(root)
				.where(builder.like(root.get("name"), "%" + fstr + "%"));
		List<MyData> list = null;
		list = (List<MyData>) entityManager.createQuery(query).getResultList();
		return list;
	}
	// P345リスト7-14
	private MyDataRepository repository; // 書いていないけど多分いる。

	public MyDataService(MyDataRepository repository) {
		this.repository = repository;
	} // 必要かも
	private static final int PAGE_SIZE = 3; // 1ページの表示件数
	public Page<MyData> getMyDataInPage(Integer pageNumber) {
		PageRequest pageRequest = PageRequest.of(pageNumber - 1, PAGE_SIZE);
		return repository.findAll(pageRequest);
	}
}

MyDataRepository.java

package com.tuyano.springboot.repositories;
import java.util.List;
import java.util.Optional;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;
import org.springframework.stereotype.Repository;
import com.tuyano.springboot.MyData;

@Repository
public interface MyDataRepository extends JpaRepository<MyData, Long> {
	public Optional<MyData> findById(Long name);
	@Query("SELECT d FROM MyData d ORDER BY d.name")
	List<MyData> findAllOrderByName();
	public List<MyData> findByNameLike(String name);
	public List<MyData> findByIdIsNotNullOrderByIdDesc();
	public List<MyData> findByAgeGreaterThan(Integer age);
	public List<MyData> findByAgeBetween(Integer age1, Integer age2);
}

HeloController.java

package com.tuyano.springboot;

import java.util.List;
import javax.annotation.PostConstruct;
import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.validation.BindingResult;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
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;
import com.tuyano.springboot.repositories.MyDataRepository;

@Controller
public class HeloController {
	@Autowired
	MyDataRepository repository;
	@Autowired
	private MyDataService service;
	// index
	@RequestMapping(value = "/", method = RequestMethod.GET)
	public ModelAndView index(ModelAndView mav) {
		mav.setViewName("index");
		mav.addObject("title", "Find Page");
		mav.addObject("msg", "MyDataのサンプルです。");
		List<MyData> list = service.getAll();
		mav.addObject("datalist", list);
		return mav;
	}
	//
	// index※追記
	//
		@RequestMapping(value = "/page/{num}", method = RequestMethod.GET)
		public ModelAndView page(@PathVariable Integer num,
				ModelAndView mav) {
			Page<MyData> page = service.getMyDataInPage(num);
			mav.setViewName("index"); 
			mav.addObject("title", "Find Page");
			mav.addObject("msg", "MyDataのサンプル。");
			mav.addObject("pagenumber", num);
			mav.addObject("datalist", page);
			return mav;
		}
	
	// find
	@RequestMapping(value = "/find", method = RequestMethod.GET)
	public ModelAndView find(ModelAndView mav) {
		mav.setViewName("find");
		mav.addObject("title", "Find Page");
		mav.addObject("msg", "MyDataのサンプルです");
		mav.addObject("value", "");
		List<MyData> list = service.getAll();
		mav.addObject("datalist", list);
		return mav;
	}
	@RequestMapping(value = "/find", method = RequestMethod.POST)
	public ModelAndView search(HttpServletRequest request, ModelAndView mav) {
		mav.setViewName("find");
		String param = request.getParameter("fstr");
		if (param == "") {
			mav = new ModelAndView("redirect:/find");
		} else {
			mav.addObject("title", "Find result");
			mav.addObject("msg", "ID 「" + param + "」の検索結果");
			mav.addObject("value", param);
			List<MyData> list = service.find(param);
			mav.addObject("datalist", list);
		}
		return mav;
	}
	// P342リスト7-12
	@Autowired
	MyDataBean myDataBean;
	@RequestMapping(value = "/{id}", method = RequestMethod.GET)
	public ModelAndView indexById(@PathVariable long id, ModelAndView mav) {
		mav.setViewName("pickup");
		mav.addObject("title", "Pickup Page");
		String table = "<table>" + myDataBean.getTableTagById(id) + "</table>"; // getTableTagByIdを呼んで結果をdataに設定
		mav.addObject("msg", "pickup data id=" + id);
		mav.addObject("data", table);
		return mav;
	}
	// ダミーデータ
	@PostConstruct
	public void init() {
		// dao = new MyDataDaoImpl(entityManager); // P325リスト7-2では不要
		MyData d1 = new MyData();
		d1.setName("寺本 和香");
		d1.setAge(49);
		d1.setMail("[e-mail]");
		d1.setMemo("090-733-7001");
		repository.saveAndFlush(d1);

		MyData d2 = new MyData();
		d2.setName("矢野 瞬");
		d2.setAge(12);
		d2.setMail("[e-mail]");
		d2.setMemo("080-8954-9502");
		repository.saveAndFlush(d2);

		MyData d3 = new MyData();
		d3.setName("篠崎 有起哉");
		d3.setAge(60);
		d3.setMail("[e-mail]");
		d3.setMemo("090-5822-6387");
		repository.saveAndFlush(d3);

		MyData d4 = new MyData();
		d4.setName("宍戸 美咲");
		d4.setAge(43);
		d4.setMail("[e-mail]");
		d4.setMemo("090-6709-6949");
		repository.saveAndFlush(d4);
	}
	@RequestMapping(value = "/other")
	public String other() {
		return "redirect:/";
	}
	@RequestMapping("/home")
	public String home() {
		return "forward:/";
	}
	class DataObject {
		private int id;
		private String name;
		private String value;
		public DataObject(int id, String name, String value) {
			super();
			this.id = id;
			this.name = name;
			this.value = value;
		}
		public int getId() {
			return id;
		}
		public void setId(int id) {
			this.id = id;
		}
		public String getName() {
			return name;
		}
		public void setName(String name) {
			this.name = name;
		}
		public String getValue() {
			return value;
		}
		public void setVaue(String value) {
			this.value = value;
		}
	}
}

index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Top page</title>
<meta http-equiv="Content-Type" content="text/html;  charset=UTF-8" />
<script src="http://code.jquery.com/jquery.min.js"></script><!-- jQueryを利用 -->
<script th:inline="javascript">
$(document).ready(function(){
	var num=/*[[${param.id[0]}]]*/;
	$.get("/rest/"+num,null,callback); // 	jQuery
});
function callback(result){ 
	$('#obj').append('<li>id: '+result.id+'</li>');
	$('#obj').append('<li>name: '+result.name+'</li>');
	$('#obj').append('<li>mail: '+result.mail+'</li>');
	$('#obj').append('<li>age: '+result.age+'</li>');
	$('#obj').append('<li>memo: '+result.memo+'</li>');
}
</script>
<style>
h1 {
	font-size: 18pt;
	font-weight: bold;
	color: gray;
}
body {
	font-size: 13pt;
	color: gray;
	margin: 5px 25px;
}
tr {
	margin: 5px;
}
th {
	padding: 5px;
	color: white;
	background: darkgray;
}
td {
	padding: 5px;
	color: black;
	background: #e0e0ff;
}
</style>
</head>
<body>
	<h1 th:text="#{content.title}">Hello page</h1>
	<p th:text="${msg}"></p>
	<!-- ここにエラーメッセージ -->
<ul id="obj"></ul>
	<table>		<tr>
			<th>ID</th>
			<th>名前</th>
			<th>年齢</th>
			<th>メールアドレス</th>
			<th>コメント（TEL）</th>
		</tr>
		<tr th:each="obj : ${datalist}">
			<td th:text="${obj.id}"></td>
			<td th:text="${obj.name}"></td>
			<td th:text="${obj.age}"></td>
			<td th:text="${obj.mail}"></td>
			<td th:text="${obj.memo}"></td>
		</tr>
	</table>
</body>
</html>

試したこと

MyDataService.javaで発生していた構文エラーだけは何とか解決しました。

補足情報

Eclipse Version: 2021-06 (4.20.0)

Answer 1

HeloControllerクラスに/page/1のリクエストを受けるメソッドが無いので
当然404 Not Foundになります。

本を見たことがないので、あなたがどこかの作業工程を飛ばしたのか、
本の通りにやっても動かない残念な書籍なのかは分かりません。

---

Heloってなんだろ…？ググったらソマリ語と出てきたんだが。。。

Comments

[kazumi_7]

ご指摘を受けて確認したところ、なぜか該当部分をコメントアウトにしていました。
コメントアウトを外して実行しようとしたところ、Page<MyData>の「Pageが型に解決できません」という構文エラーが出ています……。

```Java
@RequestMapping(value = "/page/{num}", method = RequestMethod.GET)
public ModelAndView page(@PathVariable Integer num,
ModelAndView mav) {
Page<MyData> page = service.getMyDataInPage(num);
mav.setViewName("index");
mav.addObject("title", "Find Page");
mav.addObject("msg", "MyDataのサンプル。");
mav.addObject("pagenumber", num);
mav.addObject("datalist", page);
return mav;
}
```
---
HeloはHelloのミスタイプだと思います。最初に「Hello "Spring-Boot" World!」と表示させるコードがあったので。

[Luice]

単純にimportしていないだけ、なんて事はないですよね…

[kazumi_7]

ご回答ありがとうございます。
手で
import com.tuyano.springboot.MyDataService;
とimport文を打って保存すると、未使用なのか削除されてしまいます。
Page<MyData>をMyDataService.javaからコピー＆ペーストすると構文エラーが消えました。
見比べても綴りミスはなかったのですが、お手数お掛けしました。
実行すると、status=500のエラーが発生してしまっているところです。

[kazumi_7]

最終目標であるページ分けでの表示は実現できていませんが、表題と質問内容がずれて来るので一旦解決とさせて頂きます。
ありがとうございました。