Electron使用 SQLite

news2024/5/18 15:15:10

在客户端开发中,无论是 PC 端,还是手机端,为了能够访问离线数据,数据经常需要保存到本地,IndexDB 可以用于存储本地数据,IndexDB 是一个对象存储,数据是以 key:value 的形式进行存储和访问的,相对于关系型数据库,访问速度快,但是结构简单。对于一些复杂的模型,多表关联关系,用 IndexDB 实现会相对复杂,需要通过查询实现。所以在业务项目中,通过关系型数据库对业务数据进行建模,采用 SQL进行数据访问更加方便。

SQLite是客户端常用的文件型关系数据库,主流的移动端、桌面应用大多使用的 SQLite进行离线数据存储,例如微信。SQLite 是一个轻量级基于文件关系型数据库,主要有以下特点:

  • 支持标准 SQL
  • 文件无需服务器支持
  • 跨平台,Android、IOS、PC(Windows、Mac、Linux)
  • 不需要任何配置,安装上依赖直接可以使用

安装,默认 SQLite 是x86 编译的,在Mac M1 上试用会报错,所以我们需要对 SQLLite 进行重新编译。

npm install sqlite3 --build-from-source --target_arch=arm64 --fallback-to-build

Electron + SQLite 创建用户的例子:
index.html

<!DOCTYPE html>
<html>
<head>
    <title>Electron SQLite CRUD</title>
</head>
<body>
    <h1>User Management</h1>
    <input id="username" type="text" placeholder="Username">
    <input id="age" type="number" placeholder="Age">
    <button onclick="createUser()">Create User</button>
    <button onclick="getUsers()">Load Users</button>
    <div id="users"></div>

    <script>
        function createUser() {
            const username = document.getElementById('username').value;
            const age = document.getElementById('age').value;
            window.api.createUser(username, parseInt(age)); #进程间互相调用
        }

        async function getUsers() {
            const users = await window.api.getUsers();
            const usersDiv = document.getElementById('users');
            usersDiv.innerHTML = users.map(user => `<p>${user.username}, ${user.age} years old</p>`).join('');
        }
    </script>
</body>
</html>

main.js 主线程

const { ipcMain, app, BrowserWindow } = require('electron');
const path = require('path');
const sqlite3 = require('sqlite3').verbose();



function createWindow() {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
        }
    });

    mainWindow.loadFile('index.html');
}

app.whenReady().then(createWindow);

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

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

const db = new sqlite3.Database('userdata.db', (err) => {
    if (err) {
        console.error(err.message);
    }
    console.log('Connected to the userdata database.');
    db.run(`CREATE TABLE IF NOT EXISTS tb_user (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        username TEXT,
        age INTEGER
    )`);
});

ipcMain.on('create-user', (event, username, age) => {
    db.run(`INSERT INTO tb_user(username, age) VALUES(?, ?)`, [username, age]);
});

ipcMain.handle('get-users', async (event) => {
    return new Promise((resolve, reject) => {
        db.all(`SELECT * FROM tb_user`, [], (err, rows) => {
            if (err) {
                reject(err);
            }
            resolve(rows);
        });
    });
});

ipcMain.on('update-user', (event, id, username, age) => {
    db.run(`UPDATE tb_user SET username = ?, age = ? WHERE id = ?`, [username, age, id]);
});

ipcMain.on('delete-user', (event, id) => {
    db.run(`DELETE FROM tb_user WHERE id = ?`, id);
});

IPC API

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld(
    'api', {
        createUser: (username, age) => ipcRenderer.send('create-user', username, age),
        getUsers: () => ipcRenderer.invoke('get-users'),
        updateUser: (id, username, age) => ipcRenderer.send('update-user', id, username, age),
        deleteUser: (id) => ipcRenderer.send('delete-user', id)
    }
);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1641656.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

android天气实战

页面绘制 问题1、下拉框需要背景为透明 我懒得写全部省份就写了5个所以不需要往下 图标准备 iconfont-阿里巴巴矢量图标库几坤年没来这了好怀念啊&#xff0c;图标库选择下雨的图标等 准备网络请求 0、API接口准备 api免费七日天气接口API 未来一周天气预报api (tianqiap…

SVM直观理解

https://tangshusen.me/2018/10/27/SVM/ https://www.bilibili.com/video/BV16T4y1y7qj/?spm_id_from333.337.search-card.all.click&vd_source8272bd48fee17396a4a1746c256ab0ae SVM是什么? 先来看看维基百科上对SVM的定义: 支持向量机&#xff08;英语&#xff1a;su…

[BLE] Heart Rate Protocol - Sensor

写在前面 目前我从网上找到的有关BLE心率协议的博文内容良莠不齐&#xff0c;很难让人根据文章内容来全面理解心率服务&#xff1b;此外SIG网站上有关心率服务的文档比较多&#xff0c;内容比较碎&#xff0c;需要读者从多个文档中将需要的内容拼接起来&#xff0c;因此写下这…

【动态规划】路径问题|不同路径I|不同路径II|珠宝的最高价值|下降路径的最小和|最小路径和|

一、不同路径I 62. 不同路径 - 力扣&#xff08;LeetCode&#xff09; &#x1f4a1;细节&#xff1a; 1.多开一行和一列&#xff08;跟一维数组多开一个位置一样&#xff09;&#xff0c;这样方便初始化 2.状态转移方程&#xff1a;注意走一步并不是多一种走的路径&#xff0…

在编程的世界里,我相信每一行代码都是一次对未来的投资

&#x1f600;前言 突然有感而发也是激励自己互勉 &#x1f3e0;个人主页&#xff1a;尘觉主页 文章目录 在编程的世界里&#xff0c;我相信每一行代码都是一次对未来的投资类似句子编程的本质代码的价值构建可持续的未来结语 在编程的世界里&#xff0c;我相信每一行代码都是一…

数据库基础--MySQL多表查询之外键约束

MySQL多表关系 一对一 顾名思义即一个对应一个的关系&#xff0c;例如身份证号对于每个人来说都是唯一的&#xff0c;即个人信息表与身份证号信息表是一对一的关系。车辆信息表与车牌信息表也是属于一对一的关系。 一对多 即一个表当中的一个字段信息&#xff0c;对应另一张…

【数据库原理及应用】期末复习汇总高校期末真题试卷02

试卷 一、填空题 数据库系统是指计算机系统中引入数据库后的系统&#xff0c;一般由数据库、________、应用系统、数据库管理员和用户构成。当数据库的存储结构发生了改变&#xff0c;由数据库管理员对________映象作相应改变&#xff0c;可以使________保持不变&#xff0c;…

vue快速入门(五十一)历史模式

注释很详细&#xff0c;直接上代码 上一篇 新增内容 历史模式配置方法 默认哈希模式&#xff0c;历史模式与哈希模式在表层的区别是是否有/#/ 其他差异暂不深究 源码 //导入所需模块 import Vue from "vue"; import VueRouter from "vue-router"; import m…

从零开始学AI绘画,万字Stable Diffusion终极教程(一)

【第1期】SD入门 2022年8月&#xff0c;一款叫Stable Diffusion的AI绘画软件开源发布&#xff0c;从此开启了AIGC在图像上的爆火发展时期 率先学会SD的人&#xff0c;已经挖掘出了越来越多AI绘画有趣的玩法 从开始的AI美女、线稿上色、真人漫改、头像壁纸 到后来的AI创意字、AI…

华为eNSP小型园区网络配置(上)

→跟着大佬学习的b站直通车← 目标1&#xff1a;dhcp分配ip地址 目标2&#xff1a;内网用户访问www.yzy.com sw1 # vlan batch 10 # interface Ethernet0/0/1port link-type accessport default vlan 10 # interface Ethernet0/0/2port link-type trunkport trunk allow-pass…

oracle pl/sql 如何让sql windows 显示行号

oracle pl/sql 如何让sql windows 显示行号 下载最新版的pl/sql第一步&#xff0c;在preferences中对sql Windows进行设置&#xff0c;如下所示第二步&#xff0c;在preferences中对User interface进行设置&#xff0c;如下所示结果如下当然&#xff0c;还可以通过右键选择是否…

iptables---防火墙

防火墙介绍 防火墙的作用可以理解为是一堵墙&#xff0c;是一个门&#xff0c;用于保护服务器安全的。 防火墙可以保护服务器的安全&#xff0c;还可以定义各种流量匹配的规则。 防火墙的作用 防火墙具有对服务器很好的保护作用&#xff0c;入侵者必须穿透防火墙的安全防护…

【大模型学习】私有大模型部署(基础知识)

私有大模型 优点 保护内部隐私 缺点 成本昂贵 难以共享 难以更新 大模型底座 基础知识点 知识库 知识库是什么&#xff1f; 知识库的作用是什么&#xff1f; 微调 增强大模型的推理能力 AI Agent 代理&#xff0c;与内部大模型进行交互 开源 and 闭源 是否可以查…

二叉树的实现(详解,数据结构)

目录 一&#xff0c;二叉树需要实现的功能 二&#xff0c;下面是各功能详解 0.思想&#xff1a; 1.创建二叉树结点&#xff1a; 2.通过前序遍历的数组"ABD##E#H##CF##G##"构建二叉树 3.二叉树销毁&#xff1a; 4.前序遍历&#xff1a; 5.中序遍历&#xff1a;…

QT5之布局操作

目录 实验之前的前提 局部布局和整体布局定义 快捷工具 水平和垂直布局 水平布局 在对象区域可以看出三个已经被水平布局在一起 在对象区域选中布局&#xff0c;点击工具取消当前布局 可以将两个小局部进行大局部布局 网格布局 弹簧布局 分割器布局 器件对齐边距 也…

Java Map集合(一)

1. Map接口 1.1 Map接口概述 Map接口是一种双列集合。Map的每个元素都包含一个键对象Key和一个值对象Value &#xff0c;键对象和值对象之间存在对应关系&#xff0c;这种关系称为映射&#xff08;Mapping&#xff09;。 Map接口中的元素&#xff0c;可以通过 key 找到 value&…

STD10A230XCB电源模块STD05A230XCB整流模块介绍

STD10A230XCB电源模块STD05A230XCB整流模块介绍&#xff0c;直流屏电源模块STD05A230XCB&#xff0c;整流模块STD10A115XCB&#xff0c;STD20A115XCB&#xff0c;STD10A230X&#xff0c;STD05A230X&#xff0c;直流屏充电模块的关键词: 电力智能高频开关充电模块STD20A230XCB,高…

这是一个简单的照明材料网站,后续还会更新

1、首页效果图 代码 <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>爱德照明网站首页</title><style>/*外部样式*/charset "utf-8";*{margin: 0;padding: 0;box-sizing: border-box;}a{text-dec…

Golang Colly爬取图片gorm存储数据

语言:Golang 库:Iris/Colly/gorm 运行结果 text/html; charset=utf-8 It is image 20240429222029_0_0.jpg Saved file: images\20240429222029_0_0.jpg text/html; charset=utf-8 It is image 20240429222030_1_0.jpg Saved file: images\20240429222030_1_0.jpg It is ima…

遭遇“U盘只剩USBC乱码”危机?这里有你需要的解决方案!

当你满心期待地将U盘插入电脑&#xff0c;准备读取或传输文件时&#xff0c;突然发现U盘中的文件名全部变成了乱码&#xff0c;尤其是当这些乱码以“USBC”开头时&#xff0c;你可能会感到惊慌失措。这种情况不仅影响你的工作效率&#xff0c;还可能导致重要数据的丢失。那么&a…