带有 React 前端的 Django 后端

Posted 2023-02-24

【中文标题】带有 React 前端的 Django 后端

【英文标题】：Django back end with a React front end

【发布时间】：2017-03-04 20:22:49

【问题描述】：

想法

我已经开始构建这种社交媒体类型的网站，其中包括基本的社交媒体页面，例如个人资料、状态提要、搜索、事件等。每个页面都是一个单独的 django 模板，数据通过使用 django 模板引擎中的变量进行可视化。但此时，我想使用 ReactJS 将这些静态页面更改为更动态的页面。

但是怎么做呢？

我想让页面动态化，但它仍然应该是一个 多页面 网站，其 URL 类似于 /user/<id>。我想出了以下选项：

每个页面都有一个模板。每页有一个捆绑包。让 Django 处理路由。

为每个页面创建一个单独的 Django 模板，就像普通的 Django 应用程序一样。 使用django-webpack-loader 加载包。 每个页面都有一个单独的包。通过在webpack.config.js 中添加多个条目来创建捆绑包。当我们有 40 多个不同的页面时，这可能会导致相当多的入口点。 URL 由 Django 处理，并且可由 React 通过模板中的公共

javascript

变量访问。 Example。页面的其他初始数据（如用户名、头像、个人资料信息）也通过 Django 模板引擎加载到此变量中。 无需重新加载页面的表单验证等动态功能由

React

和使用 django-rest-framework 的

Django Rest API

处理。

那么？

这是处理此问题的正确方法吗？ 我在弄清楚如何将 django 模板变量（例如 request.user）获取到 React 可访问的 javascript 变量时遇到了一些麻烦。 如果是这样，我应该如何构建这样的应用程序？ 可以为每个单独的页面打包吗？例如，所有页面都有相同的标题。在每个包中包含这个标头似乎有点过头了。

【参考方案1】：

你的计划应该可行，但我认为你应该考虑你的应用程序有多少是动态的。

如果您只需要几个页面即可拥有来自 React 的动态功能，那么只需放入一些自包含的 React 组件并按照您的计划将它们分开捆绑可能是个好主意。但是，如果您的大部分项目都需要是动态的，我认为最好忘记大多数页面的 Django 模板，而只需创建一个可靠的 API 后端供 React 使用。

这是一个快速示例，说明如何配置 webpack 以捆绑您的 react 组件：

这是一个大型 Django 项目的摘录，我们在该项目中使用了几个 React 组件。 bundle 有一堆其他的 javascript 东西，report 是一个独立的 React 组件：

webpack.config.js

    ...
    entry: 
        bundle: './server/apps/core/static/core/app.js',
        report: './server/apps/reports/static/reports/js/app.jsx'
    ,
    output: 
      path: path.resolve('./server/apps/core/static/core/bundles'),
      path: path.resolve('./server/apps/core/static/core/bundles'),
      filename: 'bundle.js' + filename: '[name].js'
    ,
    resolve: 
      extensions: ['', '.js', '.jsx']
    ,
    ...

然后在模板中粘贴你想要的组件吧：

% block content %
    <div id="root"></div>
% endblock content %
% block extrascripts %
    <script type="text/javascript">
        var dataUrl = "% url 'reports:data-chart' %";
    </script>
    <script src="% static 'core/bundles/report.js' %"></script>
% endblock extrascripts %

我有另一个例子here 可能有助于玩弄。我需要更新它，但它更像是使用 React 和 Django REST 框架的样板，并在 Django 模板系统之前。

希望这会有所帮助。

【讨论】：

想一个常见的网站布局：页眉、内容、页脚。标题有一些动态组件：带有即时搜索的搜索栏、下拉菜单。页脚是完全静态的。内容取决于页面。个人资料页面可以有一些动态组件：状态提要、弹出窗口。注册页面需要表单验证而无需重新加载页面。我一直认为 React 不是最好的解决方案，因为它有点矫枉过正。

【参考方案2】：

这当然是一门可行的课程。

这有一些很好的解决方案可以解决您关于将模板变量转换为 React 的 JS 变量的问题：How do I insert a Django template variable into a React script?

您应该能够捆绑任何组合的 JS 并构建您的模板，以便每个都提取适当的捆绑包。例如，我希望您有一个包含标题（和任何其他站点范围的 html）的基本模板，然后为您的各个页面扩展该模板。