如何将 Django 连接到 ReactJs

设置 Django 后端。

设置反应前端。

将前端应用程序连接到 Django 后端。

笔记

作为一名 Django 后端开发者，你可能需要与使用 React 的前端开发者合作，或者你是一位全栈开发者，有兴趣用 React 构建应用程序的前端（顺便说一句，我相信大家都很喜欢 React 😌）。那么你需要学习如何将 React 前端应用程序连接到你的 Django 后端。本教程将指导你完成简单的步骤。我们将首先设置 Django 后端，然后设置 React 前端，最后将它们连接起来。

您还可以在此处访问 Github repo 获取完整教程

设置 Django 后端。

我假设你的机器上已经安装了 Python。如果没有，可以通过此链接下载并安装。请确保下载的是最新版本的 Python。(Python 3.97)

在 Windows 上打开命令行，在 Mac 上打开终端，在 Linux 上打开终端，然后导航到要存储项目的目录并创建一个新目录

mkdir React-Django

移至新目录

cd React-Django

创建虚拟环境。

建议您在启动项目之前务必创建一个虚拟环境。这有助于您将本应用程序中使用的软件包与其他应用程序区分开来；您在此处所做的任何更改都不会影响系统上其他应用程序中的相同软件包。要在您的系统上创建虚拟环境，请运行以下命令：

For mac/unix users: python3 -m venv env
For windows users: py -m venv env

创建环境后，运行以下命令激活它：

For mac/unix users: source env/bin/activate
For windows users: .\env\Scripts\activate

您可以通过运行以下命令来停用它，但您不必立即停用它。

deactivate

安装 Django

现在让我们继续安装 Django，

pip install django

创建一个新的 Django 项目并将其命名为“project1”

django-admin startproject project1

进入项目目录

cd project1

使用此命令迁移你的“更改”

python manage.py migrate

然后你可以启动服务器以确保一切正常运行

python manage.py runserver 

复制此 URL：http://127.0.0.1: 8000，然后在任何浏览器中打开它。你应该能看到类似这样的内容👇

设置反应前端。

接下来，我们需要在当前目录中创建project1包含该manage.py文件的前端 React 应用程序：

npx create-react-app frontend

进入前端目录

cd frontend

然后运行以下命令启动前端应用程序

npm start

您现在应该在浏览器中看到默认的 React 应用程序页面；如果看不到，请在浏览器中打开此链接。

http://localhost:3000

我们不会对已安装的 React 应用程序进行任何其他更改，因此我们在这里完成，但我们需要通过运行来构建后端将使用的包：

npm run build

然后我们还需要/build从 gitignore 文件中删除，因为后端需要使用构建文件夹中的templates和。staticfiles

现在让我们转到后端设置并将其连接到我们刚刚创建的反应应用程序。

将前端应用程序连接到 Django 后端。

移回根文件夹

cd ..

接下来，我们将对后端项目文件中的settings.py文件进行一些更改，以便Django后端可以识别我们创建的React应用程序作为默认前端目录。打开settings.py文件并进行以下更改。

在文件顶部导入“os”

import os

然后通过将模板目录指向前端反应目录中的构建文件夹来配置模板目录。

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'frontend', 'build')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

我们还需要配置静态文件目录；将此行添加到页面底部的 STATIC_URL 行下方。

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

设置已完成。接下来，我们来创建一个简单的视图，用于显示默认的 React 页面。

python manage.py startapp core

不要忘记将新应用程序“核心”添加到settings.py文件中的“已安装的应用程序”部分。

打开views.py文件并创建一个仅呈现我们页面的简单的基于函数的视图。

def front(request):
    context = { }
    return render(request, "index.html", context)

然后，我们将创建的视图映射到文件夹中urls.py文件的 URL project1。我们从核心应用导​​入“front”视图函数，并将其映射到默认 URL“”。

from django.contrib import admin
from django.urls import path
from core.views import front

urlpatterns = [
    path('admin/', admin.site.urls),
    path("", front, name="front"),
]

工作已完成。现在运行

python manage.py runserver 

在浏览器中重新加载页面，您现在应该看到我们之前看到的反应页面。

请注意，URL 现在是http://127.0.0.1:8000。

我们已经成功将 Django 后端连接到 React 前端。您需要使用 Django REST 框架来创建 React 前端应用程序用来获取后端数据的 API。

笔记

backend如果您想在 Django 目录之外创建前端目录，您需要获取指向包含和目录的总体基目录的路径frontend。

BASEDIR在 settings.py 文件顶部的变量下方添加此行。

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

接下来，新变量将在和部分REAL_BASE_DIR中使用。TemplatesStaticfiles

模板：

'DIRS': [os.path.join(REAL_BASE_DIR, 'frontend', 'build')],

静态文件：

STATICFILES_DIRS = [os.path.join(REAL_BASE_DIR, 'frontend', 'build', 'static')]

frontend这将确保 Django 在Django 目录之外的文件夹 中搜索模板和静态文件。

恭喜！现在，你可以使用以上两种方法中的任意一种，开始实现你那个伟大的项目构想了！干杯！

Django + React

如果您有任何疑问，请随时以评论形式提交，或在领英或推特上给我留言，我会尽快回复。再见👋