当前位置：首页 > news >正文

React Flow 数据持久化：Django 后端存储与加载的最佳实践（含详细代码解析）

news 来源：原创 2025/7/15 14:56:51

在构建 React Flow 应用时，前端呈现的节点与连线构成的可视化流程只是冰山一角，其背后的数据持久化与灵活调取才是确保应用稳定运行、支持用户数据回溯与协作的关键。因此，后端存储与加载 React Flow 信息的环节，就如同整个应用的数据中枢，它不仅要高效地保存前端传递的复杂结构数据，还要在用户下次访问时精准无误地加载还原，以保障用户体验的连续性与完整性。下面将Django 后端为例进行介绍，也可以换成fastapi等其它后端。

Django 是一款功能强大且备受欢迎的 Python Web 框架，旨在快速搭建高质量的 Web 应用。它内置了丰富的组件和工具，像自动生成的数据库管理、用户认证系统、表单处理等，极大地简化了开发流程，让开发者能专注于核心业务逻辑。

该框架采用了模型 - 视图 - 控制器（MVC）架构的变体 —— 模型 - 视图 - 模板（MVT）架构。模型层负责与数据库交互，处理数据的存储和读取；视图层决定向用户展示哪些数据；模板层则专注于数据的呈现样式，这种分层设计使代码结构清晰，便于维护和扩展。

凭借高效的开发效率、强大的安全性保障（如防止 SQL 注入、跨站脚本攻击等）以及出色的可扩展性，Django 在各类 Web 项目中广泛应用，无论是小型个人博客，还是大型企业级应用，都能发挥其优势，成为众多开发者构建后端服务的首选框架之一。

Python 环境可使用Anaconda 或 Miniconda 进行安装，相关教程较多，这里简单介绍采用 Miniconda 的安装方式。其安装包下载路径为 https://mirrors.tuna.tsinghua.edu.cn/anaconda/miniconda/。Windows 中下载 exe 文件后直接双击安装即可，安装最后一步尽量勾选环境变量到 Path 中。 Linux 安装步骤如下：

 下载默认环境为 Python 3.10 的版本
wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/miniconda/Miniconda3-py310_23.1.0-1-Linux-x86_64.sh
bash Miniconda3-py310_23.1.0-1-Linux-x86_64.sh
# 一直按回车（Enter）键确认，倒数第3步与最后1步输入“yes”，其他均按回车
source ~/.bashrc

本节示例的总体目录结构如下所示，其中 backend 目录存储了全部后端文件，frontend 则存储了前端项目。

项目结构
exp07-backend/
├── backend/          # Django项目
│   ├── flow/         # 应用目录
│   │   ├── migrations/
│   │   ├── __init__.py
│   │   ├── admin.py
│   │   ├── apps.py
│   │   ├── models.py
│   │   ├── serializers.py
│   │   ├── views.py
│   │   └── tests.py
│   ├── backend/
│   │   ├── __init__.py
│   │   ├── asgi.py
│   │   ├── settings.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   └── manage.py
└── frontend/         # React项目├── src/│   └── App.js    # 包含之前的React代码├── package.json└── public/

1 项目搭建与基础配置

首先，创建项目目录并进入，通过 pip 安装必要的依赖库，前提是已经创建并激活了 python 环境。

mkdir exp07-backend
cd exp07-backend
pip install django djangorestframework django-cors-headers  -i http://mirrors.aliyun.com/pypi/simple/ --trusted-host mirrors.aliyun.com

使用 django-admin 命令创建 Django 项目 backend，并在项目目录下创建应用 flow：

django-admin startproject backend
cd backend
python manage.py startapp flow

然后，在backend/settings.py文件中配置安装的应用和中间件，启用rest_framework、corsheaders和flow应用，并添加 CORS 跨域配置和 REST 框架权限配置：

INSTALLED_APPS = [...'rest_framework','corsheaders','flow.apps.FlowConfig'
]MIDDLEWARE = [...'corsheaders.middleware.CorsMiddleware',
]# 添加以下配置
CORS_ALLOW_ALL_ORIGINS = True  # 开发环境临时配置
REST_FRAMEWORK = {'DEFAULT_PERMISSION_CLASSES': ['rest_framework.permissions.AllowAny']
}

2 定义数据类型

在 flow/models.py 文件中，定义两个模型类 FlowNode 和 FlowEdge，即数据库表结构，分别用于存储 React Flow 中的节点和边的信息：

from django.db import modelsclass FlowNode(models.Model):node_id = models.CharField(max_length=255, unique=True)type = models.CharField(max_length=50)position_x = models.FloatField()position_y = models.FloatField()data = models.JSONField()def __str__(self):return f"{self.type} Node ({self.node_id})"class FlowEdge(models.Model):edge_id = models.CharField(max_length=255, unique=True)source = models.CharField(max_length=255)target = models.CharField(max_length=255)source_handle = models.CharField(max_length=50)target_handle = models.CharField(max_length=50)def __str__(self):return f"Edge {self.source}->{self.target}"

定义好模型后，执行数据库迁移命令，将模型映射到数据库表：

python manage.py makemigrations
python manage.py migrate

执行结果如下图所示。

图1 创建数据库表

3 创建序列化器

在 flow/serializers.py 文件中，基于 rest_framework 的 ModelSerializer 创建FlowNodeSerializer 和 FlowEdgeSerializer，用于将模型实例转换为 JSON 格式数据，以及将 JSON 数据反序列化为模型实例：

from rest_framework import serializers
from .models import FlowNode, FlowEdgeclass FlowNodeSerializer(serializers.ModelSerializer):class Meta:model = FlowNodefields = ['node_id', 'type', 'position_x', 'position_y', 'data']class FlowEdgeSerializer(serializers.ModelSerializer):class Meta:model = FlowEdgefields = ['edge_id','source', 'target','source_handle', 'target_handle']

4 编写视图

在 flow/views.py 文件中，创建 FlowDataAPI 视图类，继承自 APIView，分别实现 GET 和 POST 方法，用于处理获取和保存 React Flow 数据的请求：

from rest_framework.response import Response
from rest_framework.views import APIView
from .models import FlowNode, FlowEdge
from .serializers import FlowNodeSerializer, FlowEdgeSerializerclass FlowDataAPI(APIView):def get(self, request):nodes = FlowNode.objects.all()edges = FlowEdge.objects.all()node_serializer = FlowNodeSerializer(nodes, many=True)edge_serializer = FlowEdgeSerializer(edges, many=True)# 需要把node_id字段改为id返回for node in node_serializer.data:node['id'] = node['node_id']del node['node_id']return Response({'nodes': node_serializer.data,'edges': edge_serializer.data})def post(self, request):# 清除旧数据FlowNode.objects.all().delete()FlowEdge.objects.all().delete()# 保存新节点nodes_data = request.data.get('nodes', [])for node in nodes_data:FlowNode.objects.create(node_id=node['node_id'],type=node['type'],position_x=node['position_x'],position_y=node['position_y'],data=node['data'])# 保存新边edges_data = request.data.get('edges', [])for edge in edges_data:FlowEdge.objects.create(edge_id=edge['edge_id'],source=edge['source'],target=edge['target'],source_handle=edge['source_handle'],target_handle=edge['target_handle'])return Response({'status':'success'}, status=201)

5 配置 URL 路由

在 backend/urls.py 文件中，配置 URL 路由，将 /api/flow-data/ 路径映射到 FlowDataAPI 视图：

from django.contrib import admin
from django.urls import path
from flow.views import FlowDataAPIurlpatterns = [path('admin/', admin.site.urls),path('api/flow-data/', FlowDataAPI.as_view()),
]

6 启动后端与测试

在backend目录下，执行 python manage.py runserver 命令启动 Django 后端，运行结果如下图所示。默认后端启动端口为 8000，也可使用 python manage.py runserver 0.0.0.0:8888 更换端口为 8888。

图2 启动后端

服务启动后我们即可通过 curl 命令或其它 HTTP 工具或程序对 API 进行测试。发送数据（保存到后端）采用 POST 方式，成功则返回 {"status":"success"}。

curl -X POST http://localhost:8000/api/flow-data/ \-H "Content-Type: application/json" \-d '{"nodes": [{"node_id": "1","type": "inputNode","position_x": 0,"position_y": 0,"data": {"label": "输入节点","color": "#ffcccb","value": 10}},{"node_id": "2","type": "ioNode","position_x": 200,"position_y": 0,"data": {"label": "中间节点","color": "#90EE90","value": 2}},{"node_id": "3","type": "outputNode","position_x": 400,"position_y": 0,"data": {"label": "输出节点","color": "#87CEEB","result": 20}}],"edges": [{"edge_id": "e1-2","source": "1","target": "2","source_handle": "right","target_handle": "left"},{"edge_id": "e2-3","source": "2","target": "3","source_handle": "right","target_handle": "top"}]}'

获取数据（从后端加载）命令如下。

curl http://localhost:8000/api/flow-data/

图3 后端加载数据

我们也可直接在网页浏览器中输入 http://localhost:8000/api/flow-data/ 进行查看，如下图所示。

图4 浏览器查看

至此，基于 Django 后端的 React Flow 信息存储与加载功能已完整实现。在实际应用中，还可以根据需求进一步优化代码，如添加数据验证、权限控制、日志记录等功能。

立即关注获取最新动态

点击订阅《React Agent 开发专栏》，每周获取智能体开发深度教程。项目代码持续更新至React Agent 开源仓库，欢迎 Star 获取实时更新通知！FGAI 人工智能平台：FGAI 人工智能平台