Electron中使用sql.js操作SQLite数据库

一、关于sql.js

　　sql.js（https://github.com/kripken/sql.js）通过使用Emscripten编译SQLite C代码，将SQLite移植到Webassembly。 它使用存储在内存中的虚拟数据库文件，因此不会保留对数据库所做的更改。 但是，它允许您导入任何现有的sqlite文件，并将创建的数据库导出为JavaScript类型的数组。

　　这里没有C绑定或node-gyp编译，sql.js是一个简单的JavaScript文件，可以像任何传统的JavaScript库一样使用。 如果您正在JavaScript中构建本机应用程序（例如，使用Electron），或者在node.js中工作，则您可能更喜欢使用SQLite与JavaScript的本地绑定（https://www.npmjs.com/package/sqlite3）。

　　SQLite是公共领域，sql.js是MIT许可的。

　　Sql.js早于WebAssembly，因此从asm.js项目开始。 它仍然支持asm.js以实现向后兼容。

二、为什么要用sql.js

在开发electron应用的时候如果想要使用sqlite3，步骤上除了npm安装以外还要rebuild，比较麻烦，参见electron官方文档之使用 Node 原生模块（https://electronjs.org/docs/tutorial/using-native-node-modules）。

如果你想找一个开箱即用的sql库，那么sql.js将是个不错的选择。sql.js是sqlite的Webassembly版，使用上和sqlite基本没有区别。sql.js支持浏览器端直接引入cdn，或者下载sql-wasm.js和sql-wasm.wasm到本地后引入，也支持npm导入。

三、在Electron项目中安装sql.js

1、假设我们已经搭建好了Electron的一个hello world项目，如https://xushanxiang.com/2019/11/installing-electron.html

（如何安装sqlite请查看我上一篇文章：点击查看）

2、安装sql.js

cnpm install sql.js --save

安装完后，查看目录结构：

tree node_modules/sql.js -L 2
node_modules/sql.js
 ├── AUTHORS
 ├── GUI
 │   └── index.html
 ├── LICENSE
 ├── Makefile
 ├── README.md
 ├── cache
 │   ├── check.txt
 │   ├── extension-functions.c
 │   └── sqlite-amalgamation-3280000.zip
 ├── dist
 │   ├── sql-asm-debug.js
 │   ├── sql-asm-memory-growth.js
 │   ├── sql-asm.js
 │   ├── sql-wasm-debug.js
 │   ├── sql-wasm-debug.wasm
 │   ├── sql-wasm.js
 │   ├── sql-wasm.wasm
 │   ├── worker.sql-asm-debug.js
 │   ├── worker.sql-asm.js
 │   ├── worker.sql-wasm-debug.js
 │   └── worker.sql-wasm.js
 ├── examples
 │   ├── GUI
 │   ├── README.md
 │   ├── persistent.html
 │   ├── repl.html
 │   ├── requireJS.html
 │   ├── simple.html
 │   └── start_local_server.py
 ├── index.html
 ├── out
 │   ├── api.js
 │   ├── extension-functions.bc
 │   ├── sqlite3.bc
 │   └── worker.js
 ├── package.json
 ├── sqlite-src
 │   └── sqlite-amalgamation-3280000
 └── src
     ├── api-data.coffee
     ├── api.coffee
     ├── exported_functions.json
     ├── exported_runtime_methods.json
     ├── exports.coffee
     ├── output-post.js
     ├── output-pre.js
     ├── shell-post.js
     ├── shell-pre.js
     └── worker.coffee
 9 directories, 41 files
dist目录文件说明详见 https://github.com/kripken/sql.js#versions-of-sqljs-included-in-the-distributed-artifacts

四、在Electron项目中，如何使用sql.js操作SQLite数据库

1、创建一个SQLite数据库

我们可以在命令行中创建，也可以通过在线SQL解释器

（http://kripken.github.io/sql.js/examples/GUI/）创建并下载一个。

写代码时，大家可以参考由源代码中的注释生成的完整文档——http://kripken.github.io/sql.js/documentation/#http://kripken.github.io/sql.js/documentation/class/Database.html

我们使用后者下载一个数据库 sql.db 放到项目根目录。再看一下我们当前的项目文件结构：

d tree  -L 1
 .
 ├── index.html
 ├── main.js
 ├── node_modules
 ├── package.json
 └── sql.db
 1 directory, 4 files

当然，我们也可以在项目运行时，动态创建一个，不过先创建静态文件目录，拷贝相关文件到静态文件目录。

→ mkdir -p static/js
→ cp node_modules/sql.js/dist/sql-wasm.* static/js/
→ ls static/js/
  sql-wasm.js   sql-wasm.wasm

再改动 index.html 文件内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>create the database</title>
  </head>
  <body>
    <div id="result"></div>
    <script src=‘./static/js/sql-wasm.js‘></script>
    <!--如果在主进程中，则用var initSqlJs=require(‘sql-wasm.js‘)-->
    <script>
      var fs = require("fs");
      var config = {
        // 指定加载sql-wasm.wasm文件的位置
        locateFile: filename => `./static/js/${filename}`
      };
      initSqlJs(config).then(SQL => {
        // 创建数据库
        var db = new SQL.Database();
        // 运行查询而不读取结果
        db.run("CREATE TABLE test (col1, col2);");
        // 插入两行：(1,111) and (2,222)
        db.run("INSERT INTO test VALUES (?,?), (?,?)", [1,111,2,222]);
        // 将数据库导出到包含SQLite数据库文件的Uint8Array
        // export() 返回值: ( Uint8Array ) — SQLite3数据库文件的字节数组
        var data = db.export();
        // 由于安全性和可用性问题，不建议使用Buffer()和new Buffer()构造函数
        // 改用new Buffer.alloc()、Buffer.allocUnsafe()或Buffer.from()构造方法
        // var buffer = new Buffer(data);
        var buffer = Buffer.from(data, ‘binary‘);
        // 被创建数据库名称
        var filename = "d.sqlite";
        fs.writeFileSync(filename, buffer);
        document.querySelector(‘#result‘).innerHTML = filename + "Created successfully.";
      });
    </script>
  </body>
</html>

如果你没有安装SQLiteStudio之类的软件，可以把上面动态创建的数据库文件载入http://kripken.github.io/sql.js/examples/GUI/，再执行下面SQL语句得到下面表格结果。

SELECT * FROM test

2、对SQLite数据库进行查询操作

替换 index.html 文件内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Execute SELECT sql</title>
  </head>
  <body>
    <div id="result"></div>
    <script src=‘./static/js/sql-wasm.js‘></script>
    <script>
      var fs = require("fs");
      var filebuffer = fs.readFileSync(‘d.sqlite‘);
      var config = {
        // 指定加载sql-wasm.wasm文件的位置
        locateFile: filename => `./static/js/${filename}`
      };
      initSqlJs(config).then(SQL => {
        // 加载数据库到内存中
        var db = new SQL.Database(filebuffer);
        var res = db.exec("SELECT * FROM test");
        // Returns: ( Array<QueryResults> ) — An array of results.
        console.log(JSON.stringify(res));
        // [{"columns":["col1","col2"],"values":[[1,111],[2,222]]}]
      });
    </script>
  </body>
</html>

3、对SQLite数据库进行增、改、删操作

替换 index.html 文件内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Execute SELECT sql</title>
  </head>
  <body>
    <div id="result"></div>
    <button onclick="delete_row(3)">删除id为3的记录</button>
    <script src=‘./static/js/sql-wasm.js‘></script>
    <script>
      var fs = require("fs");
      var filebuffer = fs.readFileSync(‘d.sqlite‘);
      var db;
      var config = {
        // 指定加载sql-wasm.wasm文件的位置
        locateFile: filename => `./static/js/${filename}`
      };
      initSqlJs(config).then(SQL => {
        // 加载数据库到内存中
        db = new SQL.Database(filebuffer);

        // 插入两行：(1,111) and (2,222)
        db.run("INSERT INTO test VALUES (?,?), (?,?)", [3,333,4,444]);
        var res = db.exec("SELECT * FROM test");
        console.log(JSON.stringify(res));
        // [{"columns":["col1","col2"],"values":[[1,111],[2,222],[3,333],[4,444]]}]

        // 修改一行
        db.run("UPDATE test SET col2=(?) WHERE col1=(?)", [3333,3]);
        res = db.exec("SELECT * FROM test");
        console.log(JSON.stringify(res));
        // [{"columns":["col1","col2"],"values":[[1,111],[2,222],[3,3333],[4,444]]}]

        // 删除一行
        db.run("DELETE FROM test WHERE col1=(?)", [4]);
        res = db.exec("SELECT * FROM test");
        console.log(db.getRowsModified());
        console.log(JSON.stringify(res));
        // [{"columns":["col1","col2"],"values":[[1,111],[2,222],[3,3333]]}]

        // 执行一条sql语句，并为结果的每一行调用一个回调
        db.each("SELECT * FROM test where col1<$col1",
          {$col1:3},
          function(row){console.log(row.col2);}
        );

        // 注意：上面的增、改、删都只是对载入内存中的数据进行变更，我们需要把内存中的数据再存入磁盘文件中，不然一切皆枉然。
        var data = db.export();
        var buffer = Buffer.from(data, ‘binary‘);
        fs.writeFileSync("d.sqlite", buffer);
        document.querySelector(‘#result‘).innerHTML = "SQLite database changed.";
        // 完成操作后，必须关闭数据库，与数据库关联的内存和所有关联的语句将被释放，否则内存消耗将永远增加
        // db.close();
      });
      function delete_row(id){
        db.run("DELETE FROM test WHERE col1=(?)", [id]);
        res = db.exec("SELECT * FROM test");
        console.log(db.getRowsModified());
        console.log(JSON.stringify(res));
      }
    </script>
  </body>
</html>

获取electron视频教程，请关注公众号“ IT资源分享平台 ”或者请扫描右上角的二维码发送关键字“electron1”，每天都会分享一部项目实战资源。

安利一个资源网站：查看

原文地址：https://www.cnblogs.com/alex96/p/12252992.html

时间： 2024-11-01 00:47:02

Electron中使用sql.js操作SQLite数据库的相关文章

js -- 操作sqlite数据库

最近看到一个使用js来操作sqlite数据库的,测试了一下,具体使用的是 js操作类: https://github.com/kripken/sql.js/(sqlite js 驱动) 异步请求:http://npm.taobao.org/package/axios(异步请求插件,只有12.6k) 这里使用的js驱动是和服务器端使用方法一致,sql标准语法都支持,可以用第三方管理工具来管理数据文件 目前我使用的是 Navicat Premium 12. 下面是测试的源代码: 1. 数据库sql(

Qt操作Sqlite数据库

总算在Qt中把Sqlite操作成功了,写点总结吧.其实早就弄对了的,但查看数据库就是没有想要的结果.最后发现生成的执行文件在Dbug目录,与先前设定的路径不同,这才恍然大悟. 一.使用到数据库模块,需在pro文件中加入:QT += sql 二.所需数据库操作的相关头文件:#include <QSqlDatabase>#include <QSqlQuery>#include <QSqlRecord>#include <QSqlField> 三.连接Sqlite

无废话Android之android下junit测试框架配置、保存文件到手机内存、android下文件访问的权限、保存文件到SD卡、获取SD卡大小、使用SharedPreferences进行数据存储、使用Pull解析器操作XML文件、android下操作sqlite数据库和事务（2）

1.android下junit测试框架配置 单元测试需要在手机中进行安装测试 (1).在清单文件中manifest节点下配置如下节点 <instrumentation android:name="android.test.InstrumentationTestRunner" android:targetPackage="com.example.demo1" /> 上面targetPackage指定的包要和应用的package相同. (2)在清单文件中ap

JDBC访问及操作SQLite数据库

SQLite 是一个开源的嵌入式关系数据库,其特点是高度便携.使用方便.结构紧凑.高效.可靠. 与其他数据库管理系统不同,SQLite 的安装和运行非常简单,在大多数情况下,只要确保SQLite的二进制文件存在即可开始创建.连接和使用数据库.  SQLite的下载页面:http://www.sqlite.org/download.html window操作系统下载:sqlite-dll-win32-x86-3081002.zip及sqlite-shell-win32-x86-3081002.zi

android操作sqlite数据库及心得

写这篇文章主要是网上的对sqlite的操作太多且太杂,很多时候都不能很好的运用到自己的项目中,结构不清晰,我自己写了一篇适合刚刚接触的人看的操作方法. 近来用android时要将一些数据保存起来,一开始用的是preferences,后来要保存的东西多了,发现用preferences明显不能满足要求了,而且发现用这个的话代码就变得有点乱了,所以才开始学习使用sqlite数据库,一开始以为不就是个数据库么,和平时的mysql啊或者是sqlserver都一样,都很简单的,但后来真正在用的时候才发现困难

Android——使用SQLiteDatabase操作SQLite数据库

除了可以使用文件或SharedPreferences存储数据,还可以选择使用SQLite数据库存储数据. 在Android平台上,集成了一个嵌入式关系型数据库-SQLite,SQLite3支持 NULL.INTEGER.REAL(浮点数字).TEXT(字符串文本)和BLOB(二进制对象)数据类型,虽然它支持的类型只有五种,但实际上sqlite3也接受varchar(n).char(n).decimal(p,s) 等数据类型,只不过在运算或保存时会转成对应的五种数据类型. SQLite最大的特点是

使用事务操作SQLite数据库

使用SQLiteDatabase的beginTransaction()方法可以开启一个事务,程序执行到endTransaction() 方法时会检查事务的标志是否为成功,如果程序执行到endTransaction()之前调用了setTransactionSuccessful() 方法设置事务的标志为成功则提交事务,如果没有调用setTransactionSuccessful() 方法则回滚事务.使用例子如下:  SQLiteDatabase db = ....; db.beginTransact

微信PK10平台开发Go实战--go语言操作sqlite数据库

生命不止,继续 go go go !!!微信PK10平台开发 继续与大家分享,go语言的实战,今天介绍的是如何操作sqlite数据库. 何为sqlite3? SQLite is a self-contained, high-reliability, embedded, full-featured, public-domain, SQL database engine. 最主要的是,sqlite是一款轻型的数据库 database/sql包 go中有一个database/sql package,我

Python 操作 SQLite 数据库

写在之前 SQLite 是一个小型的关系型数据库,它最大的特点在于不需要单独的服务.零配置.我们在之前讲过的两个数据库,不管是 MySQL 还是 MongoDB,都需要我们安装.安装之后,然后运行起来,其实这就相当于已经有一个相应的服务在跑着. SQLite 与前面所说的两个数据库不同.首先Python 已经将相应的驱动模块作为了标准库的一部分,只要是你安装了 Python,就可以使用:再者它可以类似于操作文件那样来操作 SQLite 数据库文件.还有一点,SQLite 源代码不受版权限制. 建