ฉบับรวมร่างระหว่าง UI และ API
มา dev Vue.js แบบหรอยๆ ฉบับเตาะแตะ Ep1
เชื่อมต่อ UI กับ API
การเชื่อมต่อต้องวางแผนออกแบบตั้งแต่ต้นว่าจะ แยกหรือ จะรวม API กับ UI บน Origin เดียวกันหรือเปล่า ถ้าแยกไปอีกที่หนึ่งก็ต้องจัดการเกี่ยวกับ CORS ให้ถูก ถ้ารวมส่วนใหญ่จะทำ reverse proxy เป็น /api เป็นต้น
แต่ระหว่าง dev อยู่นั้นเราสามารถตั้งค่า devServer ของ Webpack ได้ว่าถ้าเรียกมาที่ /api ให้ช่วย reverse ไปที่ไหน
file vue.config.js โดยปกติจะไม่ถูกสร้างขึ้นมาเราสามารถสร้างใหม่ได้เลยโดยอยู่ข้างนอก directory src หรือ อยู่ตรง directory ของ project นั่นเอง ตัวอย่างการตั้งค่า devServer โดยการ map /api แล้วชี้ target ไปยัง http://api/ ตรงนี้หลายคนอาจจะงงว่ามาจากไหน มันคือ fastAPI นั่นเอง โดยใน container ของ docker จะเห็นชื่อ service ที่เราตั้งใน docker-compose.yml
ติดตั้ง axios
ผมชอบใช้ axios สำหรับการเรียกใช้ API มากกว่า fetch วิธีที่ง่ายคือติดตั้งแบบ plugin โดยใช้ Vue UI ไปยัง icon ติดตั้ง plugin
เนื่องจาก plugin ตัวนี้มี bug นิดหน่อยต้องไปแก้ไข file config ของ axios ใน
src/plugins/axios.js
โดยแก้ไข
Plugin.install = function(Vue, options)
เป็น
Plugin.install = function(Vue)
เนื่องจาก file นี้ถูกสร้างมาทีหลังสิทธิ์จะเป็น root ต้องเปลี่ยนสิทธิ์ก่อนเหมือน ep1 ที่แนะนำไว้
sudo chown -R $UID:$GID project/ui
เมื่อแก้ไขแล้วให้ save และ หยุด task serve และ run task serve ใหม่
เรียก API
ผมจะลองเรียก API ใน App.vue เพื่อเอาค่าจาก API มาแสดงตรง Title บน Toolbar
ก่อนอื่นลองทดสอบเรียกแล้วแสดงผลทาง console.log ก่อนว่าได้หรือไม่
mounted() {
this.$axios.get('/api/info').then(res =\> {
console.log(res.data)
})
}
ผมจะเรียก api หลังจากที่ component ถูก mount เรียบร้อยแล้วโดยใช้ this.$axios ได้เลยเพราะตัว plugin ได้จัดการให้เราเรียบร้อยแล้ว ซึ่งเมื่อ request ไปยัง api จะมีการตอบกับมา ผมใช้ตัวแปร res รับค่ามาซึ่งค่าที่ได้จะอยู่ใน res.data
ผลออกมาแบบนี้แสดงว่าเราสามารถเรียก API ที่เราสร้างไว้ได้แล้ว คราวนี้ก็กำหนดตัวแปรมารับค่าแล้วนำไปแสดงครับ
ผลลัพธ์ที่ได้จะเห็นว่าค่าที่แสดงตรงตามที่ส่งมาจาก API
Vue.js devtools
ถ้าใครใช้ Firefox หรือ Chrome สามารถติดตั้ง plugin Vue.js devtools สำหรับการ Debug Vue.js โดยเฉพาะ
Firefox
เปิดหน้าจัดการ Extensions แล้วค้นหาด้วยคำว่า vue
Chrome
ใช้ Vue.js devtools
Vue.js devtools จะใช้กับ Web ที่เขียนด้วย Vue.js และ อยู่ในช่วง dev เท่านั้น Production จะไม่สามารถมา debug ได้ การใช้ก็ให้ inspect หน้าเว็บ Vue.js ซึ่งถ้าติดตั้ง Extension ไว้จะมี icon Vue.js สีเขียวๆ อยู่ด้วยเมื่อกดเข้าไปก็จะมีแผงควบคุมต่างหาก สามารถดูค่าต่างๆ ของ Components หรือ State ของ Vuex เป็นต้น
จริงๆ ตั้งใจจะเขียนให้ละเอียดมากกว่านี้ และ ลึกกว่านี้แต่ด้วยสังขารไม่เที่ยงนั่งนานไม่ได้ เลยขอนำมือใหม่มาลองสัมผัสกันเท่านี้ก่อน เดี๋ยวถ้ามีเวลาจะแอบมาเขียนเพิ่มเติมอีก ยังมีอีกหลายเรื่องที่อยากบันทึกเพราะเดี๋ยวลืม
Top comments (0)