Django后端对接ReactJS移动端：技术选型与数据交互咨询

嗨，针对你的问题我来梳理下清晰的解决方案，毕竟咱们团队现在后端熟Django、前端会React但各自没碰过对方的领域，得找最适配的路子～

先给你明确答案：直接把Django模板变量硬塞进React组件里是绝对不推荐的，会踩一堆坑：

• React是运行在浏览器端的单页应用，Django变量是后端渲染阶段生成的，两者运行环境完全分离，硬耦合会让代码逻辑混乱；
• 这种写法容易引发XSS安全风险，而且变量更新时React没法自动感知，必须手动刷新页面，完全浪费了React的动态渲染优势；
• 对你们团队来说，前端不懂后端、后端不懂移动端，这种耦合写法后续维护起来会一团糟。

不过有几种安全、易上手的方式能让Django和React顺畅共享数据，完全适配你们的技术背景：

方案1：Django托管静态文件 + 初始数据注入（入门首选） #

这个方案不需要写复杂的API，能快速打通前后端，适合先跑通流程：

• 把React打包好的静态文件（就是build文件夹里的所有内容）放到Django的static目录，或者在Django的settings.py里配置STATICFILES_DIRS指向React的build目录；
• 在Django的模板文件（比如index.html）里，用<script>标签把需要的初始数据（比如当前登录用户信息、API基础地址）以JSON形式注入到全局变量：

  <!-- Django模板中的index.html -->
  <script>
    // 用Django的safe过滤器避免JSON被转义
    window.__INITIAL_DATA__ = {{ initial_data|safe }};
  </script>
  <!-- 引入React打包后的主脚本 -->
  <script src="{% static 'js/main.xxx.js' %}"></script>
  

  后端视图里生成这个初始数据：

  # Django views.py
  import json
  from django.shortcuts import render
  from django.conf import settings
  
  def index(request):
      # 把需要传给React的初始数据转成JSON字符串
      initial_data = json.dumps({
          'current_user': request.user.username if request.user.is_authenticated else None,
          'api_base': settings.API_BASE_URL
      })
      return render(request, 'index.html', {'initial_data': initial_data})
  

• React里直接读取window.__INITIAL_DATA__获取初始数据，后续的动态数据（比如地点列表、预订状态）再通过API请求获取。

方案2：Django REST Framework（DRF）构建API + React独立部署（进阶推荐） #

这是前后端分离的标准方案，虽然需要写API，但DRF对Django开发者极其友好，前端只需要调用现成的API就行，完全不用懂后端逻辑：

后端侧（你负责）： #

1. 安装DRF：pip install djangorestframework；
2. 用DRF的ModelSerializer快速把你的Django模型转成API响应，比如用户资料的API：

   # serializers.py
   from rest_framework import serializers
   from .models import UserProfile
   
   class UserProfileSerializer(serializers.ModelSerializer):
       class Meta:
           model = UserProfile
           fields = ['id', 'username', 'avatar', 'bio']
   
   # views.py
   from rest_framework import generics
   from .models import UserProfile
   from .serializers import UserProfileSerializer
   
   class UserProfileView(generics.RetrieveUpdateAPIView):
       queryset = UserProfile.objects.all()
       serializer_class = UserProfileSerializer
   

3. 在urls.py里配置API路由，把API路径和视图绑定；
4. 处理跨域问题：如果React移动端是独立部署的，安装django-cors-headers并配置允许React的域名访问API就行。

前端侧（前端开发者负责）： #

• 用React常用的axios或者原生fetch发送HTTP请求调用API，比如获取用户资料：

  // React组件中
  import axios from 'axios';
  import { useEffect, useState } from 'react';
  
  function UserProfile() {
      const [profile, setProfile] = useState(null);
  
      useEffect(() => {
          const fetchProfile = async () => {
              const res = await axios.get('/api/user/profile/');
              setProfile(res.data);
          };
          fetchProfile();
      }, []);
  
      return profile ? <div>{profile.username}</div> : <div>加载中...</div>;
  }
  

• 移动端开发的话，前端可以用Expo，基于React Native，不需要配置原生开发环境，写React代码就能生成iOS/Android应用，和现有技术栈完全兼容，学习成本极低。

你没接触过移动端开发，前端也没后端经验，优先选Expo：

• 不需要装Xcode、Android Studio这些复杂的原生开发工具，用Expo CLI就能搞定；
• 代码写法和Web端React几乎一致，前端开发者无缝切换，完全不用学原生开发；
• 后续如果需要定制原生功能，再逐步过渡到纯React Native就行。

内容的提问来源于stack exchange，提问作者Jekson