如何用Node.js读取Oracle数据并在HTML页面展示

数据老陈

2026-8-6

解决方案：将Oracle数据库数据展示为HTML列表

一、先完善数据库查询逻辑

你需要实现完整的查询函数，同时做好数据库连接的管理（查询完成后务必释放连接），避免资源泄漏。

修改后的核心代码（含查询逻辑）

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

// 路由配置
// 方案1：服务器端渲染用此路由
app.get('/', async function (req, res) {
  try {
    const data = await queryOracleData();
    res.render('index', { items: data });
  } catch (err) {
    res.status(500).send('数据查询失败：' + err.message);
  }
});

// 方案2：前端异步请求用此接口
app.get('/api/get-data', async function (req, res) {
  try {
    const data = await queryOracleData();
    res.json(data);
  } catch (err) {
    res.status(500).json({ error: '数据查询失败：' + err.message });
  }
});

// 静态文件托管（用于前端异步方案）
app.use(express.static(__dirname + '/src'));

// 数据库查询函数
async function queryOracleData() {
  let connection;
  try {
    // 建立数据库连接
    connection = await oracledb.getConnection({
      user: '你的Oracle用户名',
      password: '你的Oracle密码',
      connectionString: '你的Oracle连接字符串'
    });
    // 替换为你的表名和需要查询的字段
    const result = await connection.execute(`SELECT id, username, phone FROM user_info`);
    // 将查询结果转为对象数组，方便后续渲染
    return result.rows.map(row => ({
      id: row[0],
      username: row[1],
      phone: row[2]
    }));
  } catch (error) {
    throw error;
  } finally {
    // 无论查询成功失败，都要释放连接
    if (connection) {
      try {
        await connection.close();
      } catch (err) {
        console.error('关闭连接失败:', err);
      }
    }
  }
}

// 启动服务器
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`服务器运行在 http://localhost:${PORT}`);
});

二、两种渲染方案

方案1：服务器端渲染（使用EJS模板）

适合简单场景，直接在服务器生成完整HTML页面。

安装EJS模板引擎：npm install ejs
配置Express使用EJS：

app.set('view engine', 'ejs');
app.set('views', __dirname + '/src/views'); // 模板文件存放目录

在src/views下创建index.ejs模板：

<!DOCTYPE html>
<html>
<head>
  <title>Oracle数据列表</title>
</head>
<body>
  <h2>用户信息列表</h2>
  <ul>
    <% items.forEach(item => { %>
      <li>ID: <%= item.id %> | 用户名: <%= item.username %> | 手机号: <%= item.phone %></li>
    <% }) %>
  </ul>
</body>
</html>

启动服务器后访问http://localhost:3000，即可看到渲染好的列表。

方案2：前端异步请求（纯HTML+JS）

适合需要动态更新页面的场景，前端主动请求数据后渲染。

在src目录下创建index.html：

<!DOCTYPE html>
<html>
<head>
  <title>Oracle数据列表</title>
</head>
<body>
  <h2>用户信息列表</h2>
  <ul id="data-list"></ul>

  <script>
    // 异步请求数据并渲染列表
    fetch('/api/get-data')
      .then(res => res.json())
      .then(data => {
        const listContainer = document.getElementById('data-list');
        data.forEach(item => {
          const listItem = document.createElement('li');
          listItem.textContent = `ID: ${item.id} | 用户名: ${item.username} | 手机号: ${item.phone}`;
          listContainer.appendChild(listItem);
        });
      })
      .catch(err => {
        console.error('加载数据失败:', err);
        document.getElementById('data-list').innerHTML = '<li>数据加载失败，请稍后重试</li>';
      });
  </script>
</body>
</html>

启动服务器后访问http://localhost:3000，页面会自动请求数据并生成列表。

注意事项

确保已安装依赖：npm install oracledb express，使用EJS则额外安装ejs
替换代码中的表名、字段名、数据库连接信息为你的实际内容
生产环境建议使用Oracle连接池优化性能，避免频繁创建/销毁连接

内容的提问来源于stack exchange，提问作者Jean Zacarchuka

如何用Node.js读取Oracle数据并在HTML页面展示

一、先完善数据库查询逻辑 #

修改后的核心代码（含查询逻辑） #

二、两种渲染方案 #

方案1：服务器端渲染（使用EJS模板） #

方案2：前端异步请求（纯HTML+JS） #

注意事项 #

一、先完善数据库查询逻辑

修改后的核心代码（含查询逻辑）

二、两种渲染方案

方案1：服务器端渲染（使用EJS模板）

方案2：前端异步请求（纯HTML+JS）

注意事项