react + webpack - 传递 POST 数据来构建答案

【问题标题】：react + webpack - pass POST data to buildreact + webpack - 传递 POST 数据来构建
【发布时间】：2016-08-29 06:00:22
【问题描述】：

来自 PHP 背景，我曾经有一个 index.php，它做了两件事：

如果未设置参数，则提供网页；
或在请求中包含特定 POST 参数时提供 JSON 数据。

类似这样的：

// -- index.php
<?php
    if ($_POST["some_parameter"]) {
        ...
        echo json_encode(someArrayData);
        exit(0);
    }
?>

<html>
    ...
</html>

我已经用 npm、webpack、webpack-dev-server 和 react 构建了完整的前端应用程序。完成第一部分后，当请求包含特定 POST 参数时，如何有效地提供 JSON 数据而不是 HTML？

我可以看到两种方法：

像往常一样构建前端，每次构建包时，修改index.html，将我的PHP代码注入其中，并将其重命名为index.php。然后我必须通过 apache 或 nginx 运行这个文件夹，这样我才能运行 index.php 脚本。这种方法非常丑陋，可能是最糟糕的方法。
运行一个单独的 PHP 服务器，它只提供数据或重定向到静态 webpack 生成的构建。然后所有请求都应该从这个服务器开始，这个服务器决定是提供数据还是重定向到前端。问题在于巧妙地将从请求中接收到的 POST 数据传递给静态反应应用程序。据我所知，唯一的方法是在重定向中包含一个 URL (GET) 参数，并在前端使用 javascript 手动解析它。在我看来，这是一个肮脏的解决方案。

所以，总结一下：

我需要一种有效的方法来在 react/webpack/webpack-dev-server 环境中获取 POST 数据。
它应该适用于我的热模块替换开发设置。
我可以切换到基于节点的后端，例如 express。
静态反应应用程序中不应涉及任何 ajax。

有什么想法吗？必须有办法正确地做到这一点。

【问题讨论】：

你考虑过服务器端渲染吗？它可以让你在 react 中编写前端，并且仍然提供包含所有内容的静态页面，而无需使用 AJAX 按需获取数据。
@Bhargav 服务器端渲染对我来说似乎是一个非常重要的概念，因为我仍在调整所有 webpack + dev server + es6 + react 环境。有没有更简单的方法来做到这一点？虽然感谢您指出服务器端渲染可以解决这个问题，因为我将服务器端渲染作为我的目标堆栈的一部分。
并非如此。另外，我真的不明白在 GET 请求上提供 HTML 和在 POST 上提供 JSON 的用例。这不是处理资源的语义方式。我建议您使用基于 node.js 的后端（如 express）来查看服务器端渲染。与您当前所做的事情相比，这应该不会有太大的变化，并且会导致您正在寻找的东西（根据您的问题）。
一点背景知识，我正在开发一个数据浏览器模块作为 Galaxy 实例的一部分 (galaxyproject.org)。我需要能够在此 Galaxy 实例和我的应用程序之间来回传递数据，并且该应用程序在没有 Galaxy 的情况下仍应完全可用。 Galaxy 只通过 POST 传递参数，所以我必须专门获取这个 POST 数据。
Galaxy 通过 GET 将用户重定向到我配置的 URL，用户应该会在我的 react 应用程序上浏览数据。然后，我的 react 应用程序必须将用户制作的过滤器参数发布回 Galaxy，然后 Galaxy 将这个作业排队等待执行。稍后，Galaxy POST 到相同的配置 URL，并使用它之前收到的过滤器参数作为 POST 请求的一部分。 Galaxy 需要有关此响应的数据，并将其下载为 CSV/TSV。

标签： reactjs webpack webpack-dev-server

【解决方案1】：

更新：我通过简单地通过 webpack 配置将 index.php 从我的源目录复制到我的构建目录来解决这个问题。我将 build 文件夹提供给 PHP 服务器，并保留 webpack --watch 构建我的源代码。

我失去了自动重新加载和 css 注入等内置功能，但不必为非常简单的任务（获取单个 POST 变量）实现 SSR 带来的便利是值得的。

对于任何感兴趣的人，我还添加了 2 个 npm 脚本：

npm run start 使用热重载运行我原来的 webpack-dev-server，提供静态内容，包括静态 index.html 文件
npm run static 运行 webpack --watch 将 index.php 文件复制到构建目录

这让我可以在开发前端时进行热重载，并允许在编程逻辑时获取 POST 数据。

简单方便，适用于大多数网络托管服务提供商。

【讨论】：