{"id":547,"date":"2019-04-20T22:48:53","date_gmt":"2019-04-20T13:48:53","guid":{"rendered":"http:\/\/www.typea.info\/blog\/index.php\/2019\/04\/20\/google_app_engine_java_spring_bootvuetifyajax\/"},"modified":"2019-04-20T22:48:53","modified_gmt":"2019-04-20T13:48:53","slug":"google_app_engine_java_spring_bootvuetifyajax","status":"publish","type":"post","link":"https:\/\/www.typea.info\/blog\/index.php\/2019\/04\/20\/google_app_engine_java_spring_bootvuetifyajax\/","title":{"rendered":"Google App Engine Java \u30b9\u30bf\u30f3\u30c0\u30fc\u30c9\u74b0\u5883 \u306e Spring Boot\u3067Vuetify\u5c0e\u5165\u304b\u3089\u30af\u30ed\u30b9\u30c9\u30e1\u30a4\u30f3Ajax\u901a\u4fe1"},"content":{"rendered":"<p><a href=\"https:\/\/www.amazon.co.jp\/Vue-js%E5%85%A5%E9%96%80-%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E5%AE%9F%E8%B7%B5%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA%E3%81%BE%E3%81%A7-%E5%B7%9D%E5%8F%A3-%E5%92%8C%E4%B9%9F\/dp\/4297100916\/ref=as_li_ss_il?_encoding=UTF8&amp;qid=1555767965&amp;sr=8-2&amp;linkCode=li2&amp;tag=typea09-22&amp;linkId=8254e988a0fe34c6bce2552150fa50bd\" target=\"_blank\"><img decoding=\"async\" src=\"\/\/ws-fe.amazon-adsystem.com\/widgets\/q?_encoding=UTF8&amp;ASIN=4297100916&amp;Format=_SL160_&amp;ID=AsinImage&amp;MarketPlace=JP&amp;ServiceVersion=20070822&amp;WS=1&amp;tag=typea09-22\" border=\"0\"><\/a><img loading=\"lazy\" decoding=\"async\" width=\"1\" height=\"1\" style=\"margin: 0px !important; border: currentcolor !important; border-image: none !important !important;\" alt=\"\" src=\"https:\/\/ir-jp.amazon-adsystem.com\/e\/ir?t=typea09-22&amp;l=li2&amp;o=9&amp;a=4297100916\" border=\"0\"><\/p>\n<p>Web\u30a2\u30d7\u30ea(\u304a\u3088\u3073Web\u30b5\u30fc\u30d3\u30b9)\u306e\u57fa\u76e4\u74b0\u5883\u3092\u3001GAE Java(Spring Boot) \uff0b Vue\u3067\u4f5c\u6210\u3057\u3066\u3044\u304f\u3002<\/p>\n<ul>\n<li><a href=\"https:\/\/www.typea.info\/blog\/index.php\/2019\/04\/06\/google_app_engine_java_standard_spring_boot\">Google App Engine Java Standard \u74b0\u5883\u3067\u624b\u3063\u53d6\u308a\u65e9\u304fSpring Boot \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u958b\u767a\u3059\u308b<\/a><\/li>\n<li>Goo<a href=\"https:\/\/www.typea.info\/blog\/index.php\/2019\/04\/06\/google_app_engine_java_spring_bootvuejs\">Google App Engine Java \u30b9\u30bf\u30f3\u30c0\u30fc\u30c9\u74b0\u5883 \u306e Spring Boot\u3067Vue.js\u3092\u5229\u7528\u3059\u308b<\/a><\/li>\n<\/ul>\n<p>\u3068\u308a\u3042\u3048\u305a\u3001\u4e0a\u8a18\u307e\u3067\u306e\u52d5\u4f5c\u78ba\u8a8d\u307e\u3067\u3002<\/p>\n<h2>1.Vuetify\u5c0e\u5165<\/h2>\n<h3>1.1 Vue CLI\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3068Vue\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210\u3068Vuetity\u306e\u9069\u7528<\/h3>\n<p>Vue \u306e\u958b\u767a\u30c4\u30fc\u30eb\u3001<a href=\"https:\/\/cli.vuejs.org\/guide\/\">Vue CLI<\/a> \u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/p>\n<pre class=\"prettyprint linenums\">&gt; npm install -g @vue\/cli<\/pre>\n<p>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210<\/p>\n<pre class=\"prettyprint linenums\">&gt; vue create my-app-name\r\n&gt; cd my-app-name\r\n<\/pre>\n<p>Vuetify\u306e\u9069\u7528\u3001\u3053\u308c\u3067\u3001Vue\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067Vuetify\u304c\u9069\u7528\u3055\u308c\u308b<\/p>\n<pre class=\"prettyprint linenums\">&gt; vue add vuetify<\/pre>\n<h3>1.2 \u30d3\u30eb\u30c9\u306e\u51fa\u529b\u5148\u3092\u5909\u66f4<\/h3>\n<p>\u30b5\u30fc\u30d0\u30fc\u5074\u3068\u307e\u3068\u3081\u3066\u3001GAE\u306b\u4e0a\u3052\u305f\u3044\u306e\u3067\u3001Eclipse\u4e0a\u3067\u5b8c\u7d50\u3067\u304d\u308b\u3068\u3044\u3044\u306e\u3060\u304c\u3001<a href=\"https:\/\/www.typea.info\/blog\/index.php\/2017\/08\/15\/react_1\">\u8fd1\u3054\u308d\u306eJavascript\u958b\u767a\u306f\u305d\u3046\u3082\u3044\u304b\u306a\u3055\u305d\u3046<\/a>\u3002Visual Studio Code \u3067UI\u304c\u308f\u306eVuetify \u3092\u7de8\u96c6\u3057\u3066\u3001GAE\u306esutatic\u30ea\u30bd\u30fc\u30b9\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u30d3\u30eb\u30c9\u7d50\u679c\u3092\u51fa\u529b\u3059\u308b\u3088\u3046\u306b\u3059\u308b\u305f\u3081\u306b\u3001Vue Config\u3092\u7de8\u96c6<\/p>\n<p>Vue Configuration \u30ea\u30d5\u30a1\u30ec\u30f3\u30b9\u3000<a title=\"https:\/\/cli.vuejs.org\/config\/\n\" href=\"https:\/\/cli.vuejs.org\/config\/\">https:\/\/cli.vuejs.org\/config\/<\/a><\/p>\n<p>vue.config.js \u3092\u7de8\u96c6<\/p>\n<pre class=\"prettyprint linenums\">module.exports = {\r\n   outputDir: '..\/FavPhrase\/src\/main\/resources\/static',\r\n   indexPath: '\/index.html',\r\n   devServer: {\r\n        host: '0.0.0.0',\r\n        port: 8081\r\n    }\r\n}<\/pre>\n<p>outputDir \u3067\u3001GAE\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e \u30b9\u30bf\u30c6\u30a3\u30c3\u30af\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u6307\u5b9a\u3001devServer\u3067\u3001GAE\u3068\u7570\u306a\u308b\u30dd\u30fc\u30c8\u3092\u6307\u5b9a\u3057\u3066\u3001\u958b\u767a\u6642\u306b\u306f\u3001\u540c\u6642\u306b\u5b9f\u884cVuetify \u304b\u3089 GAE\u306b\u30a2\u30af\u30bb\u30b9\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u3002<\/p>\n<h3>1.3 \u5b9f\u884c\u3068\u30d3\u30eb\u30c9<\/h3>\n<p>\u5b9f\u884c<\/p>\n<pre class=\"prettyprint linenums\">&gt; npm run serve<\/pre>\n<p>\u30d3\u30eb\u30c9<\/p>\n<pre class=\"prettyprint linenums\">&gt; npm run build<\/pre>\n<h3>1.4 Vuetify \u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb<\/h3>\n<p>\u4ee5\u4e0b\u306eyoutube\u30c1\u30e3\u30f3\u30cd\u30eb\u304c\u79c0\u9038\u3002<\/p>\n<p>Vueti<a href=\"https:\/\/youtu.be\/kp2vsNlV5xc\">Vuetify Tutorial(youtube)<\/a><\/p>\n<h2>2.Vuetify \u304b\u3089 GAE(Spring Boot)\u3078REST\u63a5\u7d9a<\/h2>\n<p>\u4e0a\u8a18\u3067\u3001GAE\u3068Vuetify\u3092\u30dd\u30fc\u30c8\u81ea\u5bb3\u3067\u540c\u6642\u306b\u5b9f\u884c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u3063\u305f\u306e\u3067\u3001Vuetify\u3092\u5b9f\u884c\u3057\u3066\u3001GAE(Spring Boot)\u306eREST API\u306b\u30a2\u30af\u30bb\u30b9\u3055\u305b\u308b\u3002<\/p>\n<h3>2.1 Spring Boot \u5074 REST API<\/h3>\n<pre class=\"prettyprint linenums\">@RestController\r\npublic class ApiController {\r\n\t@GetMapping(\"\/api\/hello\")\r\n\tpublic String hello() {\r\n\t\treturn \"Hello GAE Java std env with Spring boot !\";\r\n\t}\r\n}\r\n<\/pre>\n<h3>2.2 Vuetify\u5074<\/h3>\n<h4>(1) axios \u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h4>\n<p>ajax \u30e9\u30a4\u30d6\u30e9\u30ea axios \u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/p>\n<p><pre class=\"prettyprint linenums\">npm install axios --save<\/pre>\n<h4>(2) Vuetify \u304b\u3089 axios \u3092\u5229\u7528\u3057\u3066\u3001GAE(Spring Boot)\u306eREST API\u3092\u547c\u3073\u51fa\u3059<br \/><\/h4>\n<p><pre class=\"prettyprint linenums\">&lt;template&gt;\r\n  &lt;v-container&gt;\r\n    &lt;v-btn @click=\"sampleAjax\"&gt;Ajax&lt;\/v-btn&gt;\r\n  &lt;\/v-container&gt;\r\n&lt;\/template&gt;\r\n&lt;script&gt;\r\nimport axios from 'axios';\r\n\r\nexport default {\r\n  name: 'FavPhrase',\r\n  methods: {\r\n    sampleAjax : function() {\r\n      axios.get(\"http:\/\/localhost:8080\/api\/hello\")\r\n        .then((res) =&gt; {\r\n          alert(\"status=\" + res.status + \":\" + res.data);\r\n        });\r\n    }\r\n  }\r\n}\r\n&lt;\/script&gt;\r\n&lt;style&gt;\r\n&lt;\/style&gt;\r\n<\/pre>\n<p>\u3068\u3001\u4ee5\u4e0b\u306e\u30a8\u30e9\u30fc\u3068\u306a\u308b<\/p>\n<p><a href=\"https:\/\/www.typea.info\/blog\/wp-content\/uploads\/image\/06dbdb691eef_B145\/vuetify_rest.png\"><img loading=\"lazy\" decoding=\"async\" width=\"627\" height=\"273\" title=\"vuetify_rest\" style=\"display: inline; background-image: none;\" alt=\"vuetify_rest\" src=\"https:\/\/www.typea.info\/blog\/wp-content\/uploads\/image\/06dbdb691eef_B145\/vuetify_rest_thumb.png\" border=\"0\"><\/a><\/p>\n<blockquote>\n<p>localhost\/:1 Access to XMLHttpRequest at &#8216;<a href=\"http:\/\/localhost:8080\/api\/hello'\">http:\/\/localhost:8080\/api\/hello&#8217;<\/a> from origin &#8216;<a href=\"http:\/\/localhost:8081'\">http:\/\/localhost:8081&#8242;<\/a> has been blocked by CORS policy: No &#8216;Access-Control-Allow-Origin&#8217; header is present on the requested resource.<\/p>\n<\/blockquote>\n<h3>2.3 \u30af\u30ed\u30b9\u30c9\u30e1\u30a4\u30f3(CORS)\u5bfe\u5fdc<\/h3>\n<p>\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u4e2d\u306e\u3001CORS(Cross-Origin-Resource-Sharing)\u306e\u5bfe\u5fdc\u3092\u884c\u3046\u3002<\/p>\n<blockquote>\n<p><a href=\"https:\/\/dev.classmethod.jp\/etc\/about-cors\/\">https:\/\/dev.classmethod.jp\/etc\/about-cors\/<\/a><\/p>\n<p>\u305d\u306e\u6982\u8981\u306f\u3001\u30af\u30ed\u30b9\u30c9\u30e1\u30a4\u30f3\u30a2\u30af\u30bb\u30b9\u3055\u308c\u308b\u30b5\u30fc\u30d0\u30fc\u5074\u3067\u30a2\u30af\u30bb\u30b9\u3092\u5236\u5fa1\u3059\u308b\u30eb\u30fc\u30eb\u3092\u8a2d\u5b9a\u3057\u3001\u30d6\u30e9\u30a6\u30b6\u3068\u30b5\u30fc\u30d0\u30fc\u5074\u3067HTTP\u30d8\u30c3\u30c0\u3092\u4f7f\u3063\u3066\u30a2\u30af\u30bb\u30b9\u5236\u5fa1\u306b\u95a2\u3059\u308b\u60c5\u5831\u3092\u3084\u308a\u3068\u308a\u3057\u306a\u304c\u3089\u30c9\u30e1\u30a4\u30f3\u3092\u307e\u305f\u3044\u3060\u30a2\u30af\u30bb\u30b9\u3092\u3059\u308b\u3068\u3044\u3046\u3082\u306e<\/p>\n<\/blockquote>\n<h4>(1) GAE(Spring Boot)\u5074\u3067\u5bfe\u5fdc\u3092\u884c\u3046\u3002<\/h4>\n<p>\u30ec\u30b9\u30dd\u30f3\u30b9\u30d8\u30c3\u30c0\u30fc\u3092\u8fd4\u3059<\/p>\n<pre class=\"prettyprint linenums\">@RestController\r\npublic class ApiController {\r\n\t@GetMapping(\"\/api\/hello\")\r\n\tpublic ResponseEntity<string> hello(@RequestHeader(\"Origin\") String origin) {\r\n\t\tSystem.out.println(origin);\r\n\t\t\r\n\t\tHttpHeaders headers = new HttpHeaders();\r\n\t\theaders.add(\"Access-Control-Allow-Origin\", origin);\r\n\t\t\r\n\t\tString body = \"Hello GAE Java std env with Spring boot !\";\r\n\t\treturn new ResponseEntity&lt;&gt;(body, headers, HttpStatus.OK );\r\n\t}\r\n}\r\n<\/string><\/pre>\n<h2>3.REST API \u547c\u3073\u51fa\u3057<\/h2>\n<p>\u547c\u3073\u51fa\u3057\u304c\u3001\u6210\u529f\u3057\u3066\u3001\u30e1\u30c3\u30bb\u30fc\u30b8\u30dc\u30c3\u30af\u30b9\u306b REST API\u304b\u3089\u306e\u7d50\u679c\u304c\u8868\u793a\u3055\u308c\u305f\u3002<\/p>\n<p><a href=\"https:\/\/www.typea.info\/blog\/wp-content\/uploads\/image\/06dbdb691eef_B145\/vuetify_rest_success.png\"><img loading=\"lazy\" decoding=\"async\" width=\"576\" height=\"207\" title=\"vuetify_rest_success\" style=\"display: inline; background-image: none;\" alt=\"vuetify_rest_success\" src=\"https:\/\/www.typea.info\/blog\/wp-content\/uploads\/image\/06dbdb691eef_B145\/vuetify_rest_success_thumb.png\" border=\"0\"><\/a><\/p>\n<p>HTTP \u306e\u3084\u308a\u53d6\u308a\u3002\u30ea\u30af\u30a8\u30b9\u30c8\u30d8\u30c3\u30c0\u30fc\u306b\u3001<\/p>\n<p>Origin: <a href=\"http:\/\/localhost:8081\">http:\/\/localhost:8081<\/a> <\/p>\n<p>\u304c\u542b\u307e\u308c\u3001\u30ec\u30b9\u30dd\u30f3\u30b9\u30d8\u30c3\u30c0\u30fc\u306b\u3001<\/p>\n<p>Access-Control-Allow-Origin: <a href=\"http:\/\/localhost:8081\">http:\/\/localhost:8081<\/a><\/p>\n<p><a href=\"https:\/\/www.typea.info\/blog\/wp-content\/uploads\/image\/06dbdb691eef_B145\/vuetify_rest_success_fiddler.png\"><img loading=\"lazy\" decoding=\"async\" width=\"588\" height=\"196\" title=\"vuetify_rest_success_fiddler\" style=\"display: inline; background-image: none;\" alt=\"vuetify_rest_success_fiddler\" src=\"https:\/\/www.typea.info\/blog\/wp-content\/uploads\/image\/06dbdb691eef_B145\/vuetify_rest_success_fiddler_thumb.png\" border=\"0\"><\/a><\/p>\n<p>\u304c\u542b\u307e\u308c\u308b\u3053\u3068\u304c\u78ba\u8a8d\u3067\u304d\u308b\u3002<\/p>\n<p>\u3053\u308c\u3067\u3001UI\u3068Web\u30b5\u30fc\u30d3\u30b9\u5074\u306e\u958b\u767a\u6e96\u5099\u304c\u3067\u304d\u305f\u3002<\/p>\n<p><\/p>\n<p><a href=\"https:\/\/www.amazon.co.jp\/%E7%8F%BE%E5%A0%B4%E8%87%B3%E4%B8%8A%E4%B8%BB%E7%BE%A9-Spring-Boot2-%E5%BE%B9%E5%BA%95%E6%B4%BB%E7%94%A8-%E5%BB%A3%E6%9C%AB\/dp\/4802611854\/ref=as_li_ss_il?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&amp;keywords=Spring+boot&amp;qid=1555768053&amp;s=gateway&amp;sr=8-2&amp;linkCode=li2&amp;tag=typea09-22&amp;linkId=774113255d1f5fa31c1117c6558923b4\" target=\"_blank\"><img decoding=\"async\" src=\"\/\/ws-fe.amazon-adsystem.com\/widgets\/q?_encoding=UTF8&amp;ASIN=4802611854&amp;Format=_SL160_&amp;ID=AsinImage&amp;MarketPlace=JP&amp;ServiceVersion=20070822&amp;WS=1&amp;tag=typea09-22\" border=\"0\"><\/a><img loading=\"lazy\" decoding=\"async\" width=\"1\" height=\"1\" style=\"margin: 0px !important; border: currentcolor !important; border-image: none !important;\" alt=\"\" src=\"https:\/\/ir-jp.amazon-adsystem.com\/e\/ir?t=typea09-22&amp;l=li2&amp;o=9&amp;a=4802611854\" border=\"0\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web\u30a2\u30d7\u30ea(\u304a\u3088\u3073Web\u30b5\u30fc\u30d3\u30b9)\u306e\u57fa\u76e4\u74b0\u5883\u3092\u3001GAE Java(Spring Boot) \uff0b Vue\u3067\u4f5c\u6210\u3057\u3066\u3044\u304f\u3002 Google App Engine Java Standard \u74b0\u5883\u3067\u624b\u3063\u53d6\u308a\u65e9\u304fSpring B [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","sitemap_hide":"","_veu_custom_css":"","veu_display_promotion_alert":"","vkexunit_cta_each_option":"","footnotes":""},"categories":[19,47,107],"tags":[],"class_list":["post-547","post","type-post","status-publish","format-standard","hentry","category-googleappengine","category-spring","category-vue-js"],"veu_head_title_object":{"title":"","add_site_title":""},"_links":{"self":[{"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/posts\/547","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=547"}],"version-history":[{"count":0,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/posts\/547\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=547"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}