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 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 人工智能平臺