手摸手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链接www.w3cschool.cn/nedbintro/n…：

remote 模块提供了一种在渲染进程（网页）和主进程之间进行进程间通讯（IPC）的简便途径。remote.app.getPath('userData') 获取到的就是我们应用程序的用户文件夹，每个应用程序都有自己独立的文件夹。

在main.js中引入我们刚编写好的datastore.js就算完成全部引入了：

nedb-promises 的使用方法跟原生的 nedb 用法基本是一致的，而且还支持promises，也可以直接使用 async/await ，具体使用也可以看看插件的 github 地址：github.com/bajankristo…

4 数据序列化 - 加密解密

到了上面那步其实我们的数据库已经可以正常使用了，但是会有个问题，我们写的内容如果直接在数据库文件里面查看会是明文的，你写的东西一清二楚的暴露出来了，强迫症的我决定给数据加个密，当然，具体是否需要加密大家可以自行选择，不需要加密的可以直接跳过这一节了。加密也只是防君子不防小人，安全永远是相对的。❄️

nedb 已经有自带的序列化方法，在数据库初始化中直接调用即可。

既然我们程序本身集成了node，我们当然直接选择 node 自身的 crypto 加密模块即可，加密类型这里选择的是 aes-128-cbc ,详细可以参考文档：nodejs.cn/api/crypto.…，www.jianshu.com/p/09350dc1a…

首先我们定义好加密算法类型，生成秘钥和初始化向量：

afterSerialization(可选): 在数据被序列化成字符串之后和被写入磁盘前，可以使用该方法对数据进行转换。比如可以做一些数据加密工作。

在 new Datastore 中定义加密方法，plaintext 参数是需要加密的内容，即写入磁盘的数据：

beforeDeserialization(可选): 与afterSerialization相反。两个必须成对出现，否则会引起数据丢失，可以理解为一个加密解密的过程。

接着还需要定义解密的数据，依然是在 new Datastore 中添加，ciphertext 参数是需要解密的内容，即从磁盘中读取的数据：

5 增删改查

我们先写几个增删改查的小 demo 看看如何使用我们的数据库。

先在我们的左侧列表栏新增四个按钮，demo 我们姑且先这么写（后面我们再删掉 demo 代码哈）：

看起来很简单是吧（事实上也很简单嘛），跟官网的操作例子几乎是一模一样的了。示例代码中promise、async/await都使用了。sort可以将数据排序，updatedAt: -1是将修改时间最近的排在最前面。

我们新增文件的时候只需要title和content两个字段就足够了，一个是标题，一个是内容。所以后续我们真正实现新增文件的时候也是这么写的：

const fileNew = { title: '无标题笔记', content: '' }
this.$db.insert(fileNew)

到这一步就搞定了，从控制台中已经看得到我们的数据增删改查都木有问题了。

贴一下完整代码，Home.vue：

<template>
  <div class="app-wrapper">
    <div class="sidebar-container">
      <file-search v-model="searchTitle" />
      <el-button type="primary" @click="createTest()">测-增</el-button>
      <el-button type="danger" @click="deleteTest()">测-删</el-button>
      <el-button type="warning" @click="updateTest()">测-改</el-button>
      <el-button type="success" @click="queryTest()">测-查</el-button>
      <file-list :fileList="fileList" />
    </div>
    <div class="main-container">
      <file-edit
        v-model="fileItem.content"
        :title.sync="fileItem.title"
        :boxShadow="false"
        :subfield="false"
        :shortCut="false"
        @change="onSubmit"
      />
    </div>
  </div>
</template>

<script>
import FileSearch from '@/components/FileSearch'
import FileList from '@/components/FileList'
import FileEdit from '@/components/FileEdit'

export default {
  name: 'Home',
  components: { FileSearch, FileList, FileEdit },
  data() {
    return {
      searchTitle: '',
      fileList: [
        { id: 1, title: '文件名 1', time: '2020-06-21' },
        { id: 2, title: '文件名 2', time: '2020-06-21' },
        { id: 3, title: '文件名 3', time: '2020-06-21' },
        { id: 4, title: '文件名 4', time: '2020-06-21' },
        { id: 5, title: '文件名 5', time: '2020-06-21' },
        { id: 6, title: '文件名 6', time: '2020-06-21' },
        { id: 1, title: '文件名 1', time: '2020-06-21' },
        { id: 2, title: '文件名 2', time: '2020-06-21' },
        { id: 3, title: '文件名 3', time: '2020-06-21' },
        { id: 4, title: '文件名 4', time: '2020-06-21' },
        { id: 5, title: '文件名 5', time: '2020-06-21' },
        { id: 6, title: '文件名 6', time: '2020-06-21' }
      ],
      fileItem: {
        title: '手摸手Electron + Vue实战教程（三）',
        content: ''
      }
    }
  },
  methods: {
    // 增
    createTest() {
      const fileNew = { title: '无标题笔记', content: '' }
      this.$db.insert(fileNew)
    },
    // 删
    async deleteTest() {
      const list = await this.$db.find().sort({ updatedAt: -1 })
      if (list.length === 0) return
      this.$db.remove({ _id: list[0]._id }).then(() => {
        this.$message.warning('删除成功')
      })
    },
    // 改
    async updateTest() {
      const list = await this.$db.find().sort({ updatedAt: -1 })
      if (list.length === 0) return
      this.$db.update({ _id: list[0]._id }, { $set: { title: '修改过的标题' } }).then(() => {
        this.$message.success('修改成功')
      })
    },
    // 查
    async queryTest() {
      const list = await this.$db.find().sort({ updatedAt: -1 })
      console.log(list)
    },
    onSubmit(value) {
      console.log(value)
      console.log(this.fileItem)
    }
  }
}
</script>

<style lang="less" scoped>
.app-wrapper {
  display: flex;
  .sidebar-container {
    width: 300px;
    height: 100vh;
    border-right: 1px solid #eaeefb;
  }
  .main-container {
    flex: 1;
    overflow: hidden;
  }
}
</style>

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 文件的创建、编辑以及实时保存。有兴趣的童鞋可以先自己实现看看，对比一下和我的写法有何不同，说不定我的写法还不如你的呢😏（请不吝惕教……）