如何将 Django 与 Reactjs 连接起来？

反应 是Facebook创建的 JavaScript 库。它是用于构建UI（用户界面）组件的工具。它广泛用于制作SPA（单页应用程序） ，并拥有庞大的开发者社区。

姜戈 是一个基于 Python 的 Web 框架，它鼓励快速开发和简洁、实用的设计。由于它的现成和堆栈中充满了奇妙的功能，从身份验证到会话管理，所有这些都使它快得离谱。

选择 React with Django 的原因：

• React 和Django都是最流行的库和框架，在各自的领域都很出色。
• React 出色的 SPA 优化和Django 的强大功能使其更加出色。
• 他们有大量的社区支持并提供即时援助。

将 React 与 Django 连接的优点：因为这两个部分将分别处理，即React 和 Django。 以下是单独使用它们的优点列表。

• 前端和后端逻辑和功能之间的界面更清晰。
• 易于部署前端部分或后端部分，无需重新部署另一个。
• 平滑用户体验，加载时间更短，转换感知更少——数据在后台获取，整个组件只有一部分会被重新加载。
• 如果有单独的团队分别在前端和后端工作，他们不必担心另一部分，因为两者都可以独立工作。
• 可以创建可扩展的多个客户端（Web、移动）应用程序。所有客户端都必须使用后端提供的相同 API。

上述优点最终会导致只剩下一个任务，即连接。

先决条件：

• 具有任何操作系统（Linux/Windows/Mac）的开发机器。
• 已安装Python 3。
• 已安装 Node.js（版本 12+）。
• 已安装 npm（版本 6+）。
• 对两个框架（Django 和 React）的基本了解。

将前端与后端连接起来：这通常是因为我们开始学习前端部分（ HTML 、 CSS 、 Bootstrap或React、Angular或Vue ，如果使用框架）或后端部分（ Node.js ， Django等或任何其他框架）。不管怎样，这就是学习的方式。

让我们了解连接的基本工作流程。这两个关键点是 Web 技术的构建块。

• 在后端，我们将使用 Django-rest 创建 API（具有 GET、POST 等方法）。
• 在前端，我们将通过使用 React 来使用在 Django 中创建的 API。

关于项目：这个项目是一个简单的应用程序，您可以在其中写下引述和作者姓名。基本上基于CRUD（创建读取更新和删除）操作。

设置后端：通过创建虚拟环境为 Django 创建项目文件夹。您必须已安装virtualenv软件包。

第 1 步：如果未安装，请在终端上键入命令进行安装。

python3 -m pip install --user virtualenv

第二步：创建虚拟环境。

python3 -m venv env

cd env

source bin/activate

第 3 步：使用 pip 安装以下软件包

pip install django

pip install djangorestframework

python -m pip install django-cors-headers

第 4 步：创建您选择的项目名称。

django-admin startproject quotes

cd quotes

django-admin startapp core

第 5 步：

• models.py：现在让我们为我们的项目创建一个数据库模型。由于项目非常简单，模型足以说明。这是核心应用程序的models.py文件。名称和详细信息是两个字段，分别用于存储作者姓名和作者提交的引用。

Python3

from django.db import models
  
# Create your models here.
  
  
class React(models.Model):
    name = models.CharField(max_length=30)
    detail = models.CharField(max_length=500)

• serializer.py：在核心文件夹中创建serializer.py 。这是模型 React 的序列化程序。序列化器主要用于将复杂数据转换为原生Python数据类型，然后可以轻松地将其呈现为 JSON（我们将在 React 即客户端使用它）。

Python3

from rest_framework import serializers
from . models import *
  
class ReactSerializer(serializers.ModelSerializer):
    class Meta:
        model = React
        fields = ['name', 'detail']

• views.py：这里是views.py ，我们可以在其中创建我们的方法，如GET、PUT、POST、DELETE。我使用基于类的 Django 视图创建了 GET 和 POST。在 GET 方法中，我们通过调用React.objects.all()从模型中返回数据，然后使用列表推导来转换 Python字典中的作者及其引号。在 POST 方法中，我们只是将数据绕过数据保存到ReactSerializer()。 是时候定义 API 的端点了。 API 的端点是我们的客户端将点击以使用来自服务器的数据的 URL。它通常是我们的资源（数据库和其他编程功能）所在的地方。

Python3

from django.shortcuts import render
from rest_framework.views import APIView
from . models import *
from rest_framework.response import Response
from . serializer import *
# Create your views here.
  
class ReactView(APIView):
    
    serializer_class = ReactSerializer
  
    def get(self, request):
        detail = [ {"name": detail.name,"detail": detail.detail} 
        for detail in React.objects.all()]
        return Response(detail)
  
    def post(self, request):
  
        serializer = ReactSerializer(data=request.data)
        if serializer.is_valid(raise_exception=True):
            serializer.save()
            return  Response(serializer.data)

第 6 步：

• urls.py：这是项目报价中的主要urls.py。 localhost:8000/wel/ 是我们ReactView的终点。

Python3

from django.contrib import admin
from django.urls import path, include
from django.conf.urls import url
from core.views import *
  
urlpatterns = [
    path('admin/', admin.site.urls),
    path('wel/', ReactView.as_view(), name="something"),
]

第 7 步： settings.py文件的更改很少，如下所示

1. 将rest_framework 、 core、 corsheaders添加到 INSTALLED APPS
2. 将corsheaders.middleware.CorsMiddleware添加到 MIDDLEWARE 列表。
3. 创建一个分配给REST_FRAMEWORK变量的字典，其中插入“DEFAULT_PERMISSION_CLASSES”：[“rest_framework.permissions.AllowAny”]
4. 分配变量CORS_ORIGIN_ALLOW_ALL = True

您可能正在考虑corsheaders包。实际上，cors headers 包用于告诉浏览器，Web 应用程序在一个来源运行，可以访问来自不同来源的选定资源。

现在让我们回到后端的最后一部分。在终端上运行以下命令。

• 此命令用于检测数据库中所做的更改。

python manage.py makemigrations 

• 此命令将这些更改应用于数据库。

python manage.py migrate  

• 用于创建将成为整个应用程序管理员的超级用户。

python manage.py createsuperuser --email [e-mail] --username admin 

• 此命令将运行服务器，服务器应始终处于运行状态。

python manage.py runserver

要么

打开您选择的网络浏览器（推荐使用 Chrome）并搜索 localhost:8000/wel/

设置前端：没有限制将前端文件夹与后端文件夹所在的目录相同。此外，不需要为 React 创建虚拟环境。使用以下命令为 React 应用程序做好准备。使用 Bootstrap 进行样式设置和更好的外观和感觉，jQuery 用于 bootstrap 的依赖项。

npx create-react-app our-quote

cd our-quote

npm install bootstrap jquery axios

Axios是连接后端和前端的主要工具。所有请求都将在 Axios 的帮助下发送到服务器（后端）。

在 our-quote/src/App.js 中：

Javascript

import React from 'react'; 
class App extends React.Component { 
    render() { 
        return(
            

                

                    

                        
Quote is going to be written here
                        
--- by
                           
                              written by meeeee 
                          
                        
                    
                
            
); 
    } 
} 
export default App;

输出：运行npm start后，React 的开发服务器将启动，默认情况下可以在 localhost:3000 查看

App.js：现在我们必须使用 Axios 从服务器获取数据。组件渲染时调用componentDidMount方法。这是向服务器请求数据的正确时间。我们在此方法中使用 Axios 将数据存储在从服务器获取的状态中，然后在 JavaScript 中的地图的帮助下呈现。

Javascript

import React from 'react';
import axios from 'axios';
  
class App extends React.Component {
  
    state = {
        details : [],
    }
  
    componentDidMount() {
  
        let data ;
  
        axios.get('http://localhost:8000/wel/')
        .then(res => {
            data = res.data;
            this.setState({
                details : data    
            });
        })
        .catch(err => {})
    }
  
  render() {
    return(
      

            {this.state.details.map((detail, id) =>  (
            

            

                  

                        
{detail.detail} 
                        
--- by
                        
                        {detail.name}
                        
                  
            
            
            )
        )}
      
      );
  }
}
  
export default App;

输出：由于没有要显示的数据，所以从服务器端在数据库中填充一些数据。

App.js：现在这个项目剩下的唯一部分是创建一个表单，以便用户可以从客户端填写数据，这是正确的做法。这是从客户端提交响应以及引导程序的表单。

Javascript

import React from "react";
import axios from "axios";
  
class App extends React.Component {
    state = {
        details: [],
        user: "",
        quote: "",
    };
  
    componentDidMount() {
        let data;
  
        axios
            .get("http://localhost:8000/wel/")
            .then((res) => {
                data = res.data;
                this.setState({
                    details: data,
                });
            })
            .catch((err) => {});
    }
  
    renderSwitch = (param) => {
        switch (param + 1) {
            case 1:
                return "primary ";
            case 2:
                return "secondary";
            case 3:
                return "success";
            case 4:
                return "danger";
            case 5:
                return "warning";
            case 6:
                return "info";
            default:
                return "yellow";
        }
    };
  
    handleInput = (e) => {
        this.setState({
            [e.target.name]: e.target.value,
        });
    };
  
    handleSubmit = (e) => {
        e.preventDefault();
  
        axios
            .post("http://localhost:8000/wel/", {
                name: this.state.user,
                detail: this.state.quote,
            })
            .then((res) => {
                this.setState({
                    user: "",
                    quote: "",
                });
            })
            .catch((err) => {});
    };
  
    render() {
        return (
            

                

                    

                        

                            
                                {" "}
                                Author{" "}
                            
                        
                        
                    
  
                    

                        

                            
                               Your Quote 
                            
                        
                                                
                    
  
                    
                        Submit
                    
                
  
                

  
                {this.state.details.map((detail, id) => (
                    

                        

                            
Quote {id + 1}
                            

                                

                                    
 {detail.detail} 
                                    

                                        {" "}
                                        {detail.name}
                                    
                                
                            
                        
                        
                    
                ))}
            
        );
    }
}
export default App;

输出：表单将调用handleSubmit作为回报，它使用POST方法并在端点http://localhost:8000/wel/ 提交响应。 renderSwitch()用于传递数组的索引，该索引返回引导类名称的颜色。