Electron-开发实践：本地数据库SQLite

【前言】

本地存取数据的一些常见的手段：Cookie，LocalStorage，IndexedDB，SQLite等，

这里做下简单的对比

|—存储大小：4k

|—设置有效期：可以

|—服务端获取：可以

|—特点：简单数据存取

LocalStorage

|—存储大小：5M

|—设置有效期：不行

|—服务端获取：不行

|—特点：本地键值对存取

IndexedDB

|—存储大小：250M+

|—设置有效期：不行

|—服务端获取：不行

|—特点：非关系型数据库

SQLite

|—存储大小：无限制

|—设置有效期：不行

|—服务端获取：不行

|—特点：本地关系型数据库

这里推荐两篇文章，分别介绍了LocalStorage和IndexedDB

一篇文章学会LocalStorage

一篇文章学会IndexedDB

【SQLite】

SQLite，著名的本地关系型数据库，官网： https://www.sqlite.org/index.html

SQLite支持各种操作系统使用，包括Linux，Mac，Windows，Android等，下载： https://www.sqlite.org/download.html

同样的也有对应的npm包可以使用，sqlite3： https://www.npmjs.com/package/sqlite3

安装

// install
npm i sqlite3

// m1
npm i sqlite3 --target_arch=arm64

起步

安装好后，按官网的示例跑一下代码，代码如下：

const sqlite3 = require("sqlite3").verbose();
const db = new sqlite3.Database(":memory:");

db.serialize(function () {
  db.run("CREATE TABLE lorem (info TEXT)");

  const stmt = db.prepare("INSERT INTO lorem VALUES (?)");
  for (var i = 0; i < 10; i++) {
    stmt.run("Ipsum " + i);
  }
  stmt.finalize();

  db.each("SELECT rowid AS id, info FROM lorem", function (err, row) {
    console.log(row.id + ": " + row.info);
  });
});

db.close();

以上代码逻辑：

1.创建数据库，这个数据库比较特殊是在内存内的

2.创建表格

3.插入数据

4.查询数据

执行结果如下

文档

SQLIte的文档： https://www.sqlite.org/docs.html

|—支持的数据类型： https://www.sqlite.org/datatype3.html

|—创建表格： https://www.sqlite.org/lang_createtable.html

|—更新表格： https://www.sqlite.org/lang_altertable.html

|—创建视图： https://www.sqlite.org/lang_createview.html

|—删除表格： https://www.sqlite.org/lang_droptable.html

|—插入数据： https://www.sqlite.org/lang_insert.html

|—查询数据： https://www.sqlite.org/lang_select.html

|—删除数据： https://www.sqlite.org/lang_delete.html

npm-sqlite3的文档： https://github.com/TryGhost/node-sqlite3/wiki/API

【qiao-sqlite】

这里为了方便使用，封装了一个npm包： https://code.insistime.com/#/qiao-sqlite

createDB

创建数据库

"use strict";

// q
const q = require("qiao-sqlite");

// db
const db = q.createDB("./test/test.db");
console.log(db);

createTable

创建表格

"use strict";

// q
const q = require("qiao-sqlite");

// db
const db = q.createDb("./__tests__/test.db");

// table
const sql =
  "CREATE TABLE if not exists t_project (project_name TEXT, project_appid TEXT, project_icon_url TEXT)";

// test
async function test() {
  try {
    await q.createTable(db, sql);
  } catch (e) {
    console.log(e);
  }
}

// run
test();

showTables

列出表格

"use strict";

// q
const q = require("qiao-sqlite");

// db
const db = q.createDB("./__tests__/test.db");

// test
async function test() {
  try {
    const rows = await q.showTables(db);
    console.log(rows);
  } catch (e) {
    console.log(e);
  }
}

// run
test();

dropTable

删除表格

"use strict";

// q
const q = require("qiao-sqlite");

// db
const db = q.createDB("./__tests__/test.db");

// test
async function test() {
  try {
    console.log(await q.showTables(db));
    await q.dropTable(db, "t_project");
    console.log(await q.showTables(db));
  } catch (e) {
    console.log(e);
  }
}

// run
test();

insertData

插入数据

"use strict";

// q
const q = require("qiao-sqlite");

// db
const db = q.createDB("./__tests__/test.db");

// data
const sql = "insert into t_project values (?, ?, ?)";

// test
async function test() {
  try {
    await q.insertData(db, sql, ["name", "appid", "url"]);
  } catch (e) {
    console.log(e);
  }
}

// run
test();

deleteData

删除数据

"use strict";

// q
const q = require("qiao-sqlite");

// db
const db = q.createDB("./__tests__/test.db");

// data
const sql = "delete from t_project where rowid=?";

// test
async function test() {
  try {
    await q.deleteData(db, sql, [1]);
  } catch (e) {
    console.log(e);
  }
}

// run
test();

modifyData

修改数据

"use strict";

// q
const q = require("qiao-sqlite");

// db
const db = q.createDB("./__tests__/test.db");

// data
const sql = "update t_project set project_name=?";

// test
async function test() {
  try {
    await q.modifyData(db, sql, ["name1"]);
  } catch (e) {
    console.log(e);
  }
}

// run
test();

selectData

查询数据

"use strict";

// q
const q = require("qiao-sqlite");

// db
const db = q.createDB("./__tests__/test.db");

// sql
const sql = "SELECT rowid,* FROM t_project";

// test
async function test() {
  try {
    const rows = await q.selectData(db, sql);
    console.log(rows);
  } catch (e) {
    console.log(e);
  }
}

// run
test();

【实践】

SQLite一般应用于大型的Android，iOS应用中，或者桌面应用中，

这里在electron环境下做一下实践，

实践项目的介绍：

这里会在以上基础上，用electron+sqlite3实现一个todo list

主进程封装sqlite方法

electron分为主进程和渲染进程，

sqlite的使用肯定在主进程上，

渲染进程通过ipc通信调用主进程封装好的sqlite方法，

由于需要ipc通信，封装了sqlite相关的方法，如下

"use strict";

// path
const path = require("path");

// electron
const { app } = require("electron");

// sqlite
const {
  createDb,
  createTable,
  dropTable,
  showTables,
  insertData,
  modifyData,
  deleteData,
  selectData,
} = require("qiao-sqlite");

// json
const { success, danger } = require("qiao-json");

/**
 * sqlite
 * @returns
 */
exports.sqlite = () => {
  const userDataPath = app.getPath("userData");
  const dbPath = path.resolve(userDataPath, "./electron.db");
  const db = createDb(dbPath);

  return db;
};

/**
 * dbCreateTable
 * @param {*} sql
 * @returns
 */
exports.dbCreateTable = async (sql) => {
  // check
  if (!sql) return danger("need create table sql");

  // db
  const db = exports.sqlite();

  // create table
  try {
    await createTable(db, sql);
    return success("create table success");
  } catch (e) {
    // return danger('create table fail', e);
    return success("create table success");
  }
};

/**
 * dbDropTable
 * @param {*} tableName
 * @returns
 */
exports.dbDropTable = async (tableName) => {
  // check
  if (!tableName) return danger("need tableName");

  // db
  const db = exports.sqlite();

  // drop table
  try {
    await dropTable(db, tableName);
    return success("drop table success");
  } catch (e) {
    return success("drop table success");
  }
};

/**
 * dbShowTables
 * @returns
 */
exports.dbShowTables = async () => {
  // db
  const db = exports.sqlite();

  // show tables
  try {
    const rows = await showTables(db);
    return success("show table success", rows);
  } catch (e) {
    return success("show table success");
  }
};

/**
 * dbInsertData
 * @param {*} sql
 * @param {*} params
 * @returns
 */
exports.dbInsertData = async (sql, params) => {
  // check
  if (!sql) return danger("need insert data sql");

  // db
  const db = exports.sqlite();

  // insert data
  try {
    await insertData(db, sql, params);
    return success("insert data success");
  } catch (e) {
    return danger("insert data fail", e);
  }
};

/**
 * dbDeleteData
 * @param {*} sql
 * @param {*} params
 * @returns
 */
exports.dbDeleteData = async (sql, params) => {
  // check
  if (!sql) return danger("need delete data sql");

  // db
  const db = exports.sqlite();

  // delete data
  try {
    await deleteData(db, sql, params);
    return success("delete data success");
  } catch (e) {
    return danger("delete data fail", e);
  }
};

/**
 * dbModifyData
 * @param {*} sql
 * @param {*} params
 * @returns
 */
exports.dbModifyData = async (sql, params) => {
  // check
  if (!sql) return danger("need modify data sql");

  // db
  const db = exports.sqlite();

  // modify data
  try {
    await modifyData(db, sql, params);
    return success("modify data success");
  } catch (e) {
    return danger("modify data fail", e);
  }
};

/**
 * dbSelectData
 * @param {*} sql
 * @param {*} params
 * @returns
 */
exports.dbSelectData = async (sql, params) => {
  // check
  if (!sql) return danger("need select data sql");

  // db
  const db = exports.sqlite();

  // select data
  try {
    const rows = await selectData(db, sql, params);
    return success("select data success", rows);
  } catch (e) {
    return danger("select data fail", e);
  }
};

主进程ipc监听

主进程封装好sqlite后，要监听ipc通信，并调用对应的sqlite方法，

如下监听创建表格的方法

"use strict";

// electron
const { ipcMain } = require("electron");

// sqlite
const { dbCreateTable } = require("./sqlite-main.js");

// const
const { IPC_SQLITE_CREATE_TABLE } = require("../../_util/constant.js");

/**
 * ipc sqlite create table
 */
ipcMain.handle(IPC_SQLITE_CREATE_TABLE, (sql) => {
  return dbCreateTable(sql);
});

渲染进程注入preload

渲染进程调用主进程方法，需要先注入preload文件

如下注入了ipc通信的方法

"use strict";

// electron
const { ipcRenderer } = require("electron");

// const
const { IPC_SQLITE_CREATE_TABLE } = require("../../_util/constant.js");

/**
 * createTableIPC
 */
exports.createTableIPC = async () => {
  return await ipcRenderer.invoke(IPC_SQLITE_CREATE_TABLE);
};

渲染进程调用ipc方法

注入preload后，即可在渲染进程，

本项目对应dishi-web文件夹下调用ipc方法，

const sql =
  "CREATE TABLE if not exists t_project (project_name TEXT, project_appid TEXT, project_icon_url TEXT) ";
const rs = await window.electron.createTableIPC(sql);
console.log(rs);

最终效果

1.渲染进程中的js调用ipc方法

2.调用的ipc方式是创建window时注入的preload文件提供

3.主进程监听ipc调用，并执行对应的sqlite方法

如下

完善

按照如上步骤，继续完善基于sqlite的todo list

1.创建数据库和表格

2.新增todo

3.删除todo

4.新增done

5.查询todo

6.查询done

效果如下

以上代码详见： https://github.com/uikoo9/dishi-monorepo/tree/sqlite

【总结】

1.SQLite-介绍Cookie，LocalStorage，IndexedDB和SQLite的不同

2.SQLite-SQLite介绍

3.SQLite-SQLite文档

4.SQLite-sqlite3安装和起步

5.SQLite-sqlite3工具：qiao-sqlite， https://code.insistime.com/#/qiao-sqlite

6.SQLite-另一篇文章： https://uikoo9.blog.csdn.net/article/details/123924787

7.SQLite-实践electron+sqlite项目： https://github.com/uikoo9/dishi-monorepo/tree/sqlite

【前言】

Cookie

LocalStorage

IndexedDB

SQLite

【SQLite】

安装

起步

文档

【qiao-sqlite】

createDB

createTable

showTables

dropTable

insertData

deleteData

modifyData

selectData

【实践】

主进程封装sqlite方法

主进程ipc监听

渲染进程注入preload

渲染进程调用ipc方法

最终效果

完善

【总结】

更多同类文章