Django + React 集成模板不存在 (1)

📌 相关文章

📜 Django + React 集成模板不存在 (1)

📅 最后修改于: 2023-12-03 15:14:43.028000 🧑 作者: Mango

Django + React 集成模板不存在

介绍

Django 和 React 是当今流行的 Web 开发框架，它们分别负责后端与前端的开发任务。在某些场景下，我们需要将 Django 和 React 集成在一起来共同完成 Web 开发任务。在这种情况下，我们需要一个集成模板来帮助我们快速创建项目。不过，目前官方并没有提供 Django + React 集成模板，因此我们需要自己手动集成。

集成步骤

首先需要创建一个 Django 项目，可以使用以下命令来创建：

django-admin startproject projectname

接下来需要创建一个 React 应用程序，可以使用以下命令来创建：

npx create-react-app frontend

在将 Django 和 React 集成的过程中，我们需要使用 Django 的模板系统来渲染 React 应用程序，所以需要使用 Django 模板系统来渲染 React。在该项目的根目录下创建一个名为 templates 的文件夹，并创建名为 index.html 的文件。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Project Name</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="{% static 'frontend/build/static/js/main.js' %}"></script>
  </body>
</html>

在 Django 的 settings.py 中添加以下配置：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR.joinpath('templates')],
        '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',
            ],
        },
    },
]

STATICFILES_DIRS = [
    BASE_DIR.joinpath('frontend', 'build', 'static'),
]

在 Django 的 urls.py 中添加以下视图函数：

from django.shortcuts import render


def index(request):
    return render(request, 'index.html')

继续在 Django 的 urls.py 中将视图函数注册到 URL 中：

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

在 React 的 package.json 中添加以下配置：

{
    "homepage": "/static/frontend/build/",
    "build": {
        "staticUrl": "/static/frontend/build/static/",
        "publicUrl": "/static/frontend/build/"
    }
}

在 React 的 package.json 中添加以下 scripts：

{
    "build:django": "react-scripts build && rm -rf ../backend/templates/frontend && mv build ../backend/templates/frontend",
    "start:django": "npm run build:django && python manage.py runserver"
}

在命令行中运行以下命令：

npm run start:django

至此，集成完成。在浏览器中输入 http://localhost:8000 就可以访问项目了。

结论

尽管官方没有提供 Django + React 集成模板，但我们可以手动集成来完成相应的开发任务。本文介绍了集成所需的步骤及代码片段，希望对你有所帮助。