javascript - 带有 React 前端的 Django 后端

Question

想法

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

但是如何呢？

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

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

• 为每个页面创建一个单独的 Django 模板，就像普通的 Django 应用程序一样。
• 使用django-webpack-loader加载包。
• 每个页面都有一个单独的包。通过在 webpack.config.js 中添加多个条目来创建 bundle .当我们有 40 多个不同的页面时，这可能会导致相当多的入口点。
• URL 由 Django 处理，React 可以通过模板中的公共(public) javascript 变量访问。 Example .页面的其他初始数据(如用户名、头像、个人资料信息)也通过 Django 模板引擎加载到此变量中。
• 无需重新加载页面的表单验证等动态功能由 React 和 Django Rest API 使用 django-rest-framework 处理.

那么呢？

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

Answer 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 Framework 结合使用的样板，并放弃了 Django 模板系统。

希望这对您有所帮助。