React AXIOS post - 简单测试不起作用（快递）

Question

我有一个内置的 react 前端，我使用一个简单的样板将 express 与 react 连接起来。似乎有很多不同的方法来设置我迷路的简单 RESTful api。我正在尝试做一些非常简单的后端到前端通信。

我已经做了一个 get 请求推送到后面，并且正在使用 Axios 来获取数据：

AccountsDB 只是用于内部测试的基本 JSON 数据

[
  {
    "id": "5b68d6f13e2c773581221620",
    "index": 0,
    "firstName": "Josefa",
    "lastName": "Lynch",
    "pin" : 1234
  }
]

在我的 express index.js 中，我有一个简单的 GET

app.get('/api/getAccounts', (req, res) => res.json(AccountsDB));

在我的 React 中，我使用 axois 获取数据：

componentDidMount () {
    axios.get ('/api/getAccounts')
    .then (res => this.setState({ Accounts : res.data}));
}

完全有效。我在主要的反应组件中显示帐户。 在组件内部，我还有一个论坛来“创建”一个新帐户，并将其推送到 AccountsDB 文件中，仅用于内部测试（我正在学习后端，之后将连接 mongoDB）。

我对 POST 方法的逻辑（在这里找到 Axios Cheet Sheet）：

    axios.post('/api/putAccounts', {
        firstName: 'Fred',
        lastName: 'Flintstone'
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

我将其附加到一个按钮上以发布数据。我打开 POST man 并导航到“/api/putAccounts”，但什么也没看到。

我不明白如何将数据准确地收集到 express 中。我的愚蠢尝试：

app.post('/api/putAccounts', (req,res) => {
    // res.send("sent!") // post man see's this?
    // var account = req.account;
    // res.send(req.firstName);
});

要详细说明...

React 应用开启 -> localhost:3000

Express 应用开启 -> localhost:8080

使用 webpack 和代理：

 devServer: {
    port: 3000,
    open: true,
    proxy: {
      '/api': 'http://localhost:8080'
    }

在“http://localhost:3000/admin”下（在我的 react 应用程序中）我有一个按钮，其中包含 axios.post 发送 firstName : Fred 和 lastName : Flintstone 到 '/api/putAccounts'

我正在尝试让我的快递服务器捕获该帖子，以便我可以对其进行操作并将其添加到数据库中。

在我进入数据库之前，我试图确保我了解 POST 的工作原理（我了解 GET）。所以我试图获取数据，并将其显示在某个地方，这就是我在邮递员中查看它的意思。

也许我说这一切都错了，因此为什么会感到困惑。

Answer 1

在邮递员中，您需要在发出请求时在请求正文中发送名字和姓氏，如下所示

  {
      "firstName": "Hi",
      "lName": "Hello"
  }

这样你就可以做 req.body.firstName 来得到它的值低于

  app.post('/api/putAccounts', (req,res) => {
       const fName = req.body.firstName;
       const lName = req.body.lastName;
       res.json({"fName":fName, "lastName": lName});
  });