修复 SQLite 数据库查询失败导致前端无法显示留言的问题

胖萱酱_9060

发布时间：2026-07-27 12:46:17

1000人浏览过

来源于php中文网

原创

修复 SQLite 数据库查询失败导致前端无法显示留言的问题

本文详解如何修复因错误字符串拼接导致的 SQLite 查询失效问题，确保 Vite 前端能正确获取并渲染 Express 后端存储的留言数据。重点修正 req.query.id 被误写为字符串字面量的致命错误，并同步优化前后端数据流与错误处理。

本文详解如何修复因错误字符串拼接导致的 sqlite 查询失效问题，确保 vite 前端能正确获取并渲染 express 后端存储的留言数据。重点修正 `req.query.id` 被误写为字符串字面量的致命错误，并同步优化前后端数据流与错误处理。

在你的项目中，前端（Vite + main.js）调用 /guestbook 接口获取所有留言，但页面始终空白——根本原因并非网络或 CORS 问题（你已验证 Postman 可正常访问），而是后端 server.js 中一个隐蔽却关键的 SQL 查询缺陷：

? 错误定位：字符串字面量误传参数

在 app.get("/guestbook") 路由中，这段代码存在严重语法错误：

// ❌ 错误写法（原代码）
let guestBook = db
  .prepare(`SELECT * FROM guestbook WHERE id = ?`)
  .all(`req.query.id`); // ← 这里传入的是字符串 "req.query.id"，而非变量值！

db.prepare(...).all() 的参数应为实际的数值（如 123），但你传入了字符串字面量 "req.query.id"，导致 SQL 实际执行为：

SELECT * FROM guestbook WHERE id = 'req.query.id';

而数据库中显然不存在 id 值为该字符串的记录，因此查询返回空数组 []，前端 displayGuests() 渲染时遍历空数组，自然不显示任何内容。

立即学习“前端免费学习笔记（深入）”；

前端美化

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载

✅ 正确修复：解构并校验查询参数

将 GET /guestbook 路由重写为健壮、可扩展的实现：

// ✅ 修复后的 GET /guestbook 路由
app.get("/guestbook", (req, res) => {
  try {
    // ✅ 1. 获取 query 参数（注意：req.query.id 是字符串，需转为 number）
    const { id } = req.query;

    if (id !== undefined) {
      // ✅ 2. 安全转换并校验 ID
      const parsedId = Number(id);
      if (isNaN(parsedId) || parsedId <= 0) {
        return res.status(400).json({ error: "Invalid ID format" });
      }

      // ✅ 3. 正确绑定参数（传入数字，非字符串）
      const guest = db
        .prepare("SELECT * FROM guestbook WHERE id = ?")
        .get(parsedId); // ← 使用 .get() 获取单条，.all() 获取多条

      if (!guest) {
        return res.status(404).json({ error: "Guest not found" });
      }
      return res.status(200).json(guest);
    }

    // ✅ 4. 默认行为：查询全部留言（修复缺失的主逻辑！）
    const guests = db.prepare("SELECT * FROM guestbook ORDER BY id DESC").all();
    res.status(200).json(guests);

  } catch (err) {
    console.error("GET /guestbook error:", err);
    res.status(500).json({ error: "Internal server error" });
  }
});

⚠️ 关键修复点：

移除反引号包裹的 req.query.id → 改为直接使用变量 parsedId；

补充默认分支：当无 id 查询参数时，必须执行 SELECT * FROM guestbook 获取全部数据（原代码完全缺失此逻辑）；

使用 .get() 处理单条查询，.all() 处理多条查询，语义更清晰；

增加输入校验与错误响应，提升 API 可靠性。

?️ 前端同步优化建议

你的 main.js 已基本正确，但存在两处可增强的细节：

删除冗余 DOM 操作（避免重复追加）
原代码中 newContainer.appendChild(guestContainer) 在每次循环内执行，会导致 guestContainer 被反复移入 newContainer，破坏 DOM 结构：

// ❌ 删除这一行（位于 forEach 循环内）
// newContainer.appendChild(guestContainer);

// ✅ 改为循环结束后一次性追加（若需保留容器层级）
// guestContainer 已包含所有卡片，无需再嵌套

增加加载状态与错误提示
在 displayGuests() 开头添加视觉反馈：

async function displayGuests() {
  guestContainer.innerHTML = "<p>Loading guestbook...</p>";
  try {
    const guests = await fetchGuests();
    guestContainer.innerHTML = "";
    guests.forEach(guest => {
      // ... 渲染逻辑保持不变
    });
  } catch (err) {
    guestContainer.innerHTML = `<p class="error">Failed to load entries: ${err.message}</p>`;
    console.error("Display failed:", err);
  }
}