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 MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類