Electron中使用sql.js操做SQLite數據庫

時間 2019-11-29

標籤 electron 使用 sql.js sql sqlite 數據庫欄目 SQL 简体版

原文原文鏈接

推薦sql.js——一款純js的sqlite工具。html

1、關於sql.js

sql.js（https://github.com/kripken/sql.js）經過使用Emscripten編譯SQLite C代碼，將SQLite移植到Webassembly。它使用存儲在內存中的虛擬數據庫文件，所以不會保留對數據庫所作的更改。可是，它容許您導入任何現有的sqlite文件，並將建立的數據庫導出爲JavaScript類型的數組。node

這裏沒有C綁定或node-gyp編譯，sql.js是一個簡單的JavaScript文件，能夠像任何傳統的JavaScript庫同樣使用。若是您正在JavaScript中構建本機應用程序（例如，使用Electron），或者在node.js中工做，則您可能更喜歡使用SQLite與JavaScript的本地綁定（https://www.npmjs.com/package/sqlite3）。git

SQLite是公共領域，sql.js是MIT許可的。github

Sql.js早於WebAssembly，所以從asm.js項目開始。它仍然支持asm.js以實現向後兼容。sql

2、爲何要用sql.js

在開發electron應用的時候若是想要使用sqlite3，步驟上除了npm安裝之外還要rebuild，比較麻煩，參見electron官方文檔之使用 Node 原生模塊（https://electronjs.org/docs/tutorial/using-native-node-modules）。shell

若是你想找一個開箱即用的sql庫，那麼sql.js將是個不錯的選擇。sql.js是sqlite的Webassembly版，使用上和sqlite基本沒有區別。sql.js支持瀏覽器端直接引入cdn，或者下載sql-wasm.js和sql-wasm.wasm到本地後引入，也支持npm導入。數據庫

3、在Electron項目中安裝sql.js

一、假設咱們已經搭建好了Electron的一個hello world項目，如https://xushanxiang.com/2019/11/installing-electron.htmlnpm

二、安裝sql.jsjson

cnpm install sql.js --save

安裝完後，查看目錄結構：api

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

4、在Electron項目中，如何使用sql.js操做SQLite數據庫

一、建立一個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

col1	col2
1	111
2	222

二、對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>

三、對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