使用 create-react-app 更新 json 文件的 POST 请求答案

【问题标题】：POST request with updating json file using create-react-app使用 create-react-app 更新 json 文件的 POST 请求
【发布时间】：2018-02-18 20:20:01
【问题描述】：

我正在使用 create-react-app 制作一个项目。有一个配置的服务器等等。我在我的应用程序中使用 react-router-dom 进行路由。有“评论”组件。当它开始渲染自己时，它会转到我的本地 json 文件并使用 ajax 从那里获取 cmets。当用户单击“提交”时，它将带有表单字段的 POST 请求发送到同一个 json 文件。我有将新对象添加到我的 json 文件的代码。当用户在 '/api/cmets' 路线中时，它应该可以工作。这是向我的 json 文件添加新对象的代码（需要 express）：

`app.post('/api/comments', function(req, res) {
  fs.readFile(COMMENTS_FILE, function(err, data) {
    if (err) {
      console.error(err);
      process.exit(1);
    }
    var comments = JSON.parse(data);
    var newComment = {
      id: Date.now(),
      author: req.body.author,
      text: req.body.text,
    };
    comments.push(newComment);
    fs.writeFile(COMMENTS_FILE, JSON.stringify(comments, null, 4), 
function(err) {
      if (err) {
        console.error(err);
        process.exit(1);
      }
      res.json(comments);
    });
  });
});`

但是如果我使用“create-react-app”并且它使用它自己配置的服务器（据我所知），我不知道我应该把这段代码放在哪里。也许有一种方法可以更改“create-react-app”使用的服务器并将这段代码放在那里来处理这条路线？或者也许有一种方法可以使用“react-router”来处理这条路线？

【问题讨论】：

标签： node.js ajax reactjs express react-router

【解决方案1】：

如果我正确理解您的问题，您在此处发布的代码是服务器端代码。您使用 create-react-app 制作的应用程序是前端应用程序，因此没有任何服务器端代码。但是，您可以托管第二个服务器，该服务器将公开您需要的 api 路由，然后使用 axios 之类的 http 库调用该服务器。

【讨论】：

我刚刚发现 here 'create-react-app' 使用 webpack dev-server，我需要使用“并发”库一次加载 2 个服务器。第一个应该是 webpack 的开发服务器，第二个应该是我的 API 服务器。但我不确定这两种方法中的哪一种选择。 Axios 比这个更好吗？

【解决方案2】：

我使用create-react-app 和express 作为我的api 服务器。设置express 与webpack-dev-server 一起运行是create-react-app 支持的功能。

我在package.json 中定义的启动脚本中使用npm-run-all 来启动客户端和代理express api 服务器。以下是我认为我需要做的所有事情：

在我的webpack.config.dev.json 文件中，我在devServer json 块中定义了一个代理设置。具体来说： proxy: { "/api": "http://localhost:3001" },
在我的package.json 文件中，我配置了一个启动脚本，该脚本使用npm-run-all 同时启动两个react-app 和express。
我用server.js启动快递；这是我存储您在问题中概述的代码的等效位置。

【讨论】：