Electron中使用sql.js操作SQLite数据库「建议收藏」

Electron中使用sql.js操作SQLite数据库「建议收藏」推荐sql.js——一款纯js的sqlite工具。 一、关于sql.js sql.js(https://github.com/kripken/sql.js)通过使用Emscripten编译SQLite

推荐sql.js——一款纯js的sqlite工具。

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

2、安装sql.js

cnpm install sql.js --save

代码100分

安装完后,查看目录结构:

代码100分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 放到项目根目录。再看一下我们当前的项目文件结构:

代码100分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
col1 col2
1 111
2 222

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");
        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>
    <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);

        // 插入两行:(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(JSON.stringify(res));
        // [{"columns":["col1","col2"],"values":[[1,111],[2,222],[3,3333]]}]

        // 注意:上面的增、改、删都只是对载入内存中的数据进行变更,我们需要把内存中的数据再存入磁盘文件中,不然一切皆枉然。
        var data = db.export();
        var buffer = Buffer.from(data, "binary");
        fs.writeFileSync("d.sqlite", buffer);
        document.querySelector("#result").innerHTML = "SQLite database changed.";
      });
    </script>
  </body>
</html>

原文:https://xushanxiang.com/2019/11/electron-sql-js-sqlite.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
转载请注明出处: https://daima100.com/10683.html

(0)
上一篇 2022-12-23
下一篇 2022-12-23

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注