มา dev Vue.js แบบหรอยๆ ฉบับเตาะแตะ Ep2

ฉบับรวมร่างระหว่าง 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 เป็นต้น

จริงๆ ตั้งใจจะเขียนให้ละเอียดมากกว่านี้ และ ลึกกว่านี้แต่ด้วยสังขารไม่เที่ยงนั่งนานไม่ได้ เลยขอนำมือใหม่มาลองสัมผัสกันเท่านี้ก่อน เดี๋ยวถ้ามีเวลาจะแอบมาเขียนเพิ่มเติมอีก ยังมีอีกหลายเรื่องที่อยากบันทึกเพราะเดี๋ยวลืม