React AXIOS post - простой тест не работает (экспресс) - PullRequest
Новая
       7

React AXIOS post - простой тест не работает (экспресс)

0 голосов
/ 20 сентября 2018

У меня есть встроенный интерфейс реагирования, я использовал простой шаблон для соединения экспресса с реагированием.Кажется, есть так много разных способов настроить простой 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}));
}

Полностью работает.Я отображаю учетную запись в рамках основного компонента реакции.Внутри компонента у меня также есть форум для «создания» новой учетной записи и отправки ее в файл 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);
});

Более подробно ...

Приложение React включено -> localhost: 3000

Приложение Expressвключен -> localhost: 8080

с использованием веб-пакета и прокси-сервера: 

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

под 'http://localhost:3000/admin' (в моем приложении для реагирования) У меня есть кнопка с axios.post, которые отправляют firstName: Fred и lastName: Flintstone на '/api/putAccounts'

Я пытаюсь, чтобы мой экспресс-сервер перехватил сообщение, чтобы я мог манипулировать им и добавить его в базу данных.

Прежде чем приступить к работе с базами данных, я пытаюсь убедиться, что понимаю, как работает POST (я понимаю GET).Поэтому я пытаюсь получить данные и отобразить их где-то, это я имею в виду, рассматривая их в почтальоне.

Может быть, я все об этом ошибаюсь, поэтому и возникла путаница.

1 Ответ

0 голосов
/ 20 сентября 2018

В почтальоне вам нужно отправить 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});
  });
...