Django后端有一个React前端

Question

这个想法

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

但是怎么样？

我想让页面动态,但它应该仍然是一个多页网站,网址就像/user/<id>.我想出了以下选项:

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

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

所以？

• 这是解决这个问题的正确方法吗？
• 我在弄清楚如何获取django模板变量(比如request.userReact可访问的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 %}

我在这里有另一个例子可能对你有所帮助.我需要更新它,但它更像是一个使用React与Django REST Framework,并在Django模板系统之前的样板.

希望这可以帮助.