想法

Question

想法

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

但是如何？

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

每个页面的模板。每个页面都有一个包。让Django处理路线。

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

因此？

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

Answer 1

您的计划应该有效，但我认为您应该考虑您希望您的应用程序有多大动态。

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

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

这是一个大型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模板系统的前提。

希望这有帮助。

Answer 2

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

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

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

Django后端有一个React前端

想法

但是如何？

因此？

2 个答案: