乐趣区

关于前端:SQLjs在浏览器中创建和查询一个关系数据库

SQL,即结构化查询语言,是一种特定畛域的语言,旨在拜访和操作关系数据库中的数据。在 SQL 语句的帮忙下,你能够在关系型数据库上执行创立、更新、检索和删除数据等操作。

关系数据库是一种数据模型,它应用行和列将数据组织在一个表中。尽管可能有多个应用 SQL 的关系数据库管理系统,但简直所有这些零碎都被设计为服务器端过程。其中包含:

  • MySQL
  • PostgreSQL
  • SQLite
  • MSSQL

在本教程中,咱们将探讨 SQL.js,这是一个 JavaScript SQL 库,可让您齐全在浏览器中创立和查问关系数据库。

咱们将通过以下步骤,以每个局部的具体例子来阐明

  • 什么是 SQL.js?
  • 应用 SQL.js 的利弊
  • 装置(浏览器和 Node.js)
  • 编写 SQL 查问和筹备好的语句

什么是 SQL.js?

SQL.js 是一个 JavaScript 库,容许你齐全在浏览器中创立和查问一个关系数据库。它应用一个存储在浏览器内存中的虚构数据库文件,所以它不会长久化对数据库的批改。

这个库还应用 Emscripten 将 SQLite 编译成 WebAssembly (Wasm)。有了这个性能,你能够很容易地把现有的 SQLite 数据库引入到 SQL.js 中应用,也能够把在 SQL.js 中创立的数据库转换成 SQLite。

应用 SQL.js 的利弊

应用 SQL.js 有几个益处。它是为客户端建设的,并齐全在客户端工作,这意味着它不须要任何服务器端的过程来工作。它比 MySQL、PostgreSQL 和其余须要第三方软件能力应用的软件更容易设置。开始应用 SQL.js 就像在一个现有的 HTML 我的项目中装置 jQuery 一样容易。而且 SQL.js 提供了对执行蕴含多个语句的单个 SQL 字符串的反对,如下图所示。

sqlstr = "CREATE TABLE tableName(colA, colB);";
sqlstr += "INSERT INTO hello VALUES (0,'hello');"
    ....

但也有一个重要的毛病:应用 SQL.js 时对数据库的更改不是长久的。再读一遍:当你从新加载浏览器时,对你的数据库所做的所有扭转都将不复存在。这是因为 SQL.js 应用了一个存储在浏览器内存中的虚构数据库文件。然而,你能够导入任何现有的 SQLite 文件,并将创立的数据库导出为一个 JavaScript 类型的数组。

装置 SQL.js

浏览器装置

将 SQL.js 整合到一个新的基于客户端的我的项目中是非常容易的。你能够通过包含 CDN 或下载源文件并将其链接到你的标记页面来开始。

默认状况下,SQL.js 应用 WebAssembly,除了 JavaScript 库外,还须要加载 .wasm 文件。你能够在网上下载这个文件,并应用 locateFile 性能在你的网页中加载这个文件,像这样。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Page Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.5.0/sql-wasm.js"></script>
    <script>
      // Load sql.js WebAssembly file
      let config = {locateFile: () => "/path/to/downloaded/sql-wasm.wasm",
      };
      initSqlJs(config).then(function (SQL) {console.log("sql.js initialized 🎉");
      });
    </script>
  </head>
  <body></body>
</html>

在下面的代码块中,咱们应用 initSqlJs 异步加载 Wasm 二进制文件,并在加载所需文件后初始化 SQL.js。

Node.js 装置

在基于 Node 的我的项目中装置 SQL.js 也非常简单。要装置它,您只需运行:

npm install sql.js

或者,你能够从后面的链接中下载 sql-wasm.jssql-wasm.wasm,并应用 Node.js 的 require 函数在你的我的项目中加载它们。

另外,在基于 Node 的我的项目中,你能够跳过 locateFile 办法来加载 sql-wasm.wasm 文件,因为如果它和你正在解决的文件在同一个文件夹中,它将主动加载。所以咱们的代码将看起来像这样。

var initSqlJs = require("./sql-wasm.js");

initSqlJs().then(function (SQL) {console.log("sql.js initialized 🎉");
});

编写 SQL 查问和筹备好的语句

当初咱们曾经实现了装置和初始化 SQL.js 的所有必要步骤,让咱们深刻理解它的用法。

创立数据库

上面的代码创立一个新的数据库:

const db = new SQL.Database();

值得注意的是,SQL.Database() 办法承受一个可选参数 data,它必须是一个示意 SQLite 数据库文件的 Uint8Array。例如,在 Node.js 中,咱们能够加载一个现有的 .sqlite 文件,如下所示:

let fs = require("fs");
let initSqlJs = require("./sql-wasm.js");
let filebuffer = fs.readFileSync("/path/to/sample.sqlite");

initSqlJs().then(function (SQL) {
  // Create a new database with our existing sample.sqlite file
  const db = new SQL.Database(filebuffer);
});

在下面的代码中,咱们应用内置的 Node.js fspath 模块来读取咱们现有的 sample.sqlite 文件。

运行 SQL 语句

SQL 语句能够是在数据库中创立或检索一条信息或对现有数据执行操作的申请。

应用 SQL.js,你能够很容易地运行一个语句,而不读取其后果。语法如下所示。

db.run(stmt);

当然,参数 stmt 是你的 SQL 语句。上面是一个例子,阐明如何在咱们的数据库中创立一个名为 users 的新表,其中有 ID、姓名、电话号码和地址等列。它还将在此表中插入一个新行。

let initSqlJs = require("./sql-wasm.js");

initSqlJs().then(function (SQL) {const db = new SQL.Database();
  // RUNNING SQL QUERIES 👇
  db.run("CREATE TABLE users (id, name, phone, address);");
  db.run(`INSERT INTO users (id, name, phone, address)
        VALUES (1, 'John Doe', '+234-907788', '12 Igodan Street, Okitipupa')`
  );
});

筹备好的 SQL 语句

你能够应用筹备好的语句来反复执行雷同或相似的 SQL 语句,而且效率很高。筹备好的语句比运行中的 SQL 语句有更短的解析工夫,因为对查问的筹备工作只做一次。它们对避免 SQL 注入也十分有用,因为你不须要本义参数值,这些参数值随后会应用不同的协定传输。

应用 SQL.js,咱们还能够应用 .prepare() 办法编写筹备好的语句:

var stmt = db.prepare(preparedStatement);

以下是在咱们之前的数据库中获取 ID 介于 1 和 10 之间的所有用户的示例:

var stmt = db.prepare("SELECT * FROM users WHERE id BETWEEN $start AND $end");

stmt.bind({$start: 1, $end: 2});
while (stmt.step()) {var row = stmt.getAsObject();
  console.log("Here is a user row:" + JSON.stringify(row));
}

在写完咱们筹备好的 SQL 语句后,咱们应用 .bind() 办法来绑定咱们的语句所需的值(上例中的 startend)。继续前进,咱们将应用一个 while 循环来返回所有可能的行,并将它们记录到控制台。

将数据库写入磁盘

SQL.js 还提供了一个选项,通过 db.export() 办法将数据库导出 / 写入磁盘,成为一个 .sqlite 文件。后果将以 Uint8Array 模式返回,你能够应用 Node.js Buffer 类和文件系统包将数据库写入磁盘。

var fs = require("fs");
/***
  Code to create a database here
***/
// Export database 👇
var data = db.export();
var buffer = new Buffer(data);
fs.writeFileSync("new-db.sqlite", buffer);

运行下面的代码后,您应该在我的项目根文件夹中看到一个名为 new-db.sqlite 的新文件。

总结

在本文中,咱们介绍了 SQL.js、它提供的性能以及如何在理论应用程序中应用它。尽管 SQL.js 可能非常适合构建一个离线优先的应用程序,如记事本应用程序,但在你想从治理面板治理用户数据的状况下,你可能要思考应用其余关系数据库(MySQL、PostgreSQL)。

退出移动版