เรียนรู้การใช้งาน Django Rest Framework with React.js [EP.2]

สวัสดีครับ พบกันกับบทความ Django Rest Framework with React กันในบทความที่สองต่อ ซึ่งก็จะจบกันในบทความนี้เลยครับสำหรับซีรีย์นี้

ก่อนที่จะอ่านบทความใน Ep นี้เข้าใจ ต้องผ่าน Ep.1 กันก่อนนะครับ ซึ่งเพื่อน ๆ ก็สามารถเข้าไปอ่านตามลิ้งค์นี้ได้เลยครับ Django Rest Framework with React.js [EP.1]

CORS

เมื่อเราต้องการส่งข้อมูลไปให้ 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 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:3000'
)

เราสามารถกำหนด CORS_ORIGIN_WHITELIST ได้หลายโดเมน

แต่ในที่นี้เรามีแค่โดเมนเดี่ยวคือ https://localhost:3000 
ซึ่งเป็นโดเมนเริ่มต้นของ react

เสร็จไปแล้วในส่วนของการตั้งค่า backend หลังจากนั้นรันเซิร์ฟเพื่อให้ api ทำงาน

python manage.py runserver

หลังจากนี้มาเริ่มสร้าง React project กันต่อเลยดีกว่าครับ

React

ในส่วนของ react จะเป็น frontend ดึงข้อมูลผ่าน Api ที่เราสร้างไว้ซึ่งเราจะลงในส่วนของ react ไม่ได้ลึกมากเริ่มจากการสร้างโปรเจกต์โดยเราจะใช้ npx ในการช่วยสร้างโปรเจกต์ react ขึ้นมาแต่ก่อนอื่นเราจะใช้ npx ได้ต้องติดตั้งก่อนคำสั่งคือ

npm install npx

Note: ก่อนที่จะใช้ npm จะต้องติดตั้ง Node.js ก่อนจึงจะสามารถใช้ npm ได้

หลังจากติดตั้งตัว npx แล้วเราก็สามารถสร้างโปรเจกต์ของเราได้เลยโดยพิมและต้องดูที่อยู่ในโฟลเดอร์ที่จัดไว้เป็นที่อยู่ของ frontend ไหมอย่าไปลงซ้ำกับ backend นะ

npx create-react-app my-hero

หลังจากนั้นเราก็ทดลองรันเซิร์ฟเวอร์ดูนะครับ

cd my-hero

npm start

Note: ถ้าเกิดว่าใครติดตั้ง yarn ไว้ในเครื่องมันจะเลือก yarn ให้เป็นค่าเริ่มต้นเวลาจะเริ่มโปรเจกต์ต้องสั่งว่า yarn start

หมุน ๆๆ ๆๆๆๆอย่างที่บอกว่าผมจะไม่ลงลึกแล้วก็จะไม่แยก function ไรให้มันดูยากใน react ผมจะเขียนทุกอย่างอยู่ใน app.js เพื่อให้ง่ายต่อการดูและทำความเข้าใจ

สิ่งที่เราต้องทำก็คือการที่เราจะต้องดึงข้อมูล hero ผ่านทาง api ของ django มาแสดงในหน้าเว็บซึ่งเราจะใช้การเขียนแบบ react hook เพื่อให้ง่ายต่อการเข้าใจ

เราจะสร้าง useState ตัวนึงขึ้นมาเก็บข้อมูล hero ที่เราดึงมาจาก api สร้างตัวแปลมาเก็บตามนี้

 const [heros, setHeros] = useState([])

Note: อย่าลืม Import useState มาใช้ด้วยนะครับ

ถัดมาเราจะ fetch ข้อมูลจาก api ที่เราได้สร้างไว้โดยต้องอยู่ใน useEffect() และต้องทำการ asynchronously โดยใช้ async await จากนั้นเราก็เอาข้อมูลที่ได้มาแปลงให้อยู่ในรูปแบบ json และก็ set ค่าให้กับตัวแปล hero ตามด้านล่างนี้

useEffect(async () => {
    try {
      const res = await fetch('http://127.0.0.1:8000/api/')
      const heros_data = await res.json()
      setHeros(heros_data)
    } catch (error) {
        console.log(error)
      }
 }, [])

ตอนนี้เราก็ได้ข้อมูลที่อยู่ใน database มาอยู่ในตัวแปล heros ซึ่งถ้าลอง console.log(heros) จะแสดงดังนี้

แล้วถ้าจะให้ข้อมูลทั้งหมดที่อยู่ในตัวแปรขึ้นมาแสดงบนเว็บยังไง? สังเกตดูว่าตัวแปรนี้จัดอยู่ใน array เพราะฉะนั้นถ้าเรียกมาแสดงตัวเดียวโดด ๆ ไม่ได้ต้อง map แล้วค่อยดึงข้อมูลมาแสดงที่ละอัน ๆ ตามโค้ดด้านล่างครับ

<div className="App">
  <header className="App-header">
    {heros.map(item => (
      <div key={item.id}>
        <h1>{item.name}</h1>
        <span>{item.description}</span>
      </div>
    ))}
  </header>
</div>

item เป็นตัวแปรแทนข้อมูล 1 ก้อนแล้วเราก็ dot เอาข้อมูลด้านในมาดังตัวอย่างคือ item.name, item.description ทดลองรันแล้วมาดูผลลัพท์กันดีกว่าครับ

Note: ห้ามลืมรัน django server นะครับไม่งั้นเวลา fetch มันจะขึ้น error

จะเห็นว่าข้อมูลที่เราเก็บไว้ใน database จะแสดงออกมาทั้งหมดถ้าลองเพิ่มข้อมูลไปมากกว่านี้ชื่อฮีโร่ก็จะมากกว่า 3 ตัวยังไงก็ลองเพิ่มกันดูได้นะครับ

จบแล้วครับสำหรับบทความ django + react ซึ่งดูแล้วไม่ค่อยอยากเท่าไหร่ใช่ไหมครับอันนี้เป็นตัวอย่างในการ fetch ข้อมูลจาก api แล้วก็นำมาแสดงผลบนเว็บแบบง่าย ซึ่งถ้าใครชอบบทความเกี่ยวกับ react ก็สามารถบอกมาในคอมเม้นได้นะครับอาจจะเขียนอะไรเพิ่มเติมมากกว่านี้ในอนาคต ขอบคุณทุกคนที่อ่านจนจบครับไม่เข้าใจตรงไหนสามารถถามได้นะครับ

ฝาก YouTube Channel ของ STACKPYTHON กันด้วยนะครับ

หรือเข้าดูคอร์สไพธอนของเราได้ที่

https://stackpython.co/courses