javascript - React AXIOS 帖子 - 简单测试不起作用(快速)

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}));
}

完全有效。我在主要 react 组件中显示帐户。在组件内部，我还有一个论坛可以“创建”一个新帐户，并将其推送到 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'

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

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

也许我的做法全错了，所以才造成困惑。

Answer 1

在 postman 中，您需要在发出邮寄请求时像下面这样在请求正文中发送名字和姓氏

  {
      "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});
  });