react+django前后端交互逻辑

Zhicheng Jiang Lv1
  2023-10-13 10:00 2023-10-13 10:00 Created   2023-10-15 15:04:17 2023-10-15 15:04:17 Updated      

介绍

在这几周，为了帮公司完成一个部门门户网站，学习了一些前端的知识。还学习了一下web开发中前端和后端如何进行交互，以及如何利用nginx，uwgi和docker部署网站到云端。在这篇文章，我主要介绍一下如何进行前后端交互，下一篇会讲一下如何部署。

前后端交互基本框架(部署React前端和Django后端的3种方法)

如果您要用Django REST开发web应用程序后端，并使用React或Vue开发应用程序前端。有很多方法实现。你需要做出很多选择：

您的前端是独立的静态站点还是通过Django视图实现？
你把后端和前端放在不同的子域上吗？
您是单独部署后端和前端，还是一起部署？
你怎么选择？哪一种是“正确的方式”？

坏消息是，没有正确的方式来做这件事，而且有很多东西要权衡。好消息是，我整理了三种不同的常见选择，各有利弊。

选项1-将所有内容塞进Django

这是“默认”方法，您有一个Django站点，只需添加React即可。所有HTML都通过Django视图提供，所有JavaScript和CSS都由Django负责打包，并以静态文件的形式部署。所有代码，前端和后端，都在一个Git存储库中。您可以在单个域（如www.myapp.com）部署应用程序。

部署代码时，需要：

使用webpack或类似的工具构建JavaScript和CSS资源，并将它们放入Django静态文件目录
像往常一样部署Django。

您将需要使用类似django webpack loader的东西来集成webpack的构建资源和django的静态文件系统和模板。除此之外，这是一个普通的Django部署。

举个代码的例子

1
2
3
4
5
6
7
8
9
// 先使用yarn build或npm build把代码进行打包
yarn build
// 然后把build之后的文件夹，/dist或/build文件夹，放入django的文件夹/static中

// 然后再把build之后的文件夹里面的index.html放入django的根目录(/templates)文件夹中，如果没有/templates文件夹记得配置一下

// 再去settings.py设置static_url和STATICFILES_PATH = [ os.path.join(BASE_DIR, "/static")]

可参考网站https://blog.csdn.net/qq_41000891/article/details/82961680

优点是：

  • 最简单的基础设施。除了设置django webpack loader和在部署过程开始时添加webpack构建之外，您无需对生产结构执行任何其他操作。
  • 没有额外的创建，费用，配置，调试或焦虑。
  • 同时更新。如果您需要做出影响前端和后端的更改，那么您可以在一次Git提交中完成所有更改，并使用单个部署将更改导入生产环境。
  • 更紧密的整合。通过此设置，您可以使用Django的视图通过模板将上下文数据从后端传递到前端。此外，还可以进行服务器端渲染（使用NodeJS进行额外的处理）。

缺点是：

  • 前端和后端的单一部署。通常您只想在前端部署一个小的CSS或内容更改，或者只部署后端更改。通过此设置，您必须始终同时部署后端和前端。这意味着您需要等待前端生成，即使您没有进行任何前端更改！更糟糕的是，如果您使用持续集成实践，则其他代码库中的失败测试或linter错误可能会导致部署失败。您不希望仅仅因为有人忘记在JavaScript中使用分号而导致数据库迁移部署失败。
  • 混乱的技术堆栈。后端开发人员需要知道一点React，前端开发人员需要知道一点Django才能使这个系统工作。
  • 精密的django网页包加载程序。在Webpack和Django之间建立集成对我来说是一个痛苦的过程。我不记得为什么，我只记得痛苦。事实上，这个列表中的每一个选项都会导致你想在某个时刻把你的计算机扔出窗口，而这个也不例外。

适用于：

  • 你想让你的基础设施保持简单
  • 你不在乎部署时间
  • 通常将前端和后端一起部署
  • 您需要在前端和后端之间进行紧密集成（例如，数据传递、服务器端呈现）

选项2-完全独立的基础设施

这种方法在过去几年中变得越来越流行。在这个设置中，您有两个独立的代码库，一个用于前端，一个用于后端，每个都有自己的Git存储库。

前端部署为一个“静态站点”，仅包含HTML CSS和JavaScript文件。它与Django分别部署，部署在在AWS S3 bucket、Netlify或类似的东西中。前端是独立于后端构建、测试和部署的。前端通过REST API调用从后端获取数据。

后端是一个Django REST API，没有HTML视图（除了管理页面），并且不承载静态内容（除了admin所需的内容）。它是独立于后端构建、测试和部署的。

重要的是，由于前端和后端在不同的服务器上，它们也将有不同的域名。后端可能位于api.myapp.com上，前端可能位于www.myapp.com上。(域名不一样，但是端口可以一样，也就是都可以监听80端口)

优点是：

  • 独立部署。部署前端时不需要等待后端，反之亦然。
  • 关注点分离。后端开发人员只需要考虑API，而不需要考虑视图或CSS。前端开发人员只需要考虑后端提供的API，而不需要考虑Django的内部工作。您可以使用选项1来实现这一点，但此方法会更严格地执行它。
  • 如果后端坏了，前端仍然可以工作。您的用户仍会遇到错误，但网站不会彻底没有响应。
    安全权限可以拆分。您可以允许部署前端与后端的人员分开，这通常意味着更多的人将有部署权限，从而使您的团队更具生产力。

缺点是：

  • 更多的基础设施。您将需要设置和维护静态站点，外加一个额外的部署过程，这将需要更多的工作，更复杂。
  • 跨域困境。您遇到了更多问题，因为前端与后端位于不同的子域上。您需要对Django进行一些额外配置，以允许前端正确地与后端对话。显然这是安全问题。如果不解决这个问题，您可能会遇到向后端发出API请求、接收cookies等问题。我不太明白。我不想太明白。我有比找出SESSION_COOKIE_DOMAIN，CORS_ORIGIN_REGEX_WHITELIST和friends的正确值更重要的事情要做。更糟糕的是，跨域问题不会出现在您的本地计算机上，因为一切都是从本地主机提供的，所以您需要在知道配置是否正确之前部署配置。

以下是一些跨域Django设置，希望您永远不需要考虑：

1
2
3
4
5
6
SESSION_COOKIE_DOMAIN
CSRF_COOKIE_DOMAIN
CSRF_TRUSTED_ORIGINS
CORS_ORIGIN_ALLOW_ALL
CORS_ALLOW_CREDENTIALS
CORS_ORIGIN_REGEX_WHITELIST

适用于：

  • 您有独立的前端和后端开发人员
  • 要分别部署后端和前端
  • 您希望完全分离后端和前端基础结构
  • 您不介意再增加一点操作复杂性和配置

选项3-一台服务器，单独部署

这种方法试图融合方案1和2。我们的想法是仍然将前端部署为一个单独的静态站点，但是您可以将所有内容部署到一个服务器上，使用一个域名：

后端和前端分别有两个独立的代码库

两个代码库都是独立部署的，但是部署到同一个服务器上

两个代码库都托管在一个域上，如www.myapp.com

您可以使用一个web服务器来管理它，比如NGINX，它处理所有传入的请求。对URL path/api/get的请求被转发到运行Django应用程序（传统的反向代理设置）的WSGI服务器，而所有其他请求发送到前端，前端被设置为静态站点并限定访问的路径（例如/var/www/）。

优点是：

  • 方案2的大部分好处。分离关注点和独立部署仍然是可行的。
  • 没有“跨域困境”。因为所有的请求都是从一个域发出的，所以您不必在Django中处理那些可怕的跨域设置。

缺点是：

  • 更多的基础设施。这个设置仍然比“将所有内容塞进Django”选项更复杂。
  • 需要完全控制主机Web服务器。您需要能够安装和配置NGINX，将文件部署到文件系统等来完成这项工作。如果您使用的是典型的云虚拟机，这很简单，但如果您使用的是Heroku之类的东西，则可能会更加棘手（不确定）。

适用于：
你想把前端和后端分开，但你不需要完全分离基础设施

您对主机Web服务器有足够的控制权限

具体代码例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 有个前端，比如用react，vue写的
// 通过axios框架，对后端服务器发送get,post请求
function sendRequestFromFrontEnd() {
    const res = axios.get("localhost:8000")
    // 做一些交互逻辑，比如说把res数据放到前端的表格中
}

// 后端，比如说用django写的,可以通过restful framework来完成这个逻辑
class handleRequestFromFrontEndAndReturnResponse():
    def get():
    // 处理来自前端的get请求
    
    // 处理逻辑，判断密码是否正确等等

    // 返回结果
    return Response("data", HTTP.status.OK)
    def post():
    // 处理来自前端的post请求


// 前端通过nginx做到反向代理

前端 ->(发送http请求)-> nginx(反向代理请求给后端服务器)-> 后端restful api返回结果

英文原文：https://mattsegal.dev/django-spa-infrastructure.html

前后端交互的具体代码实现

我在公司中，由于中台那边只能让我使用一个镜像，而不能通过docker compose的方法来实现容器间的通信。所以我只能使用第一种和第三种方法，把处理所有请求的服务器弄到一个docker镜像当中。

前端React实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
    const [tasks, setTasks] = useState([]);

    useEffect(() => {
        // 获取 tasks 数据
        axios.get('http://your-django-server.com/api/tasks/')
            .then(response => {
                setTasks(response.data);
            })
            .catch(error => {
                console.error("There was an error fetching the tasks!", error);
            });
    }, []); // 在刚开始的时候请求一次，和类组件中的componentDidMount作用类似

    return (
        <div className="App">
            <h1>Tasks</h1>
            <ul>
                {tasks.map(task => (
                    <li key={task.id}>{task.title}</li>
                ))}
            </ul>
        </div>
    );
}

export default App;

后端django实现

Django 设置:
models.py:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=200)
    completed = models.BooleanField(default=False)
serializers.py:

from rest_framework import serializers
from .models import Task

class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = '__all__'

views.py:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
from rest_framework import generics
from rest_framework.response import Response
from .models import Task
from .serializers import TaskSerializer

class TaskList(generics.GenericAPIView):
    queryset = Task.objects.all()
    serializer_class = TaskSerializer

    def get(self, request, *args, **kwargs):
        # 处理GET请求
        queryset = self.get_queryset()
        serializer = self.get_serializer(queryset, many=True)
        return Response(serializer.data)

    def post(self, request, *args, **kwargs):
        # 处理POST请求
        serializer = self.get_serializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data, status=201)
        return Response(serializer.errors, status=400)

urls.py:

1
2
3
4
5
6
7
8
9
10
11
12
from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import TaskViewSet

router = DefaultRouter()
router.register(r'tasks', TaskViewSet)

urlpatterns = [
    path('', include(router.urls)),
]


  • Title: react+django前后端交互逻辑
  • Author: Zhicheng Jiang
  • Created at : 2023-10-13 10:00:00
  • Updated at : 2023-10-15 15:04:17
  • Link: https://walterj726.github.io/2023/10/13/web开发前后端交互逻辑/
  • License: This work is licensed under CC BY-NC-SA 4.0.
 Comments
On this page
react+django前后端交互逻辑
  1. 介绍
  2. 前后端交互基本框架(部署React前端和Django后端的3种方法)
    1. 选项1-将所有内容塞进Django
  3. 选项2-完全独立的基础设施
  4. 选项3-一台服务器，单独部署
  5. 前后端交互的具体代码实现
    1. 前端React实现
    2. 后端django实现