如何将HTML、CSS、JS与数据库连接？SQLite连接问题求助

一、纯前端本地存储（无需后端） #

如果仅需在浏览器内存储数据，不需要跨设备共享，两种最简方案：

• LocalStorage：适合存储少量键值对数据，API极简：

  // 存储数据
  localStorage.setItem('user', JSON.stringify({ name: 'Omer', id: 1 }));
  // 读取数据
  const user = JSON.parse(localStorage.getItem('user'));
  // 删除数据
  localStorage.removeItem('user');
  

• IndexedDB：适合存储大量结构化数据，支持复杂查询，原生API示例：

  // 打开/创建数据库
  const request = indexedDB.open('MyAppDB', 1);
  request.onupgradeneeded = (e) => {
    const db = e.target.result;
    // 创建用户表
    db.createObjectStore('users', { keyPath: 'id' });
  };
  request.onsuccess = (e) => {
    const db = e.target.result;
    // 写入数据
    const tx = db.transaction('users', 'readwrite');
    tx.objectStore('users').add({ id: 1, name: 'Omer' });
    tx.oncomplete = () => db.close();
  };
  

二、需共享数据库（前端+后端轻量方案） #

如果要和服务器端共享数据，最简组合是Node.js + Express + SQLite，前端通过Fetch API交互：

后端实现（server.js） #

1. 安装依赖：npm install express sqlite3
2. 核心代码：

const express = require('express');
const sqlite3 = require('sqlite3').verbose();
const path = require('path');
const app = express();

app.use(express.json());
// 解决跨域问题（前端和后端端口不同时需要）
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

// 连接SQLite数据库（用绝对路径避免路径问题）
const db = new sqlite3.Database(path.join(__dirname, 'mydb.db'), (err) => {
  if (err) console.error('数据库连接失败:', err.message);
  else console.log('已连接SQLite数据库');
});

// 初始化用户表
db.run('CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL)');

// 接口：获取所有用户
app.get('/api/users', (req, res) => {
  db.all('SELECT * FROM users', (err, rows) => {
    if (err) return res.status(500).json({ error: err.message });
    res.json(rows);
  });
});

// 接口：添加用户
app.post('/api/users', (req, res) => {
  const { name } = req.body;
  if (!name) return res.status(400).json({ error: '用户名不能为空' });
  db.run('INSERT INTO users (name) VALUES (?)', [name], function(err) {
    if (err) return res.status(500).json({ error: err.message });
    res.json({ id: this.lastID, name });
  });
});

app.listen(3000, () => console.log('后端服务运行在 http://localhost:3000'));

前端调用示例 #

// 获取用户列表
async function fetchUsers() {
  try {
    const response = await fetch('http://localhost:3000/api/users');
    const users = await response.json();
    console.log('用户列表:', users);
  } catch (err) {
    console.error('请求失败:', err);
  }
}

// 添加新用户
async function addNewUser(name) {
  try {
    await fetch('http://localhost:3000/api/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name })
    });
    fetchUsers(); // 添加后刷新列表
  } catch (err) {
    console.error('添加失败:', err);
  }
}

三、SQLite无法正常工作的排查步骤 #

1. 路径错误：Node.js中相对路径基于启动目录，而非脚本目录，改用绝对路径（如上述后端代码中的path.join(__dirname, 'mydb.db')）。
2. 权限不足：检查数据库文件及所在目录的读写权限，Linux/macOS可执行chmod 644 mydb.db调整。
3. 依赖安装失败：删除node_modules和package-lock.json，重新运行npm install；Windows用户需提前安装Python 3.x和VS Build Tools（可通过npm install -g windows-build-tools安装）。
4. SQL语法错误：检查表名、字段名拼写，SQLite不支持某些SQL语法（如AUTO_INCREMENT需用AUTOINCREMENT）。
5. 异步逻辑错误：SQLite操作是异步的，避免在回调未完成时执行后续操作，建议用Promise封装操作以提升可读性：

function runQuery(sql, params = []) {
  return new Promise((resolve, reject) => {
    db.run(sql, params, function(err) {
      if (err) reject(err);
      else resolve({ lastID: this.lastID, changes: this.changes });
    });
  });
}

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