Hướng dẫn how do you fetch data from mongodb database in node js and display in react? - làm thế nào để bạn tìm nạp dữ liệu từ cơ sở dữ liệu mongodb trong nút js và hiển thị trong phản ứng?

Tôi đang làm việc để tạo một ứng dụng web của một bản đồ tương tác của trường cho trường tôi đang theo học. Ứng dụng web sẽ cho phép sinh viên nhấp vào một tòa nhà cụ thể trong khuôn viên trường, nơi sẽ đưa ra một bản đồ của các lớp học trong tòa nhà đó. Từ đó, người dùng sau đó có thể nhấp vào lớp học sau đó sẽ hiển thị danh sách tất cả các lớp học trong phòng đó cho mỗi ngày của tuần học. Tôi đã tạo cơ sở dữ liệu của riêng mình về tất cả các lớp học được cung cấp tại trường của tôi với các thuộc tính như tên, phần, tòa nhà, RoomNum và Coursenum. Tôi đã thực hiện đủ phần phụ trợ nơi tôi có thể kết nối với cơ sở dữ liệu của mình bằng cách sử dụng insonmia/postman, nơi tôi có thể lọc các lớp dựa trên phần xây dựng, số phòng và phần khóa học (kế toán, sinh học, v.v.) Hiển thị dữ liệu từ cơ sở dữ liệu của tôi trên phần phía trước của ứng dụng của tôi.

Đây là phần phụ trợ của ứng dụng của tôi cho đến nay ...

server.js

import express from "express"
import cors from "cors"
import classes from "./api/classes.route.js"

const app = express()

app.use(cors())
app.use(express.json())

app.use("/api/v1/classes", classes)
app.use("*", (req, res) => res.status(404).json({ error: "not found"}))

export default app

index.js

import app from "./server.js"
import mongodb from "mongodb"
import dotenv from "dotenv"
import ClassesDAO from "./dao/ClassesDAO.js"

dotenv.config()
const MongoClient = mongodb.MongoClient

const port = process.env.PORT || 8000

MongoClient.connect(
  process.env.UJCLASSES_DB_URI,
  {
    maxPoolSize: 50,
    wtimeoutMS: 2500,
    useNewUrlParser: true }
  )
  .catch(err => {
    console.error(err.stack)
    process.exit(1)
  })
  .then(async client => {
    await ClassesDAO.injectDB(client)
    app.listen(port, () => {
      console.log(`listening on port ${port}`)
    })
  })

classesDAO.js

import mongodb from "mongodb"
const ObjectId = mongodb.ObjectID
let classes

export default class ClassesDAO {
  static async injectDB(conn) {
    if (classes) {
      return
    }
    try {
      classes = await conn.db(process.env.UJCLASSES_NS).collection("Classes")
    } catch (e) {
      console.error(
        `Unable to establish a collection handle in ClassesDAO: ${e}`,
      )
    }
  }

  static async getClasses({
    filters = null,
    page = 0,
    classesPerPage = 20,
  } = {}) {
    let query
    if (filters) {
      if ("name" in filters) {
        query = { $text: { $search: filters["name"] } }
      } else if ("section" in filters) {
        query = { "section": { $eq: filters["section"] } }
      } else if ("course" in filters) {
        query = { "course": { $eq: filters["course"] } }
      } else if ("room" in filters) {
        query = {"room": { $eq: filters["room"] } }
      }
    }

    let cursor
    
    try {
      cursor = await classes
        .find(query)
    } catch (e) {
      console.error(`Unable to issue find command, ${e}`)
      return { classesList: [], totalNumClasses: 0 }
    }

    const displayCursor = cursor.limit(classesPerPage).skip(classesPerPage * page)

    try {
      const classesList = await displayCursor.toArray()
      const totalNumClasses = await classes.countDocuments(query)

      return { classesList, totalNumClasses }
    } catch (e) {
      console.error(
        `Unable to convert cursor to array or problem counting documents, ${e}`,
      )
      return { classesList: [], totalNumClasses: 0 }
    }
  }
  
  static async getSections() {
    let sections = []
    try {
      sections = await classes.distinct("section")
      return sections
    } catch (e) {
      console.error(`Unable to get sections, ${e}`)
      return sections
    }
  }

  static async getBuildings() {
    let buildings = []
    try {
      buildings = await classes.distinct("building")
      return buildings
    } catch (e) {
      console.error('Unable to get buildings, ${e}')
      return buildings
    }
  }

  static async getRooms() {
    let rooms = []
    try {
      rooms = await classes.distinct("room")
      return rooms
    } catch (e) {
      console.error('Unable to get rooms, ${e}')
      return rooms
    }
  }
}

classes.controller.js

import ClassesDAO from "../dao/ClassesDAO.js"

export default class ClassesController {
  static async apiGetClasses(req, res, next) {
    const classesPerPage = req.query.classesPerPage ? parseInt(req.query.classesPerPage, 10) : 20
    const page = req.query.page ? parseInt(req.query.page, 10) : 0

    let filters = {}
    if (req.query.section) {
      filters.section = req.query.section
    } else if (req.query.course) {
      filters.course = req.query.course
    } else if (req.query.name) {
      filters.name = req.query.name
    } else if (req.query.building) {
      filters.name = req.query.building
    } else if (req.query.room) {
      filters.room = req.query.room
    }

    const { classesList, totalNumClasses } = await ClassesDAO.getClasses({
      filters,
      page,
      classesPerPage,
    })

    let response = {
      classes: classesList,
      page: page,
      filters: filters,
      entries_per_page: classesPerPage,
      total_results: totalNumClasses,
    }
    res.json(response)
  }
  
  static async apiGetClassSections(req, res, next) {
    try {
      let section = await ClassesDAO.getSections()
      res.json(section)
    } catch (e) {
      console.log(`api, ${e}`)
      res.status(500).json({ error: e })
    }
  }

  static async apiGetClassBuildings(req, res, next) {
    try {
      let building = await ClassesDAO.getBuildings()
      res.json(building)
    } catch (e) {
      console.log('api, ${e}')
      res.status(500).json({ error: e })
    }
  }

  static async apiGetClassRooms(req, res, next) {
    try{
      let room = await ClassesDAO.getRooms()
      res.json(room)
    } catch (e) {
      console.log('api, ${e}')
      res.status(500).json({ error: e })
    }
  }
}

classes.route.js

import express from "express"
import ClassesCtrl from "./classes.controller.js"

const router = express.Router()

router.route("/").get(ClassesCtrl.apiGetClasses)
router.route("/sections").get(ClassesCtrl.apiGetClassSections)
router.route("/buildings").get(ClassesCtrl.apiGetClassBuildings)
router.route("/rooms").get(ClassesCtrl.apiGetClassRooms)

export default router

Tôi hiểu rằng đây không phải là một nền tảng phát ra câu trả lời chính xác, tuy nhiên đó không phải là điều tôi đang tìm kiếm. Tôi đã bị mắc kẹt trong vấn đề này trong hơn một tuần và đã nhận thấy rằng dự án của tôi dường như khác với những người khác. Đối với dự án của tôi, tất cả những gì tôi cần làm là tìm nạp dữ liệu từ cơ sở dữ liệu đã hoàn thành và hiển thị nó. Tôi không cần cập nhật, xóa hoặc chèn chức năng.

Nếu bất cứ ai có thể chỉ cho tôi đi đúng hướng, hoặc liên kết bất kỳ tài liệu nào có thể giúp tôi thì tôi sẽ rất biết ơn.

Làm thế nào để bạn tìm nạp dữ liệu từ MongoDB trong Node JS và hiển thị trong React JS?

Làm thế nào để bạn tìm nạp dữ liệu từ cơ sở dữ liệu trong Node JS và hiển thị trong React?

Làm cách nào để lấy dữ liệu từ bộ sưu tập MongoDB bằng Node JS?

Làm cách nào để hiển thị dữ liệu tìm nạp trong React?