在React.js页面中显示MONGODB数据

npm install mongodb
npm install mongoose
npm install axios

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/your_database_name', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('Connected to MongoDB'))
  .catch((error) => console.log(error));

const mongoose = require('mongoose');

const dataSchema = new mongoose.Schema({
  // 定义数据模型的字段
  fieldName1: String,
  fieldName2: Number,
  // ...
});

const Data = mongoose.model('Data', dataSchema);

module.exports = Data;

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const YourComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('/api/data'); // 这里假设你的后端API提供获取数据的接口
        setData(response.data);
      } catch (error) {
        console.log(error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {data.map((item) => (
        <div key={item._id}>
          {/* 在这里根据实际需要显示数据字段 */}
          <p>{item.fieldName1}</p>
          <p>{item.fieldName2}</p>
          {/* ... */}
        </div>
      ))}
    </div>
  );
};

export default YourComponent;