Electron 使用 SQLite

安装 SQLite3

在 Electron 应用中使用 SQLite，首先需要安装 sqlite3。这是一个 Node.js 的模块，用于与 SQLite 数据库进行交互。在项目根目录下打开终端并运行以下命令来安装：

npm install sqlite3 --save

这将把 sqlite3 添加到项目的 package.json 文件中，并安装到 node_modules 目录下。

创建数据库连接

在 Electron 应用中，我们通常在主进程或渲染进程中创建一个数据库连接。这里我们以主进程为例进行说明。在主进程中，我们可以创建一个名为 db.js 的文件，用于封装数据库连接逻辑。

// www.javascriptcn.com code example
// db.js
const sqlite3 = require('sqlite3').verbose();
let db;

function openDB() {
    db = new sqlite3.Database('./db.sqlite', (err) => {
        if (err) {
            console.error(err.message);
        }
        console.log('Connected to the SQLite database.');
    });
}

function closeDB() {
    db.close((err) => {
        if (err) {
            console.error(err.message);
        }
        console.log('Close the database connection.');
    });
}

module.exports = {openDB, closeDB};

上述代码中，我们定义了两个函数：openDB 和 closeDB。openDB 函数负责创建数据库连接，而 closeDB 函数则负责关闭数据库连接。此外，我们还通过 module.exports 将这两个函数导出，以便其他文件可以导入它们。

创建数据库表

接下来，我们需要创建一个数据库表来存储数据。这里我们创建一个名为 users 的表，用于存储用户信息。我们可以在 main.js 文件中的 app.on('ready') 事件处理程序中调用创建表的函数。

// www.javascriptcn.com code example
// main.js
const { app, BrowserWindow } = require('electron');
const { openDB, closeDB } = require('./db');

function createTable() {
    openDB();

    db.run("CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, email TEXT)", function(err) {
        if (err) {
            console.error(err.message);
        } else {
            console.log(`Created table 'users'.`);
        }
    });

    closeDB();
}

app.on('ready', () => {
    createTable();
    // 其他代码...
});

在上述代码中，我们定义了一个 createTable 函数，该函数在调用 openDB 函数后执行 SQL 语句来创建 users 表。如果表已经存在，则不会重新创建。最后，我们通过调用 closeDB 函数关闭数据库连接。

插入数据

现在我们已经创建了一个数据库表，接下来我们将向其中插入一些数据。我们可以在渲染进程中实现这个功能，也可以在主进程中实现。这里我们以渲染进程为例进行说明。

在渲染进程中，我们可以使用 ipcRenderer 模块向主进程发送消息，从而触发主进程中的插入操作。首先，我们需要在渲染进程中引入 ipcRenderer 模块，并监听按钮点击事件。

// www.javascriptcn.com code example
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Electron SQLite</title>
</head>
<body>
    <button id="insert">插入数据</button>

    <script src="./renderer.js"></script>
</body>
</html>

// www.javascriptcn.com code example
// renderer.js
const { ipcRenderer } = require('electron');

document.getElementById('insert').addEventListener('click', () => {
    const name = prompt('请输入姓名：');
    const email = prompt('请输入邮箱：');

    ipcRenderer.send('insert-data', {name, email});
});

在上述代码中，我们为按钮添加了一个点击事件监听器。当用户点击按钮时，会弹出两个提示框让用户输入姓名和邮箱，然后通过 ipcRenderer.send 方法向主进程发送一条消息，消息类型为 insert-data，消息内容为用户输入的姓名和邮箱。

在主进程中，我们需要监听 insert-data 消息，并执行相应的插入操作。我们可以在 main.js 文件中添加以下代码：

// www.javascriptcn.com code example
// main.js
const { app, BrowserWindow } = require('electron');
const { openDB, closeDB } = require('./db');

function createTable() {
    // ...
}

app.on('ready', () => {
    createTable();
    // ...
});

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

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

function insertData(name, email) {
    openDB();

    db.run(`INSERT INTO users (name, email) VALUES (?, ?)`, [name, email], function(err) {
        if (err) {
            console.error(err.message);
        } else {
            console.log(`Inserted row with ID: ${this.lastID}`);
        }
    });

    closeDB();
}

ipcMain.on('insert-data', (event, data) => {
    insertData(data.name, data.email);
});

在上述代码中，我们定义了一个 insertData 函数，该函数接受两个参数：name 和 email，然后执行 SQL 语句向 users 表中插入一行数据。最后，我们通过 ipcMain.on 方法监听 insert-data 消息，并调用 insertData 函数来插入数据。

查询数据

在渲染进程中，我们可以通过 ipcRenderer 模块向主进程发送消息，从而触发主进程中的查询操作。我们可以在渲染进程中添加一个按钮，当用户点击该按钮时，向主进程发送查询请求。

// www.javascriptcn.com code example
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Electron SQLite</title>
</head>
<body>
    <button id="query">查询数据</button>

    <div id="result"></div>

    <script src="./renderer.js"></script>
</body>
</html>

// www.javascriptcn.com code example
// renderer.js
const { ipcRenderer } = require('electron');

document.getElementById('query').addEventListener('click', () => {
    ipcRenderer.send('query-data');
});

ipcRenderer.on('query-result', (event, data) => {
    const resultDiv = document.getElementById('result');
    resultDiv.innerHTML = '';

    data.forEach(item => {
        const p = document.createElement('p');
        p.textContent = `ID: ${item.id}, Name: ${item.name}, Email: ${item.email}`;
        resultDiv.appendChild(p);
    });
});

在上述代码中，我们为按钮添加了一个点击事件监听器。当用户点击按钮时，通过 ipcRenderer.send 方法向主进程发送一条消息，消息类型为 query-data。我们还通过 ipcRenderer.on 方法监听 query-result 消息，并根据接收到的数据更新页面上的结果显示。

在主进程中，我们需要监听 query-data 消息，并执行相应的查询操作。我们可以在 main.js 文件中添加以下代码：

// www.javascriptcn.com code example
// main.js
const { app, BrowserWindow } = require('electron');
const { openDB, closeDB } = require('./db');

function createTable() {
    // ...
}

app.on('ready', () => {
    createTable();
    // ...
});

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

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

function insertData(name, email) {
    // ...
}

function queryData(callback) {
    openDB();

    const rows = [];
    db.all("SELECT * FROM users", [], (err, data) => {
        if (err) {
            console.error(err.message);
        } else {
            data.forEach(row => {
                rows.push(row);
            });
            callback(rows);
        }
    });

    closeDB();
}

ipcMain.on('query-data', () => {
    queryData((data) => {
        mainWindow.webContents.send('query-result', data);
    });
});

在上述代码中，我们定义了一个 queryData 函数，该函数接受一个回调函数作为参数。该函数首先打开数据库连接，然后执行 SQL 语句查询 users 表中的所有行数据，并将结果保存在一个数组中。最后，我们通过调用 callback 回调函数并将结果传递给它来返回查询结果。

在 query-data 消息处理程序中，我们调用了 queryData 函数，并通过 mainWindow.webContents.send 方法向渲染进程发送查询结果。

更新数据

在渲染进程中，我们可以通过 ipcRenderer 模块向主进程发送消息，从而触发主进程中的更新操作。我们可以在渲染进程中添加一个按钮，当用户点击该按钮时，向主进程发送更新请求。

// www.javascriptcn.com code example
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Electron SQLite</title>
</head>
<body>
    <button id="update">更新数据</button>

    <script src="./renderer.js"></script>
</body>
</html>

// www.javascriptcn.com code example
// renderer.js
const { ipcRenderer } = require('electron');

document.getElementById('update').addEventListener('click', () => {
    const id = prompt('请输入要更新的记录ID：');
    const name = prompt('请输入新的姓名：');
    const email = prompt('请输入新的邮箱：');

    ipcRenderer.send('update-data', {id, name, email});
});

在上述代码中，我们为按钮添加了一个点击事件监听器。当用户点击按钮时，会弹出三个提示框让用户输入要更新的记录ID、新的姓名和新的邮箱，然后通过 ipcRenderer.send 方法向主进程发送一条消息，消息类型为 update-data，消息内容为用户输入的ID、姓名和邮箱。

在主进程中，我们需要监听 update-data 消息，并执行相应的更新操作。我们可以在 main.js 文件中添加以下代码：

// www.javascriptcn.com code example
// main.js
const { app, BrowserWindow } = require('electron');
const { openDB, closeDB } = require('./db');

function createTable() {
    // ...
}

app.on('ready', () => {
    createTable();
    // ...
});

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

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

function insertData(name, email) {
    // ...
}

function queryData(callback) {
    // ...
}

function updateData(id, name, email) {
    openDB();

    db.run(`UPDATE users SET name = ?, email = ? WHERE id = ?`, [name, email, id], function(err) {
        if (err) {
            console.error(err.message);
        } else {
            console.log(`Updated row with ID: ${id}`);
        }
    });

    closeDB();
}

ipcMain.on('update-data', (event, data) => {
    updateData(data.id, data.name, data.email);
});

在上述代码中，我们定义了一个 updateData 函数，该函数接受三个参数：id、name 和 email，然后执行 SQL 语句更新 users 表中指定ID的记录。最后，我们通过 ipcMain.on 方法监听 update-data 消息，并调用 updateData 函数来更新数据。

删除数据

在渲染进程中，我们可以通过 ipcRenderer 模块向主进程发送消息，从而触发主进程中的删除操作。我们可以在渲染进程中添加一个按钮，当用户点击该按钮时，向主进程发送删除请求。

// www.javascriptcn.com code example
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Electron SQLite</title>
</head>
<body>
    <button id="delete">删除数据</button>

    <script src="./renderer.js"></script>
</body>
</html>

// renderer.js
const { ipcRenderer } = require('electron');

document.getElementById('delete').addEventListener('click', () => {
    const id = prompt('请输入要删除的记录ID：');

    ipcRenderer.send('delete-data', id);
});

在上述代码中，我们为按钮添加了一个点击事件监听器。当用户点击按钮时，会弹出一个提示框让用户输入要删除的记录ID，然后通过 ipcRenderer.send 方法向主进程发送一条消息，消息类型为 delete-data，消息内容为用户输入的ID。

在主进程中，我们需要监听 delete-data 消息，并执行相应的删除操作。我们可以在 main.js 文件中添加以下代码：

// www.javascriptcn.com code example
// main.js
const { app, BrowserWindow } = require('electron');
const { openDB, closeDB } = require('./db');

function createTable() {
    // ...
}

app.on('ready', () => {
    createTable();
    // ...
});

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

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

function insertData(name, email) {
    // ...
}

function queryData(callback) {
    // ...
}

function updateData(id, name, email) {
    // ...
}

function deleteData(id) {
    openDB();

    db.run(`DELETE FROM users WHERE id = ?`, [id], function(err) {
        if (err) {
            console.error(err.message);
        } else {
            console.log(`Deleted row with ID: ${id}`);
        }
    });

    closeDB();
}

ipcMain.on('delete-data', (event, id) => {
    deleteData(id);
});

在上述代码中，我们定义了一个 deleteData 函数，该函数接受一个参数：id，然后执行 SQL 语句删除 users 表中指定ID的记录。最后，我们通过 ipcMain.on 方法监听 delete-data 消息，并调用 deleteData 函数来删除数据。

以上就是 Electron 应用中使用 SQLite 的详细步骤。通过这些步骤，你可以轻松地在 Electron 应用中集成 SQLite 数据库，并完成数据的增删改查操作。