ผลต่างระหว่างรุ่นของ "01204223/flask-backend-db"

จาก Theory Wiki
ไปยังการนำทาง ไปยังการค้นหา
แถว 4: แถว 4:
  
 
== Code เริ่มต้นของ project ==
 
== Code เริ่มต้นของ project ==
เพื่อความสะดวกเราจะเริ่มต้นจากโค้ดตัวอย่างที่รวบรวมมาแล้ว
+
เพื่อความสะดวกเราจะเริ่มต้นจากโค้ดตัวอย่างที่รวบรวมมาแล้ว โดย clone จาก [https://github.com/jittat/01204223-flask-react-todo-68 https://github.com/jittat/01204223-flask-react-todo-68]
 +
 
 +
เราจะแยกไดเร็กทอรีภายในเป็น backend และ frontend ให้ไปติดตั้งไลบรารีของทั้งสองส่วนดังนี้
 +
 
 +
=== Backend ===
 +
 
 +
เข้าไปใน backend  (ถ้าเป็น windows อย่าลืมใช้ cmd อย่าใช้ powershell)
 +
 
 +
cd backend
 +
 
 +
เราจะสร้าง virtual environment และติดตั้งไลบรารี  ขั้นแรกสร้าง virtual environment ก่อน
 +
 
 +
python -m venv venv
 +
 
 +
แล้ว activate  ถ้าเป็น linux/mac เรียก
 +
 
 +
./venv/bin/activate
 +
 
 +
ถ้าเป็น windows เรียก
 +
 
 +
venv\Scripts\activate
 +
 
 +
เมื่อ activate venv แล้ว ให้เรียก pip เพื่อติดตั้งไลบรารี     เราได้รวบรวมรายกายไลบรารีไว้ในไฟล์ requirements.txt แล้ว ดังนั้นเราจะสั่ง
 +
 
 +
pip install -r requirements.txt
 +
 
 +
เพื่อติดตั้งได้เลย  ถ้าติดตั้งเรียบร้อยทดลองเรียก flask backend ได้
 +
 
 +
ขั้นแรก ถ้าเป็น linux/mac ให้เรียก
 +
 
 +
export FLASK_APP=main.py
 +
 
 +
ถ้าเป็น windows เรียก
 +
 
 +
set FLASK_APP=main.py
 +
 
 +
แล้วเรียก
 +
 
 +
flask run --debug
 +
 
 +
=== Frontend ===
 +
 
 +
เปิดอีก terminal หนึ่ง แล้วเรียก
 +
 
 +
cd frontend
 +
 
 +
เรียก npm เพื่อติดตั้งไลบรารี
 +
 
 +
npm install
 +
 
 +
แล้วเรียก
 +
 
 +
npm run dev
 +
 
 +
เพื่อเปิดเซิร์ฟเวอร์ของ frontend react
  
 
== การติดตั้ง ==
 
== การติดตั้ง ==

รุ่นแก้ไขเมื่อ 23:04, 17 มกราคม 2569

หน้านี้เป็นส่วนหนึ่งของ 01204223

เราจะแก้ส่วน backend ให้ทำงานกับ database    แทนที่เราจะเขียน SQL ตรง ๆ เราจะให้ไลบรารีที่เรียกว่า ORM (Object Relational Mapper) ที่ทำให้เราเขียน-อ่านกับข้อมูลในฐานข้อมูลผ่านทาง object

Code เริ่มต้นของ project

เพื่อความสะดวกเราจะเริ่มต้นจากโค้ดตัวอย่างที่รวบรวมมาแล้ว โดย clone จาก https://github.com/jittat/01204223-flask-react-todo-68

เราจะแยกไดเร็กทอรีภายในเป็น backend และ frontend ให้ไปติดตั้งไลบรารีของทั้งสองส่วนดังนี้

Backend

เข้าไปใน backend (ถ้าเป็น windows อย่าลืมใช้ cmd อย่าใช้ powershell)

cd backend

เราจะสร้าง virtual environment และติดตั้งไลบรารี ขั้นแรกสร้าง virtual environment ก่อน

python -m venv venv

แล้ว activate ถ้าเป็น linux/mac เรียก

./venv/bin/activate

ถ้าเป็น windows เรียก

venv\Scripts\activate

เมื่อ activate venv แล้ว ให้เรียก pip เพื่อติดตั้งไลบรารี     เราได้รวบรวมรายกายไลบรารีไว้ในไฟล์ requirements.txt แล้ว ดังนั้นเราจะสั่ง

pip install -r requirements.txt

เพื่อติดตั้งได้เลย ถ้าติดตั้งเรียบร้อยทดลองเรียก flask backend ได้

ขั้นแรก ถ้าเป็น linux/mac ให้เรียก

export FLASK_APP=main.py

ถ้าเป็น windows เรียก

set FLASK_APP=main.py

แล้วเรียก

flask run --debug

Frontend

เปิดอีก terminal หนึ่ง แล้วเรียก

cd frontend

เรียก npm เพื่อติดตั้งไลบรารี

npm install

แล้วเรียก

npm run dev

เพื่อเปิดเซิร์ฟเวอร์ของ frontend react

การติดตั้ง

เราจะทำงานกับโค้ดเก่า

โมเดลแรก

ความสัมพันธ์ระหว่างโมเดล (โมเดล Comment)

Migration

แสดงผลบน React