在 electron+vite+vue3+express 项目中使用better-sqlite3

文章目录

      • [一、安装 electron-rebuild 和 better-sqlite3](#一、安装 electron-rebuild 和 better-sqlite3)
      • [二、使用 electron-rebuild 重建 Node.js 模块](#二、使用 electron-rebuild 重建 Node.js 模块)
      • [三、better-sqlite3 的基本使用](#三、better-sqlite3 的基本使用)
      • 四、打包
      • 五、参考资料

一、安装 electron-rebuild 和 better-sqlite3

复制代码
yarn add -D electron-rebuild
yarn add better-sqlite3

Electron 内置的 Node.js 版本和编译到 better-sqlite3 的 Node.js 版本不同将可能导致安装失败,所以此处需要安装 electron-rebuild 重建 Node.js 模块。(注意安装顺序,否则可能出现安装失败的问题)

二、使用 electron-rebuild 重建 Node.js 模块

如果安装完 better-sqlite3 不重建直接运行,则可能出现以下报错:

shell 复制代码
Error: The module 'xxx'
was compiled against a different Node.js version using
NODE_MODULE_VERSION xxx. This version of Node.js requires
NODE_MODULE_VERSION xxx. Please try re-compiling or re-installing
the module (for instance, using `npm rebuild` or `npm install`).

修改 package.json 文件中的 scripts 内容:

json 复制代码
  "scripts": {
    "dev": "vite",
    ...
    "rebuild": "electron-rebuild -f -w better-sqlite3"
  },

执行命令:yarn run rebuild 重建 Node.js 版本。

三、better-sqlite3 的基本使用

新建 db/DBManager.ts 文件:

ts 复制代码
const sqliteDB = require('better-sqlite3');
const path = require('path');

const dbPath = 
    process.env.NODE_ENV === "development" ? 
    "./wallpapers.db" : path.join(process.resourcesPath, "./wallpapers.db")

// 打开数据库,如果不存在则创建,cacheSize 缓存数据最大值
const db = new sqliteDB(dbPath,{ cacheSize: 15 });
db.pragma('journal_mode = WAL');

exports.db = db;

新建 db/ImageManager.ts 文件:

ts 复制代码
const dbmgr = require("./DBManager.ts");
const db = dbmgr.db;

// 读取信息
const readAllImgs = () => {
    try {
        const result = db.prepare("SELECT * FROM imgs", { cached: true }).all();
        return result;
    } catch (error) {
        console.error(error);
        throw error;
    }
};

// 批量插入数据 (values 是一个对象)
const insertWallhaven = (keys, values) => {
    try {
        // 使用命名参数 例: $id、$url ... ; 数据 values => [{id: xx, url: xx},{}]
        // 由于插入的数据 id 可能重复,所以此处使用 OR IGNORE
        const insertQuery = db.prepare(
            `INSERT OR IGNORE INTO wallhaven (${keys.join(",")}) VALUES (${keys.map((item) => "$" + item).join(",")})`
        );
        const insertMany = db.transaction((values) => {
            for (const val of values) {
                insertQuery.run(val)
            }
        });
        insertMany(values);
    } catch (error) {
        console.error(error);
        throw error;
    }
};

module.exports = {
    readWallhaven,
    insertWallhaven,
};

四、打包

修改 electron-builder.json5 文件,添加打包配置:

json 复制代码
  "directories": {
    ...
  },
  // 添加数据库文件
  "extraResources": [
    "./wallpapers.db"
  ],

将数据库文件放在根目录下:


说明: 后续在使用过程中发现,每次安装新的第三方库时都需要重新执行 yarn run rebuild 命令重建 Node.js 模块,否则可能出现报错。

五、参考资料

相关推荐
C++ 老炮儿的技术栈11 小时前
从 Qt Designer 属性编辑器的层级可以看到继承链
c语言·数据库·c++·qt·sqlite·visual studio
倾听醉梦语16 小时前
React/Vite/Next.js 前端开发工具 SpotPatch:点击页面元素精准定位 JSX/TSX 源码
javascript·react·ai编程·vite·next.js·前端开发工具
DsirNg2 天前
从 `@wheel.prevent.stop` 到事件捕获:一次讲清浏览器事件流与 Vue 事件修饰符
javascript·vue·事件修饰符·事件冒泡·dom 事件·事件捕获·wheel
其美杰布-富贵-李2 天前
Vue 3 模板语法速通:彻底理解 `:`、`@`、`#`、`v-if`、`v-for` 与 `v-model`
vue
DsirNg2 天前
基于拓扑排序的画布自动布局:用最长上游路径决定节点列级
vue·流程图·拓扑排序·状态管理·有向图·自动布局·最长路径
在世修行3 天前
从零打造 C# 工业视觉检测系统(九):工厂模式实现 SQL Server / MySQL / SQLite 三库切换
mysql·sqlite·c#·工厂模式
JLWcai202510093 天前
核电打磨 “安全卫士”|金利威不锈钢专用树脂砂轮,合规高效双在线
mysql·mongodb·eureka·sqlite·rabbitmq·nosql·memcached
瑞码空间3 天前
Web应用的多端部署之道:浏览器 · Electron · Docker
前端·docker·electron·浏览器·web
way_hj4 天前
Flask笔记(2)快速web项目
笔记·flask·vue·web
qq21084629534 天前
PostgreSQL、SQLite、Redis、TDengine
redis·postgresql·sqlite