Electron框架中實(shí)現(xiàn)數(shù)據(jù)庫的連接、讀取和寫入詳細(xì)方案
更新時(shí)間：2026年02月07日 10:58:28 作者：涔溪
在Electron應(yīng)用中,數(shù)據(jù)庫扮演著存儲和管理數(shù)據(jù)的重要角色,無論是本地?cái)?shù)據(jù)存儲、數(shù)據(jù)同步還是遠(yuǎn)程數(shù)據(jù)庫操作,都離不開數(shù)據(jù)庫的支持,這篇文章主要介紹了Electron框架中實(shí)現(xiàn)數(shù)據(jù)庫的連接、讀取和寫入的相關(guān)資料,需要的朋友可以參考下
前言
在 Electron 框架中實(shí)現(xiàn)數(shù)據(jù)庫的連接、讀取和寫入，核心思路是在主進(jìn)程中處理數(shù)據(jù)庫邏輯（避免敏感信息暴露），通過 IPC（進(jìn)程間通信）與渲染進(jìn)程交互。以下是詳細(xì)實(shí)現(xiàn)方案（以本地嵌入式數(shù)據(jù)庫 SQLite 為例，兼顧其他數(shù)據(jù)庫思路）。
一、技術(shù)選型與準(zhǔn)備
1. 數(shù)據(jù)庫選擇
- 推薦 SQLite：嵌入式數(shù)據(jù)庫，無需獨(dú)立服務(wù)器，數(shù)據(jù)存儲在本地文件，適合 Electron 桌面應(yīng)用。
- 其他數(shù)據(jù)庫（MySQL/PostgreSQL）：需額外部署服務(wù)器，適合多端共享數(shù)據(jù)場景。
2. 核心依賴
electron：Electron 框架核心。sqlite3：SQLite 的 Node.js 驅(qū)動（異步操作）。electron-rebuild：解決原生模塊（如sqlite3）與 Electron 的兼容性問題。
3. 項(xiàng)目初始化
# 創(chuàng)建項(xiàng)目 mkdir electron-db-demo && cd electron-db-demo npm init -y # 安裝依賴 npm install electron sqlite3 --save npm install electron-rebuild --save-dev
4. 重建原生模塊（關(guān)鍵步驟）
sqlite3是原生模塊，需與 Electron 的 Node 版本匹配，執(zhí)行重建：
# 配置重建腳本（package.json中添加）
"scripts": {
"rebuild": "electron-rebuild -f -w sqlite3"
}
# 執(zhí)行重建
npm run rebuild
二、實(shí)現(xiàn)核心邏輯
1. 項(xiàng)目結(jié)構(gòu)
electron-db-demo/ ├─ main.js # 主進(jìn)程（數(shù)據(jù)庫操作+窗口管理） ├─ preload.js # 預(yù)加載腳本（安全暴露IPC接口） ├─ index.html # 渲染進(jìn)程（UI+用戶交互） └─ package.json
2. 主進(jìn)程（main.js）：數(shù)據(jù)庫操作 + IPC 監(jiān)聽
主進(jìn)程負(fù)責(zé)數(shù)據(jù)庫連接、CRUD 操作，并通過ipcMain接收渲染進(jìn)程的請求。
const { app, BrowserWindow, ipcMain } = require('electron');
const sqlite3 = require('sqlite3').verbose();
const path = require('path');
// 數(shù)據(jù)庫文件路徑（存放在Electron默認(rèn)的用戶數(shù)據(jù)目錄，避免權(quán)限問題）
const dbPath = path.join(app.getPath('userData'), 'mydb.db');
// 初始化數(shù)據(jù)庫連接
let db;
function initDB() {
return new Promise((resolve, reject) => {
db = new sqlite3.Database(dbPath, (err) => {
if (err) {
console.error('數(shù)據(jù)庫連接失?。?, err.message);
reject(err);
} else {
console.log('數(shù)據(jù)庫連接成功');
// 創(chuàng)建示例表（如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();
});
}
});
});
}
// 封裝數(shù)據(jù)庫操作（Promise化，避免回調(diào)地獄）
const dbHelper = {
// 插入數(shù)據(jù)
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
});
});
},
// 查詢數(shù)據(jù)（全部）
queryAll: (table) => {
return new Promise((resolve, reject) => {
const sql = `SELECT * FROM ${table}`;
db.all(sql, (err, rows) => {
if (err) reject(err);
else resolve(rows);
});
});
}
};
// 創(chuàng)建窗口
function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'), // 預(yù)加載腳本
contextIsolation: true // 開啟上下文隔離（安全要求）
}
});
mainWindow.loadFile('index.html');
}
// 初始化流程
app.whenReady().then(async () => {
await initDB(); // 等待數(shù)據(jù)庫初始化完成
createWindow();
// IPC監(jiān)聽：處理渲染進(jìn)程的數(shù)據(jù)庫請求
// 1. 插入數(shù)據(jù)
ipcMain.handle('db-insert', async (event, table, data) => {
try {
return await dbHelper.insert(table, data);
} catch (err) {
throw err; // 拋出錯(cuò)誤，讓渲染進(jìn)程捕獲
}
});
// 2. 查詢所有數(shù)據(jù)
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. 預(yù)加載腳本（preload.js）：安全暴露 IPC 接口
由于 Electron 開啟上下文隔離后，渲染進(jìn)程無法直接訪問ipcRenderer，需通過預(yù)加載腳本暴露有限接口。
const { contextBridge, ipcRenderer } = require('electron');
// 暴露安全的IPC接口給渲染進(jìn)程（僅允許必要操作）
contextBridge.exposeInMainWorld('electronAPI', {
// 插入數(shù)據(jù)
dbInsert: (table, data) => ipcRenderer.invoke('db-insert', table, data),
// 查詢所有數(shù)據(jù)
dbQueryAll: (table) => ipcRenderer.invoke('db-query-all', table)
});
4. 渲染進(jìn)程（index.html）：UI 交互 + 調(diào)用數(shù)據(jù)庫
渲染進(jìn)程負(fù)責(zé)用戶交互（輸入數(shù)據(jù)、觸發(fā)操作），通過預(yù)加載暴露的接口調(diào)用主進(jìn)程的數(shù)據(jù)庫邏輯。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron數(shù)據(jù)庫示例</title>
</head>
<body>
<h1>用戶管理</h1>
<!-- 插入數(shù)據(jù)表單 -->
<div>
<input type="text" id="name" placeholder="姓名">
<input type="number" id="age" placeholder="年齡">
<button onclick="addUser()">添加用戶</button>
</div>
<!-- 數(shù)據(jù)展示 -->
<div>
<h3>用戶列表</h3>
<ul id="userList"></ul>
</div>
<script>
// 調(diào)用預(yù)加載暴露的API
const { electronAPI } = window;
// 添加用戶（寫入數(shù)據(jù)庫）
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}`);
}
}
// 加載用戶（讀取數(shù)據(jù)庫）
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}`);
}
}
// 頁面加載時(shí)初始化列表
window.onload = loadUsers;
</script>
</body>
</html>
三、運(yùn)行與測試
在package.json中添加啟動腳本：
"scripts": {
"start": "electron .",
"rebuild": "electron-rebuild -f -w sqlite3"
}
執(zhí)行npm start即可啟動應(yīng)用，測試添加用戶和查詢功能。
四、其他數(shù)據(jù)庫適配思路
1. MySQL/PostgreSQL
安裝對應(yīng)驅(qū)動：
npm install mysql2（MySQL）或npm install pg（PostgreSQL）。主進(jìn)程中通過驅(qū)動連接數(shù)據(jù)庫（需配置 host、user、password 等）：
// MySQL示例（main.js中） const mysql = require('mysql2/promise'); const connection = await mysql.createConnection({ host: 'localhost', user: 'root', password: '123456', database: 'mydb' });后續(xù) CRUD 操作通過 SQL 語句執(zhí)行（與 SQLite 邏輯類似，替換
dbHelper即可）。
2. 關(guān)鍵注意事項(xiàng)
- 安全性：數(shù)據(jù)庫憑證（如 MySQL 密碼）不要硬編碼，可加密存儲在本地配置文件。
- 路徑處理：本地?cái)?shù)據(jù)庫文件（如 SQLite）優(yōu)先使用
app.getPath('userData')（用戶數(shù)據(jù)目錄），避免權(quán)限問題。 - 錯(cuò)誤處理：所有數(shù)據(jù)庫操作需捕獲錯(cuò)誤并返回給渲染進(jìn)程，避免應(yīng)用崩潰。
通過以上方案，可在 Electron 中實(shí)現(xiàn)安全、穩(wěn)定的數(shù)據(jù)庫讀寫功能，適配本地或遠(yuǎn)程數(shù)據(jù)庫場景。
總結(jié)
到此這篇關(guān)于Electron框架中實(shí)現(xiàn)數(shù)據(jù)庫的連接、讀取和寫入詳細(xì)方案的文章就介紹到這了,更多相關(guān)Electron數(shù)據(jù)庫連接、讀取和寫入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript語法集錦是對javascript常用函數(shù)的一些小結(jié)，比較實(shí)用，建議收藏，方便查找需要的資料。2009-11-11
子窗體與父窗體之見互相傳值實(shí)現(xiàn)使用中很頻繁，本文以一個(gè)小示例拋磚引玉，希望大家可以舉一反三2013-08-08
event是ie自帶的一個(gè)對象，而ff中不存在該對象，只能通過傳遞參數(shù)的方式來模擬event，下面簡單為大家介紹下2013-11-11
這篇文章主要為大家介紹了JS前端的內(nèi)存處理的方法全面詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了JS解惑之Object中的key是有序的么，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了Bootstrap框架,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要為大家詳細(xì)介紹了js完整倒計(jì)時(shí)代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
javascript實(shí)現(xiàn)表格信息增添與刪除
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)表格信息增添與刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
JavaScriptlocalStorage基本上是瀏覽器Window對象中的存儲，您可以在中存儲任何內(nèi)容localStorage，localStorage及其相關(guān)的sessionStorage是 Web Storage API的一部分，我們將在本文詳細(xì)了解這些,需要的朋友可以參考下2023-06-06
這篇文章主要為大家介紹了高性能JavaScript循環(huán)語句和條件語句，感興趣的小伙伴們可以參考一下2016-01-01