Node.js中数据库数据无法传递至前端JS文件的问题求助

后端代码核心问题 #

• 路由嵌套错误：你把app.get('/:id')写在了app.post('/submit-rowmatrial')的回调内部，这会导致get路由只有在post请求被触发后才会注册，完全不符合正常的路由定义逻辑。
• 未实现的连接函数：create_conection()（拼写应为createConnection）没有给出具体实现，必须确保这个函数能正确创建数据库连接。
• 未处理无效路由的响应：当tagId不是manage-stock时，直接return不返回任何响应，会导致前端请求一直挂起。
• 全局变量隐患：data = result;没有用let/const声明，会变成全局变量，容易引发变量污染问题。

前端代码的细节问题 #

• 未声明变量：iteam_name和quantity没有用let/const声明，会成为全局变量，建议添加声明。
• 跨域拦截风险：如果前端页面的端口或域名和后端（3002）不一致，浏览器会拦截fetch请求，需要后端配置跨域。

修正后的后端代码 #

// 先实现数据库连接创建函数
function createConnection() {
  return mysql.createConnection({
    host: 'localhost',
    user: 'username',
    password: 'password',
    database: 'mydb'
  });
}

// 独立定义POST路由（补充实际业务逻辑，比如插入数据）
app.post('/submit-rowmatrial', (req, res) => {
  const connection = createConnection();
  // 示例：假设前端提交了原材料名称和数量，执行插入操作
  // const insertSql = 'INSERT INTO raw_materials (itam_name, quantity) VALUES (?, ?)';
  // connection.query(insertSql, [req.body.itam_name, req.body.quantity], (err, result) => {
  //   if (err) {
  //     console.error(err);
  //     return res.status(500).send('提交失败');
  //   }
  //   res.send('数据提交成功');
  //   connection.end();
  // });
});

// 独立定义GET路由
app.get('/:id', (req, res) => {
  const tagId = req.params.id;
  if (tagId !== 'manage-stock') {
    // 对无效路由返回404响应，避免请求挂起
    return res.status(404).send('无效路径');
  }
  
  const sql = 'SELECT itam_name, SUM(quantity) AS value_sum FROM raw_materials GROUP BY itam_name';
  const connection = createConnection();
  
  connection.query(sql, (err, result) => {
    if (err) {
      console.error('数据库查询错误:', err);
      return res.status(500).json({ error: '查询失败' });
    }
    
    const data = result;
    connection.end((err) => {
      if (err) console.error('关闭连接失败:', err);
      console.log('Connection closed!');
    });
    
    res.json(data);
  });
});

// 配置跨域（如果前端和后端端口不同）
const cors = require('cors');
app.use(cors());

修正后的前端代码 #

fetch('http://localhost:3002/manage-stock')
  .then(response => {
    // 先检查响应状态，处理请求失败的情况
    if (!response.ok) {
      throw new Error(`请求出错：${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('获取到的数据:', data);
    data.forEach(item => {
      // 直接解构对象属性，比Object.values更清晰
      const { itam_name, value_sum: quantity } = item;
      console.log(`${itam_name} -> ${quantity}`);
    });
  })
  .catch(error => {
    // 捕获并打印错误，方便排查问题
    console.error('获取数据失败:', error);
  });

注意事项 #

1. 确保安装了cors包：执行npm install cors，并在后端代码中引入使用。
2. 检查createConnection函数的拼写和数据库配置，确保能正常连接数据库。
3. 补充/submit-rowmatrial路由的实际业务逻辑，原代码中该路由仅创建了连接，未执行任何操作。

内容的提问来源于stack exchange，提问作者civil-coder