无需REST框架：Django向ReactJS传输文件及本地JSON数据的方法

一、Django向React传输本地文件 #

Django后端实现 #

在Django的views.py中编写普通视图，直接读取本地文件并返回：

from django.http import FileResponse
import os

def serve_file(request):
    # 替换为你的本地文件实际路径
    file_path = os.path.join(os.path.dirname(__file__), 'static/files/sample.pdf')
    # 用FileResponse返回文件，as_attachment=False表示在线预览，设为True则触发下载
    return FileResponse(open(file_path, 'rb'), as_attachment=False)

在urls.py配置对应路由：

from django.urls import path
from . import views

urlpatterns = [
    path('get-file/', views.serve_file, name='get-file'),
]

React前端实现 #

用fetch API请求文件，处理成Blob后可选择下载或展示：

import { useEffect } from 'react';

function FileHandler() {
    useEffect(() => {
        const fetchAndHandleFile = async () => {
            try {
                const response = await fetch('http://你的Django域名/get-file/');
                const blob = await response.blob();
                // 创建临时下载链接
                const url = window.URL.createObjectURL(blob);
                const downloadLink = document.createElement('a');
                downloadLink.href = url;
                downloadLink.download = 'sample.pdf'; // 设置下载文件名
                document.body.appendChild(downloadLink);
                downloadLink.click();
                // 清理资源
                window.URL.revokeObjectURL(url);
                document.body.removeChild(downloadLink);
            } catch (err) {
                console.error('文件请求失败:', err);
            }
        };

        fetchAndHandleFile();
    }, []);

    return <div>正在获取文件...</div>;
}

export default FileHandler;

二、Django向React传输本地生成的JSON/字典数据 #

Django后端实现 #

直接用JsonResponse返回本地生成的字典数据：

from django.http import JsonResponse

def serve_custom_json(request):
    # 本地生成的非数据库来源数据
    custom_data = {
        'title': '自定义数据',
        'content': '这是Django本地生成的JSON内容',
        'details': {
            'version': '1.0',
            'status': 'active',
            'list': ['选项A', '选项B', '选项C']
        }
    }
    return JsonResponse(custom_data)

配置路由：

urlpatterns = [
    # 已有的文件路由
    path('get-json/', views.serve_custom_json, name='get-json'),
]

React前端实现 #

用fetch请求并解析JSON，将数据展示在页面：

import { useState, useEffect } from 'react';

function JsonDataDisplay() {
    const [data, setData] = useState(null);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        const fetchJsonData = async () => {
            try {
                const response = await fetch('http://你的Django域名/get-json/');
                const jsonResult = await response.json();
                setData(jsonResult);
                setIsLoading(false);
            } catch (err) {
                console.error('数据请求失败:', err);
                setIsLoading(false);
            }
        };

        fetchJsonData();
    }, []);

    if (isLoading) return <div>加载中...</div>;
    if (!data) return <div>数据加载失败</div>;

    return (
        <div className="data-container">
            <h2>{data.title}</h2>
            <p>{data.content}</p>
            <h3>详情:</h3>
            <p>版本: {data.details.version}</p>
            <p>状态: {data.details.status}</p>
            <ul>
                {data.details.list.map((item, idx) => (
                    <li key={idx}>{item}</li>
                ))}
            </ul>
        </div>
    );
}

export default JsonDataDisplay;

额外注意 #

• 跨域问题：开发阶段可以在React的package.json中添加"proxy": "http://你的Django域名:8000"，生产环境则在Django中配置django-cors-headers。
• 文件权限：确保Django进程有读取目标文件的权限，避免出现文件读取错误。

内容的提问来源于stack exchange，提问作者Sai ganesh Dokala