点击商品卡片请求服务器加载详情页功能故障排查求助

问题1：点击商品卡片无反应 #

原因及解决办法：

• JS执行时机不对：如果JS代码放在页面顶部或<head>中，DOM还未完全渲染，document.querySelectorAll('.product-card-c')找不到目标元素，导致事件绑定失败。
  解决：将JS代码移至</body>标签前，或包裹在DOM加载完成的监听事件里：

  document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.product-card-c').forEach((card) => {
      card.addEventListener('click', function() {
        window.location.href = `/products/${this.id}`; // 直接跳转到详情页
      });
    });
  });
  

• 逻辑错误：用fetch而非页面跳转：当前代码仅用fetch请求了数据，但未触发页面跳转，用户自然看不到变化。服务器端是通过res.render返回完整EJS页面，直接用window.location.href跳转即可，无需fetch。
• 更可靠的事件委托：如果后续有动态加载的商品卡片，绑定事件到父元素更稳定：

  document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('.product-card-holding-c').addEventListener('click', function(e) {
      const targetCard = e.target.closest('.product-card-c');
      if (targetCard) {
        window.location.href = `/products/${targetCard.id}`;
      }
    });
  });
  

问题2：详情页CSS丢失、资源404 #

原因及解决办法：

• 相对路径解析错误：访问/products/2时，浏览器会把相对路径（如styles.css）解析为/products/styles.css，但你的静态资源实际在根目录的静态文件夹中。
  解决：将所有资源引用改为绝对路径（以/开头）：

  <!-- 错误写法 -->
  <link rel="stylesheet" href="styles.css">
  <!-- 正确写法 -->
  <link rel="stylesheet" href="/styles.css">
  

  图片、JS文件等资源的路径也要做同样修改。
• 未正确配置静态资源托管：确保Express服务器已通过express.static托管静态文件目录：

  // 假设静态资源放在public文件夹下
  app.use(express.static('public'));
  

  这样服务器会正确返回/styles.css对应的public/styles.css文件。

额外优化：避免SQL注入风险 #

当前服务器端SQL查询直接拼接req.params.id，存在严重安全隐患，应使用参数化查询：

app.get('/products/:id', async function(req, res) {
  try {
    // 参数化查询，$1对应数组中第一个参数
    const result = await db.query('SELECT * FROM products WHERE id = $1', [req.params.id]);
    // rows是数组，取第一个元素传给模板更合理
    res.render("productshowcase.ejs", { product: result.rows[0] });
  } catch (err) {
    console.log(err);
    res.status(500).send('服务器错误');
  }
});

内容的提问来源于stack exchange，提问作者Nitin Shukla