最近遇到一个奇特的需求,要求构建一个评估系统,分为前后端。它的前端是桌面应用程序,后端也是桌面应用程序。前后端之间的通信是通过前端导出一个数据包文件,然后交给后端导入完成的。由于熟悉Nodejs前后端开发,我选择Electron加Vuejs的解决方案。具体的技术选型如下:
- 前端:electron+vuejs+indexedDB+localForage,前端程序需要存储数据,但数据量会比较小,通常使用indexedDB就足够了。
- 后端:electron+vuejs+sqlite3+sequlize,后端程序会汇总前端程序导出的数据包,并做一些统计查询,存储数据量大,读写效率要求高。因此选择sqlite3数据库,可随electron打包到一起安装。
技术简介
Electron简介
Electron(原名为Atom Shell)是GitHub开发的一个开源框架。它允许使用Node.js(作为后端)和Chromium(作为前端)完成桌面GUI应用程序的开发。Electron现已被多个开源Web应用程序用于前端与后端的开发,著名项目包括GitHub的Atom和微软的Visual Studio Code。
一个基础的Electron包含三个文件:package.json(元数据)、main.js(代码)和index.html(图形用户界面)。框架由Electron可执行文件(Windows中为electron.exe、macOS中为electron.app、Linux中为electron)提供。开发者可以自行添加标志、自定义图标、重命名或编辑Electron可执行文件。
vuejs简介
Vue.js是一款流行的JavaScript前端框架,旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层,同时,它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模型的交互。
Vuejs适合开发单页应用程序。
indexedDB数据库简介
IndexedDB 是一种底层 API,用于在客户端存储大量的结构化数据(也包括文件/二进制大型对象(blobs))。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用,但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。
IndexedDB 是一个事务型数据库系统,类似于基于 SQL 的 RDBMS。 然而,不像 RDBMS 使用固定列表,IndexedDB 是一个基于 JavaScript 的面向对象数据库。IndexedDB 允许您存储和检索用键索引的对象;可以存储结构化克隆算法支持的任何对象。您只需要指定数据库模式,打开与数据库的连接,然后检索和更新一系列事务。
indexedDB的API不够友好,建议使用localForage,支持类Storage API语法的客户端数据存储polyfill,支持回退到Storage和Web SQL
项目构建过程
构建Vuejs项目
使用如下命令构建Vuejs项目脚手架:
1 | npm install -g @vue/cli |
构建Electron项目
在上一节创建Vuejs项目的基础上,使用如下命令为Vuejs项目添加Electron支持,从而生成桌面应用程序:
1 | vue add electron-builder |
构建Sqlite3数据库
使用如下命令为项目添加Sqlite3数据库支持:
1 | npm install sequelize --save --registry https://registry.npm.taobao.org |
构建32位安装程序
使用如下命令构建32位Electron安装程序:
1 | npm run electron:build -- --ia32 |
或者
1 | yarn electron:build --ia32 |
问题备注
Electron构建程序下载依赖包失败
请参考 Electron:运行npm run build构建环境失败解决方案。
Electron makensis构建失败
当遇到如下错误时, 解决方法很简单,打包项目路径不能包含中文路径。
1 | .electron-builder\Cache\nsis\nsis-3.0.3.2\Bin\makensis.exe exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE |
Electron Vuejs显示空白页
请参考Blank screen on builds, but works fine on serve。
支持平台
electron支持macOS、Windows、Linux。在Windows平台,electron仅支持 Windows 7 或更高版本, 旧版操作系统已不再支持(并且无法运行).
参考链接
- Create an Electron application with Vue and Vuetify,by bromix.
- Electron:运行npm run build构建环境失败解决方案,by 请给我一杯冰可乐.
- How to build app for Windows 32bit version?,by nklayman.
- 支持平台,by electronjs.
- Electron应用数据库选型暨indexedDB扫盲,by shenlvmeng.
- LOCALFORAGE,by localforage.
- IndexedDB,by mozilla.
- 浏览器数据库 IndexedDB 入门教程,by ruanyifeng.
- electron集成sqlite3,win10上折腾了2天,by 兴哥.
- Electron笔记,by 小羽信息.
- Blank screen on builds, but works fine on serve,by Vue CLI Plugin Electron Builder.
- Remove menubar from Electron app,by stackoverflow.