React前端连接Oracle数据库并在本地展示查询结果的方法

Hey there! Let's walk through how to get your Oracle query results displayed in your React localhost app—since you already have Node.js connecting to Oracle, we're most of the way there. Here's a step-by-step breakdown:

1. Turn Your Node.js Oracle Connection into a Simple API Endpoint #

First off, remember: React (a frontend library) shouldn’t connect directly to Oracle databases—it’s a security risk, and browsers don’t support Oracle’s native drivers anyway. Your existing Node.js setup is perfect as a middleman API layer. Let’s wrap that connection logic into an Express server (lightweight and easy to work with):

First, install the necessary dependencies if you haven’t already:

npm install express oracledb cors

Create a server.js file with this setup (swap in your Oracle credentials):

const express = require('express');
const oracledb = require('oracledb');
const cors = require('cors');

const app = express();
const port = 5000; // Pick a port not used by React (default React runs on 3000)

// Enable CORS so React can safely call this API
app.use(cors());

// Your existing Oracle connection config
const oracleConfig = {
  user: 'your_oracle_username',
  password: 'your_oracle_password',
  connectString: 'your_oracle_connect_string' // e.g., "localhost:1521/ORCL"
};

// Create an API endpoint to fetch Oracle data
app.get('/api/oracle-data', async (req, res) => {
  let connection;
  try {
    connection = await oracledb.getConnection(oracleConfig);
    // Replace with your actual query
    const result = await connection.execute('SELECT * FROM your_target_table');
    res.json(result.rows); // Send results back to React
  } catch (err) {
    console.error('Oracle fetch error:', err);
    res.status(500).send('Failed to load data from Oracle');
  } finally {
    if (connection) {
      try {
        await connection.close();
      } catch (err) {
        console.error('Connection close error:', err);
      }
    }
  }
});

app.listen(port, () => {
  console.log(`Node backend running at http://localhost:${port}`);
});

Run this backend with node server.js—you’ll see a log confirming it’s up and running.

2. Fetch and Display Data in Your React Component #

Now, in your React app, use the browser’s native fetch API (or Axios if you prefer) to call your new API and render the results. Here’s a simple example component:

import { useState, useEffect } from 'react';

function OracleResults() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchOracleData = async () => {
      try {
        const response = await fetch('http://localhost:5000/api/oracle-data');
        if (!response.ok) throw new Error('Request failed');
        const fetchedData = await response.json();
        setData(fetchedData);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchOracleData();
  }, []);

  if (loading) return <div>Loading Oracle data...</div>;
  if (error) return <div>Oops! Error: {error}</div>;

  return (
    <div className="oracle-results">
      <h2>Oracle Query Results</h2>
      <ul>
        {data.map((row, index) => (
          <li key={index}>
            {/* Customize this to match your table columns, e.g., row[0] = ID, row[1] = Name */}
            {JSON.stringify(row)}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default OracleResults;

3. Run Both Services Locally #

Make sure your Node backend is running (from step 1), then start your React app with npm start. Your React app at http://localhost:3000 will now pull data from the Node API and display it on the page.

Quick Troubleshooting Tips #

• Double-check your Oracle credentials and connect string in server.js—this is the most common hangup.
• Use your browser’s DevTools Network tab to verify the API request is going through (look for /api/oracle-data and check the response status).
• If you hit CORS errors, confirm the cors middleware is properly enabled in your Node server.
• Ensure port numbers match: if you changed the Node port, update the fetch URL in React accordingly.

内容的提问来源于stack exchange，提问作者Sanj. K