electron + oracledb踩坑记录

开始前

最近接到一个需求,需要在electron客户端直接连接数据建表以及落库操作,环境搭建花费不少时间。

由于项目是内网,且node版本为12.16.3,以下一系列操作均在node: 12.16.3版本下进行

以下操作均为windows环境下

如想操作多个node管理,可下载nvm进行node管理

外网安装

如果项目在外网中还是比较方便的,可直接下载各种依赖,安装包

一. 安装windows-build-tools
npm install ---global windows-build-tools

windows-build-tools会帮忙安装python与 visual studio 2017 (C构建环境)

我这里报错了,python安装成功,但是vs没安装上,进入这个路径,找到vs_BuildTools应用程序运行,然后安装即可。

下面是python 与vs安装成功后截图,电脑左下角点击开始

其中visual studio installer 点击运行 进入下图,安装C环境(第一个),有点大【大概4.5G】,安装成功如下

二. 安装node-gyp模块 (ps:项目node版本比较低,所以node-gyp版本也选的比较低)
npm install ---global node-gyp@3.8.0

三. 安装oracledb【从源码安装】

根据npm上oracledb提示,node12对应的oracledb版本是5.3.0,所以我下载的这个版本

npm install github.com/oracle/node...

electron中不使用npm install oracledb@5.3.0的原因

看下两张图,生成oracledb依赖包。

oracledb文档地址

四. 下载oracledb客户端【这里下载的basic版】

下载地址:

根据文档,visual studio 2017对应的client版本19_20,下载解压后如下

到这里需要的库,以及环境就安装好了。

内网安装【断网】

一. 安装python【下载python-2.7.15.amd64 直接安装即可】

二. 安装visual studio 2017

这个帖子有说如何离线安装vs2017

下载个

我只需要c环境,所以直接执行,找到vs_BuildTools打开命令行

vs_buildtools.exe --layout f:\vs2017layout --add Microsoft.VisualStudio.Workload.VCTools --includeOptional --lang zh-CN

这里会在我的f盘生成一个vs2017layout文件,进入vs2017layout文件夹

进入certificates,将三个证书 =》 依次双击,然后安装证书,一直无脑下一步,最后显示导入成功。确定

然后运行这个

安装中

可能等待会有点久,右边可选其实选第一个就行了,总大小大概小3G,下图是安装成功后,但是和安装时显示差不多

安装成功后

npm config set msvs_version 2017

三:安装node-gyp

这方面的资料真比较少,踩了点坑,掘金有windows下node-gyp离线安装的贴子,对我成功内网安装node-gyp很有帮助,但是单一个帖子,我依次尝试,都没成功,所以两个帖子结合了一下

帖子一.windows离线安装node-gyp

这个帖子取:步骤6安装node-gyp,按这里操作就行,其中node版本换成我这里的12.16.3,然后拷贝了一下cmd文件代码,这样内网就可以使用命令行node-gyp -v 直接查看版本了。

帖子二:离线安装node-gyp

这个帖子需要设置node-header,这里按照操作后,我在c盘建了个文件夹node-headers,将操作后得到的文件放了进去

打开cmd执行: npm config set nodedir 上面的文件路径 => 比如npm config set nodedir C:\node-headers\12.16.3

设置这个header还有一种更快的方式,不用看帖子二,在外网直接直接

npm install -g node-gyp@3.8.0

后找到路径C:\Users\用户名 这个下面会有个.node-gyp 下面会有12.16.3(对应node版本的header, 直接复制到内网任意位置)然后 打开cmd执行: npm config set nodedir 上面的文件路径

到这里,内网环境就结束了

PS重要!!!: 切记检查下项目中package.json中dependencies中是否添加

"oracledb": "github.com/oracle/node..."

否则electron-builder打包的时候不会将oracledb打包进去,客户端会报错Cannot find module 'oracledb'

oracledb使用

使用之前:将client端引用配好

一: 根目录下创建extraResources文件夹,将客户端basic instantclient_19_20文件夹放入

二:electron-build配置文件中

三:主进程中查找客户端basic路径

因为需要打包成客户端,客户可不会下载这个oracle客户端呐,就没设置环境变量PATH,也尝试过放到node_modules下oracledb/build/Release下,打包成客户端没成功,所以还是使用的上图中这种引用方式。 注:经过使用发现,libDir必须是完整的路径,打包成app.asar中的引用是不行的,所以要去app.asar的上一层找步骤二中拷贝过来的客户端basic文件夹。

正式使用

oracledb调用就简单了,只要oracledb的逻辑要放到主进程中执行,或者主进程中使用child-process也可以,将oracledb调用放到child-process中,渲染进程中的node环境不全,不可以调用oracledb,会报错。【oracledb对node环境比较严格】

调用逻辑放在主进程,然后拿到读库后的数据通信给渲染进程即可 如下一个简单调用:敏感字段部分就不给看了

主进程中:

渲染进程中:

页面显示:

控制台打印:

总结

oracledb相关博客资料比较少的,我司这项目electron版本低,node版本低,还是内网, 结合oracledb后更是一步一坑,想想都心累,这里做下踩坑记录,后续再遇到过来查看一下,希望大家少踩坑。告辞!

相关推荐
明辉光焱5 小时前
[Electron]总结:如何创建Electron+Element Plus的项目
前端·javascript·electron
ZJ_.1 天前
Electron 沙盒模式与预加载脚本:保障桌面应用安全的关键机制
开发语言·前端·javascript·vue.js·安全·electron·node.js
fanxbl9571 天前
Electron 项目实现下载文件监听
javascript·electron·状态模式
怕冷的火焰(~杰)2 天前
创建vue+electron项目流程
vue.js·electron
new出一个对象3 天前
vue3+vite搭建脚手架项目本地运行electron桌面应用
前端·javascript·electron
明辉光焱3 天前
使用yarn,如何编译打包electron?
前端·javascript·electron·node.js
云只上3 天前
Electron + Vue3 开发桌面应用+附源码
前端·javascript·electron
fanxbl9573 天前
Electron 项目中杀掉进程的不同方式
前端·javascript·electron
Liigo4 天前
初次体验Tauri和Sycamore(1)
rust·electron·gui·tauri·wasm·sycamore
yqcoder4 天前
vite-plugin-electron 库作用
服务器·前端·electron