📌  相关文章
📜  如何将 Django 与 Reactjs 连接起来？(1)

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

如何将 Django 与 Reactjs 连接起来？

如果你在使用 Django 来构建网站，但是想要使用 Reactjs 来处理前端的交互和展示，那么你就需要将这两个框架连接起来。这篇文章将介绍如何将 Django 和 Reactjs 连接起来，同时提供一些有用的技巧和代码片段。

第一步：安装 Django 和 Reactjs

在将 Django 和 Reactjs 连接起来之前，你需要确保这两个框架都已经被安装在了你的计算机上。如果你还没有安装这些框架，你可以按照下面的指南来进行安装。

安装 Django

如果你还没有安装 Django，可以按照以下步骤进行安装：

  1. 打开终端或命令行窗口（Windows 用户），输入以下命令：
pip install Django
  1. 等待安装完成后，输入以下命令来检查是否安装成功：
django-admin --version
安装 Reactjs

如果你还没有安装 Reactjs，可以按照以下步骤进行安装：

  1. 安装 Node.js 和 npm。你可以通过以下链接来下载适合你的操作系统的 Node.js 和 npm：

    • Node.js：https://nodejs.org/en/download/
    • npm：https://www.npmjs.com/get-npm

  2. 在终端或命令行窗口中输入以下命令来安装 create-react-app：

npm install -g create-react-app
  1. 创建新的 Reactjs 应用程序，输入以下命令：
create-react-app my-app
第二步：设置 Django 项目

在将 Django 和 Reactjs 连接起来之前，你需要在 Django 项目中进行一些设置。

创建 Django 项目
  1. 在终端或命令行窗口中，输入以下命令来创建一个新的 Django 项目：
django-admin startproject myproject
  1. 进入 myproject 目录，创建一个新的应用程序：
cd myproject
python manage.py startapp myapp
安装必要的库
  1. 在项目的根目录中创建一个 requirements.txt 文件，并添加以下内容：
djangorestframework
django-cors-headers
  1. 在终端或命令行窗口中，输入以下命令来安装这些库：
pip install -r requirements.txt
设置 CORS

在 Django 中设置 CORS (Cross-Origin Resource Sharing) 是十分必要的，它允许你在不同的域名下共享资源。为此，你需要在项目的 settings.py 文件中进行设置。

  1. 在 settings.py 文件的 INSTALLED_APPS 中添加以下内容：
INSTALLED_APPS = [
    #...
    'corsheaders',
    #...
]
  1. 在 settings.py 文件中添加以下内容：
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware', # 在这里添加
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ORIGIN_ALLOW_ALL = True

这将允许来自任何来源的请求都可以访问你的 Django API。

第三步：添加 Reactjs 到 Django 项目中

现在，你需要将 Reactjs 应用程序添加到 Django 项目中，并与 Django 项目进行连接。下面的步骤将演示如何将 Reactjs 应用程序添加到 Django 项目中。

构建 Reactjs 应用程序
  1. 进入 Reactjs 应用程序的目录中，然后在终端或命令行窗口中输入以下命令来构建应用程序：
npm run build
  1. 将构建完成后的应用程序文件夹（通常为 build 文件夹）复制到 Django 项目的根目录中。你可以将该文件夹重命名为 static，以便 Django 可以找到它。
连接 Django 和 Reactjs
  1. 在 Django 项目中创建一个名为 templates 的文件夹，并在该文件夹中创建一个名为 index.html 的文件。在 index.html 文件中添加以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My App</title>
</head>
<body>
  <div id="root"></div>
  <script src="{% static 'js/bundle.js' %}"></script>
</body>
</html>
  1. 在 Django 项目的 urls.py 文件中创建一个视图来渲染 index.html 文件。视图的代码如下：
from django.shortcuts import render

def index(request):
    return render(request, 'index.html')
  1. 在 urls.py 文件中添加以下代码来定义 URL：
from django.urls import path
from . import views

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

现在，你已经可以打开 Django 项目的主页，在浏览器中输入 http://127.0.0.1:8000/，就可以看到 Reactjs 的应用程序在其中运行了。如果一切正常，你应该可以看到你的应用程序的主页。

第四步：使用 Django REST Framework

在连接 Django 和 Reactjs 之后，你需要使用 Django REST Framework 来创建一个后端 API，以便在 Reactjs 应用程序中使用。

安装 Django REST Framework
  1. 在终端或命令行窗口中输入以下命令来安装 Django REST Framework：
pip install djangorestframework
  1. 在 settings.py 文件中添加以下内容：
INSTALLED_APPS = [
    #...
    'rest_framework',
    #...
]
创建 Django REST Framework 视图
  1. 在 myapp 应用程序中创建一个名为 api.py 的文件，并添加以下内容：
from rest_framework import serializers, viewsets
from .models import MyModel

class MyModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = MyModel
        fields = '__all__'

class MyModelViewSet(viewsets.ModelViewSet):
    queryset = MyModel.objects.all()
    serializer_class = MyModelSerializer
  1. 在 myproject 目录中的 urls.py 文件中添加以下内容来定义 API：
from django.urls import include, path
from rest_framework import routers
from myapp.api import MyModelViewSet

router = routers.DefaultRouter()
router.register(r'mymodels', MyModelViewSet)

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

完成以上步骤后，你的 Django 和 Reactjs 应用程序已经连接成功，你可以开始开发你的应用程序了。上面提到的方法只是其中的一种，你可以通过其他的方式来连接 Django 和 Reactjs。

代码片段：

import React from 'react'

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      items: []
    };
  }

  componentDidMount() {
    fetch('/api/mymodels')
      .then(response => response.json())
      .then(responseData => {
        this.setState({
          items: responseData
        });
      });
  }

  render() {
    return (
      <div>
        <h1>Items</h1>
        <ul>
          {this.state.items.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default App;