在 Electron 框架中实现数据库的连接、读取和写入

涔溪2025-11-02 13:56

在 Electron 框架中实现数据库的连接、读取和写入，核心思路是在主进程中处理数据库逻辑（避免敏感信息暴露），通过 IPC（进程间通信）与渲染进程交互。以下是详细实现方案（以本地嵌入式数据库 SQLite 为例，兼顾其他数据库思路）。

一、技术选型与准备

1. 数据库选择
  • 推荐 SQLite：嵌入式数据库，无需独立服务器，数据存储在本地文件，适合 Electron 桌面应用。
  • 其他数据库（MySQL/PostgreSQL）：需额外部署服务器，适合多端共享数据场景。
2. 核心依赖
  • electron：Electron 框架核心。
  • sqlite3：SQLite 的 Node.js 驱动（异步操作）。
  • electron-rebuild：解决原生模块（如sqlite3）与 Electron 的兼容性问题。
3. 项目初始化
bash 复制代码 
# 创建项目
mkdir electron-db-demo && cd electron-db-demo
npm init -y

# 安装依赖
npm install electron sqlite3 --save
npm install electron-rebuild --save-dev
4. 重建原生模块（关键步骤）

sqlite3是原生模块，需与 Electron 的 Node 版本匹配，执行重建：

bash 复制代码 
# 配置重建脚本（package.json中添加）
"scripts": {
  "rebuild": "electron-rebuild -f -w sqlite3"
}

# 执行重建
npm run rebuild

二、实现核心逻辑

1. 项目结构
plaintext 复制代码 
electron-db-demo/
├─ main.js        # 主进程（数据库操作+窗口管理）
├─ preload.js     # 预加载脚本（安全暴露IPC接口）
├─ index.html     # 渲染进程（UI+用户交互）
└─ package.json
2. 主进程（main.js）：数据库操作 + IPC 监听

主进程负责数据库连接、CRUD 操作，并通过ipcMain接收渲染进程的请求。

javascript 复制代码 
const { app, BrowserWindow, ipcMain } = require('electron');
const sqlite3 = require('sqlite3').verbose();
const path = require('path');

// 数据库文件路径（存放在Electron默认的用户数据目录，避免权限问题）
const dbPath = path.join(app.getPath('userData'), 'mydb.db');

// 初始化数据库连接
let db;
function initDB() {
  return new Promise((resolve, reject) => {
    db = new sqlite3.Database(dbPath, (err) => {
      if (err) {
        console.error('数据库连接失败：', err.message);
        reject(err);
      } else {
        console.log('数据库连接成功');
        // 创建示例表（如users表）
        db.run(`CREATE TABLE IF NOT EXISTS users (
          id INTEGER PRIMARY KEY AUTOINCREMENT,
          name TEXT NOT NULL,
          age INTEGER
        )`, (err) => {
          if (err) reject(err);
          else resolve();
        });
      }
    });
  });
}

// 封装数据库操作（Promise化，避免回调地狱）
const dbHelper = {
  // 插入数据
  insert: (table, data) => {
    return new Promise((resolve, reject) => {
      const keys = Object.keys(data).join(',');
      const placeholders = Object.keys(data).map(() => '?').join(',');
      const values = Object.values(data);
      const sql = `INSERT INTO ${table} (${keys}) VALUES (${placeholders})`;
      
      db.run(sql, values, function(err) {
        if (err) reject(err);
        else resolve({ id: this.lastID }); // 返回插入的ID
      });
    });
  },
  // 查询数据（全部）
  queryAll: (table) => {
    return new Promise((resolve, reject) => {
      const sql = `SELECT * FROM ${table}`;
      db.all(sql, (err, rows) => {
        if (err) reject(err);
        else resolve(rows);
      });
    });
  }
};

// 创建窗口
function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'), // 预加载脚本
      contextIsolation: true // 开启上下文隔离（安全要求）
    }
  });
  mainWindow.loadFile('index.html');
}

// 初始化流程
app.whenReady().then(async () => {
  await initDB(); // 等待数据库初始化完成
  createWindow();
  
  // IPC监听：处理渲染进程的数据库请求
  // 1. 插入数据
  ipcMain.handle('db-insert', async (event, table, data) => {
    try {
      return await dbHelper.insert(table, data);
    } catch (err) {
      throw err; // 抛出错误，让渲染进程捕获
    }
  });
  
  // 2. 查询所有数据
  ipcMain.handle('db-query-all', async (event, table) => {
    try {
      return await dbHelper.queryAll(table);
    } catch (err) {
      throw err;
    }
  });

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});
3. 预加载脚本（preload.js）：安全暴露 IPC 接口

由于 Electron 开启上下文隔离后，渲染进程无法直接访问ipcRenderer，需通过预加载脚本暴露有限接口。

javascript 复制代码 
const { contextBridge, ipcRenderer } = require('electron');

// 暴露安全的IPC接口给渲染进程（仅允许必要操作）
contextBridge.exposeInMainWorld('electronAPI', {
  // 插入数据
  dbInsert: (table, data) => ipcRenderer.invoke('db-insert', table, data),
  // 查询所有数据
  dbQueryAll: (table) => ipcRenderer.invoke('db-query-all', table)
});
4. 渲染进程（index.html）：UI 交互 + 调用数据库

渲染进程负责用户交互（输入数据、触发操作），通过预加载暴露的接口调用主进程的数据库逻辑。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Electron数据库示例</title>
</head>
<body>
  <h1>用户管理</h1>
  
  <!-- 插入数据表单 -->
  <div>
    <input type="text" id="name" placeholder="姓名">
    <input type="number" id="age" placeholder="年龄">
    <button onclick="addUser()">添加用户</button>
  </div>
  
  <!-- 数据展示 -->
  <div>
    <h3>用户列表</h3>
    <ul id="userList"></ul>
  </div>

  <script>
    // 调用预加载暴露的API
    const { electronAPI } = window;

    // 添加用户（写入数据库）
    async function addUser() {
      const name = document.getElementById('name').value;
      const age = document.getElementById('age').value;
      if (!name || !age) return alert('请输入姓名和年龄');

      try {
        const result = await electronAPI.dbInsert('users', { name, age: Number(age) });
        alert(`添加成功！ID: ${result.id}`);
        loadUsers(); // 刷新列表
      } catch (err) {
        alert(`添加失败：${err.message}`);
      }
    }

    // 加载用户（读取数据库）
    async function loadUsers() {
      try {
        const users = await electronAPI.dbQueryAll('users');
        const list = document.getElementById('userList');
        list.innerHTML = users.map(u => `<li>${u.id}: ${u.name} (${u.age}岁)</li>`).join('');
      } catch (err) {
        alert(`查询失败：${err.message}`);
      }
    }

    // 页面加载时初始化列表
    window.onload = loadUsers;
  </script>
</body>
</html>

三、运行与测试

在package.json中添加启动脚本：

json 复制代码 
"scripts": {
  "start": "electron .",
  "rebuild": "electron-rebuild -f -w sqlite3"
}

执行npm start即可启动应用，测试添加用户和查询功能。

四、其他数据库适配思路

1. MySQL/PostgreSQL

  • 安装对应驱动：npm install mysql2（MySQL）或npm install pg（PostgreSQL）。

  • 主进程中通过驱动连接数据库（需配置 host、user、password 等）：

    javascript 复制代码 
    // MySQL示例（main.js中）
const mysql = require('mysql2/promise');
const connection = await mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '123456',
  database: 'mydb'
});

  • 后续 CRUD 操作通过 SQL 语句执行（与 SQLite 逻辑类似，替换dbHelper即可）。

2. 关键注意事项
  • 安全性：数据库凭证（如 MySQL 密码）不要硬编码，可加密存储在本地配置文件。
  • 路径处理 ：本地数据库文件（如 SQLite）优先使用app.getPath('userData')（用户数据目录），避免权限问题。
  • 错误处理：所有数据库操作需捕获错误并返回给渲染进程，避免应用崩溃。

通过以上方案，可在 Electron 中实现安全、稳定的数据库读写功能，适配本地或远程数据库场景。

相关推荐
锈儿海老师7 小时前
超越平台：Vercel 的野心是定义编程语言的未来吗？
前端·javascript·架构
少年攻城狮8 小时前
OceanBase系列---【如何把一个表改造成分区表？】
数据库·sql·oceanbase
l1t8 小时前
对luasql-duckdb PR的测试
c语言·数据库·单元测试·lua·duckdb
l1t8 小时前
利用DeepSeek辅助改写luadbi-duckdb支持日期和时间戳数据类型
c语言·数据库·人工智能·junit·lua·duckdb·deepseek
緣木求魚8 小时前
redis事务与Lua脚本
数据库·redis·lua
不剪发的Tony老师8 小时前
SQL Studio：一个基于浏览器的数据库查询工具
数据库·sql
王道长服务器 | 亚马逊云9 小时前
AWS + SeyouCMS：海外资源站的高性能部署实战
服务器·网络·数据库·云计算·软件构建·aws
深入理解GEE云计算9 小时前
遥感生态指数（RSEI）：理论发展、方法论争与实践进展
javascript·人工智能·算法·机器学习
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03UV安装并设置国内源04Linux下V2Ray安装配置指南05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06KGG转MP3工具|非KGM文件|解密音频07jdk21下载、安装（Windows、Linux、macOS）08GitLab 零基础入门指南：从安装到项目管理全流程09NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南10在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）