详解Electron中如何使用SQLite存储笔记

更新时间：2022年11月29日 09:53:55 作者：夜焱辰

这篇文章主要为大家介绍了Electron中如何使用SQLite存储笔记示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

前言

上一篇，我们使用 remirror 实现了一个简单的 markdown 编辑器。接下来，我们要学习如何去存储这些笔记。

当然了，你也可以选择不使用数据库，不过若是你以后需要将该应用上架到 mac Apple Store ，就需要考虑这个了。因为上架 mac 应用需要启用 sandbox，当你第一次访问笔记中的媒体文件时，都要打开选择文件的弹窗，通过让用户主动选择来授权访问沙箱外的媒体文件。不过，如果你的媒体文件在第一次选择插入文档时复制到 sandbox 中，以后访问优先从沙箱容器中读取，那是不需要授权的。虽然我也可以这么做，但这里考虑到后面的功能，还是选择使用数据库，当需要导出笔记时再从数据库中导出。

数据库的选择

Electron 应用中常使用的数据库是 SQLite、IndexedDB，IndexedDB 是在前端网页中去操作。有的文章里说 IndexedDB 的性能会比 SQLite 更好，大家看实际场景去选择使用。大多数桌面应用或者 App 需要使用数据库的时候一般都是用 SQLite。

npm 上有两个最常用的 sqlite3 库，一是 better-sqlite3 ，一是 node-sqlite ，两种各有特点。前者是同步的 api ，执行速度快，后者是异步 api ，执行速度相对慢一点。值得注意的是，后者的编译支持 arm 机器，而且由于出的比较早，和其他库配合使用很方便。

安装

安装 node-sqlite

// 仓库名是 node-sqlite, package 名是 sqlite3
yarn add sqlite3

借助 Knex.js 简化数据库操作

Knex.js是为Postgres，MSSQL，MySQL，MariaDB，SQLite3，Oracle和Amazon Redshift设计的 SQL 查询构建器

安装 Knex.js

yarn add knex

创建表

现在，我们要开始设计数据库结构了。我们大概需要 3 张表，笔记本表，笔记表，还有一个媒体文件表。sqlite 支持 blob 数据类型，所以你也可以把媒体文件的二进制数据存到数据库中。这里我们就简单的记个 id ，把媒体文件存到沙箱内。

我们确定一下三张表的表名，notebooks, notes, media, 然后看一下该如何使用 Knex.js 创建表

import { app } from "electron";
import knex, { Knex } from "knex";
import { join } from "path";
import { injectable } from "inversify";
@injectable()
export class LocalDB {
  declare db: Knex;
  async init() {
    this.db = knex({
      client: "sqlite",
      useNullAsDefault: true,
      connection: {
        filename: join(app.getPath("userData"), "local.db"),
      },
    });
    // 新建表
    await this.sync();
  }
  async sync() {
    // notebooks
    await this.db.schema.hasTable("notebooks").then((exist) => {
      if (exist) return;
      return this.db.schema.createTable("notebooks", (table) => {
        table.bigIncrements("id", { primaryKey: true });
        table.string("name");
        table.timestamps(true, true);
      });
    });
    // notes
    await this.db.schema.hasTable("notes").then((exist) => {
      if (exist) return;
      return this.db.schema.createTable("notes", (table) => {
        table.bigIncrements("id", { primaryKey: true });
        table.string("name");
        table.text("content");
        table.bigInteger("notebook_id");
        table.timestamps(true, true);
      });
    });
    // media
    await this.db.schema.hasTable("media").then((exist) => {
      if (exist) return;
      return this.db.schema.createTable("media", (table) => {
        table.bigIncrements("id", { primaryKey: true });
        table.string("name");
        table.string("local_path"); // 本地实际路径
        table.string("sandbox_path"); // 沙盒中的地址
        table.bigInteger("note_id");
        table.timestamps(true, true);
      });
    });
  }
}

这里我用了一个 IOC 库 inversify, 后面遇到 injectable、inject、ioc.get等写法都是和这个有关，这里我就不多介绍了，具体用法可以看文档或其他文章。

注意：三张表中，note 和 media 都一个外键，这里我简化了，并没有用 api 去创建。

Service

数据库表创建完了，接下来我们为表的操作写相关服务，这一块我是参考传统后端 api 的设计去写的，有 Service（数据库）和 Controller（业务），以 Notebook 为例：

import { inject, injectable } from "inversify";
import { LocalDB } from "../db";
interface NotebookModel {
  id: number;
  name: string;
  create_at?: string | null;
  update_at?: string | null;
}
@injectable()
export class NotebooksService {
  name = "notebooks";
  constructor(@inject(LocalDB) public localDB: LocalDB) {}
  async create(data: { name: string }) {
    return await this.localDB.db.table(this.name).insert(data);
  }
  async get(id: number) {
    return await this.localDB.db
      .table<NotebookModel>(this.name)
      .select("*")
      .where("id", "=", id)
      .first();
  }
  async delete(id: number) {
    return await this.localDB.db.table(this.name).where("id", "=", id).delete();
  }
  async update(data: { id: number; name: string }) {
    return await this.localDB.db
      .table(this.name)
      .where("id", "=", data.id)
      .update({ name: data.name });
  }
  async getAll() {
    return await this.localDB.db.table<NotebookModel>(this.name).select("*");
  }
}

Service 只负责数据库的连接和表中数据的增删改查。

Controller

Controller 可以通过接入 Service 操作数据库，并做一些业务上的工作。

import { inject, injectable } from "inversify";
import { NotebooksService } from "../services/notebooks.service";
import { NotesService } from "../services/notes.service";
@injectable()
export class NotebooksController {
  constructor(
    @inject(NotebooksService) public service: NotebooksService,
    @inject(NotesService) public notesService: NotesService
  ) {}
  async create(name: string) {
    await this.service.create({
      name,
    });
  }
  async delete(id: number) {
    const row = await this.service.get(id);
    if (row) {
      const notes = await this.notesService.getByNotebookId(id);
      if (notes.length) throw Error("delete failed");
      await this.service.delete(id);
    }
  }
  async update(data: { id: number; name: string }) {
    return await this.service.update(data);
  }
  async getAll() {
    return await this.service.getAll();
  }
}

业务

如何创建笔记本？

我们先来实现创建笔记本，之后的删除笔记本，更新笔记本名称等等，依葫芦画瓢就行。我们在界面上添加一个创建按钮。

点击后就会出现这样一个弹窗，这里 UI 库我是用的 antd 做的。

看一下这个弹窗部分的逻辑

import { Modal, Form, Input } from "antd";
import React, { forwardRef, useImperativeHandle, useState } from "react";
interface CreateNotebookModalProps {
  onCreateNotebook: (name: string) => Promise<void>;
}
export interface CreateNotebookModalRef {
  setVisible: (visible: boolean) => void;
}
export const CreateNotebookModal = forwardRef<
  CreateNotebookModalRef,
  CreateNotebookModalProps
>((props, ref) => {
  const [modalVisible, setMoalVisible] = useState(false);
  const [form] = Form.useForm();
  const handleOk = () => {
    form.validateFields().then(async (values) => {
      await props.onCreateNotebook(values.name);
      setMoalVisible(false);
    });
  };
  useImperativeHandle(ref, (): CreateNotebookModalRef => {
    return {
      setVisible: setMoalVisible,
    };
  });
  return (
    <Modal
      visible={modalVisible}
      title="创建笔记本"
      onCancel={() => setMoalVisible(false)}
      onOk={handleOk}
      cancelText="取消"
      okText="确定"
      destroyOnClose
    >
      <Form form={form}>
        <Form.Item
          label="笔记本名称"
          name="name"
          rules={[
            {
              required: true,
              message: "请填写名称",
            },
            {
              whitespace: true,
              message: "禁止使用空格",
            },
            { min: 1, max: 100, message: "字符长度请保持在 1-100 之间" },
          ]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
});

外部提供的 onCreateNotebook 的实现：

const handleCreateNotebook = async (name: string) => {
    await window.Bridge?.createNotebook(name);
    const data = await window.Bridge?.getNotebooks();
    if (data) {
      setNotebooks(data);
    }
};

上面出现的 Bridge 是我在第一篇中讲的 preload.js 提供的对象，它可以帮我们和 electron 主进程通信。

接来写，我们具体看一下 preload 和主进程部分的实现：

// preload.ts
import { contextBridge, ipcRenderer, MessageBoxOptions } from "electron";
contextBridge.exposeInMainWorld("Bridge", {
  showMessage: (options: MessageBoxOptions) => {
    ipcRenderer.invoke("showMessage", options);
  },
  createNotebook: (name: string) => {
    return ipcRenderer.invoke("createNotebook", name);
  },
  getNotebooks: () => {
    return ipcRenderer.invoke("getNotebooks");
  },
});

实际还是用 ipcRenderer 去通信，但是这种方式更好

// main.ts
import { ipcMain } from "electron"
ipcMain.handle("createNotebook", async (e, name: string) => {
  return await ioc.get(NotebooksController).create(name);
});
ipcMain.handle("getNotebooks", async () => {
  return await ioc.get(NotebooksController).getAll();
});

总结

最后，我们来看一下这部分的完整交互：

这一篇，我们主要学习了如何在 Elctron 使用 SQLite 数据库，并且简单完成了 CRUD 中的 C。相关代码在 Github 上，感兴趣的同学可以自行查看。

以上就是详解Electron中如何使用SQLite存储笔记的详细内容，更多关于Electron SQLite存储笔记的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue 图片裁剪上传组件的实现
这篇文章主要介绍了vue 图片裁剪上传组件的实现，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-11-11
Vue vxe-table使用问题收录小结
这篇文章主要为大家介绍了Vue vxe-table使用问题收录小结,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-09-09
Vue实现倒计时小功能
这篇文章主要为大家详细介绍了Vue实现倒计时小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
关于el-table表格组件中插槽scope.row的使用方式
这篇文章主要介绍了关于el-table表格组件中插槽scope.row的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue实现动态显示与隐藏底部导航的方法分析
这篇文章主要介绍了vue实现动态显示与隐藏底部导航的方法,结合实例形式分析了vue.js针对导航隐藏与显示的路由配置、事件监听等相关操作技巧,需要的朋友可以参考下
2019-02-02
Vue加载json文件的方法简单示例
这篇文章主要介绍了Vue加载json文件的方法,结合实例形式分析了vue.js针对json文件的加载及数据读取等相关操作技巧,需要的朋友可以参考下
2019-01-01
Vue CLI 3搭建vue+vuex最全分析(推荐)
这篇文章主要介绍了Vue CLI 3搭建vue+vuex最全分析(推荐)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
在Vue中实现地图热点展示与交互的方法详解（如热力图）
随着大数据和可视化技术的发展，地图热点展示越来越受到人们的关注，在Vue应用中，我们通常需要实现地图热点的展示和交互，以便更好地呈现数据和分析结果，本文将介绍在Vue中如何进行地图热点展示与交互，包括热力图、点聚合等
2023-07-07
Vue2.0设置全局样式(less/sass和css)
这篇文章主要为大家详细介绍了Vue2.0设置全局样式(less/sass和css)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
vue3继承并扩展三方组件完成二次封装的示例详解
这篇文章主要介绍了vue3继承并扩展三方组件完成二次封装,文章使用naiveui的Input组件进行举例,elementPlus或者其他组件库同理,并通过代码示例讲解的非常详细,需要的朋友可以参考下
2024-03-03