Блог

Главная - Вопросы по программированию - отреагируйте экспрессом. как получить данные mongodb?

отреагируйте экспрессом. как получить данные mongodb?

#node.js #reactjs #mongodb #express #fetch

Вопрос:

я не знаю, как получить course2 в express из react… console.log(course2) дает мне правильные данные из mongodb…

но как мне использовать fetch в react для получения этих данных?
я еще не изучал axios, но если кто-то знает, как это сделать в axios, это нормально….

 const express = require('express')
const mongoose = require('mongoose')
const app = express()

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    next();
});

app.use(express.json()); //Used to parse JSON bodies... post values
app.use(express.urlencoded( {extended: true})); //Parse URL-encoded bodies (html-form)

mongoose.connect("mongodb srv://-----", 
    { useUnifiedTopology: true, useNewUrlParser: true })
    .then(() => console.log('connected'))
    .catch(err => console.error('no connection', err))

 const sensor1 = new mongoose.Schema({
    temp1: Number,
    hum1:  Number,
    date: { type: Date, default: Date.now },    
})

 const Course = mongoose.model('Course', sensor1)  

var db = mongoose.connection
db.on('error', console.log.bind(console, "connection error")); // för insertOne
db.once('open', function(callback){ 
    console.log("connection succeeded"); 
}) 


async function getCourse() {
   let course2 = await Course.find()
   console.log(course2)
}
app.listen(5000, () => {
    console.log('Listening on port 5000')
})   

getCourse()```

Ответ №1:

Шаг 1. Создайте конечную точку

Сначала вам нужно определить конечную точку в вашем бэкэнде/экспресс-приложении. Например:

 app.get("/courses", async (req, res, next) => {
   try {
      const course2 = await Course.find();
      res.status(200).send(course2);
   } catch (err) {
      console.log(err);
      res.status(500).send();
   }
});

Теперь у вас есть конечная точка, которую вы можете вызвать из своего кода интерфейса: http://localhost:5000/courses .

Шаг 2: Используйте конечную точку с помощью Axios

Axios довольно прост в использовании. Например:

 import axios from 'axios'

...

axios.get('http://localhost:5000/courses').then(response => {
     // response.data is your 'course2'
     console.log(response.data)
}).catch(err => {
     console.log(err);
});

Если вы собираетесь вызвать этот новый api в своем приложении React, вы , вероятно, поместите этот вызов axios в a componentDidMount useEffect или какую-либо другую функцию.

Метки: