SQL.js：在浏览器中创建和查询一个关系数据库

2022-04-11 10:33:07

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.js 和 sql-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 fs 和 path 模块来读取我们现有的 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() 方法来绑定我们的语句所需的值（上例中的 start 和 end ）。继续前进，我们将使用一个 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 的新文件。