如何连接Django和Reactjs

React 是一个由Facebook创建的JavaScript库。它是一个用于构建UI（U ser I nterface ）组件的工具。它被广泛用于制作SPA(S ingle P age A pplication )，它有一个庞大的开发者社区。

Django 是一个基于Python的网络框架，鼓励快速开发和简洁、务实的设计。由于它的现成和堆栈充满了奇妙的功能，从认证到会话管理，所有这些都使它的速度快得令人发指。

选择React与Django的理由：

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

连接React和Django的优势：由于这两个部分将被分开处理_即_React和Django。以下是分别使用它们的优势列表。

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

上述优势最终将导致只剩下一个任务，即连接_。

一台带有任何操作系统（Linux/Windows/Mac）的开发机。
安装了Python 3。
安装了Node.js（版本12以上）。
安装了npm（版本6以上）。
对两个框架（Django和React）都有基本了解。

连接前端和后端：这种情况通常发生在我们开始学习前端部分（HTML，CSS，Bootstrap，或React，Angular，或Vue，如果使用框架）或后端部分（Node.js，Django，等或任何其他框架）。总之这就是学习的方式。

让我们了解一下连接的基本工作流程。这2个关键点是网络技术的构建模块。

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

关于项目：本项目是一个简单的应用程序，你可以在其中写下一句话和作者的名字。基本上基于CRUD(C reate R ead U pdate and D elete )操作。

如何连接Django和Reactjs？

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

第1步：如果没有安装，请在终端输入一个命令进行安装。

python3 -m pip install --user virtualenv

第2步：创建一个虚拟环境。

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

如何连接Django和Reactjs？

第5步:

models.py。现在让我们为我们的项目创建一个数据库模型。因为这个项目非常简单，模型就足以说明问题了。这里是核心应用程序的models.py文件。Name和detail是两个字段，分别用来存储作者的名字和作者提交的报价。

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即客户端使用）。

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()从模型中返回数据，然后使用list comprehension来转换python字典中的作者和他们的引言。在POST方法中，我们只是绕过数据保存到ReactSerializer（）。_ _ 现在是时候定义API的端点了。API的端点是我们的客户端要从服务器上获取数据的URL。它通常是我们的资源（数据库和其他编程功能）所在的地方。

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的端点。

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

你可能在想cors headers包。实际上，cors headers包是用来告诉浏览器，运行在一个原点的网络应用程序，可以访问来自另一个原点的选定资源。

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

该命令用于检测在数据库中所作的改变。

python manage.py makemigrations

这个命令将这些变化应用到数据库中。

python manage.py migrate

用于创建一个超级用户，他将是整个应用程序的管理员。

python manage.py createsuperuser --email admin@example.com --username admin

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

python manage.py runserver

或者，

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

如何连接Django和Reactjs？

设置前端：不需要将前端文件夹放在后端文件夹所在的同一目录中。另外，不需要为React制作一个虚拟环境。使用以下命令为React应用程序做好准备。使用Bootstrap做造型和更好的观感，jQuery是为了与Bootstrap的依赖关系。

npx create-react-app our-quote

cd our-quote

npm install bootstrap jquery axios

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

Inside our-quote/src/App.js:

import React from 'react'; 
class App extends React.Component { 
    render() { 
        return(
            <div>
                <div>
                    <div>
                        <h1>Quote is going to be written here</h1>
                        <footer>--- by
                          <cite title="Source Title"> 
                              written by meeeee 
                          </cite>
                        </footer>
                    </div>
                </div>
            </div>); 
    } 
} 
export default App;

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

如何连接Django和Reactjs？

App.js:现在我们必须通过使用Axios从服务器获取数据。当组件被渲染时，componentDidMount方法被调用。这是请求服务器提供数据的正确时机。我们在这个方法中使用Axios将数据存储在从服务器获得的状态中，然后在JavaScript中通过map的帮助进行渲染。

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(
      <div>
            {this.state.details.map((detail, id) =>  (
            <div key={id}>
            <div >
                  <div >
                        <h1>{detail.detail} </h1>
                        <footer >--- by
                        <cite title="Source Title">
                        {detail.name}</cite>
                        </footer>
                  </div>
            </div>
            </div>
            )
        )}
      </div>
      );
  }
}
  
export default App;

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

如何连接Django和Reactjs？

App.js:现在这个项目唯一剩下的部分是创建一个表单，以便用户可以从客户端填写数据，这是正确的方法。这是一个从客户端提交响应的表单，与bootstrap一起。

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 (
            <div className="container jumbotron ">
                <form onSubmit={this.handleSubmit}>
                    <div className="input-group mb-3">
                        <div className="input-group-prepend">
                            <span className="input-group-text"
                                  id="basic-addon1">
                                {" "}
                                Author{" "}
                            </span>
                        </div>
                        <input type="text" className="form-control" 
                               placeholder="Name of the Poet/Author"
                               aria-label="Username"
                               aria-describedby="basic-addon1"
                               value={this.state.user} name="user"
                               onChange={this.handleInput} />
                    </div>
  
                    <div className="input-group mb-3">
                        <div className="input-group-prepend">
                            <span className="input-group-text">
                               Your Quote 
                            </span>
                        </div>
                        <textarea className="form-control " 
                                  aria-label="With textarea"
                                  placeholder="Tell us what you think of ....." 
                                  value={this.state.quote} name="quote" 
                                  onChange={this.handleInput}>
                        </textarea>
                    </div>
  
                    <button type="submit" className="btn btn-primary mb-5">
                        Submit
                    </button>
                </form>
  
                <hr
                    style={{
                        color: "#000000",
                        backgroundColor: "#000000",
                        height: 0.5,
                        borderColor: "#000000",
                    }}
                />
  
                {this.state.details.map((detail, id) => (
                    <div key={id}>
                        <div className="card shadow-lg">
                            <div className={"bg-" + this.renderSwitch(id % 6) + 
                                          " card-header"}>Quote {id + 1}</div>
                            <div className="card-body">
                                <blockquote className={"text-" + this.renderSwitch(id % 6) + 
                                                   " blockquote mb-0"}>
                                    <h1> {detail.detail} </h1>
                                    <footer className="blockquote-footer">
                                        {" "}
                                        <cite title="Source Title">{detail.name}</cite>
                                    </footer>
                                </blockquote>
                            </div>
                        </div>
                        <span className="border border-primary "></span>
                    </div>
                ))}
            </div>
        );
    }
}
export default App;