electron:桌面应用程序的革命

菜鸟阿都 等级 323 0 0
 “ 你也许不了解electron,但你应该了解或使用过atom、vscode、xmin zend,没错他们所使用的开发技术就是electon,通过前端技术开发桌面应用程序,刚开始接触electron时,考虑最多的是性能问题,不过作为一个vscode、xmin zen重度使用者的我来说,基本上对其性能的担心减少了很多,并且发现了基于vue框架构造electron应用程序的样板代码框架,更加方便了前段开发者,集成elementui进行布局以及使用现成的组件,减少了开发者编写css样式和js,提高了开发效率。相对于使用c#,c++开发桌面应用程序,electron具有学习成本低,页面效果好的特点,朋友们,感觉动手吧,开发一个属于自己的桌面应用程序。关注微信公众号【**菜鸟阿都**】并回复:electron,可获得源码。”

electron官网https://www.helloworld.net/redirect?target=http://www.electronjs.org/

使用javascript,html,css构建跨平台的桌面应用程序

electron_vue官网链接https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

   作为一个半吊子前端程序的后端程序员的我来说,那还不赶快试一下,于是动手开发了一个数据库管理软件。

electron:桌面应用程序的革命

实现的功能:

  1. 对数据库连接信息进行缓存

  2. 通过点击左侧数据表,右侧会展示表数据

  3. 通过sql查询

  4. 右侧搜索框对数据库表进行搜索

  5. 通过查询结果上方的剪刀图标可隐藏查询结果的某些字段,方便重要信息展示

  6. 只支持mysql数据库

采用技术:

  1. 采用electron_vue框架开发

  2. 使用vue+elemenui进行前端开发

  3. 通过js调用mysql2库对数据库进行操作

  4. sql编辑器使用CodeMirror插件【官网链接:https://codemirror.net/】

  5. 采用electron-store对数据库连接信息进行缓存

遇到问题: 集成elementui后,无法使用

解决方法:在electron_vue配置文件中将elementui添加到白名单,配置文件位置:electron-vue/webpack.renderer.config

let whiteListedModules = ['vue','element-ui']

electron代表产品: electron:桌面应用程序的革命 electron:桌面应用程序的革命 electron:桌面应用程序的革命 electron:桌面应用程序的革命

-

关注微信公众号【菜鸟阿都】并回复:electron ,获得相关源码

收藏
评论区