Electron框架中實(shí)現(xiàn)數(shù)據(jù)庫的連接、讀取和寫入詳細(xì)方案
更新時間：2026年02月07日 10:58:28 作者：涔溪
在Electron應(yīng)用中,數(shù)據(jù)庫扮演著存儲和管理數(shù)據(jù)的重要角色,無論是本地數(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; // 拋出錯誤，讓渲染進(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}`);
}
}
// 頁面加載時初始化列表
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 密碼）不要硬編碼，可加密存儲在本地配置文件。
- 路徑處理：本地數(shù)據(jù)庫文件（如 SQLite）優(yōu)先使用
app.getPath('userData')（用戶數(shù)據(jù)目錄），避免權(quán)限問題。 - 錯誤處理：所有數(shù)據(jù)庫操作需捕獲錯誤并返回給渲染進(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實(shí)現(xiàn)計算器的四則運(yùn)算功能
這篇文章主要為大家介紹了如何通過JavaScript實(shí)現(xiàn)計算器的四則運(yùn)算功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起動手試試2022-02-02
javascript版的in_array函數(shù)（判斷數(shù)組中是否存在特定值）
這篇文章主要介紹了javascript版的in_array函數(shù)（判斷數(shù)組中是否存在特定值）,需要的朋友可以參考下2014-05-05
js執(zhí)行字符串代碼的具體實(shí)現(xiàn)
這篇文章主要給大家介紹了js執(zhí)行字符串代碼的具體實(shí)現(xiàn),需要的朋友可以參考下2024-06-06
js 如何實(shí)現(xiàn)對數(shù)據(jù)庫的增刪改查
JavaScript操作數(shù)據(jù)庫JS操作Access數(shù)據(jù)庫，跟其他語言操作差不多，總結(jié)了一下習(xí)慣代碼，需要的朋友可以參考下2012-11-11
這篇文章主要給大家介紹了關(guān)于微信小程序抽獎組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
JavaScript中的"=、==、==="區(qū)別講解
今天小編就為大家分享一篇關(guān)于JavaScript中的"=、==、==="區(qū)別講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
javascript 拽拉效果 供JS初學(xué)者學(xué)習(xí)參考
超精簡的拽拉效果JS，并且還是同時支持IE和FF。 可以給與其他剛開始學(xué)習(xí)JS的朋友作為參考和學(xué)習(xí)。2008-07-07
這篇文章主要給大家介紹了關(guān)于前端圖片壓縮常見的一些解決辦法,圖片上傳是前端中常見的的業(yè)務(wù)場景,無論是前臺還是后臺,適當(dāng)?shù)膶D片進(jìn)行壓縮處理,可以顯著的提升用戶體驗(yàn),需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)PC端和移動端刮卡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
學(xué)習(xí)JavaScript正則表達(dá)式
這篇文章主要介紹了JavaScript正則表達(dá)式，詳細(xì)深入的了解JavaScript正則表達(dá)式，從而更熟練掌握J(rèn)avaScript正則表達(dá)式，感興趣的小伙伴們可以參考一下2015-11-11