如何使用 Django 和 React 构建一个简单的应用程序

如何使用 Django 和 React 构建一个简单的应用程序

想开发一款后端强大、前端动态的 Web 应用吗？将 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 并运行 React localhost:3000.
   • 使用 Postman 等工具或在浏览器中直接测试 API 端点。
   • 确保 CORS 设置正确，以实现顺畅的通信。

此配置可让您高效构建后端与前端明确分离的全栈应用程序。请按照以下步骤创建一个可扩展且交互性强的 Web 应用程序。

面向初学者的 Django 和 React 项目——构建一个全栈笔记应用

环境配置与安装

在开始构建您的 Django 和 React 应用程序之前，必须先配置开发环境，安装必要的工具和依赖项。这一基础将帮助您在后续开发过程中顺畅地创建、集成和测试 Django 及 React 组件。

系统要求与工具

要开始开发，您的开发机器需要安装用于 Django 的 Python 3.x 以及用于 React 的 Node.js。具体来说，Django 5.0 需要 Python 3.x，而 React 则需要 Node.js 12 及以上版本。

安装 Python：您可以直接从 Python 官方网站下载，或使用系统的包管理器进行安装。对于 macOS 用户，Homebrew 提供了简便的安装方式： brew install python。Windows 用户应从 python.org 下载安装程序，而 Linux 用户可使用类似 apt install python3 在 Ubuntu 上，或在其他发行版中使用类似命令。

配置 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），这对运行在 3000 端口的 React 前端与运行在 8000 端口的 Django 后端之间的通信至关重要。

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 配合路由器，构建简洁的 RESTful 架构。

在 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

访问 API 地址 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 钩子，例如 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 的项目中创建社区时遇到了 400 错误，原因是请求中缺少 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.
• 使用浏览器开发者工具（网络标签页）识别 404 或 500 等 HTTP 状态码。

• 检查 proxy React 项目中 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 的 Web 应用，这为您提供了全栈开发的基础入门。该项目突出了后端与前端分离、执行 CRUD 操作以及使用 CORS 设置管理跨源请求等核心概念。 在此过程中，你利用 Django REST Framework 构建了 API，并使用 React 钩子进行状态管理——这些技能使这两款强大的工具能够无缝集成。

将应用提升到新高度

你的应用功能还有很大的扩展空间。例如，你可以利用 Django REST Framework 添加 JWT 身份验证，以保障用户数据和 API 访问的安全。这样，你就能提供针对特定用户的特色功能和个性化体验。

如果您的应用需要实时更新，不妨考虑使用 Django Channels 来启用 WebSocket 支持。这非常适合实时仪表盘、聊天系统或通知等功能，将您的应用转变为一个更具动态性和交互性的平台。

随着应用程序的成长，高级数据可视化变得至关重要。通过将 React 的渲染能力与高效的后端数据获取相结合，您将能够有效地处理和展示复杂的数据集。

为生产环境做准备

在为应用准备生产环境时，请重点关注部署、安全性和性能。虽然当前的配置非常适合本地开发，但生产环境需要额外的步骤。这些步骤包括设置环境变量、优化数据库以及实现强大的错误处理机制。

这些改进基于您已经掌握的技能——例如 API 设计、组件化架构和全栈集成。通过掌握这些高级技术，您将能够从容应对企业级项目，并作为 Web 开发者持续成长。

常见问题

在构建 Web 应用时，后端使用 Django、前端使用 React 有哪些优势？

后端使用 Django、前端使用 React，这种组合为开发现代 Web 应用程序提供了强有力的支持。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 后端。正确的服务器配置可确保应用高效运行，并为用户提供流畅的体验。

正式上线前，请在生产环境中对应用程序进行全面测试。此步骤有助于发现并解决任何问题，确保应用程序上线后能够稳定可靠地运行。