{"id":551,"date":"2019-04-29T09:47:55","date_gmt":"2019-04-29T00:47:55","guid":{"rendered":"http:\/\/www.typea.info\/blog\/index.php\/2019\/04\/29\/google_app_engine_java_spring_bootvuetify_json\/"},"modified":"2019-04-29T09:47:55","modified_gmt":"2019-04-29T00:47:55","slug":"google_app_engine_java_spring_bootvuetify_json","status":"publish","type":"post","link":"https:\/\/www.typea.info\/blog\/index.php\/2019\/04\/29\/google_app_engine_java_spring_bootvuetify_json\/","title":{"rendered":"Google App Engine Java \u30b9\u30bf\u30f3\u30c0\u30fc\u30c9+Spring Boot+Vuetify \u30d5\u30a1\u30a4\u30eb\u306e\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3068\u7d50\u679c\u3092JSON\u3067\u8fd4\u3059"},"content":{"rendered":"<p><a href=\"https:\/\/www.amazon.co.jp\/%E3%82%B2%E3%83%BC%E3%83%A0%E3%82%92%E4%BD%9C%E3%82%8A%E3%81%AA%E3%81%8C%E3%82%89%E6%A5%BD%E3%81%97%E3%81%8F%E5%AD%A6%E3%81%B9%E3%82%8BHTML5-CSS-JavaScript%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%EF%BC%BB%E6%94%B9%E8%A8%82%E7%89%88%EF%BC%BD-Future-Coders%EF%BC%88NextPublishing%EF%BC%89-ebook\/dp\/B06XRSFM6G\/ref=as_li_ss_il?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&amp;keywords=javascript&amp;qid=1556498764&amp;s=gateway&amp;sr=8-4&amp;linkCode=li2&amp;tag=typea09-22&amp;linkId=fc83e8fa403113bbf3b02376fd70fb7c\" target=\"_blank\"><img decoding=\"async\" src=\"\/\/ws-fe.amazon-adsystem.com\/widgets\/q?_encoding=UTF8&amp;ASIN=B06XRSFM6G&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=B06XRSFM6G\" border=\"0\"><\/p>\n<p>GAE Java Std. \u3068 Spring Boot \u3068 Vue+Vuetify \u3068 Xamarin \u3067\u30a2\u30d7\u30ea\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u69cb\u7bc9\u3059\u308b\u3002<\/p>\n<p>\u3053\u3053\u307e\u3067\u306b\u3084\u3063\u3066\u304d\u305f\u3053\u3068\u306f\u4ee5\u4e0b\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\"><font style=\"font-weight: normal;\">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<\/font><\/a><\/li>\n<li>\n<p><a href=\"https:\/\/www.typea.info\/blog\/index.php\/2019\/04\/06\/google_app_engine_java_standard_spring_boot_thymeleaf\"><font style=\"font-weight: normal;\">Google App Engine Java Standard\u74b0\u5883\u306b Spring Boot\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u30a8\u30f3\u30b8\u30f3 Thymeleaf\u3092\u9069\u7528<\/font><\/a><\/p>\n<\/li>\n<li>\n<p><font style=\"font-weight: normal;\"><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><\/font><\/p>\n<\/li>\n<li>\n<p><font style=\"font-weight: normal;\"><a href=\"https:\/\/www.typea.info\/blog\/index.php\/2019\/04\/20\/google_app_engine_java_spring_bootvuetifyajax\">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<\/a><\/font><\/p>\n<\/li>\n<li>\n<p><font style=\"font-weight: normal;\">Google <a href=\"https:\/\/www.typea.info\/blog\/index.php\/2019\/04\/24\/google_app_engine_java_spring_bootvuetify_gae\">Google App Engine Java \u30b9\u30bf\u30f3\u30c0\u30fc\u30c9+Spring Boot+Vuetify \u958b\u767a\u74b0\u5883\u3068\u672c\u756a\u74b0\u5883\u306e\u8a2d\u5b9a\u304b\u3089GAE\u3078\u30c7\u30d7\u30ed\u30a4<\/a><\/font><\/p>\n<\/li>\n<li>\n<p><font style=\"font-weight: normal;\"><a href=\"https:\/\/www.typea.info\/blog\/index.php\/2019\/04\/24\/visual_studio2019_xamarinformsios\">Visual Studio2019 Xamarin.Forms\u30a2\u30d7\u30ea\u3092iOS\u7528\u306b\u30d3\u30eb\u30c9\u3057\u30a8\u30df\u30e5\u30ec\u30fc\u30bf\u3067\u8d77\u52d5<\/a><\/font><\/p>\n<\/li>\n<li>\n<p><font style=\"font-weight: normal;\"><a href=\"https:\/\/www.typea.info\/blog\/index.php\/2019\/04\/28\/xamarinforms_http\">Xamarin.Forms \u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u306e\u8868\u793a\u3068 Http\u901a\u4fe1<\/a><\/font><\/p>\n<\/li>\n<\/ul>\n<p><\/p>\n<p>\u6b21\u306b\u3001\u30d5\u30a1\u30a4\u30eb\u306e\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3068\u53d7\u3051\u53d6\u308a\u3001\u304a\u3088\u3073\u3001Spring Boot(Spring MVC)\u5074\u304b\u3089JSON\u3067\u306e\u30ec\u30b9\u30dd\u30f3\u30b9\u8fd4\u5374\u3092\u8a66\u3059\u3002<\/p>\n<p><\/p>\n<h2>1.\u30d5\u30a1\u30a4\u30eb\u306e\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9 Vuetify\u5074<\/h2>\n<p><a href=\"https:\/\/serversideup.net\/uploading-files-vuejs-axios\/\">https:\/\/serversideup.net\/uploading-files-vuejs-axios\/<\/a><\/p>\n<p>\u3092\u53c2\u8003\u306b\u3001\u30d5\u30a1\u30a4\u30eb\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u306e\u30b5\u30f3\u30d7\u30eb\u3092\u5b9f\u88c5\u3002<\/p>\n<h3>1.1 \u753b\u9762<\/h3>\n<p><pre class=\"prettyprint linenums\">      &lt;input @change=\"handleFileUpload\" type=\"file\" id=\"file\" ref=\"file\"&gt;\r\n      &lt;v-btn @click=\"submitFile\"&gt;upload&lt;\/v-btn&gt;\r\n<\/pre>\n<h3>1.2 \u9001\u4fe1\u30b9\u30af\u30ea\u30d7\u30c8<\/h3>\n<p>\u51e6\u7406\u7d50\u679c\u3067\u5f97\u3089\u308c\u305fJSON\u304c\u3001\u3059\u3067\u306bJavascript\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u5909\u63db\u3055\u308c\u305f\u72b6\u614b\u306e\u305f\u3081\u3001\u8868\u793a\u7528\u306bJSON\u306b\u5909\u63db\u3059\u308b\u3002<\/p>\n<p><pre class=\"prettyprint linenums\">import axios from 'axios';  \r\n\r\nexport default {\r\n  name: 'FavoPhrase',\r\n  data() {\r\n    return {\r\n      file: '',\r\n      fileName: ''\r\n    }\r\n  },\r\n  methods: {\r\n    handleFileUpload: function(e) {\r\n      this.file = this.$refs.file.files[0];\r\n      if (this.file) {\r\n        this.fileName = this.file.name;\r\n      }\r\n    },\r\n    submitFile: function() {\r\n      let formData = new FormData();\r\n      formData.append('file', this.file);\r\n      formData.append('fileName', this.fileName);\r\n      console.log(formData);\r\n      axios.post(process.env.VUE_APP_API_BASE_URL + \"\/api\/upload-file\",\r\n        formData,\r\n        {\r\n          headers: {\r\n            'Content-Type': 'multipart\/formdata'\r\n          }\r\n        }\r\n      ).then(function(response){\r\n        alert(\"Success!\\n\" + JSON.stringify(response.data));  \r\n      }).catch(function(response){\r\n        alert(\"Faiure!\\n\" + response);\r\n      });\r\n    }\r\n  }\r\n}<\/pre>\n<h3>2.\u30b5\u30fc\u30d0\u30fc\u5074<\/h3>\n<ul>\n<li>Spring \u5074\u3067\u3001\u30d5\u30a1\u30a4\u30eb\u81ea\u4f53\u3092 MultipartFile\u3001\u30d5\u30a1\u30a4\u30eb\u540d\u3092\u6587\u5b57\u5217\u3067\u53d7\u3051\u53d6\u308b<\/li>\n<li>\u30d5\u30a1\u30a4\u30eb\u3092\u9069\u5f53\u306b\u4fdd\u5b58(\u78ba\u8a8d\u7528\u3002GAE\u306b\u30c7\u30d7\u30ed\u30a4\u6642\u306b\u306f\u5916\u3059)<\/li>\n<li>Map&lt;String,String&gt; \u3092\u8fd4\u5374\u3059\u308b\u3002\u3044\u3044\u611f\u3058\u306bJSON\u306b\u3057\u3066\u304f\u308c\u308b(\u4efb\u610f\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067\u3082\u53ef)<\/li>\n<li><a href=\"https:\/\/www.typea.info\/blog\/index.php\/2019\/04\/20\/google_app_engine_java_spring_bootvuetifyajax\">Origin\u4eee\u5f15\u6570\u306f\u3001\u958b\u767a\u7528\u306e\u30af\u30ed\u30b9\u30c9\u30e1\u30a4\u30f3\u5bfe\u5fdc<\/a><\/li>\n<\/ul>\n<p><pre class=\"prettyprint linenums\">\t@PostMapping(\"\/api\/upload-file\")\r\n\tpublic ResponseEntity<map><string   ,string=\"\">&gt; uploadFile(\r\n\t\t\t@RequestHeader(name=\"Origin\", required=false) String origin,\r\n\t\t\t@RequestParam(\"file\") MultipartFile file,\r\n\t\t\t@RequestParam(\"fileName\") String fileName) {\r\n\t\t\r\n\t\tHttpHeaders headers = new HttpHeaders();\r\n\t\theaders.add(\"Access-Control-Allow-Origin\", origin);\r\n\r\n\t\tif (file != null) {\r\n\t\t\tPath filePath = FileSystems.getDefault().getPath(\"c:\\\\work\\\\uploaded\", fileName);\r\n\t\t\ttry(\r\n\t\t\t\tDataInputStream reader = new DataInputStream(file.getInputStream());\r\n\t\t\t\tDataOutputStream writer = new DataOutputStream(new FileOutputStream(filePath.toFile()))) {\r\n\t\t\t\t\r\n\t\t\t\tbyte[] buf = new byte[1024];\r\n\t\t\t\tint ret = 0;\r\n\t\t\t\twhile((ret = reader.read(buf)) &gt;= 0) {\r\n\t\t\t\t\twriter.write(buf);\r\n\t\t\t\t}\r\n\t\t\t} catch(Exception e) {\r\n\t\t\t\te.printStackTrace();\r\n\t\t\t}\r\n\t\t}\r\n\t\t\r\n\t\tMap<string   ,string=\"\"> result = new HashMap&lt;&gt;();\r\n\t\tresult.put(\"message\", \"file uploaded success.\");\r\n\t\tresult.put(\"fileName\", fileName);\r\n\t\t\r\n\t\treturn new ResponseEntity&lt;&gt;(result, headers, HttpStatus.OK );\r\n\t}\r\n<\/string><\/string><\/map><\/pre>\n<h3>3.\u78ba\u8a8d<\/h3>\n<p>\u5b9f\u884c\u3057\u3066\u3001\u30d5\u30a1\u30a4\u30eb\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3002<\/p>\n<p>\u51e6\u7406\u304c\u6210\u529f\u3057\u3066\u3001\u30a2\u30e9\u30fc\u30c8\u306bJSON\u304c\u8868\u793a\u3055\u308c\u305f\u3002<\/p>\n<p><a href=\"https:\/\/www.typea.info\/blog\/wp-content\/uploads\/image\/Google-App-Engine-Java-Spring-BootVuetif_824E\/fileupload_json.png\"><img loading=\"lazy\" decoding=\"async\" width=\"661\" height=\"226\" title=\"fileupload_json\" style=\"display: inline; background-image: none;\" alt=\"fileupload_json\" src=\"https:\/\/www.typea.info\/blog\/wp-content\/uploads\/image\/Google-App-Engine-Java-Spring-BootVuetif_824E\/fileupload_json_thumb.png\" border=\"0\"><\/a><\/p>\n<p><a href=\"https:\/\/www.typea.info\/blog\/wp-content\/uploads\/image\/Google-App-Engine-Java-Spring-BootVuetif_824E\/springboot_json_fiddler.png\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"174\" title=\"springboot_json_fiddler\" style=\"display: inline; background-image: none;\" alt=\"springboot_json_fiddler\" src=\"https:\/\/www.typea.info\/blog\/wp-content\/uploads\/image\/Google-App-Engine-Java-Spring-BootVuetif_824E\/springboot_json_fiddler_thumb.png\" border=\"0\"><\/a><\/p>\n<p>\u3081\u3067\u305f\u3057\u3002<\/p>\n<p><a href=\"https:\/\/www.amazon.co.jp\/%E6%94%B9%E8%A8%82%E6%96%B0%E7%89%88JavaScript%E6%9C%AC%E6%A0%BC%E5%85%A5%E9%96%80-%E3%83%A2%E3%83%80%E3%83%B3%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%81%AB%E3%82%88%E3%82%8B%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E7%8F%BE%E5%A0%B4%E3%81%A7%E3%81%AE%E5%BF%9C%E7%94%A8%E3%81%BE%E3%81%A7-%E5%B1%B1%E7%94%B0-%E7%A5%A5%E5%AF%9B\/dp\/477418411X\/ref=as_li_ss_il?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&amp;keywords=javascript&amp;qid=1556498764&amp;s=gateway&amp;sr=8-1&amp;linkCode=li2&amp;tag=typea09-22&amp;linkId=6d5a6333841a62449db93440349af3aa\" target=\"_blank\"><img decoding=\"async\" src=\"\/\/ws-fe.amazon-adsystem.com\/widgets\/q?_encoding=UTF8&amp;ASIN=477418411X&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=477418411X\" border=\"0\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>GAE Java Std. \u3068 Spring Boot \u3068 Vue+Vuetify \u3068 Xamarin \u3067\u30a2\u30d7\u30ea\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u69cb\u7bc9\u3059\u308b\u3002 \u3053\u3053\u307e\u3067\u306b\u3084\u3063\u3066\u304d\u305f\u3053\u3068\u306f\u4ee5\u4e0b\u3002 Google App Engine Java  [&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-551","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\/551","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=551"}],"version-history":[{"count":0,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/posts\/551\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}