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

S T A C K P Y T H O N

Littikrai
Web Development
March 5, 2021, 9:59 p.m.
Sept. 26, 2020

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 myvenv/bin/activate
สำหรับ Windows
.\env\Scripts\activate

เริ่มติดตั้งแพ็คเกจจากไฟล์ requirements.txt โดยใช้คำสั่ง

(env) pip install -r requirements.txt

ขั้นตอนถัดมาคือการ Migration

python manage.py makemigrations

และต่อด้วยคำสั่ง

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 กันเลยครับ

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'
)

เราสามารถกำหนด 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

# OR

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)
      })
  },
}

จะเห็นว่าเราจะดึงข้อมูลจาก 127.0.0.1:8000/api ซึ่งเป็น Server ของ Django ที่เราได้รันไว้ในเครื่องของเราและได้ console.log ออกมาดูก็จะเห็นว่าข้อมูลมีรูปแบบประมาณนี้

เมื่อเรารู้ว่าข้อมูลนั้นส่งมามีรูปแบบยังไงทำให้เราจัดการกับข้อมูลที่ส่งมาได้ง่ายยิ่งขึ้น หลังจากนั้นเราก็นำข้อมูลที่ดึงมาได้จาก 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>

จะเห็นว่า v-for จะอ้างอิงจาก heros และดึงข้อมูลฮีโร่ออกมาทีละตัวเพื่อแสดงชื่อและคำอธิบายของแต่ละฮีโร่ซึ่งเราระบุ key โดยใช้ hero.id ได้เลยเพราะทุกตัวมี id ของมันอยู่แล้ว django ได้สร้าง id อัตโนมัติให้ซึ่งเว็บก็จะแสดงผลตามนี้เลยครับ