Electron中使用sql.js操作SQLite資料庫

来源:https://www.cnblogs.com/xusx2014/archive/2019/11/29/11955398.html
-Advertisement-
Play Games

推薦sql.js——一款純js的sqlite工具。 一、關於sql.js sql.js（https://github.com/kripken/sql.js）通過使用Emscripten編譯SQLite C代碼，將SQLite移植到Webassembly。 它使用存儲在記憶體中的虛擬資料庫文件，因此不會 ...


推薦sql.js——一款純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

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

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
col1col2
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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • linux系統的特殊符號
    符號作用示例 # 註釋符號，井號後的內容不會執行 echo #WORD ~ 當前用戶的家目錄 cd ~ ; 命令順序執行，前面執行成功與否對後面沒影響 COMMAND1 ; COMMAND2 && 命令邏輯執行，前面執行成功才會執行後面命令 COMMAND1 && COMMAND2 . 當前目錄 t ...
  • Nginx日誌常見時間變數解析
    $request_time 官方解釋：request processing time in seconds with a milliseconds resolution; time elapsed between the first bytes were read from the client a ...
  • Linux系統學習 十五、VSFTP服務—匿名用戶訪問（不推薦使用，不安全）
    匿名用戶訪問 基本配置： anonymous_enable #允許匿名用戶訪問 anon_upload_enable #允許匿名用戶上傳 anon_mkdir_write_enable #允許匿名用戶建立目錄 anon_umask #設置上傳的預設文件許可權（預設是600） 重啟 登錄 密碼是空或者是 ...
  • Linux系統學習 十四、VSFTP服務—配置文件解析、客戶端使用
    3、配置文件解析 預設配置選項： 一般情況下不允許匿名用戶登錄 全局配置選項：（手工添加） listen_address=192.168.4.1 #設置監聽地址 listen_port=21 #設置監聽ftp服務的埠號 download_enable=YES #是否允許下載文件 max_clien ...
  • 一次在CentOS系統單用戶模式下使用passwd命令破密失敗的案例
    某次遇到需要進入系統的單用戶模式進行破密操作，結果卻顯示如下： 根據提示：Permission denied（缺少許可權） 此時查看/usr/bin/passwd 許可權： 正常情況下的許可權應該是如下： [root@web ~]# ls -l /usr/bin/passwd -rwsr-xr-x 1 r ...
  • 文檔搜集 - 有些文檔需要被索引
    在編程過程中，有很多有用的文檔現在在這裡記錄一下： https://docs.microsoft.com/zh-cn/ (windows產品，說明手冊) http://man7.org/linux/man-pages/index.html （linux manpages 產品） ...
  • Ubuntu下配置IP地址
    17.10版本之前： Ubuntu的網卡配置文件跟CentOS的不一樣，Ubuntu的網卡配置文件是/etc/network/interfaces。我們用vi /etc/network/interfaces命令去修改網卡文件。具體修改如上圖所示，要註意的是Ubuntu用的都是小寫，而且IP地址和DN ...
  • 安裝CentOS 6.x報錯"Disk sda contains BIOS RAID metadata"解決方法
    今天在安裝CentOS 6.2的時候，當進到檢測硬碟的時候，總是過不去，報錯如下： Disk sda contains BIOS RAID metadata, but is not part of any recognized BIOS RAID sets. Ignoring disk sda 這種 ...
一周排行
    -Advertisement-
    Play Games
  • .net 6 C#中System.IO.Path類的用法
    1. 說明 /* Performs operations on System.String instances that contain file or directory path information. These operations are performed in a cross-pla ...
  • 使用WebApi+Vue3從0到1搭建《許可權管理系統》:二、搭建JWT系統鑒權
    視頻地址：【WebApi+Vue3從0到1搭建《許可權管理系統》系列視頻：搭建JWT系統鑒權-嗶哩嗶哩】 https://b23.tv/R6cOcDO qq群:801913255 一、在appsettings.json中設置鑒權屬性 /*jwt鑒權*/ "JwtSetting": { "Issuer" ...
  • 實戰指南：使用 xUnit 和 ASP.NET Core 進行集成測試【完整教程】
    引言 集成測試可在包含應用支持基礎結構（如資料庫、文件系統和網路）的級別上確保應用組件功能正常。 ASP.NET Core 通過將單元測試框架與測試 Web 主機和記憶體中測試伺服器結合使用來支持集成測試。 簡介 集成測試與單元測試相比，能夠在更廣泛的級別上評估應用的組件，確認多個組件一起工作以生成預 ...
  • .NET Emit 入門教程：第六部分：IL 指令：9：詳解 ILGenerator 指令方法：運算操作指令（指令篇結束）
    在.NET Emit編程中，我們探討了運算操作指令的重要性和應用。這些指令包括各種數學運算、位操作和比較操作，能夠在動態生成的代碼中實現對數據的處理和操作。通過這些指令，開發人員可以靈活地進行算術運算、邏輯運算和比較操作，從而實現各種複雜的演算法和邏輯......本篇之後，將進入第七部分：實戰項目 ...
  • WPF多表頭表格實現
    前言 多表頭表格是一個常見的業務需求，然而WPF中卻沒有預設實現這個功能，得益於WPF強大的控制項模板設計，我們可以通過修改控制項模板的方式自己實現它。 一、需求分析 下圖為一個典型的統計表格，統計1-12月的數據。 此時我們有一個需求，需要將月份按季度劃分，以便能夠直觀地看到季度統計數據，以下為該需求 ...
  • gRPC入門學習之旅（七）
    如何將 ASP.NET Core MVC 項目的視圖分離到另一個項目 在當下這個年代 SPA 已是主流，人們早已忘記了 MVC 以及 Razor 的故事。但是在某些場景下 SSR 還是有意想不到效果。比如某些靜態頁面，比如追求首屏載入速度的時候。最近在項目中回歸傳統效果還是不錯。 有的時候我們希望將 ...
  • System.AggregateException: 發生一個或多個錯誤.....
    System.AggregateException: 發生一個或多個錯誤。 > Microsoft.WebTools.Shared.Exceptions.WebToolsException: 生成失敗。檢查輸出視窗瞭解更多詳細信息。 內部異常堆棧跟蹤的結尾 > (內部異常 #0) Microsoft ...
  • 精通中間件測試：Asp.Net Core實戰指南，提升應用穩定性和可靠性
    引言 在上一章節我們實戰了在Asp.Net Core中的項目實戰，這一章節講解一下如何測試Asp.Net Core的中間件。 TestServer 還記得我們在集成測試中提供的TestServer嗎？ TestServer 是由 Microsoft.AspNetCore.TestHost 包提供的。 ...
  • Case表達式
    在發現結果為真的WHEN子句時,CASE表達式的真假值判斷會終止,剩餘的WHEN子句會被忽略: CASE WHEN col_1 IN ('a', 'b') THEN '第一' WHEN col_1 IN ('a') THEN '第二' ELSE '其他' END 註意: 統一各分支返回的數據類型. ...
  • 揭秘：C#語法中“_ =” 是什麼？
    在C#編程世界中，語法的精妙之處往往體現在那些看似微小卻極具影響力的符號與結構之中。其中，“_ =” 這一組合突然出現還真不知道什麼意思。本文將深入剖析“_ =” 的含義、工作原理及其在實際編程中的廣泛應用，揭示其作為C#語法奇兵的重要角色。 一、下劃線 _：神秘的棄元符號 下劃線 _ 在C#中並非 ...
所有分類