{"id":71,"date":"2020-11-12T13:50:43","date_gmt":"2020-11-12T04:50:43","guid":{"rendered":"http:\/\/kpc2020.satoshis.jp\/?p=71"},"modified":"2020-11-12T14:45:23","modified_gmt":"2020-11-12T05:45:23","slug":"spring-boot%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6web%e3%82%a2%e3%83%97%e3%83%aa%e3%82%92%e4%bd%9c%e6%88%90%e3%81%99%e3%82%8b-%e3%81%9d%e3%81%ae3","status":"publish","type":"post","link":"https:\/\/kpc2020.satoshis.jp\/?p=71","title":{"rendered":"Spring Boot\u3092\u4f7f\u3063\u3066Web\u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3059\u308b \u305d\u306e3"},"content":{"rendered":"

Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u8d77\u52d5\u3059\u308b\u305f\u3073\u306b\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u304c\u521d\u671f\u5316\u3055\u308c\u3066\u3057\u307e\u3046\u8a2d\u5b9a\u306b\u306a\u3063\u3066\u3044\u305f\u306e\u3067\u3001\u305d\u308c\u3092\u4fee\u6b63\u3059\u308b\u3002<\/p>\n

application.properties<\/p>\n

\r\nspring.datasource.url=jdbc:hsqldb:hsql:\/\/localhost\/shindan\r\nspring.datasource.username=SA\r\nspring.datasource.password=\r\nspring.datasource.driver-class-name=org.hsqldb.jdbc.JDBCDriver\r\nspring.jpa.hibernate.ddl-auto=update\r\n<\/pre>\n
IndexController.java<\/p>\n
\r\npackage jp.kpc;\r\n\r\nimport java.util.List;\r\n\r\nimport org.springframework.beans.factory.annotation.Autowired;\r\nimport org.springframework.stereotype.Controller;\r\nimport org.springframework.web.bind.annotation.RequestMapping;\r\nimport org.springframework.web.bind.annotation.RequestMethod;\r\nimport org.springframework.web.bind.annotation.RequestParam;\r\nimport org.springframework.web.servlet.ModelAndView;\r\n\r\n@Controller\r\npublic class IndexController {\r\n\t@Autowired\r\n\tprivate ShindanRepository repository;\r\n\r\n\t@RequestMapping("\/")\r\n\tpublic String index() {\r\n\t\treturn "index";\r\n\t}\r\n\r\n\t@RequestMapping(value="\/form", method=RequestMethod.GET)\r\n\tpublic ModelAndView form(ModelAndView mav) {\r\n\t\tmav.setViewName("form");\r\n\t\tList<Shindan> list = repository.findAll();\r\n\t\tmav.addObject("list", list);\r\n\t\treturn mav;\r\n\t}\r\n\r\n\t@RequestMapping(value="\/form", method=RequestMethod.POST)\r\n\tpublic ModelAndView formPost(ModelAndView mav,\r\n\t\t\t@RequestParam("name") String name,\r\n\t\t\t@RequestParam("eval") String eval) {\r\n\t\tint percent = (name + eval).hashCode() % 101;\r\n\t\tpercent = Math.abs(percent);\r\n\r\n\t\tShindan shindan = new Shindan();\r\n\t\tshindan.setName(name);\r\n\t\tshindan.setEval(eval);\r\n\t\tshindan.setPercent(percent);\r\n\t\trepository.saveAndFlush(shindan);\r\n\t\tString result = name + " \u3055\u3093\u306e" + eval + "\u5ea6\u306f" + percent + "%\u3067\u3059\uff01\uff01\uff01";\r\n\t\tmav.addObject("result", result);\r\n\r\n\t\tList<Shindan> list = repository.findAll();\r\n\t\tmav.addObject("list", list);\r\n\t\tmav.setViewName("form");\r\n\t\treturn mav;\r\n\t}\r\n\r\n}\r\n<\/pre>\n
form.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>\u8a3a\u65ad\u30da\u30fc\u30b8<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<h1>\u8a3a\u65ad\u30da\u30fc\u30b8<\/h1>\r\n\r\n<p th:text="${result}"><\/p>\r\n\r\n<form action="\/form" method="post">\r\n\t\u304a\u306a\u307e\u3048: <input type="text" name="name" \/>\r\n\t<br \/>\r\n\t\u8a3a\u65ad: <input type="text" name="eval" \/>\r\n\t<input type="submit" value="\u8a3a\u65ad" \/>\r\n<\/form>\r\n\r\n<hr \/>\r\n\r\n<h3>\u3053\u308c\u307e\u3067\u306e\u8a3a\u65ad\u7d50\u679c<\/h3>\r\n<table>\r\n\t<tr th:each="s : ${list}">\r\n\t\t<td th:text="${s.name} + ' \u3055\u3093\u306e ' + ${s.eval} + '\u5ea6\u306f ' + ${s.percent} + '%\u3067\u3059\uff01\uff01\uff01'"><\/td>\r\n\t<\/tr>\r\n<\/table>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
CSS\u3092\u4f7f\u3063\u3066\u307f\u308b\u3002<\/p>\n
SpringBoot\u306e\u5834\u5408\u306f\u3001CSS\u30d5\u30a1\u30a4\u30eb\u3092src\/main\/resources \u306e\u4e0b\u306e static \u5185\u306b\u7f6e\u304f\u3002<\/p>\n
styles.css<\/p>\n
\r\n@charset "UTF-8";\r\n\r\nheader {\r\n\ttext-align: center;\r\n\tbackground: lightblue;\r\n}\r\n\r\nfooter {\r\n\ttext-align: center;\r\n\tbackground: lightblue;\r\n}\r\n<\/pre>\n
form.html \u306b\u30d8\u30c3\u30c0\u30fc\u3068\u30d5\u30c3\u30bf\u30fc\u3092\u8ffd\u52a0\u3059\u308b\u3002
\nhead\u8981\u7d20\u5185\u3067CSS\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u3080\u3002<\/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>\u8a3a\u65ad\u30da\u30fc\u30b8<\/title>\r\n<link rel="stylesheet" href="\/css\/styles.css">\r\n<\/head>\r\n<body>\r\n\r\n<header>\r\n\u3053\u306e\u90e8\u5206\u306f\u30d8\u30c3\u30c0\u30fc\u3067\u3059\u3088\r\n<\/header>\r\n\r\n<h1>\u8a3a\u65ad\u30da\u30fc\u30b8<\/h1>\r\n\r\n<p th:text="${result}"><\/p>\r\n\r\n<form action="\/form" method="post">\r\n\t\u304a\u306a\u307e\u3048: <input type="text" name="name" \/>\r\n\t<br \/>\r\n\t\u8a3a\u65ad: <input type="text" name="eval" \/>\r\n\t<input type="submit" value="\u8a3a\u65ad" \/>\r\n<\/form>\r\n\r\n<hr \/>\r\n\r\n<h3>\u3053\u308c\u307e\u3067\u306e\u8a3a\u65ad\u7d50\u679c<\/h3>\r\n<table>\r\n\t<tr th:each="s : ${list}">\r\n\t\t<td th:text="${s.name} + ' \u3055\u3093\u306e ' + ${s.eval} + '\u5ea6\u306f ' + ${s.percent} + '%\u3067\u3059\uff01\uff01\uff01'"><\/td>\r\n\t<\/tr>\r\n<\/table>\r\n\r\n\r\n<footer>\r\n\u3053\u306e\u90e8\u5206\u306f\u30d5\u30c3\u30bf\u30fc\u3067\u3059\u3088\r\n<\/footer>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\u5165\u529b\u30d5\u30a9\u30fc\u30e0\u90e8\u5206\u306a\u3069\u3092\u4e2d\u592e\u5bc4\u305b\u306b\u3059\u308b\u3002<\/p>\n
form.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>\u8a3a\u65ad\u30da\u30fc\u30b8<\/title>\r\n<link rel="stylesheet" href="\/css\/styles.css">\r\n<\/head>\r\n<body>\r\n\r\n<header>\r\n\u3053\u306e\u90e8\u5206\u306f\u30d8\u30c3\u30c0\u30fc\u3067\u3059\u3088\r\n<\/header>\r\n\r\n<h1>\u8a3a\u65ad\u30da\u30fc\u30b8<\/h1>\r\n\r\n<p th:text="${result}"><\/p>\r\n\r\n<form action="\/form" method="post">\r\n\t<div>\u304a\u306a\u307e\u3048<\/div>\r\n\t<div><input type="text" name="name" \/><\/div>\r\n\t<div>\u306a\u306b\u5ea6\u3092\u8a3a\u65ad\u3057\u307e\u3059\u304b\uff1f<\/div>\r\n\t<div><input type="text" name="eval" \/><\/div>\r\n\t<div><input id="submit" type="submit" value="\u8a3a\u65ad" \/><\/div>\r\n<\/form>\r\n\r\n<hr \/>\r\n\r\n<h3>\u3053\u308c\u307e\u3067\u306e\u8a3a\u65ad\u7d50\u679c<\/h3>\r\n<table>\r\n\t<tr th:each="s : ${list}">\r\n\t\t<td th:text="${s.name} + ' \u3055\u3093\u306e ' + ${s.eval} + '\u5ea6\u306f ' + ${s.percent} + '%\u3067\u3059\uff01\uff01\uff01'"><\/td>\r\n\t<\/tr>\r\n<\/table>\r\n\r\n\r\n<footer>\r\n\u3053\u306e\u90e8\u5206\u306f\u30d5\u30c3\u30bf\u30fc\u3067\u3059\u3088\r\n<\/footer>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
styles.css<\/p>\n
\r\n@charset "UTF-8";\r\n\r\nheader {\r\n\ttext-align: center;\r\n\tbackground: #ffc107;\r\n\tcolor: white;\r\n}\r\n\r\nh1 {\r\n\ttext-align: center;\r\n\tcolor: darkblue;\r\n}\r\n\r\nform {\r\n\ttext-align: center;\r\n}\r\n\r\nfooter {\r\n\ttext-align: center;\r\n\tbackground: #ffc107;\r\n\tcolor: white;\r\n}\r\n\r\n#submit {\r\n\tbackground: lightgray;\r\n\tborder: outset;\r\n}\r\n<\/pre>\n\n
<\/div>","protected":false},"excerpt":{"rendered":"
Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u8d77\u52d5\u3059\u308b\u305f\u3073\u306b\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u304c\u521d\u671f\u5316\u3055\u308c\u3066\u3057\u307e\u3046\u8a2d\u5b9a\u306b\u306a\u3063\u3066\u3044\u305f\u306e\u3067\u3001\u305d\u308c\u3092\u4fee\u6b63\u3059\u308b\u3002 application.properties spring.datasource.url=jdbc:hsqld … \u7d9a\u304d\u3092\u8aad\u3080 Spring Boot\u3092\u4f7f\u3063\u3066Web\u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3059\u308b \u305d\u306e3<\/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-71","post","type-post","status-publish","format-standard","hentry","category-java","category-springboot"],"views":199,"_links":{"self":[{"href":"https:\/\/kpc2020.satoshis.jp\/index.php?rest_route=\/wp\/v2\/posts\/71","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=71"}],"version-history":[{"count":7,"href":"https:\/\/kpc2020.satoshis.jp\/index.php?rest_route=\/wp\/v2\/posts\/71\/revisions"}],"predecessor-version":[{"id":78,"href":"https:\/\/kpc2020.satoshis.jp\/index.php?rest_route=\/wp\/v2\/posts\/71\/revisions\/78"}],"wp:attachment":[{"href":"https:\/\/kpc2020.satoshis.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=71"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kpc2020.satoshis.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=71"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kpc2020.satoshis.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=71"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}