Question

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

`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'来处理这条路线？

Answer 1

如果我理解你的问题，你在这里发布的代码就是服务器端代码。您使用create-react-app创建的应用程序是前端应用程序，因此没有任何服务器端代码。但是，您可以托管第二台服务器，该服务器将公开您需要的api路由，然后使用像axios这样的http库调用该服务器。

Answer 2

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

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

在我的webpack.config.dev.json文件中，我在devServer json块中定义了代理设置。特别： proxy: { "/api": "http://localhost:3001" },
在我的package.json文件中，我配置了一个启动脚本，该脚本使用npm-run-all同时启动 {em} react-app和express

我使用server.js启动快递;这是我存储您在问题中列出的相应代码的地方。

使用create-react-app

2 个答案: