前言

Frontend

前端框架的選擇對於項目的成功至關重要。在探索過程中發現， Vue 和 React 兩者都受到廣泛推薦。

React 在開發社群中享有廣泛的支持和擁護，並且擁有龐大的生態系統。這些因素表明 React 是一個穩固、成熟且可靠的選擇。

雖然有部分人認為 React 的學習曲線較陡峭，但對技術的學習充滿熱情，並相信這將是一個有益的挑戰。

學習 React 將提供更多靈活性和創造力，有助於將來開發更複雜的應用程序。
Vue 和 React 在某些方面有相似之處，日後如需轉向 Vue ，這些共通點將使過渡變得更加容易。

Backend

選擇後端框架時，希望找到一個功能豐富且強大的解決方案，以滿足比價網站的複雜需求。

經過對不同框架的評估，最終選擇了 Django 作為後端框架。

成熟且廣受歡迎的 Python Web 框架，提供了強大的功能，如內建的數據庫 ORM 、管理後台、用戶身份驗證等。
優雅設計和易於擴展的特性將帶來更高效且流暢的開發體驗。

建立虛擬環境

1	conda create --name <虛擬環境名稱> python=<python版本>

啟動虛擬環境

1	activate <虛擬環境名稱>

安裝 Django 套件

1 2	pip install django==<需要的版本> pip install django-cors-headers

建立 Django project 和 Django application

1
2
3

django-admin startproject <專案名稱>
cd <專案名稱>
python manage.py startapp backend

編輯 Django project 內的檔案

settings.py

BASE_DIR = Path(__file__).resolve().parent.parent

ALLOWED_HOSTS = ['*']

INSTALLED_APPS = [
    ...
    "backend",
    'corsheaders',
]

MIDDLEWARE = [
    ...
    "corsheaders.middleware.CorsMiddleware",
]

ROOT_URLCONF = "priceComparison.urls"

TEMPLATES = [
    {
        ...
        "DIRS": [os.path.join(BASE_DIR, "frontend/build"),],
        ...
    },
]

LANGUAGE_CODE = "zh-hant"

TIME_ZONE = "Asia/Taipei"

STATIC_URL = "static/"

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/build/static"),
]

CORS_ALLOWED_ORIGINS = [
    'http://localhost:3000',
]

urls.py

from django.views.generic import TemplateView

urlpatterns = [
    path("admin/", admin.site.urls),
    path('', TemplateView.as_view(template_name='index.html')),
]

建立 React project

1
2
3

npx create-react-app frontend
cd frontend
npm run build

執行 Django 專案

1	python manage.py runserver

查看網址

會發現 (http://localhost:8000/) 網頁會被引導到 React 前端 (http://localhost:3000/) 頁面
這樣就代表成功串接前後端囉!

Howard的程式筆記

React + Django 環境架設

前言