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

Posted 2023-02-22

【中文标题】React AXIOS post - 简单测试不起作用（快递）

【英文标题】：React AXIOS post - simple test not working (express)

【发布时间】：2019-02-25 04:16:29

【问题描述】：

我有一个内置的 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）。所以我试图获取数据，并将其显示在某个地方，这就是我在邮递员中查看它的意思。

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

【问题讨论】：

您需要在服务器端使用 req.body.firstName 和 req.body.lastName 访问它

【参考方案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);
  );

【讨论】：

这似乎对我不起作用，我在邮递员中只有一个空对象“”。当我按下我创建的“POST”按钮时，我的控制台确实会显示 data: ..., status: 200, statusText: "OK", headers: ..., config: ..., ...。

为什么要在 post 请求中发送一个空对象。这没有意义。您需要了解发布请求的目的

您对我们有什么期望？

首先，确保您的后端工作正常。尝试使用 Postman 时是否设置了body？

@RobertOchinski，你的后端和你的前端实际上是两个独立的东西。你可以通过你的 React 应用从前端发送数据。这很好，但人们通常在不编写任何前端代码的情况下测试他们的后端。 Postman 用于在没有前端的情况下进行测试。因此，在使用 Postman 进行测试时，您需要自己为发布请求提供数据。先写后端，用 Postman 测试，再写前端代码，再从前端测试。