\u672c\u306e\u7de8\u96c6\u753b\u9762\u3067\u753b\u50cfURL\u3092\u5165\u529b\u3057\u305f\u3068\u304d\u306b\u3001\u753b\u50cf\u306e\u30d7\u30ec\u30d3\u30e5\u30fc\u3092\u8868\u793a\u3059\u308b\u3002<\/p>\n
src\/main\/resources \u306b\u3042\u308b static \u30d5\u30a9\u30eb\u30c0\u306b js \u30d5\u30a9\u30eb\u30c0\u3092\u65b0\u898f\u4f5c\u6210\u3059\u308b\u3002
\n\u305d\u306e\u30d5\u30a9\u30eb\u30c0\u306b\u3001jQuery\u30d5\u30a1\u30a4\u30eb\u3092\u8cbc\u308a\u4ed8\u3051\u308b\u3002<\/p>\n
\u307e\u305a\u3001\u958b\u767a\u8005\u30c4\u30fc\u30eb\u306eJavaScript\u30b3\u30f3\u30bd\u30fc\u30eb\u3067\u3084\u308a\u305f\u3044\u52d5\u304d\u3092\u78ba\u8a8d\u3059\u308b\u3002
\n\u3046\u307e\u304f\u52d5\u3044\u305f\u3089\u3001\u305d\u306e\u5185\u5bb9\u3092 script \u30bf\u30b0\u5185\u306b\u8a18\u8ff0\u3059\u308b\u3002<\/p>\n
img\u30bf\u30b0\u306b\u8868\u7d19\u3068\u3044\u3046\u610f\u5473\u3067id=cover\u3092\u5272\u308a\u5f53\u3066\u3066\u304a\u304f\u3002<\/p>\n
editbook.html<\/p>\n
\r\n<!DOCTYPE html>\r\n<html xmlns:th="http:\/\/www.thymeleaf.org">\r\n<head>\r\n<meta charset="UTF-8">\r\n<title>Book - \u672c\u306e\u7de8\u96c6<\/title>\r\n<script src="\/js\/jquery-1.12.4.min.js"><\/script>\r\n<script type="text\/javascript">\r\n$(function() {\r\n\t$('[name=image]').on('keyup', function() {\r\n\t\t$('#cover').prop('src', $(this).val());\r\n\t})\r\n});\r\n<\/script>\r\n<\/head>\r\n<body>\r\n\r\n<a href="\/">\u30c8\u30c3\u30d7<\/a>\r\n\r\n<h1>\u672c\u306e\u7de8\u96c6<\/h1>\r\n\r\n<img id="cover" th:src="${book.image}" width="200" \/>\r\n\r\n<form action="\/book\/edit" method="post">\r\n\t<input type="hidden" name="id" th:value="${book.id}" \/>\r\n\t<div>\u30bf\u30a4\u30c8\u30eb: <input type="text" name="title" th:value="${book.title}" \/><\/div>\r\n\t<div>\u8457\u8005: <input type="text" name="author" th:value="${book.author}" \/><\/div>\r\n\t<div>\u753b\u50cfURL: <input type="text" name="image" th:value="${book.image}" \/><\/div>\r\n\t<div><input id="submit" type="submit" value="\u4fee\u6b63" \/><\/div>\r\n<\/form>\r\n\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n\u672c\u306e\u30ea\u30b9\u30c8\u306e\u753b\u9762\u3082\u540c\u3058\u3088\u3046\u306a\u52d5\u304d\u306b\u306a\u308b\u3088\u3046\u306b\u4fee\u6b63\u3057\u3066\u307f\u308b\u3002<\/p>\n
books.html<\/p>\n
\r\n<!DOCTYPE html>\r\n<html xmlns:th="http:\/\/www.thymeleaf.org">\r\n<head>\r\n<meta charset="UTF-8">\r\n<title>Book - \u672c\u306e\u30ea\u30b9\u30c8<\/title>\r\n<script src="\/js\/jquery-1.12.4.min.js"><\/script>\r\n<script type="text\/javascript">\r\n$(function() {\r\n\t$('[name=image]').on('keyup', function() {\r\n\t\t$('#cover').prop('src', $(this).val());\r\n\t})\r\n});\r\n<\/script>\r\n<\/head>\r\n<body>\r\n\r\n<h1>Book list<\/h1>\r\n\r\n<a href="\/">\u30c8\u30c3\u30d7<\/a>\r\n\r\n<table>\r\n\t<tr>\r\n\t\t<th>ID<\/th><th>\u753b\u50cf<\/th><th>\u30bf\u30a4\u30c8\u30eb<\/th><th>\u8457\u8005<\/th><th>\u672c\u68da<\/th>\r\n\t<\/tr>\r\n\t<tr th:each="book : ${list}">\r\n\t\t<td th:text="${book.id}"><\/td>\r\n\t\t<td><img th:src="${book.image}" height="50" \/><\/td>\r\n\t\t<td><a th:href="@{'\/book\/' + ${book.id}}" th:text="${book.title}"><\/a><\/td>\r\n\t\t<td th:text="${book.author}"><\/td>\r\n\t\t<td th:if="${book.bookshelf != null}" th:text="${book.bookshelf.name}"><\/td>\r\n\t\t<td th:if="${book.bookshelf == null}" th:text="\u672c\u68da\u306b\u5165\u308c\u3066\u307e\u305b\u3093"><\/td>\r\n\t<\/tr>\r\n<\/table>\r\n\r\n<hr \/>\r\n\r\n<div>\u65b0\u3057\u3044\u672c<\/div>\r\n<img id="cover" src="" width="200" \/>\r\n<form action="\/addbook" method="post">\r\n\t<div>\u30bf\u30a4\u30c8\u30eb: <input type="text" name="title" \/><\/div>\r\n\t<div>\u8457\u8005: <input type="text" name="author" \/><\/div>\r\n\t<div>\u753b\u50cfURL: <input type="text" name="image" \/><\/div>\r\n\t<div><input id="submit" type="submit" value="+\u8ffd\u52a0" \/><\/div>\r\n<\/form>\r\n\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n\u4eca\u306e\u307e\u307e\u3067\u306f\u3001\u753b\u50cfURL\u3092\u5165\u529b\u3057\u3066\u3082\u4fdd\u5b58\u3057\u3066\u3044\u306a\u3044\u306e\u3067\u3001\u30b5\u30fc\u30d0\u30fc\u5074\u306b\u753b\u50cfURL\u3092\u4fdd\u5b58\u3059\u308b\u51e6\u7406\u3092\u8ffd\u52a0\u3059\u308b\u3002<\/p>\n
\r\n\t@RequestMapping(value="\/addbook", method=RequestMethod.POST)\r\n\tpublic ModelAndView formPost(ModelAndView mav,\r\n\t\t\t@RequestParam("title") String title,\r\n\t\t\t@RequestParam("author") String author,\r\n\t\t\t@RequestParam("image") String image) {\r\n\t\tBook book = new Book();\r\n\t\tbook.setTitle(title);\r\n\t\tbook.setAuthor(author);\r\n\t\tbook.setImage(image);\r\n\t\trepository.saveAndFlush(book);\r\n\t\treturn new ModelAndView("redirect:\/books");\r\n\t}\r\n<\/pre>\n\n<\/div>","protected":false},"excerpt":{"rendered":"\u672c\u306e\u7de8\u96c6\u753b\u9762\u3067\u753b\u50cfURL\u3092\u5165\u529b\u3057\u305f\u3068\u304d\u306b\u3001\u753b\u50cf\u306e\u30d7\u30ec\u30d3\u30e5\u30fc\u3092\u8868\u793a\u3059\u308b\u3002 src\/main\/resources \u306b\u3042\u308b static \u30d5\u30a9\u30eb\u30c0\u306b js \u30d5\u30a9\u30eb\u30c0\u3092\u65b0\u898f\u4f5c\u6210\u3059\u308b\u3002 \u305d\u306e\u30d5\u30a9\u30eb\u30c0\u306b\u3001jQuery\u30d5\u30a1\u30a4\u30eb\u3092\u8cbc\u308a\u4ed8 … \u7d9a\u304d\u3092\u8aad\u3080 JavaScript\u3067\u52d5\u304d\u3092\u3064\u3051\u3066\u307f\u308b<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,5],"tags":[],"class_list":["post-132","post","type-post","status-publish","format-standard","hentry","category-java","category-springboot"],"views":192,"_links":{"self":[{"href":"https:\/\/kpc2020.satoshis.jp\/index.php?rest_route=\/wp\/v2\/posts\/132","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kpc2020.satoshis.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kpc2020.satoshis.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kpc2020.satoshis.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kpc2020.satoshis.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=132"}],"version-history":[{"count":5,"href":"https:\/\/kpc2020.satoshis.jp\/index.php?rest_route=\/wp\/v2\/posts\/132\/revisions"}],"predecessor-version":[{"id":137,"href":"https:\/\/kpc2020.satoshis.jp\/index.php?rest_route=\/wp\/v2\/posts\/132\/revisions\/137"}],"wp:attachment":[{"href":"https:\/\/kpc2020.satoshis.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kpc2020.satoshis.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kpc2020.satoshis.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}