Django & Vue เรียนรู้และประยุกต์ใชัร่วมกับ database

หลังจากเราได้จัดทำบทความ React + Django ขึ้นมาแล้วมีคำถามเข้ามามากมายว่าแล้ว Vue ทำยังไง จะมีบทความ Vue + Django หรือเปล่า ทำให้ผมมาเขียนบทความเกี่ยวกับ Vue + Django ให้ทุกคนได้อ่านได้ลองทำกันเป็นบทความไม่ยาวมากเพราะในส่วนของ DRF ผมได้อธิบายไว้ละเอียดแล้วใน React + Django Ep 1 ทุกคนควรอ่านบทความนี้ก่อนค่อยมาอ่านบทความนี้ต่อเพราะในส่วน DRF จะไม่ได้อธิบายเพิ่มในบทความนี้เพื่อไม่ให้เสียเวลามาเริ่มจากการ setting โปรเจกต์กันเลยดีกว่าครับ

Setting Django project

ในส่วนแรกที่ผมอยากให้ทำคือการตั้งค่าโปรเจกต์ของเราซึ่งในส่วนนี้ได้เขียนเอาไว้หมดแล้วในบทความ React + Django Ep.1 สามารถเข้าไปอ่านแล้วทำตามกันได้เลยแต่ถ้าใครอ่านเข้าใจแล้วก็สามารถไป Clone project จาก Github ที่ผมได้สร้างไว้ตามลิ้งนี้เลยครับ

Git Hero-api (Source Code)

สำหรับคนที่ Clone Git ให้ทำตามขั้นตอนต่อไปนี้เพื่อให้ Project ทำงานอันดับแรกต้องสร้าง Virtual Environtment ขึ้นมาก่อนโดยใช้คำสั่ง

$ python -m venv env

ต้อง activate env เพื่อใช้งานถึงจะเริ่ม
ติดตั้งแพ็คเกจจาก Git ได้
สำหรับ Linux and OS X
$ source env/bin/activate

สำหรับ Windows
>>> env/Scripts/activate

เริ่มติดตั้งแพ็คเกจจากไฟล์ requirements.txt โดยใช้คำสั่ง
(env) pip install -r requirements.txt
ขั้นตอนถัดมาคือการ Migration
(env) python manage.py makemigrations
และต่อด้วยคำสั่ง

(env) python manage.py migrate

CORS (Cross-Origin Resource Sharing)
เมื่อเราต้องการส่งข้อมูลไปให้ Frontend โดยที่โดเมนของ Frontend และ Backend ต่างกันเราต้องใช้การกำหนด Cross-Origin Resource Sharing(CORS) เข้ามาช่วยในเรื่องนี้เราจำเป็นต้องกำหนด CORS เพื่อให้ทางฝั่งของ Frontend สามารถดึงข้อมูลของทาง backend ไปใช้ได้โดยเราสามารถจัดการได้ง่าย ๆ เพราะ Django ก็มี Package มารองรับเรื่องนี้อยู่แล้วที่ชื่อว่า django-cors-headers ซึ่งใช้งานไม่ยากแล้วยังเป็นตัวที่ Recommended อีกด้วย
โดยเริ่มจากการ Install package กันเลยครับ
(env) pip install django-cors-headers
หลังจากติดตั้งแล้วเราต้องเพิ่มข้อมูลลงใน setting.py 3 ที่ ดังนี้
เพิ่ม corsheaders ลงใน INSTALL
เพิ่ม 1 บรรทัดใน MIDDLEWARE จำเป็นต้องอยู่ข้างบนสุด
สร้าง CORS_ORIGIN_WHITELIST ขึ้นมาใหม่

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'corsheaders', #new
    
    'heros',
]
MIDDLEWARE = [ 
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'corsheaders.middleware.CorsMiddleware', # new
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
CORS_ORIGIN_WHITELIST = (
    'https://localhost:8080'
)

ซึ่งเป็นโดเมนเริ่มต้นของ Vue ถ้าเราต้องการเพิ่มโดเมนในการเชื่อมต่อก็สามารถเพิ่มเข้ามาในนี้ได้เลยเท่านี้ Django Project ของเราก็สามารถที่จะเชื่อมต่อ Frontend ได้แล้วแถมยังสามารถเชื่อมได้หลายโดเมนอีกด้วย

ก่อนที่เราจะไปเริ่มทำ Vue อย่าลืม start project ทิ้งไว้ด้วยละไม่งั้นเดี๋ยวมันจะไม่ทำงาน

(env) python manage.py runserver

Setup Vue project

ถ้ายังไม่ได้ติดตั้ง Vue ลงเครื่องก็สามารถติดตั้งได้โดยใช้ npm หรือ yarn ก็ได้ครับตามนี้

$ npm install -g @vue/cli

 หรือติดตั้งผ่าน Yarn

$ yarn global add @vue/cli

เมื่อเราได้ติดตั้ง vue ในเครื่องของเราเรียบร้อยแล้วสามารถที่จะสั่งคำสั่งสร้าง project ได้เลยโดยพิมพ์คำสั่งตามนี้

$ vue create vue-hero-project

แค่นี้เราก็สามารถสร้าง project ได้แล้วครับหลังจากนั้นก็ run server ขึ้นมาเพื่อให้ project ของเรานั้นเริ่มทำงานโดยพิมพ์คำสั่ง

$ yarn serve

หน้าตาเว็บก็จะได้ประมาณนี้

Data Fetching

โดยเราจะดึงข้อมูลจาก Database ผ่านทาง APIs ที่เราได้สร้างไว้ใน Django ซึ่งในจะใช้ fecth() ในการที่จะดึงเอาข้อมูลผ่าน API ข้อมูลจะถูกดึงมาอยู่ในรูปแบบ JSON (โดยสามารถใช้ axios ได้เหมือนกัน) ในส่วนตัวโค้ดนี้เราจะพิมพ์อยู่ใน created function เพราะเราต้องการให้มันดึงข้อมูลให้เสร็จก่อนถึงจะเอาข้อมูลไปใช้ภายในเว็บได้โดยเราจะเพิ่มโค้ดส่วนนี้ไปใน app.vue

export default {
  created(){
    fetch('http://127.0.0.1:8000/api/')     
      .then(async response => await response.json())
      .then(async response => {    
        console.log(response)
      })
  },
}

เมื่อเรารู้ว่าข้อมูลนั้นส่งมามีรูปแบบยังไงทำให้เราจัดการกับข้อมูลที่ส่งมาได้ง่ายยิ่งขึ้น หลังจากนั้นเราก็นำข้อมูลที่ดึงมาได้จาก API เก็บเข้าในตัวแปร 1 ตัว

export default {
  data(){
    return{
      heros: []
    }
  },
  created(){
    fetch('http://127.0.0.1:8000/api/')     
      .then(async response => await response.json())
      .then(async response => {
        this.heros = response
      })
  },
}

response คือข้อมูลที่เราได้จาก API อยู่ในรูปแบบ JSON และเก็บเข้าไปอยู่ในตัวแปร heros เพื่อนำไปแสดงผลในหน้าเว็บโดยเราจะแสดงผล Array ง่ายๆโดยใช้ v-for นะครับจะเขียนได้ตามนี้

<template>
  <div v-for="hero in heros" v-bind:key="hero.id">
    <h2>{{ hero.name }}</h2>
    {{ hero.description }}
  </div>
</template>

สำหรับบทความ Vue+Django ก็จบไปแล้วนะครับเป็นบทความแสดงผลลัพธ์ง่าย ๆ หวังว่าทุกคนจะทดลองทำตามกันดูนะครับ

สามารถติดตามเราได้ที่
Facebook: stackpython
Youtube: stackpython