Блог

Я изучаю Express и сталкиваюсь с проблемой, которую я не могу понять. Когда я направляюсь в /addPerson , я ожидаю войти name: 'Mike', age: 30 в консоль. Вместо этого я ничего не записал в консоль. Что не так в моем коде?

вот server.js код

 const Express = require('express'),
      app     = Express(),
      PORT    = process.env.PORT || 5000,
      parser  = require('body-parser'),
      data    = []

// initialize the main project folder
app.use(Express.static('public'))

// running the server
app.listen(PORT, () => {
    console.log(`Server is running at port ${PORT}`);
})

// include body parser to handle POST requests
app.use(parser.urlencoded({extended: false}))
app.use(parser.json())

// setup CORS
const cors = require('cors')
app.use(cors())

// GET request
app.get('/', (req, res) => {
    res.send('<h1>Home Page</h1>')
})
app.get('/addPerson', (req, res) => {
    res.send('<h1>Hello Hany</h1>')
})

// POST request
app.post('/addPerson', (req, res) => {
    data.push(req.body)
    console.log(data);
})
 

и вот app.js код на стороне клиента

 const postData = async ( url = '', data = {})=>{
    console.log(data);
      const response = await fetch(url, {
      method: 'POST', 
      credentials: 'same-origin',
      headers: {
          'Content-Type': 'application/json',
      },
     // Body data type must match "Content-Type" header        
      body: JSON.stringify(data),
    });

      try {
        const newData = await response.json();
        console.log(newData);
        return newData;
      }catch(error) {
      console.log("error", error);
      }
  }

postData('/addPerson', {name: 'Mike', age: 30});
 

это структура файлов

Хорошо, я взглянул на ваш код, и это то, что я заметил. В вашем server.js файле у вас есть этот блок кода:

 app.get('/addPerson', (req, res) => {
    res.send('<h1>Hello Hany</h1>')
})
 

Это отправка обратно статического тега H1, когда пользователь создает запрос get localhost:5000/addPerson . Затем, прямо под этим, у вас есть свой почтовый маршрут, но вы никогда не получаете к нему полного доступа из любого места (я просмотрел весь ваш app.js код, чтобы перепроверить).

Вместо этого я изменил ваш код, чтобы возвращать статический HTML-файл с кнопкой, которая позволяет вам вызывать эту функцию (просто в качестве примера, чтобы вы могли видеть, что ваши маршруты действительно работают). Это не самое чистое решение вашей проблемы, но я просто хотел убедиться, что вы видите, в чем проблема, поскольку я был на вашем месте раньше, когда впервые начал работать с express. Вы можете взглянуть на CodeSandbox, который я настроил ниже, чтобы воспроизвести вашу проблему, и просмотреть весь код, чтобы получить представление.

Чтобы правильно решить вашу проблему с помощью app.js файла, вам нужно будет использовать файл javscript в качестве вашего «интерфейса». Лично я большой поклонник React, поэтому я обычно обслуживаю свой интерфейс с помощью React, в то время как мой серверный сервер express. Вы также можете очень легко обслуживать этот файл с помощью NodeJS аналогично тому, как вы используете свой «серверный сервер». Если бы вы использовали подход React, вы могли бы изменить этот код:

 app.get("/addPerson", (req, res) => {
  res.sendFile(path.resolve(__dirname, "public", "index.html"));
});
 

Чтобы найти нужный раздел интерфейса, используйте React (я могу порекомендовать react-router, если вам требуется несколько маршрутов, но я пока не хочу перегружать вас слишком большим количеством информации) и выполните ту же функцию. Если у вас есть какие-либо вопросы, не стесняйтесь обращаться и дайте мне знать! Надеюсь, это поможет!