มา dev Vue.js แบบหรอยๆ ฉบับเตาะแตะ Ep2
Tags: docker, vuetifyjs, fastapi, fullstack
Published: 2019-10-25 07:38:21

---
title: มา dev Vue.js แบบหรอยๆ ฉบับเตาะแตะ Ep2
published: true
date: 2019-09-22 21:08:19 UTC
tags: docker,vuetifyjs,fastapi,full-stack
canonical_url: 
---

ฉบับรวมร่างระหว่าง UI และ API

[มา dev Vue.js แบบหรอยๆ ฉบับเตาะแตะ Ep1](https://medium.com/@mrchoke/%E0%B8%A1%E0%B8%B2-dev-vue-js-%E0%B9%81%E0%B8%9A%E0%B8%9A%E0%B8%AB%E0%B8%A3%E0%B8%AD%E0%B8%A2%E0%B9%86-%E0%B8%89%E0%B8%9A%E0%B8%B1%E0%B8%9A%E0%B9%80%E0%B8%95%E0%B8%B2%E0%B8%B0%E0%B9%81%E0%B8%95%E0%B8%B0-ep1-f5265e15f265)

### เชื่อมต่อ UI กับ API

การเชื่อมต่อต้องวางแผนออกแบบตั้งแต่ต้นว่าจะ แยกหรือ จะรวม API กับ UI บน Origin เดียวกันหรือเปล่า ถ้าแยกไปอีกที่หนึ่งก็ต้องจัดการเกี่ยวกับ CORS ให้ถูก ถ้ารวมส่วนใหญ่จะทำ reverse proxy เป็น /api เป็นต้น

แต่ระหว่าง dev อยู่นั้นเราสามารถตั้งค่า devServer ของ Webpack ได้ว่าถ้าเรียกมาที่ /api ให้ช่วย reverse ไปที่ไหน

{% gist https://gist.github.com/mrchoke/e4e03a1dcccd080e28b35d854d6f9766 %}

file vue.config.js โดยปกติจะไม่ถูกสร้างขึ้นมาเราสามารถสร้างใหม่ได้เลยโดยอยู่ข้างนอก directory src หรือ อยู่ตรง directory ของ project นั่นเอง ตัวอย่างการตั้งค่า devServer โดยการ map /api แล้วชี้ target ไปยัง [http://api/](http://api/) ตรงนี้หลายคนอาจจะงงว่ามาจากไหน มันคือ fastAPI นั่นเอง โดยใน container ของ docker จะเห็นชื่อ service ที่เราตั้งใน docker-compose.yml

### ติดตั้ง axios

ผมชอบใช้ axios สำหรับการเรียกใช้ API มากกว่า fetch วิธีที่ง่ายคือติดตั้งแบบ plugin โดยใช้ Vue UI ไปยัง icon ติดตั้ง plugin

![](https://cdn-images-1.medium.com/max/912/1*sRtXpa3t-JUSQ7EJnOVWGw.png)<figcaption>เลือก axios</figcaption>

![](https://cdn-images-1.medium.com/max/532/1*Z9IFr-_8Q35Up3jfbU865w.png)<figcaption>รอสักครู่</figcaption>

เนื่องจาก 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 ก่อนว่าได้หรือไม่

![](https://cdn-images-1.medium.com/max/896/1*uzshndTUscc_E802Vh_Kvw.png)<figcaption>ทดสอบเรียก api</figcaption>

```
mounted() {

this.$axios.get('/api/info').then(res =\> {

console.log(res.data)

})

}
```

ผมจะเรียก api หลังจากที่ component ถูก mount เรียบร้อยแล้วโดยใช้ this.$axios ได้เลยเพราะตัว plugin ได้จัดการให้เราเรียบร้อยแล้ว ซึ่งเมื่อ request ไปยัง api จะมีการตอบกับมา ผมใช้ตัวแปร res รับค่ามาซึ่งค่าที่ได้จะอยู่ใน res.data

![](https://cdn-images-1.medium.com/max/656/1*AqTQwUaAXmhXZPNkRFRnIQ.png)<figcaption>ค่าที่ได้จาก API</figcaption>

ผลออกมาแบบนี้แสดงว่าเราสามารถเรียก API ที่เราสร้างไว้ได้แล้ว คราวนี้ก็กำหนดตัวแปรมารับค่าแล้วนำไปแสดงครับ

![](https://cdn-images-1.medium.com/max/968/1*S5SHagLVTBbIelE62diEZQ.png)<figcaption>ตั้งตัว object info มารับ</figcaption>

![](https://cdn-images-1.medium.com/max/1024/1*KaXKS_DmJhNkxNwQAp_ZZA.png)<figcaption>ให้ template แสดงผล</figcaption>

![](https://cdn-images-1.medium.com/max/1024/1*Ufd7dZpOviiPdUS4Iz_DJg.png)<figcaption>ผลลัพธ์</figcaption>

ผลลัพธ์ที่ได้จะเห็นว่าค่าที่แสดงตรงตามที่ส่งมาจาก API

### Vue.js devtools

ถ้าใครใช้ Firefox หรือ Chrome สามารถติดตั้ง plugin Vue.js devtools สำหรับการ Debug Vue.js โดยเฉพาะ

#### Firefox

เปิดหน้าจัดการ Extensions แล้วค้นหาด้วยคำว่า vue

![](https://cdn-images-1.medium.com/max/941/1*RfBphCZKVcl9-DQTSreVSQ.png)<figcaption>ค้นหา</figcaption>

![](https://cdn-images-1.medium.com/max/943/1*T1u2fVZG1uyoCOmINm0CiA.png)<figcaption>ของผมติดตั้งแล้วเลยขึ้นแบบนี้</figcaption>

#### Chrome

![](https://cdn-images-1.medium.com/max/1015/1*V5YGrlegwjmKYvdaz5UbVw.png)<figcaption>ค้นหาด้วยคำว่า vue</figcaption>

![](https://cdn-images-1.medium.com/max/1005/1*c8bBhhkMN8LZXkLaKBKvUg.png)<figcaption>Click Add to Chrome</figcaption>

ใช้ Vue.js devtools

Vue.js devtools จะใช้กับ Web ที่เขียนด้วย Vue.js และ อยู่ในช่วง dev เท่านั้น Production จะไม่สามารถมา debug ได้ การใช้ก็ให้ inspect หน้าเว็บ Vue.js ซึ่งถ้าติดตั้ง Extension ไว้จะมี icon Vue.js สีเขียวๆ อยู่ด้วยเมื่อกดเข้าไปก็จะมีแผงควบคุมต่างหาก สามารถดูค่าต่างๆ ของ Components หรือ State ของ Vuex เป็นต้น

![](https://cdn-images-1.medium.com/max/1024/1*Gqg92jKWG7vRrmM0CTz1Cg.png)<figcaption>Vue.js devtools บน Firefox</figcaption>

![](https://cdn-images-1.medium.com/max/938/1*-C7Pfp2I7uNlzXamDitzRQ.png)<figcaption>Vue.js devtools บน Chrome</figcaption>

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

* * *