求助：使用sqlite3.js查询数据库后无法替换HTML占位符内容

核心问题 #

你当前的代码无法运行的根本原因是：浏览器环境不支持Node.js的require语法和sqlite3模块。sqlite3是为Node.js设计的后端模块，依赖Node.js的文件系统、进程等专属API，这些在浏览器中完全不存在；同时浏览器也无法直接访问服务器端的数据库文件。

另外还有一个次要问题：db.close()在异步的db.all执行完成前就被调用了，即使在Node.js环境中，这也会导致数据库连接提前关闭，查询无法正常完成。

解决方案：前后端分离实现 #

需要通过后端接口查询数据库，前端通过HTTP请求获取数据后更新页面。以下是具体实现步骤：

1. 后端（Node.js + Express）编写API接口 #

首先创建一个后端服务，用于处理数据库查询并返回数据：

// server.js
const express = require('express');
const sqlite3 = require('sqlite3').verbose();
const app = express();
const port = 3000;

// 托管前端静态文件（让后端能提供HTML、CSS、JS文件）
app.use(express.static('.'));

// 打开数据库连接
const db = new sqlite3.Database('./server/test.db', (err) => {
  if (err) console.error('Database connection error:', err.message);
  else console.log('Connected to SQLite database');
});

// 定义获取指定code文章的API
app.get('/api/article/:code', (req, res) => {
  const articleCode = req.params.code;
  // 使用参数化查询避免SQL注入
  const sql = 'SELECT title FROM articles WHERE code = ?';
  
  db.get(sql, [articleCode], (err, row) => {
    if (err) {
      res.status(500).json({ error: err.message });
      return;
    }
    if (row) {
      res.json({ title: row.title });
    } else {
      res.status(404).json({ error: 'Article not found' });
    }
  });
});

// 启动服务器
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

2. 修改前端脚本（grab-replace.js） #

移除Node.js相关代码，改为通过fetch请求后端API获取数据：

document.addEventListener("DOMContentLoaded", function() {
  const titlePlaceholder = document.querySelector(".title-placeholder");

  // 请求后端API获取code=003的文章标题
  fetch('/api/article/003')
    .then(response => {
      if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
      return response.json();
    })
    .then(data => {
      if (titlePlaceholder) {
        titlePlaceholder.textContent = data.title;
      }
    })
    .catch(error => {
      console.error('Failed to load title:', error);
      // 出错时可设置 fallback 文本
      if (titlePlaceholder) {
        titlePlaceholder.textContent = 'Failed to load title';
      }
    });
});

注意事项 #

• 确保安装了所需的后端依赖：执行npm install express sqlite3安装模块。
• 启动后端服务器：运行node server.js，然后通过http://localhost:3000访问你的HTML页面（不能直接打开本地HTML文件）。
• 数据库路径./server/test.db要确保相对于后端脚本（server.js）的位置正确，若路径错误会导致连接失败。
• 建议使用参数化查询（如上述代码中的?占位符），避免SQL注入风险。

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