如何无需额外请求为React传递Django DRF中可后台配置的静态内容数据

核心逻辑说明 #

你现有的通过TemplateView注入上下文的思路是完全可行的，核心逻辑是将CMS配置序列化后注入到HTML的全局变量中，React直接读取全局变量即可，无需额外发起接口请求。

生产环境配置 #

1. 首先修改React项目打包后的index.html模板，在head标签内加入全局变量注入的代码：

<head>
  <!-- 其他原有head内容 -->
  <script>
    window.CMS_CONFIG = {{ cms_config|safe }};
  </script>
</head>

2. 调整自定义TemplateView的逻辑，将数据库查询到的配置序列化为JSON字符串传入模板：

import json
from django.views import generic
from cms.models import CMSConfig # 替换为你自己的CMS配置模型

class CustomIndexView(generic.TemplateView):
    template_name = 'index.html'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        # 读取CMS配置
        cms_config = CMSConfig.objects.first()
        # 序列化配置为JSON字符串
        config_data = {
            "background_url": cms_config.background_url,
            "about_text": cms_config.about_text,
            # 其他需要注入的配置字段
        }
        context["cms_config"] = json.dumps(config_data)
        return context

3. 替换根路由配置中的路由规则，使用自定义的CustomIndexView替代默认的TemplateView：

urlpatterns += [re_path(r'^.*', CustomIndexView.as_view())]

生产环境下React代码直接读取window.CMS_CONFIG即可拿到所有注入的配置数据。

开发环境适配 #

因为开发环境使用react-scripts start启动独立前端服务，不走Django的模板渲染逻辑，可选择以下两种适配方案：

• 方案一（最简便）：React代码内做环境判断，开发环境返回模拟配置

// 封装统一的配置读取方法
export const getCMSConfig = () => {
  if (process.env.NODE_ENV === 'production') {
    return window.CMS_CONFIG
  }
  // 开发环境返回模拟测试数据
  return {
    background_url: '本地测试背景图地址',
    about_text: '本地测试关于板块内容'
  }
}

所有需要用到配置的地方直接调用getCMSConfig()即可。

• **方案二（实时读取Django配置）：本地同时启动Django服务和React开发服务，在React项目的package.json中添加代理配置"proxy": "http://localhost:8000"，开发时直接访问Django服务地址（默认http://localhost:8000），即可和生产环境一致读取注入的配置。

• 单例配置模型：实现CMS配置模型的单例限制，保证数据库中只有一条有效配置记录，避免读取到错误数据，可在模型的save方法中删除其他旧有记录实现。
• 配置缓存：因为CMS配置修改频率极低，可使用Django缓存框架缓存序列化后的配置数据，设置合理的过期时间，后台修改配置时主动清空缓存，避免每次请求index.html都查询数据库，降低接口响应耗时。
• 字段校验：注入配置前对字段值做合法性校验，避免非法值传入前端导致页面渲染异常。

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