如何在前端react.js中从多个数据库中从node.js中获取数据

// 在Node.js中创建API接口
const express = require('express');
const mysql = require('mysql');
const mongodb = require('mongodb');

const app = express();

// 连接MySQL数据库
const mysqlConnection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'mysql_db',
});

mysqlConnection.connect((err) => {
  if (err) {
    console.error('Error connecting to MySQL database');
    return;
  }
  console.log('Connected to MySQL database');
});

// 连接MongoDB数据库
const mongoClient = mongodb.MongoClient;
const mongoURL = 'mongodb://localhost:27017';
let mongoDB;

mongoClient.connect(mongoURL, (err, client) => {
  if (err) {
    console.error('Error connecting to MongoDB database');
    return;
  }
  console.log('Connected to MongoDB database');
  mongoDB = client.db('mongodb_db');
});

// 定义API接口
app.get('/data', (req, res) => {
  // 从MySQL数据库中获取数据
  mysqlConnection.query('SELECT * FROM table', (mysqlErr, mysqlResult) => {
    if (mysqlErr) {
      console.error('Error querying MySQL database');
      res.status(500).send('Internal Server Error');
      return;
    }

    // 从MongoDB数据库中获取数据
    mongoDB.collection('collection').find().toArray((mongoErr, mongoResult) => {
      if (mongoErr) {
        console.error('Error querying MongoDB database');
        res.status(500).send('Internal Server Error');
        return;
      }

      // 将MySQL和MongoDB的数据合并
      const data = {
        mysqlData: mysqlResult,
        mongoData: mongoResult,
      };

      res.json(data);
    });
  });
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

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

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

  useEffect(() => {
    axios.get('http://localhost:3000/data')
      .then((response) => {
        setData(response.data);
      })
      .catch((error) => {
        console.error('Error fetching data from API');
      });
  }, []);

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>MySQL Data:</h1>
      <ul>
        {data.mysqlData.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>

      <h1>MongoDB Data:</h1>
      <ul>
        {data.mongoData.map((item) => (
          <li key={item._id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;