{"action":"created","issue":{"url":"https://api.github.com/repos/it-kmitl-2018/group8-frontend/issues/27","repository_url":"https://api.github.com/repos/it-kmitl-2018/group8-frontend","labels_url":"https://api.github.com/repos/it-kmitl-2018/group8-frontend/issues/27/labels{/name}","comments_url":"https://api.github.com/repos/it-kmitl-2018/group8-frontend/issues/27/comments","events_url":"https://api.github.com/repos/it-kmitl-2018/group8-frontend/issues/27/events","html_url":"https://github.com/it-kmitl-2018/group8-frontend/issues/27","id":300657726,"number":27,"title":"Question about Axios in vue-cli ","user":{"login":"thasorn","id":15757535,"avatar_url":"https://avatars3.githubusercontent.com/u/15757535?v=4","gravatar_id":"","url":"https://api.github.com/users/thasorn","html_url":"https://github.com/thasorn","followers_url":"https://api.github.com/users/thasorn/followers","following_url":"https://api.github.com/users/thasorn/following{/other_user}","gists_url":"https://api.github.com/users/thasorn/gists{/gist_id}","starred_url":"https://api.github.com/users/thasorn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/thasorn/subscriptions","organizations_url":"https://api.github.com/users/thasorn/orgs","repos_url":"https://api.github.com/users/thasorn/repos","events_url":"https://api.github.com/users/thasorn/events{/privacy}","received_events_url":"https://api.github.com/users/thasorn/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-02-27T14:43:50Z","updated_at":"2018-02-28T02:56:12Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"มีคำถามและเรื่องรบกวนสอบถามเกี่ยวกับการใช้ Axios ในการส่งค่าที่ได้จาก Input ไปยังส่วนของ backend ครับ\r\nตอนนี้ผมได้ทดลอง install Axios ลงในโปรเจคและลองทำการส่งค่าบางตัวโดยใช้ Axios ครับ (ในที่นี้ทดลองส่ง guidelineSpecifiedID กับ exchangedDocument.id เพียงสองตัวก่อนครับ)\r\n\r\nโดยหน้า invoiceForm.vue ในขณะนี้ เป็นดังนี้ครับ\r\n\r\nส่วน HTML\r\n```\r\n<template>\r\n   <div class=\"invoiceForm\">\r\n     <div v-if=\"buttonIsSubmitted===false\">\r\n       <br>\r\n       <!--Guideline Specified CI Document Context Parameter -->\r\n       รหัสคู่มือมาตรฐาน : <input name=\"guidelineSpecifiedID\" v-model=\"guidelineSpecifiedID\"/><br>\r\n       <!--CIIH Exchanged Document-->\r\n       เลขที่เอกสาร : <input name=\"exchangedDocument.id\" v-model=\"exchangedDocument.id\"/><br>\r\n       ชื่อเอกสาร : <input name=\"exchangedDocument.name\" v-model=\"exchangedDocument.name\"/><br>\r\n       รหัสประเภทเอกสาร : <input name=\"exchangedDocument.typeCode\" v-model=\"exchangedDocument.typeCode\"/><br>\r\n       วันเดือนปี ที่ออกเอกสาร  : <input name=\"exchangedDocument.issueDateTime\" v-model=\"exchangedDocument.issueDateTime\"/><br>\r\n       สาเหตุการออกเอกสาร : <input name=\"exchangedDocument.purpose\" v-model=\"exchangedDocument.purpose\"/><br>\r\n       รหัสสาเหตุการออกเอกสาร : <input name=\"exchangedDocument.purposeCode\" v-model=\"exchangedDocument.purposeCode\"/><br>\r\n       เลขที่เอกสารสากล : <input name=\"exchangedDocument.globalID\" v-model=\"exchangedDocument.globalID\"/><br>\r\n       วันเดือนปีและเวลาที่สร้างเอกสาร : <input name=\"exchangedDocument.creationDateTime\" v-model=\"exchangedDocument.creationDateTime\"/><br>\r\n       <button @click=\"fetchData\"> ส่งข้อมูล </button>\r\n     </div>\r\n     <div v-else>\r\n        <h1> โปรดตรวจสอบข้อมูลดังกล่าวว่าถูกต้องหรือไม่ </h1><br>\r\n        <!--Guideline Specified CI Document Context Parameter -->\r\n        รหัสคู่มือมาตรฐาน : <span>{{ guidelineSpecifiedID }}</span><br>\r\n        <!--CIIH Exchanged Document-->\r\n        เลขที่เอกสาร : <span>{{ exchangedDocument.id }}</span><br>\r\n        ชื่อเอกสาร : <span>{{ exchangedDocument.name }}</span><br>\r\n        รหัสประเภทเอกสาร : <span>{{ exchangedDocument.typeCode }}</span><br>\r\n        วันเดือนปี ที่ออกเอกสาร  : <span>{{ exchangedDocument.issueDateTime }}</span><br>\r\n        สาเหตุการออกเอกสาร : <span>{{ exchangedDocument.purpose }}</span><br>\r\n        รหัสสาเหตุการออกเอกสาร : <span>{{ exchangedDocument.purposeCode }}</span><br>\r\n        เลขที่เอกสารสากล : <span>{{ exchangedDocument.globalID }}</span><br>\r\n        วันเดือนปีและเวลาที่สร้างเอกสาร : <span>{{ exchangedDocument.creationDateTime }}</span><br>\r\n     </div>\r\n   </div>\r\n</template>\r\n```\r\nส่วน JS\r\n```\r\n<script>\r\n  import axios from 'axios';\r\n\r\n  export default {\r\n    name: 'invoiceForm',\r\n    data () {\r\n      return {\r\n        buttonIsSubmitted: false,\r\n        guidelineSpecifiedID: '',\r\n        exchangedDocument: {\r\n          id: '',\r\n          name: '',\r\n          typeCode: '',\r\n          issueDateTime: '',\r\n          purpose: '',\r\n          purposeCode: '',\r\n          globalID: '',\r\n          creationDateTime: ''\r\n        }\r\n      };\r\n    },\r\n    methods: {\r\n      fetchData() {\r\n        axios.post('http://localhost:8080/#/invoiceForm', {\r\n          guidelineSpecifiedID: this.guidelineSpecifiedID,\r\n          exchangedDocument: {\r\n            id: this.exchangedDocument.id\r\n          }\r\n        })\r\n        .then(function (response) {\r\n          console.log(response.data)\r\n        })\r\n        .catch(function (error) {\r\n          console.log(error)\r\n        });\r\n      }\r\n    }\r\n  }\r\n</script>\r\n```\r\n\r\nสิ่งที่เกิดขึ้นเมื่อลองดูใน Console คือ POST http://localhost:8080/ 404 (Not Found) ครับ\r\n\r\nผมทดลองเปลี่ยน URL ดูเป็น '../invoiceForm' แต่ผลลัพธ์ยังเหมือนเดิมครับ\r\n\r\nผมทดลองเปลี่ยนจาก POST เป็น GET แล้ว แม้ Error จะหายไป แต่ทุกอย่างก็จบเพียงเท่านั้นและไม่ทราบผลลัพธ์ใด ๆ ครับ\r\n\r\nสิ่งที่ผมสงสัยและรบกวนขอความรู้ มีดังต่อไปนี้ครับ\r\n1. ในที่นี้เราควรใช้ GET หรือ POST มากกว่ากันครับ\r\n2. เราจะทราบได้อย่างไรว่า input ที่ใส่มา เมื่อผ่าน Code ของเราแล้ว ฝ่าย Backend จะสามารถรับและนำไปใช้ได้ครับ\r\n3. ถ้าม่เป็นการรบกวนจนเกินไป พอจะแนะนำมี Resource หรือ Document หรือตัวอย่างที่พอจะอธิบายหรือให้ตัวอย่างการสร้าง Form ด้วย Axios ไหมครับ\r\n\r\nขออภัยหากคำถามทำให้สับสนหรือผิดมารยาทการทำงาน\r\nและขอขอบคุณสำหรับคำตอบล่วงหน้าครับ\r\n\r\nขอบพระคุณครับ"},"comment":{"url":"https://api.github.com/repos/it-kmitl-2018/group8-frontend/issues/comments/369104579","html_url":"https://github.com/it-kmitl-2018/group8-frontend/issues/27#issuecomment-369104579","issue_url":"https://api.github.com/repos/it-kmitl-2018/group8-frontend/issues/27","id":369104579,"user":{"login":"thasorn","id":15757535,"avatar_url":"https://avatars3.githubusercontent.com/u/15757535?v=4","gravatar_id":"","url":"https://api.github.com/users/thasorn","html_url":"https://github.com/thasorn","followers_url":"https://api.github.com/users/thasorn/followers","following_url":"https://api.github.com/users/thasorn/following{/other_user}","gists_url":"https://api.github.com/users/thasorn/gists{/gist_id}","starred_url":"https://api.github.com/users/thasorn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/thasorn/subscriptions","organizations_url":"https://api.github.com/users/thasorn/orgs","repos_url":"https://api.github.com/users/thasorn/repos","events_url":"https://api.github.com/users/thasorn/events{/privacy}","received_events_url":"https://api.github.com/users/thasorn/received_events","type":"User","site_admin":false},"created_at":"2018-02-28T02:56:12Z","updated_at":"2018-02-28T02:56:12Z","author_association":"CONTRIBUTOR","body":"รบกวนอีกครั้งหนึ่งครับ ตอนนี้ยังติดปัญหา POST http://localhost:8080/invoiceForm 404 (Not Found) ครับ\r\nผมทดลองใน postman ทั้ง code ตัวเก่า และตัวใหม่ที่เพ่ิ่ม method mounted()\r\n```\r\n      mounted() {\r\n        this.axios = axios.create({\r\n            baseURL: 'localhost:8080/',\r\n        });\r\n      },\r\n      fetchData() {\r\n        axios.post('/invoiceForm', {\r\n          guidelineSpecifiedID: this.guidelineSpecifiedID,\r\n          exchangedDocument: {\r\n            id: this.exchangedDocument.id\r\n          }\r\n        })\r\n        .then(function (response) {\r\n          console.log(response.data)\r\n        })\r\n        .catch(function (error) {\r\n          console.log(error)\r\n        });\r\n      }\r\n```\r\nแต่ยังคงประสบปัญหาเดิมครับ\r\nจึงขอรบกวนขอคำแนะนำและคำปรึกษาสำหรับการแก้ปัญหานี้ครับ"}}
{"actor":{"display_login":"thasorn"}}