หลังจากเราได้จัดทำบทความ React + Django ขึ้นมาแล้วมีคำถามเข้ามามากมายว่าแล้ว Vue ทำยังไง จะมีบทความ Vue + Django หรือเปล่า ทำให้ผมมาเขียนบทความเกี่ยวกับ Vue + Django ให้ทุกคนได้อ่านได้ลองทำกันเป็นบทความไม่ยาวมากเพราะในส่วนของ DRF ผมได้อธิบายไว้ละเอียดแล้วใน React + Django Ep 1 ทุกคนควรอ่านบทความนี้ก่อนค่อยมาอ่านบทความนี้ต่อเพราะในส่วน DRF จะไม่ได้อธิบายเพิ่มในบทความนี้เพื่อไม่ให้เสียเวลามาเริ่มจากการ setting โปรเจกต์กันเลยดีกว่าครับ
ในส่วนแรกที่ผมอยากให้ทำคือการตั้งค่าโปรเจกต์ของเราซึ่งในส่วนนี้ได้เขียนเอาไว้หมดแล้วในบทความ 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 ที่ ดังนี้
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
ถ้ายังไม่ได้ติดตั้ง 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
หน้าตาเว็บก็จะได้ประมาณนี้
โดยเราจะดึงข้อมูลจาก 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 อัตโนมัติให้ซึ่งเว็บก็จะแสดงผลตามนี้เลยครับสำหรับบทความ Vue+Django ก็จบไปแล้วนะครับเป็นบทความแสดงผลลัพธ์ง่าย ๆ หวังว่าทุกคนจะทดลองทำตามกันดูนะครับ
สามารถติดตามเราได้ที่
Facebook: stackpython
Youtube: stackpython
หนึ่งในบทความที่รวบรวมเอาการประยุกต์ใช้งาน Python Chatbot ไว้ครบครันโดยประยุกต์เข้ากับ Line, DialogFlow, Flask และ Heroku
March 4, 2021
PyCharm เรียกได้ว่าเป็นหนึ่งในเครื่องมือที่ใช้สำหรับเขียน Python ที่ดีที่สุด บทความนี้จะมารีวิวระหว่างตัว Free และ Pro กันครับ
March 3, 2021
สร้าง GUI ด้วยภาษา Python โดยใช้ Tkinter และในบทความนี้นอกจากเราจะมาทำความ เข้าใจกับ Tkinter แล้ว ยังจะมีการอธิบาย widgets และ layouts ต่าง ๆ ด้วย
March 1, 2021
คอร์สนี้เป็นหนึ่งในคอร์สที่มาแรงที่สุดของปีนี้ในส่วนของ Python Web Development
฿ 2,500 1,250 บาท
คอร์สนี้เป็นหนึ่งในคอร์สที่มาแรงที่สุดของปีนี้ในส่วนของ Python Web Development
฿ 9,900 บาท
คอร์สนี้เป็นหนึ่งในคอร์สที่มาแรงที่สุดของปีนี้ในส่วนของ Python Web Development
฿ 2,500 บาท