windows7下electron加载使用sqlite3的技术要点

因为项目新需求,需要使用nodejs和sqlite3进行开发。nodejs使用electron framework,然而开发过程中一坑又一坑,网上有关的资料不多,国内资料尤其少,所以写下走过一个一个的坑的过程来给同学借鉴。
首先推荐在darwin下开发,然而环境是不能强求的。在win7下使用electron和sqlite3开发,需要注意采用v8引擎的electron内置node可能不支持原生模块,所以需要重新编译原生模块并且替换electron可以支持的头文件部分,这是加载sqlite3的要点,以下会重点提示。

package.json和调用sqlite3的渲染进程js文件如下所示:
{
  "name": "electron-sqlite3",
  "version": "1.0.0",
  "description": "by L.X",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "rebuild": "electron-rebuild -f -w sqlite3"
  },
  "keywords": [
    "Electron",
    "sqlite3",
    "demo"
  ],
  "author": "L.X",
  "devDependencies": {
    "builder": "^3.2.1",
    "electron": "^1.4.13",
    "electron-rebuild": "^1.4.0"
  },
  "dependencies": {
    "electron-prebuilt": "^1.4.13",
    "electron-rebuild": "^1.5.4",
    "electron-sqlite": "0.0.1",
    "sqlite3": "^3.1.8"
  }
}
const sqlite3 = require('sqlite3');
sqlite3.verbose();
const db = new sqlite3.Database('mydb.db');
db.serialize(function() {
    db.run("CREATE TABLE if not exists lorem (info TEXT)");
});
db.close();

第一行代码调用了sqlite3的模块,单独用node命令执行本js没有问题,当electron渲染进程执行到本行时,会调用node_modules文件夹下的sqlite3,而不是本地sqlite数据库,产生一个错误,稍后会提到,这是和单独用node命令执行的区别。

npm install
npm install --save electron-rebuild
npm install --save electron-prebuilt
.\node_modules\.bin\electron-rebuild.cmd

官方文档给出了简易编译原生模块的方式,代码如上所示,然而我试了之后发现并没有什么用处,如果大家有谁这种方式能用可以联系我,如果好用的确方便。

执行npm install –save electron-rebuild需要安装python环境,官方推荐2.7版本,尤其不要超过3.0版本。

之后提示需要安装window sdk8.1,还需要安装visual studio2015,官方版本推荐2015,有老外说只能2015好用,我没有去验证,默默升级到2015。

之后提示需要c++套件,这个要下载安装就比较复杂了,机智的我用visual studio新建了一个c++工程,然后vs就默默的替我自动下载好了。

以上步骤比较凌乱,过程中我也忘记截图,然而却能搭建好编译环境,建议走一遍。以下是我遇到的两个主要问题:

一. Uncaught Error:cannot find mudule‘..\binding\electroon-v1.4-win32-x64\node_sqlite3.node’

这里写图片描述

提示在node_modules\sqlite3\lib\binding\electroon-v1.4-win32-x64下cannot find mudule,去binding下找不到electroon-v1.4-win32-x64文件夹,原因是npm install时加载package.json是会在node_modules下安装原生sqlite3模块,binding下会产生一个类似node-v51-win32-x64的文件夹,需要做的是编译产生node_modules\sqlite3\lib\binding\electroon-v1.4-win32-x64路径,手动修改并不能解决问题。编译方式如下:这个是官方给出的方式之一。

cd .\node_modules\sqlite3

npm install nan --save

npm run prepublish

node-gyp configure --module_name=node_sqlite3 --module_path=../lib/binding/electron-v1.4-win32-x64

node-gyp rebuild --target=1.4.13 --arch=x64 --target_platform=win32 --dist-url=https://atom.io/download/electron/ --module_name=node_sqlite3 --module_path=../lib/binding/electron-v1.4-win32-x64

二. Uncaught Eror: The system cannot find message text for message number 0x%1 in the message file for %2.
这里写图片描述

上文说到的手动修改路径,会报这个错误。其次错误的重编译也出产生这个错误,这个错误并非指编译失败,而是错误的指定了electron版本号、错误地加载electron header等问题,导致electron无法识别编译后的.node文件也会报这个错误。

node-gyp rebuild --target=1.4.13 --arch=x64 --target_platform=win32 --dist-url=https://atom.io/download/electron/ --module_name=node_sqlite3 --module_path=../lib/binding/electron-v1.4-win32-x64

以上命令行是编译的关键,–target代表electron的版本号,注意是环境变量的版本号,而不是package.json的electron版本号,可以通过electron -v来查;–arch是cpu的位数;–dist-url指定了electron header的下载来源,这一个比较重要,一定要去官方文档docs查阅最新的来源,网络上二手资料大多数已经过时,编译过程不报错但是使用会报错误二,我就在这里浪费了不少的时间,最后去翻官方文档才找到问题所在。

当执行完毕后,会产生编译文件在node_modules\sqlite3\build内如下图所示

这里写图片描述

并能产生node_modules\sqlite3\lib\binding\electroon-v1.4-win32-x64,执行npm start主进程调用到本渲染进程后,执行完毕会在当前路径下产生mydb.db文件,至此,问题解决。

  • 6
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
好的,下面是一个使用 Vite、TypeScript 和 ElectronSQLite3 示例项目。 首先,需要安装以下依赖: - vite - electron - electron-builder(可选,用于将应用程序打包成可执行文件) - sqlite3 - @types/sqlite3(TypeScript 定义文件) 可以使用以下命令进行安装: ``` npm install vite electron electron-builder sqlite3 @types/sqlite3 --save-dev ``` 接下来,创建一个 Vite 项目: ``` npx vite create my-app --template electron-ts ``` 然后,在项目根目录下创建一个 `db` 目录,用于存放 SQLite3 数据库文件。 接着,创建一个 `database.ts` 文件,用于连接 SQLite3 数据库: ```typescript import sqlite3 from 'sqlite3'; const DB_PATH = './db/my-db.db'; export function connectDatabase() { return new sqlite3.Database(DB_PATH, (err) => { if (err) { console.error(err.message); } console.log('Connected to the database.'); }); } ``` 这个文件中,我们首先定义了 SQLite3 数据库文件的路径 `DB_PATH`,然后导出了一个 `connectDatabase` 函数,用于连接到数据库。 接下来,我们可以创建一个 `users.ts` 文件,用于操作用户表: ```typescript import { connectDatabase } from './database'; const db = connectDatabase(); export interface User { id: number; name: string; email: string; } export function getAllUsers(): Promise<User[]> { return new Promise((resolve, reject) => { db.all('SELECT * FROM users', (err, rows) => { if (err) { reject(err); } else { resolve(rows); } }); }); } export function addUser(user: User): Promise<number> { return new Promise((resolve, reject) => { db.run( 'INSERT INTO users(name, email) VALUES(?, ?)', [user.name, user.email], function (err) { if (err) { reject(err); } else { resolve(this.lastID); } } ); }); } ``` 在这个文件中,我们首先导入了 `connectDatabase` 函数,并使用它连接到了数据库。然后,我们定义了一个 `User` 接口,用于表示用户的数据结构。 接着,我们导出了两个函数: - `getAllUsers`:用于获取所有用户记录。 - `addUser`:用于添加一条新的用户记录。 这两个函数都是返回 Promise 对象的,因为它们都是需要异步执行的操作。 最后,我们可以在 `renderer.ts` 文件中调用这些函数: ```typescript import { getAllUsers, addUser, User } from './users'; const userList = document.querySelector('#user-list')!; const nameInput = document.querySelector('#name-input') as HTMLInputElement; const emailInput = document.querySelector('#email-input') as HTMLInputElement; const addBtn = document.querySelector('#add-btn')!; async function loadUsers() { const users = await getAllUsers(); userList.innerHTML = ''; users.forEach((user) => { const li = document.createElement('li'); li.textContent = `${user.id} - ${user.name} (${user.email})`; userList.appendChild(li); }); } addBtn.addEventListener('click', async () => { const user: User = { id: 0, name: nameInput.value, email: emailInput.value, }; await addUser(user); await loadUsers(); }); loadUsers(); ``` 在这个文件中,我们首先导入了 `getAllUsers` 和 `addUser` 函数,以及 `User` 接口。 然后,我们使用 DOM API 获取了一些元素,包括用户列表、姓名输入框、邮箱输入框和添加按钮。 接着,我们定义了一个 `loadUsers` 函数,用于加载所有用户记录,并将它们显示在用户列表中。 最后,我们在添加按钮的点击事件处理程序中,获取了用户输入的姓名和邮箱,创建了一个新的用户对象,并调用了 `addUser` 函数将其添加到数据库中。然后,我们又调用了 `loadUsers` 函数重新加载用户列表。 现在,可以使用以下命令启动应用程序: ``` npm run dev ``` 这将同时启动 Vite 和 Electron,打开应用程序窗口。 在窗口中,可以输入用户的姓名和邮箱,点击添加按钮,然后应该会在用户列表中看到新添加的用户记录。 最后,如果想要将应用程序打包成可执行文件,可以使用以下命令: ``` npm run build ``` 这将使用 Electron Builder 将应用程序打包成可执行文件,并输出到 `dist` 目录中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值