Question

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

我已经明确表达了获取请求以将其推回后台的过程，并且正在使用Axios来获取数据：

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

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

在我的快速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”，什么也看不到。

我不知道如何准确地收集数据来表达。我的愚蠢尝试：

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

要详细说明...

反应应用程序处于-> localhost：3000

Express应用已打开-> localhost：8080

使用webpack和代理：

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

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

我正在尝试让我的快递服务器抓住该职位，以便我可以对其进行处理并将其添加到数据库中。

在进入数据库之前，我试图确保自己了解POST的工作方式（我了解GET）。因此，我试图获取数据并将其显示在某处，这就是我在邮递员中查看数据的意思。

也许我正在解决所有这些错误，因此为什么会感到困惑。

Answer 1

在邮递员中，您需要在发出邮寄请求时在req正文中发送firstName和lastName

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

React AXIOS发布-简单测试不起作用（快速）

1 个答案: