在 Electron + Vue 应用程序中使用 sqlite3 实现本地数据库的增删改查功能,可以参考以下步骤和代码示例:
- 安装必要的库:
npm install sqlite3 electron --save
npm install vue vue-router vuex --save
- 在 Vue 组件中引入
sqlite3
并使用:
// 在 Vue 组件中
import sqlite3 from 'sqlite3';
export default {
data() {
return {
db: null,
items: []
};
},
methods: {
async openDatabase() {
this.db = new sqlite3.Database('path/to/database.db');
// 初始化数据库等...
},
async createItem(item) {
// 插入数据
const sql = 'INSERT INTO items (name) VALUES (?)';
this.db.run(sql, item.name, function(err) {
if (err) {
return console.error(err.message);
}
console.log(`A row has been inserted with rowid ${this.lastID}`);
});
},
async readItems() {
// 查询数据
const sql = 'SELECT name FROM items';
this.db.all(sql, (err, rows) => {
if (err) {
throw err;
}
this.items = rows;
});
},
async updateItem(id, item) {
// 更新数据
const sql = 'UPDATE items SET name = ? WHERE id = ?';
this.db.run(sql, item.name, id, function(err) {
if (err) {
return console.error(err.message);
}
console.log(`Row(s) updated: ${this.changes}`);
});
},
async deleteItem(id) {
// 删除数据
const sql = 'DELETE FROM items WHERE id = ?';
this.db.run(sql, id, function(err) {
if (err) {
return console.error(err.message);
}
console.log(`Row deleted ${this.changes}`);
});
}
},
async created() {
await this.openDatabase();
// 读取数据等初始化操作...
}
};
- 在 Electron 的主进程中,确保有适当的文件和数据库路径权限:
const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}));
// 其余窗口配置和事件监听...
}
app.on('ready', createWindow);
确保在 El