作者： Sufen
转发链接：https://mp.weixin.qq.com/s/idVFfkY331uEGPR9FR6Tww
目录
手把手教你Electron + Vue实战教程(一)
手把手教你Electron + Vue实战教程(二)
手把手教你Electron + Vue实战教程(三)
手把手教你Electron + Vue实战教程(四)本篇
截止上一篇我们已经基本全部完成了静态页部分了，今天我们要开始玩玩数据了。。
❞
1 数据持久化存储的必要性
electron应用说到底是个桌面级应用，我们写好的 Markdown 文档，毋庸置疑的必须要保存下来吧，否则一旦重启应用，那我们辛辛苦苦写的文档岂不是白忙活了。噢，心态炸裂……
对于一般的前端同学来说，我们请求接口拿到数据，然后把web页面展示出来就完事了。但我们现在干的其实已经不完全是纯前端的活了，如果思维还停留在纯web开发的思路上，那么大家还是赶紧把思维拐过来吧，嘿嘿
数据持久化存储对于后端同学来说应该比较熟悉，属于家常便饭那种了。通常指的是把内存里的数据以不同的存储模型存储到磁盘上，在需要的时候再从存储模型里读取读入内存中的整个流程。这里面的存储模型通常就是我们熟悉的数据库。
常用的数据库大家都知道有MySQL，Mongodb，SQLite等等，那么问题来了，我们装一个桌面应用软件，不可能要求用户再自己装一个数据库吧？当然，我们也可以连接远程数据库，但是这成本就很酸爽了……
既然让用户安装数据库不可行，但是我们有些数据又必须要在本地存储下来，这个时候NoSQL嵌入式数据库就出来了。
2 数据库的选择
前端同学玩得比较多的还是JS技术栈，所以我们还是首选纯JavaScript实现的数据库，在这里我们选择的是nedb。nedb用得很广泛，star数也很多，百度随便一搜，有很多讲到nedb和electron配合使用的文章。
NeDB是使用Nodejs实现的一个NoSQL嵌入式数据库操作模块，可以看作是精简版的MongoDB，可以充当内存数据库，也可以用来实现本地存储，甚至可以在浏览器中使用。查询方式比较灵活，支持使用正则、比较运算符、逻辑运算符、索引以及JSON深度查询等。
由于NeDB属于面向文档数据库，面向文档数据库可以看做是键值数据库的一个升级，不但允许键值嵌套，还提高了查询效率。面向文档数据库会将数据以文档形式存储。每个文档都是自包含的数据单元，是一系列数据项的集合。每个数据项都有一个名词与对应值，值既可以是简单的数据类型，如字符串、数字和日期等；也可以是复杂的类型，如有序列表和关联对象。数据存储的最小单位是文档，同一个表中存储的文档属性可以是不同的，数据可以使用XML、JSON或JSONB等多种形式存储。
当然，nedb也有点不友好的地方，原生不支持Promise，采用的是异步回调。但这其实也不是问题，我们可以使用nedb-promises：
3 nedb-promises 安装
yarn add nedb-promises
安装完后在插件目录plugin里新建文件datastore.js初始化数据库，详细初始化api文档可以参考w3cschool链接https://www.w3cschool.cn/nedbintro/nedbintro-t9z327mh.html：
remote 模块提供了一种在渲染进程(网页)和主进程之间进行进程间通讯(IPC)的简便途径。remote.app.getPath('userData') 获取到的就是我们应用程序的用户文件夹，每个应用程序都有自己独立的文件夹。
在main.js中引入我们刚编写好的datastore.js就算完成全部引入了：
nedb-promises 的使用方法跟原生的 nedb 用法基本是一致的，而且还支持promises，也可以直接使用 async/await ，具体使用也可以看看插件的 github 地址：https://github.com/bajankristof/nedb-promises
4 数据序列化 - 加密解密
到了上面那步其实我们的数据库已经可以正常使用了，但是会有个问题，我们写的内容如果直接在数据库文件里面查看会是明文的，你写的东西一清二楚的暴露出来了，强迫症的我决定给数据加个密，当然，具体是否需要加密大家可以自行选择，不需要加密的可以直接跳过这一节了。加密也只是防君子不防小人，安全永远是相对的。❄️
nedb 已经有自带的序列化方法，在数据库初始化中直接调用即可。
既然我们程序本身集成了node，我们当然直接选择 node 自身的 crypto 加密模块即可，加密类型这里选择的是 aes-128-cbc ,详细可以参考文档：http://nodejs.cn/api/crypto.html，https://www.jianshu.com/p/09350dc1ab97
首先我们定义好加密算法类型，生成密钥和初始化向量：
❝
afterSerialization(可选): 在数据被序列化成字符串之后和被写入磁盘前，可以使用该方法对数据进行转换。比如可以做一些数据加密工作。
❞
在 new Datastore 中定义加密方法，plaintext 参数是需要加密的内容，即写入磁盘的数据：
❝
beforeDeserialization(可选): 与afterSerialization相反。两个必须成对出现，否则会引起数据丢失，可以理解为一个加密解密的过程。
❞
接着还需要定义解密的数据，依然是在 new Datastore 中添加，ciphertext 参数是需要解密的内容，即从磁盘中读取的数据：
4 增删改查
我们先写几个增删改查的小 demo 看看如何使用我们的数据库。
先在我们的左侧列表栏新增四个按钮，demo 我们姑且先这么写(后面我们再删掉 demo 代码哈)：
操作按钮
具体代码实现
看起来很简单是吧(事实上也很简单嘛)，跟官网的操作例子几乎是一模一样的了。示例代码中promise、async/await都使用了。sort可以将数据排序，updatedAt: -1是将修改时间最近的排在最前面。
我们新增文件的时候只需要title和content两个字段就足够了，一个是标题，一个是内容。所以后续我们真正实现新增文件的时候也是这么写的：
const fileNew = { title: '无标题笔记', content: '' }this.$db.insert(fileNew)
到这一步就搞定了，从控制台中已经看得到我们的数据增删改查都木有问题了。
增删改查示意图
贴一下完整代码，Home.vue：
datastore.js：
/* * @Description: 引入 nedb 数据库 * @Author: sufen * @Date: 2020-06-10 22:30:35 * @LastEditTime: 2020-06-11 12:20:39 * @LastEditors: sufen */import Vue from 'vue'import crypto from 'crypto'import Datastore from 'nedb-promises'import { remote } from 'electron'const basePath = remote.app.getPath('userData')console.log('程序数据存储路径：', basePath)const algorithm = 'aes-128-cbc' // 加密算法类型const password = 'vue-electron-notes' // 用于生成秘钥的密码const key = crypto.scryptSync(password, 'salt', 16) // 秘钥const iv = Buffer.alloc(16, 0) // 初始化向量const db = new Datastore({ autoload: true, timestampData: true, filename: basePath, afterSerialization(plaintext) { // 实例化一个cipher加密对象，使用加密算法进行加密，key作为密钥 // 使用cipher对 plaintext 进行加密，源数据类型为utf-8，输出数据类型为hex const cipher = crypto.createCipheriv(algorithm, key, iv) let crypted = cipher.update(plaintext, 'utf-8', 'hex') crypted += cipher.final('hex') return crypted }, beforeDeserialization(ciphertext) { // 实例化一个decipher解密对象，使用解密算法进行解密，key作为密钥 // 使用decipher对 ciphertext 进行解密，源数据类型为hex，输出数据类型为utf-8 const decipher = crypto.createDecipheriv(algorithm, key, iv) let decrypted = decipher.update(ciphertext, 'hex', 'utf-8') decrypted += decipher.final('utf-8') return decrypted }})Vue.prototype.$db = db
这一篇章就先到这里了，我们下一篇再真正实现 Markdown 文件的创建、编辑以及实时保存。有兴趣的童鞋可以先自己实现看看，对比一下和我的写法有何不同，说不定我的写法还不如你的呢(请不吝赐教……)
推荐Vue学习资料文章：
《Vue后台项目中遇到的技术难点以及解决方案》
《手把手教你Electron + Vue实战教程(三)》
《手把手教你Electron + Vue实战教程(二)》
《手把手教你Electron + Vue实战教程(一)》
《收集22种开源Vue模板和主题框架「干货」》
《如何写出优秀后台管理系统？11个经典模版拿去不谢「干货」》
《手把手教你实现一个Vue自定义指令懒加载》
《基于 Vue 和高德地图实现地图组件「实践」》
《一个由 Vue 作者尤雨溪开发的 web 开发工具—vite》
《是什么让我爱上了Vue.js》
《1.1万字深入细品Vue3.0源码响应式系统笔记「上」》
《1.1万字深入细品Vue3.0源码响应式系统笔记「下」》
《「实践」Vue 数据更新7 种情况汇总及延伸解决总结》
《尤大大细说Vue3 的诞生之路「译」》
《提高10倍打包速度工具Snowpack 2.0正式发布，再也不需要打包器》
《大厂Code Review总结Vue开发规范经验「值得学习」》
《Vue3 插件开发详解尝鲜版「值得收藏」》
《带你五步学会Vue SSR》
《记一次Vue3.0技术干货分享会》
《Vue 3.x 如何有惊无险地快速入门「进阶篇」》
《「干货」微信支付前后端流程整理(Vue+Node)》
《带你了解 vue-next(Vue 3.0)之 炉火纯青「实践」》
《「干货」Vue+高德地图实现页面点击绘制多边形及多边形切割拆分》
《「干货」Vue+Element前端导入导出Excel》
《「实践」Deno bytes 模块全解析》
《细品pdf.js实践解决含水印、电子签章问题「Vue篇」》
《基于vue + element的后台管理系统解决方案》
《Vue仿蘑菇街商城项目(vue+koa+mongodb)》
《基于 electron-vue 开发的音乐播放器「实践」》
《「实践」Vue项目中标配编辑器插件Vue-Quill-Editor》
《基于 Vue 技术栈的微前端方案实践》
《消息队列助你成为高薪 Node.js 工程师》
《Node.js 中的 stream 模块详解》
《「干货」Deno TCP Echo Server 是怎么运行的？》
《「干货」了不起的 Deno 实战教程》
《「干货」通俗易懂的Deno 入门教程》
《Deno 正式发布，彻底弄明白和 node 的区别》
《「实践」基于Apify+node+react/vue搭建一个有点意思的爬虫平台》
《「实践」深入对比 Vue 3.0 Composition API 和 React Hooks》
《前端网红框架的插件机制全梳理(axios、koa、redux、vuex)》
《深入Vue 必学高阶组件 HOC「进阶篇」》
《深入学习Vue的data、computed、watch来实现最精简响应式系统》
《10个实例小练习，快速入门熟练 Vue3 核心新特性(一)》
《10个实例小练习，快速入门熟练 Vue3 核心新特性(二)》
《教你部署搭建一个Vue-cli4+Webpack移动端框架「实践」》
《2020前端就业Vue框架篇「实践」》
《详解Vue3中 router 带来了哪些变化？》
《Vue项目部署及性能优化指导篇「实践」》
《Vue高性能渲染大数据Tree组件「实践」》
《尤大大细品VuePress搭建技术网站与个人博客「实践」》
《10个Vue开发技巧「实践」》
《是什么导致尤大大选择放弃Webpack？【vite 原理解析】》
《带你了解 vue-next(Vue 3.0)之 小试牛刀【实践】》
《带你了解 vue-next(Vue 3.0)之 初入茅庐【实践】》
《实践Vue 3.0做JSX(TSX)风格的组件开发》
《一篇文章教你并列比较React.js和Vue.js的语法【实践】》
《手拉手带你开启Vue3世界的鬼斧神工【实践】》
《深入浅出通过vue-cli3构建一个SSR应用程序【实践】》
《怎样为你的 Vue.js 单页应用提速》
《聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总》
《【新消息】Vue 3.0 Beta 版本发布，你还学的动么？》
《Vue真是太好了 壹万多字的Vue知识点 超详细!》
《Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5》
《深入浅出Vue3 跟着尤雨溪学 TypeScript 之 Ref 【实践】》
《手把手教你深入浅出vue-cli3升级vue-cli4的方法》
《Vue 3.0 Beta 和React 开发者分别杠上了》
《手把手教你用vue drag chart 实现一个可以拖动 / 缩放的图表组件》
《Vue3 尝鲜》
《总结Vue组件的通信》
《Vue 开源项目 TOP45》
《2020 年，Vue 受欢迎程度是否会超过 React？》
《尤雨溪：Vue 3.0的设计原则》
《使用vue实现HTML页面生成图片》
《实现全栈收银系统(Node+Vue)(上)》
《实现全栈收银系统(Node+Vue)(下)》
《vue引入原生高德地图》
《Vue合理配置WebSocket并实现群聊》
《多年vue项目实战经验汇总》
《vue之将echart封装为组件》
《基于 Vue 的两层吸顶踩坑总结》
《Vue插件总结【前端开发必备】》
《Vue 开发必须知道的 36 个技巧【近1W字】》
《构建大型 Vue.js 项目的10条建议》
《深入理解vue中的slot与slot-scope》
《手把手教你Vue解析pdf(base64)转图片【实践】》
《使用vue+node搭建前端异常监控系统》
《推荐 8 个漂亮的 vue.js 进度条组件》
《基于Vue实现拖拽升级(九宫格拖拽)》
《手摸手，带你用vue撸后台 系列二(登录权限篇)》
《手摸手，带你用vue撸后台 系列三(实战篇)》
《前端框架用vue还是react？清晰对比两者差异》
《Vue组件间通信几种方式，你用哪种？【实践】》
《浅析 React / Vue 跨端渲染原理与实现》
《10个Vue开发技巧助力成为更好的工程师》
《手把手教你Vue之父子组件间通信实践讲解【props、$ref 、$emit】》
《1W字长文+多图，带你了解vue的双向数据绑定源码实现》
《深入浅出Vue3 的响应式和以前的区别到底在哪里？【实践】》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《基于Vue/VueRouter/Vuex/Axios登录路由和接口级拦截原理与实现》
《手把手教你D3.js 实现数据可视化极速上手到Vue应用》
《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【上】》
《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【中】》
《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【下】》
《Vue3.0权限管理实现流程【实践】》
《后台管理系统，前端Vue根据角色动态设置菜单栏和路由》
作者： Sufen
转发链接：https://mp.weixin.qq.com/s/idVFfkY331uEGPR9FR6Tww
