如何通过DOM而非表格展示Oracle数据库数据及代码优化建议

一、单独用DOM元素展示数据的实现方式 #

步骤1：在HTML中添加展示容器 #

在页面合适位置（比如表格上方）添加用于单独展示数据的容器：

<div id="single-data-display" class="data-cards">
  <!-- 动态插入单个数据元素 -->
</div>

步骤2：前端JS中处理并插入单个数据 #

修改fetch回调逻辑，先处理原始数据再生成DOM元素：

window.onload = function () {
  fetch('http://localhost:3000/teste')
    .then(response => response.json())
    .then(data => {
      console.log(data);
      const table = document.getElementById('table');
      const displayContainer = document.getElementById('single-data-display');
      
      // 展示单个数据（比如最新记录的重量）
      if (data.length > 0) {
        const latestWeight = parseFloat(data[0][6]);
        const weightElement = document.createElement('p');
        weightElement.textContent = `最新批次重量：${latestWeight.toFixed(2)} TN`;
        weightElement.classList.add('data-item');
        displayContainer.appendChild(weightElement);

        // 计算示例：重量翻倍
        const doubledWeight = latestWeight * 2;
        const doubledElement = document.createElement('p');
        doubledElement.textContent = `重量翻倍计算值：${doubledWeight.toFixed(2)} TN`;
        doubledElement.classList.add('data-item');
        displayContainer.appendChild(doubledElement);
      }

      // 生成表格数据（优化原有逻辑）
      const displayData = data.slice(0,7);
      displayData.forEach((rowData, index) => {
        const row = table.insertRow(index + 1);
        rowData.forEach((cellValue, cellIndex) => {
          const cell = row.insertCell(cellIndex);
          cell.textContent = cellValue;
          // 重量列额外显示计算值
          if (cellIndex === 6) {
            const adjustedValue = parseFloat(cellValue) * 1.5;
            cell.innerHTML += `<br><small>调整后：${adjustedValue.toFixed(2)}</small>`;
          }
        });
      });
    })
    .catch(err => console.error('数据获取失败：', err));
}

二、数据计算失败的原因与修复 #

你之前尝试var cell11 = cell7 * 2失败，是因为cell7是DOM单元格元素，不是原始数值。正确做法是直接从data数组取原始数据，转成数字后计算：

// 错误写法：操作DOM元素
// var cell11 = cell7 * 2;

// 正确写法：操作原始数据
const weightValue = parseFloat(data[i][6]);
const calculatedWeight = weightValue * 2;
// 可将计算结果插入到DOM中

三、代码优化建议 #

前端优化 #

1. 避免硬编码循环次数：用data.slice(0,7)代替固定i < 7，防止数据不足时数组越界
2. 简化表格生成逻辑：用forEach遍历数据，减少重复的单元格创建代码
3. 添加错误处理：给fetch添加catch块，捕获网络请求或解析错误
4. 替换页面全量刷新：移除<meta http-equiv="refresh" content="5">，改用JS定时局部刷新：

   function fetchData() {
     // 原有的fetch逻辑放在这里
   }
   window.onload = () => {
     fetchData();
     setInterval(fetchData, 5000);
   }
   

5. 语义化DOM结构：给单独展示的数据添加CSS类，方便样式控制

后端（Node.js）优化 #

1. 使用数据库连接池：避免每次请求创建新连接，节省资源：

   // 初始化连接池（文件顶部）
   async function initPool() {
     try {
       await oracledb.createPool({
         user: user,
         password: password,
         connectionString: connectionString,
         poolMin: 2,
         poolMax: 10,
         poolIncrement: 1
       });
       console.log('连接池初始化完成');
     } catch (err) {
       console.error('连接池初始化失败：', err);
     }
   }
   initPool();
   
   // 修改接口使用连接池
   app.get('/teste', async (req, res) => {
     let connection;
     try {
       connection = await oracledb.getConnection();
       const query = 'SELECT DATREA,HORREA,CODORI,NUMORP,CODPRO,CODDER,QTDRE1,QTDRFG,CODLOT,OPERADOR from USU_VPROEXT ORDER BY DATREA DESC, HORREA DESC';
       const result = await connection.execute(query);
       res.json(result.rows);
     } catch (err) {
       console.error('查询失败：', err);
       res.status(500).json({ error: '数据获取失败' });
     } finally {
       if (connection) {
         try {
           await connection.close();
         } catch (err) {
           console.error('关闭连接失败：', err);
         }
       }
     }
   });
   

2. 用async/await替代回调：让异步代码更易读、易维护
3. 添加错误响应：数据库查询失败时返回500状态码和错误信息，方便前端排查
4. 移除无用依赖：删除未使用的http和ejs相关代码
5. 环境变量存储敏感信息：用dotenv包管理数据库连接信息，避免硬编码：

   # .env文件
   DB_USER=你的用户名
   DB_PASSWORD=你的密码
   DB_CONNECTION_STRING=你的连接字符串
   

   require('dotenv').config();
   const user = process.env.DB_USER;
   const password = process.env.DB_PASSWORD;
   const connectionString = process.env.DB_CONNECTION_STRING;
   

四、其他数据展示方式 #

除了表格和单个DOM元素，还可以尝试：

• 卡片式布局：用<div>创建卡片，展示每条记录的关键信息
• 数据可视化：用Chart.js等库将重量、废品率等数据做成图表
• 汇总统计栏：在页面顶部展示总重量、平均废品率等汇总结果

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