electronhttp请求_⼿把⼿教你Electron+Vue实战教程（四）
作者： Sufen
⽬录
⼿把⼿教你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
remote 模块提供了⼀种在渲染进程(⽹页)和主进程之间进⾏进程间通讯(IPC)的简便途径。Path('userData') 获取到的就是我们应⽤程序的⽤户⽂件夹，每个应⽤程序都有⾃⼰独⽴的⽂件夹。
在main.js中引⼊我们刚编写好的datastore.js就算完成全部引⼊了：
4 数据序列化 - 加密解密
到了上⾯那步其实我们的数据库已经可以正常使⽤了，但是会有个问题，我们写的内容如果直接在数据库⽂件⾥⾯查看会是明⽂的，你写的东西⼀清⼆楚的暴露出来了，强迫症的我决定给数据加个密，当然，具体是否需要加密⼤家可以⾃⾏选择，不需要加密的可以直接跳过这⼀节了。加密也只是防君⼦不防⼩⼈，安全永远是相对的。❄
nedb 已经有⾃带的序列化⽅法，在数据库初始化中直接调⽤即可。
⾸先我们定义好加密算法类型，⽣成密钥和初始化向量：
❝
afterSerialization(可选): 在数据被序列化成字符串之后和被写⼊磁盘前，可以使⽤该⽅法对数据进⾏转换。⽐如可以做⼀些数据加密⼯作。
❞
在 new Datastore 中定义加密⽅法，plaintext 参数是需要加密的内容，即写⼊磁盘的数据：
❝
beforeDeserialization(可选): 与afterSerialization相反。两个必须成对出现，否则会引起数据丢失，可以理解为⼀个加密解密的过程。
❞
接着还需要定义解密的数据，依然是在 new Datastore 中添加，ciphertext 参数是需要解密的内容，即从磁盘中读取的数据：
4 增删改查
我们先写⼏个增删改查的⼩ demo 看看如何使⽤我们的数据库。
先在我们的左侧列表栏新增四个按钮，demo 我们姑且先这么写(后⾯我们再删掉 demo 代码哈)：
操作按钮
具体代码实现
看起来很简单是吧(事实上也很简单嘛)，跟官⽹的操作例⼦⼏乎是⼀模⼀样的了。⽰例代码中promise、async/await都使⽤了。sort可以
将数据排序，updatedAt: -1是将修改时间最近的排在最前⾯。
electron vue教程我们新增⽂件的时候只需要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 f

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。