如何在Electron JS项目中连接SQLite3，附现有代码求完整操作流程

1. 依赖安装 #

先安装SQLite3和适配工具，执行以下命令：

# 安装SQLite3核心包
npm install sqlite3 --save
# 安装Electron重编译工具，解决二进制适配问题
npm install electron-rebuild --save-dev
# 编译SQLite3适配当前Electron版本
npx electron-rebuild

2. 代码改造 #

2.1 主进程（main.js）改造 #

在原有代码基础上添加SQLite初始化、增删改查逻辑：

const{app,BrowserWindow,ipcMain}=require("electron");
const si = require("systeminformation");
require("electron-reload")(__dirname);
// 引入SQLite3
const sqlite3 = require('sqlite3').verbose();
// 初始化数据库，不存在会自动创建
const db = new sqlite3.Database('./app.db', (err) => {
  if (err) console.error('数据库连接失败:', err.message);
  else console.log('SQLite数据库连接成功');
  // 初始化测试表，存储CPU信息
  db.run(`CREATE TABLE IF NOT EXISTS system_stats (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    cpu_model TEXT,
    core_count INTEGER,
    record_time DATETIME DEFAULT CURRENT_TIMESTAMP
  )`);
});

app.on("ready",createWindow);

function createWindow()
{
    const window = new BrowserWindow({
        width: 800,
        height:600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        }

    });
    window.webContents.openDevTools();
    window.loadFile(__dirname+ "/index.html");
}

ipcMain.on("get-cpu-usage",(events,args)=>{
    console.log(args);
});

// 新增：接收渲染进程请求，保存CPU信息到数据库
ipcMain.on('save-cpu-info', (event, cpuModel, coreCount) => {
  db.run('INSERT INTO system_stats (cpu_model, core_count) VALUES (?, ?)', [cpuModel, coreCount], function(err) {
    if (err) event.reply('save-cpu-info-result', { success: false, msg: err.message });
    else event.reply('save-cpu-info-result', { success: true, recordId: this.lastID });
  });
});

// 新增：接收渲染进程请求，查询所有历史记录
ipcMain.on('get-all-stats', (event) => {
  db.all('SELECT * FROM system_stats ORDER BY record_time DESC', [], (err, rows) => {
    if (err) event.reply('get-all-stats-result', { success: false, msg: err.message });
    else event.reply('get-all-stats-result', { success: true, data: rows });
  });
});

// 应用退出前关闭数据库连接
app.on('before-quit', () => {
  db.close((err) => {
    if (err) console.error('数据库关闭失败:', err.message);
  });
});

2.2 渲染进程（renderer.js）改造 #

先修复原有代码的拼写错误，再添加数据库操作调用逻辑：

// 修正拼写错误：ipcRender → ipcRenderer
const{ipcRenderer} = require("electron")

const os=require("os");
const cpuName=document.getElementById("cpu-name");
const cpuCores =document.getElementById("cores");
const cpuUsage =document.getElementById("cpu-usage");


const cpus=os.cpus();
const cpuModel = cpus[0].model;
const coreCount = cpus.length;
cpuName.innerText=`CPU: ${cpuModel}`;
// 修正语法错误：逗号 → 点
cpuCores.innerText=`Cores Available: ${coreCount}`;

// 页面加载后保存CPU信息、查询历史记录
window.addEventListener('DOMContentLoaded', () => {
  ipcRenderer.send('save-cpu-info', cpuModel, coreCount);
  ipcRenderer.send('get-all-stats');
});

// 监听保存结果
ipcRenderer.on('save-cpu-info-result', (event, res) => {
  res.success ? console.log('保存成功，记录ID：', res.recordId) : console.error('保存失败：', res.msg);
});

// 监听查询结果
ipcRenderer.on('get-all-stats-result', (event, res) => {
  res.success ? console.log('历史统计记录：', res.data) : console.error('查询失败：', res.msg);
});

setInterval(() =>{
    console.log("sending message to get cpu stats")
    ipcRenderer.send("get-cpu-usage", "Hello sheraz The render process")
},2000)

3. 常见问题处理 #

• 运行报二进制不兼容错误：重新执行npx electron-rebuild即可
• 打包后找不到数据库文件：可以用app.getPath('userData')拼接数据库路径，存储到用户数据目录下
• 生产环境安全优化：不建议开启nodeIntegration: true和关闭contextIsolation，推荐通过preload脚本封装数据库操作API暴露给渲染进程调用

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