如何使用 Django 和 React 建立一個簡單的應用程式

如何使用 Django 和 React 建置一個簡單的應用程式

想打造一個具備強大後端與動態前端的網頁應用程式嗎？將 Python 框架 Django 與 JavaScript 函式庫 React 結合，正是實現此目標的絕佳方式。Django 負責處理後端任務，例如資料庫管理與 API 建立；而 React 則負責打造響應迅速且具互動性的使用者介面。

關鍵步驟：

1. 設定開發環境：
   • 為 Django 安裝 Python 3.x，並為 React 安裝 Node.js。
   • 使用虛擬環境來管理 Python 依賴項。
   • 使用 python --version, node --version，並 npm --version.
2. 整理您的專案：
   • 為 Django 後端和 React 前端分別建立獨立的資料夾。
   • 使用 django-admin startproject 進行後端設定，並使用 npx create-react-app 來初始化前端。
3. 建置後端：
   • 建立 Django 應用程式、定義模型，並產生遷移檔。
   • 使用 Django REST Framework 建立 API 端點。
   • 進行設定 django-cors-headers 以啟用前端與後端之間的通訊。
4. 開發前端：
   • 使用 React 元件來管理任務與使用者互動。
   • 安裝 Axios 來處理 API 請求，並將其與 Django 端點整合。
   • 使用 CSS 為應用程式進行樣式設計，打造簡潔的用戶介面。
5. 連線與測試：
   • 在 localhost:8000 並在 localhost:3000.
   • 使用 Postman 等工具或在瀏覽器中直接測試 API 端點。
   • 確保 CORS 設定正確無誤，以確保通訊順暢。

此設定可讓您高效建置後端與前端明確分離的全端應用程式。請依照以下步驟，建立一個可擴展且具互動性的網頁應用程式。

初學者專用 Django 與 React 專案 — 打造全端筆記應用程式

設定需求與安裝

在開始建置您的 Django 和 React 應用程式之前，務必先設定開發環境，並安裝必要的工具與依賴項。此基礎架構將有助於您在後續開發過程中，順利地建立、整合及測試 Django 和 React 元件。

系統需求與工具

要開始進行開發，您的開發機器需要安裝 Python 3.x（用於 Django）以及 Node.js（用於 React）。具體而言，Django 5.0 需要 Python 3.x，而 React 則需搭配 Node.js 12 版或更高版本。

安裝 Python：您可以直接從 Python 官方網站下載，或使用系統的套件管理工具。對於 macOS 使用者，Homebrew 可讓安裝過程更為簡便，請執行 brew install python。Windows 使用者應從 python.org 下載安裝程式，而 Linux 使用者則可透過類似 apt install python3 ，或在其他發行版中使用類似指令。

設定 Node.js 與 npm：Node.js 內建 npm（Node 套件管理器）。您需要 npm 6 版或更高版本，其中 7.5.4 版是較為穩定的選擇。請從 nodejs.org 下載 Node.js，該安裝檔會自動包含 npm。

Python 虛擬環境：使用虛擬環境是管理專案特定依賴項並避免衝突的關鍵。您可以使用內建的 venv 模組，或使用 pipenv 或 virtualenvwrapper 等工具來獲得更多功能。若您使用 Windows 系統， virtualenvwrapper-win 套件則提供類似的功能。

要確認安裝是否成功，請在終端機中執行以下指令：

python --version
node --version
npm --version

建立專案結構

井然有序的專案結構對於將後端與前端程式碼分開並保持可管理性至關重要。首先為您的專案建立一個主目錄：

mkdir django-react-app
cd django-react-app

在此目錄內建立兩個資料夾：一個用於 Django 後端，另一個用於 React 前端。這種分離設計讓您能夠獨立維護和部署各個部分。

在專案目錄中設定 Python 虛擬環境：

python -m venv venv

啟用虛擬環境：

• 在 macOS/Linux 上： source venv/bin/activate
• 在 Windows 上： venv\Scripts\activate

此步驟可確保專案的所有 Python 依賴項均被隔離。

安裝所需套件

環境準備就緒後，接下來要安裝 Django 和 React 所需的套件。

Django 後端套件：在虛擬環境處於活動狀態時，請使用 pip 安裝 Django 及其支援函式庫：

pip install django
pip install djangorestframework
pip install django-cors-headers

• Django 負責處理伺服器端邏輯、資料庫管理以及 URL 路由。
• Django REST Framework 簡化了建置 RESTful API 的流程，讓您能更輕鬆地為 React 前端建立端點。
• Django-cors-headers 可啟用跨來源資源共享（CORS），這對於 React 前端（運行於 3000 埠）與 Django 後端（運行於 8000 埠）之間的通訊至關重要。

React 前端設定：要設定您的 React 環境，請使用 create-react-app 工具。此指令會初始化一個 React 專案並安裝所有必要的依賴項：

npx create-react-app frontend

這將在 frontend 目錄中建立一個新的 React 專案，其中包含必要的套件、開發工具及建置腳本。

額外的前端套件：設定完 React 專案後，請導航至 frontend 目錄，並安裝 Axios——這是一個用於向您的 Django API 發送 HTTP 請求的函式庫：

cd frontend
npm install axios

至此，您的開發環境已完整配備 Python 3.x、Django、Node.js、React 以及所有必要的工具。Python 虛擬環境確保您的後端依賴項相互隔離，而 npm 則會獨立處理您的 JavaScript 套件。現在，您已經準備好開始建置您的全端應用程式了！

使用 Django 建置後端

設定包含資料庫模型、API 端點，並與 React 前端整合的 Django 後端。

建立 Django 專案與應用程式

首先建立一個 Django 專案，其中包含設定、資料庫配置以及應用程式專屬的選項。在此專案內，您將建置一個 Django 應用程式——這是一個專為特定任務（如管理使用者資料或內容）設計的 Python 套件。

請導航至專案的根目錄（即您設定虛擬環境的位置），並建立 Django 專案：

django-admin startproject backend .

此指令會直接在當前目錄中產生專案檔案，無需額外建立資料夾。您會注意到出現了新的檔案，例如 manage.py （用於執行 Django 指令）以及一個 backend 目錄，其中包含諸如 settings.py, urls.py, asgi.py，以及 wsgi.py.

接下來，建立一個應用程式來處理特定功能。例如，一個任務管理系統：

python manage.py startapp tasks

這會建立一個 tasks 目錄，其中包含必要的檔案，例如 models.py, views.py, admin.py，以及一個 migrations 資料夾。請務必避免與「django」或「test」等內建名稱產生命名衝突。

請透過將該應用程式新增至 INSTALLED_APPS 清單中 backend/settings.py:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'corsheaders',
    'tasks',  # Register your app
]

設定模型與序列化器

使用 Django 模型定義您的資料結構。例如，一個簡單的 Task 任務管理應用程式的模型可新增至 tasks/models.py:

from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField(blank=True)
    completed = models.BooleanField(default=False)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    class Meta:
        ordering = ['-created_at']

    def __str__(self):
        return self.title

此模型包含諸如 CharField 用於短文字， TextField 用於較長內容， BooleanField 用於真/假值，以及 DateTimeField 用於時間戳記。 Meta 類別會指定諸如預設排序等選項。

透過執行遷移來將模型套用至您的資料庫：

python manage.py makemigrations tasks
python manage.py migrate

若要將模型資料轉換為 JSON，請使用 Django REST Framework 的序列化器。在 tasks/serializers.py中，為該 Task 模型定義一個序列化器：

from rest_framework import serializers
from .models import Task

class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = ['id', 'title', 'description', 'completed', 'created_at', 'updated_at']
        read_only_fields = ['created_at', 'updated_at']

該 ModelSerializer 會根據模型自動產生欄位與方法。明確列出欄位可確保您不會無意間洩露敏感資料。

建立 API 端點

Django REST Framework 簡化了 API 的建立。對於標準的 CRUD 操作，請使用 ViewSets 搭配路由器，以建立簡潔且符合 REST 原則的結構。

在 tasks/views.py中，建立 API 檢視：

from rest_framework import viewsets
from rest_framework.permissions import AllowAny
from .models import Task
from .serializers import TaskSerializer

class TaskViewSet(viewsets.ModelViewSet):
    queryset = Task.objects.all()
    serializer_class = TaskSerializer
    permission_classes = [AllowAny]  # For development only

該 ModelViewSet 會自動處理任務的列出、建立、檢索、更新及刪除。

在 tasks/urls.py:

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import TaskViewSet

router = DefaultRouter()
router.register(r'tasks', TaskViewSet)

urlpatterns = [
    path('api/', include(router.urls)),
]

將這些 URL 納入主 backend/urls.py 檔案中：

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('tasks.urls')),
]

設定 CORS 標頭

為了讓您的 React 前端（運行於 3000 埠）能與 Django 後端（運行於 8000 埠）進行通訊，請設定跨來源資源共用（CORS）。若未進行此設定，瀏覽器會基於安全考量阻擋跨來源請求。

更新 backend/settings.py 以加入 CORS 設定：

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # Add this at the top
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

# CORS settings for development
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",  # React development server
    "http://127.0.0.1:3000",
]

CORS_ALLOW_CREDENTIALS = True

若要快速測試，您可以使用 CORS_ALLOW_ALL_ORIGINS = True，但指定允許的來源會更安全。

測試 API 端點

在整合 React 前端之前，請先測試 API 端點，以確保其運作符合預期。啟動 Django 開發伺服器：

python manage.py runserver

透過 http://127.0.0.1:8000/api/tasks/。使用可瀏覽的 API 來測試 GET 和 POST 請求等操作。

或者，可使用 cURL 或 Postman 進行測試：

# Test GET request to list tasks
curl -X GET http://127.0.0.1:8000/api/tasks/

# Test POST request to create a task
curl -X POST http://127.0.0.1:8000/api/tasks/ \
  -H "Content-Type: application/json" \
  -d '{"title": "Test Task", "description": "This is a test task"}'

若要進行自動化測試，請在 tasks/tests.py:

from rest_framework.test import APITestCase
from rest_framework import status
from .models import Task

class TaskAPITestCase(APITestCase):
    def test_create_task(self):
        # Add your assertions and test logic here
        pass

後端建置完成後，您已準備好將其與 React 前端進行整合。

使用 React 建置前端

為了為您的 Django 後端建立一個引人入勝的介面，您將使用 React 來管理使用者互動——從檢視任務到新增任務等所有操作。

設定 React 專案

首先，請使用 Create React App 設定您的 React 前端。請導航至專案的根目錄（即您的 Django 後端所在位置），並執行以下指令：

npx create-react-app frontend
cd frontend

此指令會建立一個 React 應用程式，並包含以下必要檔案： package.json, src/App.js，以及 public/index.html。此外，還包含用於打包的 webpack、用於 JavaScript 編譯的 Babel，以及用於測試的開發伺服器等工具。

接著，安裝 Axios 來處理傳送至 Django API 的 HTTP 請求：

npm install axios

Axios 透過管理 JSON 解析，並提供比內建 fetch() 函式更完善的錯誤處理機制，讓 API 呼叫變得更簡單。它還支援請求與回應攔截器等功能。

此時您的資料夾結構應如下所示：

project-root/
├── backend/
│   ├── manage.py
│   ├── backend/
│   └── tasks/
└── frontend/
    ├── package.json
    ├── public/
    └── src/

為確認一切運作正常，請啟動 React 開發伺服器：

npm start

這將在 http://localhost:3000，並顯示預設的 React 歡迎頁面。開發期間請保持此伺服器運行——當您進行變更時，它會自動重新載入。

建立 React 元件

讓我們建立一個 TaskList 元件，用以顯示從您的 Django API 擷取的任務。請在 src/components/TaskList.js:

import React from 'react';

const TaskList = ({ tasks, onToggleComplete, onDeleteTask }) => {
  return (
    <div className="task-list">
      <h2>Your Tasks</h2>
      {tasks.length === 0 ? (
        <p>No tasks available. Create your first task!</p>
      ) : (
        <ul>
          {tasks.map((task) => (
            <li key={task.id} className={`task-item ${task.completed ? 'completed' : ''}`}>
              <div className="task-content">
                <h3>{task.title}</h3>
                <p>{task.description}</p>
                <small>Created: {new Date(task.created_at).toLocaleDateString()}</small>
              </div>
              <div className="task-actions">
                <button 
                  onClick={() => onToggleComplete(task.id, !task.completed)}
                  className={task.completed ? 'btn-undo' : 'btn-complete'}
                >
                  {task.completed ? 'Undo' : 'Complete'}
                </button>
                <button 
                  onClick={() => onDeleteTask(task.id)}
                  className="btn-delete"
                >
                  Delete
                </button>
              </div>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default TaskList;

接著，建立一個 TaskForm 用於新增任務的元件。將此內容加入 src/components/TaskForm.js:

import React, { useState } from 'react';

const TaskForm = ({ onAddTask }) => {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!title.trim()) return;

    setIsSubmitting(true);
    try {
      await onAddTask({ title: title.trim(), description: description.trim() });
      setTitle('');
      setDescription('');
    } catch (error) {
      console.error('Error adding task:', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="task-form">
      <h2>Add New Task</h2>
      <div className="form-group">
        <input
          type="text"
          placeholder="Task title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          disabled={isSubmitting}
          required
        />
      </div>
      <div className="form-group">
        <textarea
          placeholder="Task description (optional)"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          disabled={isSubmitting}
          rows="3"
        />
      </div>
      <button type="submit" disabled={isSubmitting || !title.trim()}>
        {isSubmitting ? 'Adding...' : 'Add Task'}
      </button>
    </form>
  );
};

export default TaskForm;

若要進行基本樣式設定，請建立一個 src/App.css 檔案並加入：

.task-list {
  margin: 20px 0;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  border-radius: 5px;
}

.task-item.completed {
  background-color: #f0f8f0;
  text-decoration: line-through;
  opacity: 0.7;
}

.task-form {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group input, .form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.btn-complete, .btn-undo, .btn-delete {
  margin-left: 10px;
  padding: 5px 10px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.btn-complete { background: #28a745; color: white; }
.btn-undo { background: #ffc107; color: black; }
.btn-delete { background: #dc3545; color: white; }

狀態管理與 API 整合

React Hooks，例如 useState 和 useEffect 等 React Hooks，可輕鬆管理狀態並與您的 Django 後端進行互動。為了集中管理 API 呼叫，請建立一個服務檔案 src/services/api.js:

import axios from 'axios';

const API_BASE_URL = 'http://127.0.0.1:8000/api';

const api = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

export const taskAPI = {
  getTasks: () => api.get('/tasks/'),
  createTask: (taskData) => api.post('/tasks/', taskData),
  updateTask: (taskId, taskData) => api.put(`/tasks/${taskId}/`, taskData),
  deleteTask: (taskId) => api.delete(`/tasks/${taskId}/`),
};

export default api;

最後，將所有內容整合至 src/App.js:

import React, { useState, useEffect } from 'react';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';
import { taskAPI } from './services/api';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchTasks();
  }, []);

  const fetchTasks = async () => {
    try {
      setLoading(true);
      const response = await taskAPI.getTasks();
      setTasks(response.data);
    } catch (err) {
      setError(err);
    } finally {
      setLoading(false);
    }
  };

  // Additional methods for adding, updating, and deleting tasks would go here
}

透過此設定，您的 React 前端已準備就緒，既能互動式地處理任務，又能與 Django 後端無縫通訊。

串接 Django 與 React

既然您的後端和前端都已上線並正常運作，下一步便是確保兩者之間能順暢通訊。這涉及設定 API 端點、管理請求，以及解決任何整合過程中的小問題。

在 React 中設定 API URL

您的 React 應用程式需要知道如何定位 Django API 端點。為此，請更新 src/services/api.js 檔案，加入特定環境的設定：

import axios from 'axios';

// Determine API base URL based on environment
const getApiBaseUrl = () => {
  if (process.env.NODE_ENV === 'production') {
    return process.env.REACT_APP_API_URL || 'https://your-production-domain.com/api';
  }
  return 'http://127.0.0.1:8000/api';
};

const API_BASE_URL = getApiBaseUrl();

const api = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
  timeout: 10000, // 10 second timeout
});

export const taskAPI = {
  getTasks: () => api.get('/tasks/'),
  createTask: (taskData) => api.post('/tasks/', taskData),
  updateTask: (taskId, taskData) => api.put(`/tasks/${taskId}/`, taskData),
  deleteTask: (taskId) => api.delete(`/tasks/${taskId}/`),
};

export default api;

在生產環境中，請將 .env 檔案，內容如下：

REACT_APP_API_URL=https://your-production-domain.com/api

此設定可確保您的 React 應用程式無論是在本地開發環境中，還是部署至生產環境，都能與 Django 後端無縫互動。配置好 API 端點後，您便可以開始擷取並處理後端資料。

從後端擷取資料

設定好 API 配置後，您即可執行 CRUD 操作，在 React 與 Django 之間管理資料。請更新 src/App.js 以處理這些操作：

import React, { useState, useEffect } from 'react';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';
import { taskAPI } from './services/api';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchTasks();
  }, []);

  const fetchTasks = async () => {
    try {
      setLoading(true);
      setError(null);
      const response = await taskAPI.getTasks();
      setTasks(response.data);
    } catch (err) {
      setError('Failed to fetch tasks. Please check your connection.');
      console.error('Error fetching tasks:', err);
    } finally {
      setLoading(false);
    }
  };

  const handleAddTask = async (taskData) => {
    try {
      const response = await taskAPI.createTask(taskData);
      setTasks(prevTasks => [...prevTasks, response.data]);
    } catch (err) {
      console.error('Error adding task:', err);
      throw err; // Re-throw to let TaskForm handle the error
    }
  };

  const handleToggleComplete = async (taskId, completed) => {
    try {
      const taskToUpdate = tasks.find(task => task.id === taskId);
      const updatedTaskData = { ...taskToUpdate, completed };

      const response = await taskAPI.updateTask(taskId, updatedTaskData);
      setTasks(prevTasks =>
        prevTasks.map(task =>
          task.id === taskId ? response.data : task
        )
      );
    } catch (err) {
      console.error('Error updating task:', err);
    }
  };

  const handleDeleteTask = async (taskId) => {
    if (!window.confirm('Are you sure you want to delete this task?')) {
      return;
    }

    try {
      await taskAPI.deleteTask(taskId);
      setTasks(prevTasks => prevTasks.filter(task => task.id !== taskId));
    } catch (err) {
      console.error('Error deleting task:', err);
    }
  };

  if (loading) {
    return <div className="loading">Loading tasks...</div>;
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>Task Manager</h1>
      </header>
      <main className="container">
        {error && <div className="error-message">{error}</div>}
        <TaskForm onAddTask={handleAddTask} />
        <TaskList 
          tasks={tasks}
          onToggleComplete={handleToggleComplete}
          onDeleteTask={handleDeleteTask}
        />
      </main>
    </div>
  );
}

export default App;

這段程式碼負責處理任務的建立、更新、刪除以及錯誤管理。使用者介面會立即更新以提供流暢的使用者體驗，而錯誤則會透過還原變更或顯示適當訊息來妥善處理。

測試與除錯連線

在串接 Django 與 React 時，最常見的障礙之一是處理 CORS（跨來源資源共享）錯誤。這些錯誤的產生，是因為瀏覽器基於安全考量，會阻擋不同來源之間的請求。在開發過程中，React 通常運行於 localhost:3000上運行，而 Django 則在 localhost:8000，從而形成跨來源的情境。

要解決 CORS 問題，請確保您已依照「設定 CORS 標頭」一節的說明，在 Django 設定中配置好 CORS 標頭。完成變更後，請重新啟動 Django 伺服器以套用設定。

以下是幾個常見的 API 請求錯誤及其解決方案：

• HTTP 400（請求錯誤）：這通常表示請求載荷中缺少某些必填資料，或資料格式不正確。例如，2023 年 11 月，FintanMi 在一個使用 Django REST Framework 和 React 的專案中建立社群時，因請求中缺少 owner 請求中缺少該欄位。請務必仔細檢查，確保您的前端已傳送 Django 模型所預期的一切必填欄位。
• HTTP 405（方法不允許）：當 API 端點不支援所使用的 HTTP 方法時，便會發生此錯誤。例如，FintanMi 在嘗試刪除一則貼文時回報了 405 錯誤，此問題透過將 Django 檢視從 generics.RetrieveUpdateAPIView 修改為 generics.RetrieveUpdateDestroyAPIView ，以加入對 DELETE requests。

執行與測試應用程式

在 Django 後端與 React 前端連線完成後，現在是時候啟動兩台開發伺服器並測試應用程式了。這涉及同時運行兩台伺服器，並確保一切能順暢協作。

啟動開發伺服器

要執行您的 Django-React 應用程式，您需要開啟兩個終端機視窗——每個伺服器各佔一個。此設定可讓後端與前端獨立運作，同時透過 API 呼叫進行通訊。

啟動 Django 後端伺服器：

1. 開啟第一個終端機視窗，並導航至您的 Django 專案根目錄。

2. 啟動 Python 虛擬環境：

   source venv/bin/activate
   

3. 啟動 Django 開發伺服器：

   python manage.py runserver
   

   伺服器將可透過以下網址存取： http://127.0.0.1:8000/.

啟動 React 前端伺服器：

1. 開啟第二個終端機視窗，並導航至您的 React 專案目錄：

   cd frontend
   

2. 啟動 React 開發伺服器：

   npm start
   

   這將自動在瀏覽器中開啟以下網址： http://localhost:3000/.

當兩台伺服器皆已運行後，您即可開始測試應用程式的功能。

測試完整應用程式功能

在伺服器已啟動並運行，且 CORS 與 API 端點已正確設定的情況下，現在是驗證前端與後端之間資料流的時機。

後端 API 驗證：

• 請直接造訪以下網址來測試您的 Django API 端點：

  http://localhost:8000/api/tasks
  

  此時應會顯示 Django REST Framework 的可瀏覽 API 介面，您可在其中執行 CREATE 和 READ 操作。

• 請透過以下網址存取 Django 管理介面：

  http://localhost:8000/admin
  

  使用您的超級使用者憑證登入，以建立、編輯或刪除任務。您亦可透過造訪以下網址來測試 UPDATE 和 DELETE 操作：

  http://localhost:8000/api/tasks/{id}
  

前端與後端整合測試：

• 開啟您的 React 應用程式，網址為 http://localhost:3000 並確認其能正確載入，並顯示來自 Django 後端的任務。
• 透過 React 介面測試各項 CRUD 操作：
  • 新增一項任務，並確認該任務同時出現在 React 使用者介面與後端中。
  • 編輯現有任務，並確保變更已儲存。
  • 刪除一項任務，並確認它已從前端和資料庫中移除。

若您的應用程式包含篩選器或其他功能，請徹底測試以確認任務能如預期般顯示。

解決常見問題

若在測試過程中遇到任何問題，以下提供一些常見的解決方法供您嘗試。

API 連線錯誤：

• 請確保兩台伺服器皆在各自的埠上運行：Django 位於 http://localhost:8000 ，React 則在 http://localhost:3000.
• 使用瀏覽器開發者工具（網路分頁）來識別 HTTP 狀態碼，例如 404 或 500。

• 檢查 proxy 設定： package.json 檔案中的設定：

  "proxy": "http://localhost:8000"
  

  若您進行了變更，請重新啟動 React 伺服器。

伺服器啟動問題：

• 若 Django 伺服器無法啟動，請檢查是否有缺失的資料遷移：

  python manage.py makemigrations
  python manage.py migrate
  

• 若遇到 React 伺服器問題，請嘗試重新安裝依賴項：

  npm install
  

資料流問題：

• 使用瀏覽器開發者工具檢查網路請求和控制台錯誤。
• 加入除錯語句，例如 console.log() 在 React 中，或 print 在 Django 檢視中加入，以追蹤資料流。
• 請仔細確認 React 應用程式中的 API URL 與 Django 的 URL 模式完全一致，包括尾隨斜線（例如， /api/tasks/).

總結與後續步驟

您已建立了一個結合 Django 與 React 的網頁應用程式，這為您提供了全端開發的扎實入門基礎。此專案突顯了若干關鍵概念，例如後端與前端的分離、執行 CRUD 操作，以及透過 CORS 設定管理跨來源請求。 在此過程中，您運用 Django REST Framework 建置 API，並使用 React hooks 進行狀態管理——這些技能能讓這兩項強大的工具無縫整合。

將您的應用程式提升至更高層次

你的應用程式功能還有很大的擴展空間。例如，你可以透過 Django REST Framework 加入 JWT 驗證機制，以保障使用者資料及 API 存取的安全性。這將使你能夠提供使用者專屬的功能與個人化體驗。

若您的應用程式需要即時更新，不妨考慮使用 Django Channels 來啟用 WebSocket 支援。這對於即時儀表板、聊天系統或通知等功能而言是絕佳的解決方案，能將您的應用程式轉變為更具動態感與互動性的平台。

隨著應用程式規模擴大，進階的資料視覺化將變得至關重要。透過結合 React 的渲染能力與高效的後端資料擷取，您將能有效處理並呈現複雜的資料集。

準備投入生產環境

在為應用程式進行生產環境部署時，請著重於部署、安全性與效能。雖然目前的設定非常適合本地開發，但生產環境需要額外的步驟，包括設定環境變數、優化資料庫，以及實作強大的錯誤處理機制。

這些改進是建立在您已掌握的技能基礎上——例如 API 設計、組件化架構以及全端整合。透過掌握這些進階技術，您將能充分應對企業級專案，並持續在網頁開發領域中精進成長。

常見問題

在建置網頁應用程式時，後端使用 Django、前端使用 React 有哪些優勢？

後端採用 Django、前端採用 React，能為開發現代網路應用程式創造強大的組合。Django 提供一個穩固的框架，內含豐富工具可簡化後端開發流程；而 React 則在建構動態且互動性強的用戶介面方面表現出色。

這種組合促進了職責的清晰分離，有助於保持程式碼庫的條理分明，並隨著時間推移更容易擴展。 React 的元件化結構有利於 UI 元素的重複使用，而 Django 的 REST Framework 則簡化了 API 建置流程，確保前端與後端之間的通訊順暢。兩者結合，為應用程式開發提供了一種快速、高效且以使用者為中心的解決方案。

當將 React 前端與 Django 後端連接時，該如何解決 CORS 問題？

要解決 React 前端與 Django 後端之間的 CORS 問題， django-cors-headers 套件便是一個實用的解決方案。首先，請使用 pip 安裝它。接著，在您的 settings.py 檔案中，加入 'corsheaders' 至 INSTALLED_APPS 清單中。接著，在 'corsheaders.middleware.CorsMiddleware' 到 MIDDLEWARE 清單的最頂端，以確保中間件能依正確順序執行。

在開發過程中，您可以透過設定 CORS_ORIGIN_ALLOW_ALL = True 在您的 settings.py中設定，這將允許來自任何來源的請求。然而，在生產環境中，使用 CORS_ALLOWED_ORIGINS 設定來定義特定的可信域。此方法有助於維持更嚴格的安全性。

透過此配置，您的 React 應用程式可在符合 CORS 要求的同時，與 Django API 順暢互動。

如何為 Django 和 React 應用程式做好生產環境部署的準備？

要為您的 Django 和 React 應用程式做好生產環境部署的準備，請先調整 Django 設定以建立安全的環境。這包括設定 DEBUG 為 False ，並指定 ALLOWED_HOSTS 來控制哪些網域可以存取您的應用程式。這些變更對於在正式環境中保護您的應用程式至關重要。

接著，為您的 Django 後端和靜態檔案選擇一個可靠的託管平台。請確保您的基礎架構足以處理生產環境級別的流量與需求。至於 React 前端，請使用適當的建置工具來產生最佳化的生產環境建置版本。

當您的 React 應用程式準備就緒後，請設定如 Nginx 般的 Web 伺服器，以同時提供 React 前端與 Django 後端的服務。正確的伺服器配置能確保應用程式高效運行，並為使用者提供無縫的使用體驗。

上線前，請在生產環境中徹底測試您的應用程式。此步驟有助於識別並解決任何問題，確保應用程式上線後能穩定運作。