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

        在构建 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 models

class 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, FlowEdge

class FlowNodeSerializer(serializers.ModelSerializer):
class Meta:
model = FlowNode
fields = ['node_id', 'type', 'position_x', 'position_y', 'data']

class FlowEdgeSerializer(serializers.ModelSerializer):
class Meta:
model = FlowEdge
fields = ['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, FlowEdgeSerializer

class 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 FlowDataAPI

urlpatterns = [
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 人工智能平台