Question

来自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构建了完整的前端应用程序，并做出反应。完成第一部分后，当请求包含特定的POST参数时，如何有效地提供JSON数据而不是HTML？

我可以看到两种方法：

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

所以，总结一下：

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

有什么想法吗？必须有一种方法可以做到这一点。

Answer 1

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

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

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

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

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

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

react + webpack - 将POST数据传递给build

1 个答案: