src/main/resources/templates
bookshelf.html
本棚の名前の右側に変更ボタンを設置して、変更ボタンをクリックしたら名前を入力するフォームを表示する。
jQueryを使って表示・非表示を切り替えるようにする。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>本棚</title>
<style type="text/css">
img.book-image {
width: 100px;
}
.xx-small {
font-size: xx-small;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
</head>
<body>
<h1>本棚 : <span th:text="${bookshelf.name}"></span><button id="edit" class="xx-small">変更</button></h1>
<form id="form" action="/change-name" method="post">
<input type="hidden" name="id" th:value="${bookshelf.id}" />
<input type="text" name="name" th:value="${bookshelf.name}" />
<input type="submit" value="変更" />
</form>
<p>この本棚に入っている本のリスト</p>
<table>
<tr>
<th>画像</th><th>タイトル</th><th>著者名</th><th>操作</th>
</tr>
<tr th:each="book : ${bookshelf.books}">
<td><img class="book-image" th:src="${book.image}" /></td>
<td th:text="${book.title}"></td>
<td th:text="${book.author}"></td>
<td>
<a th:href="@{'/edit/' + ${book.id}}">修正</a>
<a th:href="@{'/delete/' + ${book.id}}">削除</a>
</td>
</tr>
</table>
<a href="/">戻る</a>
</body>
<script>
$(function() {
$('#edit').on('click', function() {
if ($('#edit').text() == 'キャンセル'){
$('#edit').text('変更');
$('#form').hide();
return;
}
$('#form').show();
$('#edit').text('キャンセル');
});
$('#form').hide();
})
</script>
</html>
src/main/java
IndexController.java
/change-name への POST リクエストを受け取って本棚の名前を変更する。
@RequestMapping(value = "/change-name", method = RequestMethod.POST)
public ModelAndView changeName(ModelAndView mav,
@RequestParam("id") long id,
@RequestParam("name") String name) {
Optional<Bookshelf> data = repository.findById(id);
Bookshelf bookshelf = data.get();
bookshelf.setName(name);
repository.saveAndFlush(bookshelf);
return new ModelAndView("redirect:/bookshelf/" + id);
}