Web 应用如何使用sqlite？使用 sql.js 实现前端 SQLite 数据库操作

前言

在 Web 应用开发中，前端数据处理的重要性日益增加。为了实现更高效的前端数据管理，特别是在处理结构化数据时，sql.js 提供了一个出色的解决方案。sql.js 是将 SQLite 数据库编译为 JavaScript 的库，允许开发者在浏览器环境中直接操作 SQLite 数据库。本教程将详细介绍如何使用 sql.js 实现多张表的关联操作，从而提高前端数据处理的灵活性和效率。

什么是 sql.js？

sql.js 是一个用 JavaScript 实现的 SQLite 数据库。SQLite 是一种自包含、无服务器、零配置、事务性 SQL 数据库引擎。简而言之，它提供了一种在浏览器中轻松操作结构化数据的方法。

准备工作

在开始之前，我们需要确保先下载 sql.js。你可以通过以下方式获取：

通过 NPM 安装

clike 复制代码

npm install sql.js

通过 CDN 引入

clike 复制代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.6.1/sql-wasm.js"></script>

使用指南

接下来，我们来看如何在代码中使用 sql.js。

1. 初始化数据库

首先，我们需要创建一个数据库实例。你可以使用一段简单的 JavaScript 代码来完成这一步：

clike 复制代码

const initSqlJs = window.initSqlJs;

initSqlJs().then(function (SQL) {
  // 创建一个新的数据库
  const db = new SQL.Database();
  
  // 输出数据库对象
  console.log(db);
});

2. 创建表格

有了数据库实例之后，我们就可以开始创建表格了。我们将创建一个简单的用户信息表，包括 id 和 name 两个字段：

clike 复制代码

initSqlJs().then(function (SQL) {
  const db = new SQL.Database();
  
  // 创建一个用户表
  db.run("CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)");
  
  console.log("Table created successfully!");
});

3. 插入数据

表格创建好之后，我们就可以插入一些数据了：

clike 复制代码

initSqlJs().then(function (SQL) {
  const db = new SQL.Database();
  db.run("CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)");

  // 插入一些数据
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [1, 'Alice']);
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [2, 'Bob']);

  console.log("Data inserted successfully!");
});

4. 查询数据

插入数据后，我们可以查询数据。以下代码展示了如何从数据库中查询数据：

clike 复制代码

initSqlJs().then(function (SQL) {
  const db = new SQL.Database();
  db.run("CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)");
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [1, 'Alice']);
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [2, 'Bob']);
  
  // 查询数据
  const res = db.exec("SELECT * FROM users");

  // 输出查询结果
  console.log(res);
});

5. 更新数据

有时候我们需要更新已经存在的数据。以下代码展示了如何更新用户表中的数据：

clike 复制代码

initSqlJs().then(function (SQL) {
  const db = new SQL.Database();
  db.run("CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)");
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [1, 'Alice']);
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [2, 'Bob']);

  // 更新数据
  db.run("UPDATE users SET name = ? WHERE id = ?", ['Charlie', 1]);

  // 查询更新后的数据
  const res = db.exec("SELECT * FROM users");

  console.log(res);
});

6. 删除数据

最后，我们来看如何删除数据：

clike 复制代码

initSqlJs().then(function (SQL) {
  const db = new SQL.Database();
  db.run("CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)");
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [1, 'Alice']);
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [2, 'Bob']);

  // 删除数据
  db.run("DELETE FROM users WHERE id = ?", [1]);

  // 查询删除后的数据
  const res = db.exec("SELECT * FROM users");

  console.log(res);
});

进阶操作：多张表关联

在实际的应用场景中，通常需要关联多张表来完成更复杂的数据查询和操作。

1. 创建多张表

接下来，我们创建两个表：users 和 orders。users 表存储用户信息，orders 表存储用户的订单信息，并通过 user_id 关联到 users 表。

clike 复制代码

initSqlJs().then(function (SQL) {
  const db = new SQL.Database();
  
  // 创建用户表
  db.run("CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)");
  
  // 创建订单表
  db.run("CREATE TABLE orders (id INTEGER PRIMARY KEY, user_id INTEGER, product TEXT)");
  
  console.log("Tables created successfully!");
});

2. 插入数据

创建好表之后，我们向表中插入一些数据：

clike 复制代码

initSqlJs().then(function (SQL) {
  const db = new SQL.Database();
  db.run("CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)");
  db.run("CREATE TABLE orders (id INTEGER PRIMARY KEY, user_id INTEGER, product TEXT)");
  
  // 插入用户数据
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [1, 'Alice']);
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [2, 'Bob']);
  
  // 插入订单数据
  db.run("INSERT INTO orders (id, user_id, product) VALUES (?, ?, ?)", [1, 1, 'Laptop']);
  db.run("INSERT INTO orders (id, user_id, product) VALUES (?, ?, ?)", [2, 1, 'Phone']);
  db.run("INSERT INTO orders (id, user_id, product) VALUES (?, ?, ?)", [3, 2, 'Tablet']);
  
  console.log("Data inserted successfully!");
});

3. 查询关联数据

我们可以通过 SQL 联合查询来获取关联表的数据。例如，获取所有用户及其对应的订单信息：

clike 复制代码

initSqlJs().then(function (SQL) {
  const db = new SQL.Database();
  db.run("CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)");
  db.run("CREATE TABLE orders (id INTEGER PRIMARY KEY, user_id INTEGER, product TEXT)");
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [1, 'Alice']);
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [2, 'Bob']);
  db.run("INSERT INTO orders (id, user_id, product) VALUES (?, ?, ?)", [1, 1, 'Laptop']);
  db.run("INSERT INTO orders (id, user_id, product) VALUES (?, ?, ?)", [2, 1, 'Phone']);
  db.run("INSERT INTO orders (id, user_id, product) VALUES (?, ?, ?)", [3, 2, 'Tablet']);
  
  // 联合查询用户及其订单数据
  const res = db.exec(`
    SELECT users.name AS user_name, orders.product AS product
    FROM users
    JOIN orders ON users.id = orders.user_id
  `);
  
  console.log(res);
});

4. 处理查询结果

db.exec 返回的结果是一个数组，数组中的每个元素是一个对象，代表了查询结果的一个表格。你需要解析这个结果以展示数据：

clike 复制代码

initSqlJs().then(function (SQL) {
  const db = new SQL.Database();
  db.run("CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)");
  db.run("CREATE TABLE orders (id INTEGER PRIMARY KEY, user_id INTEGER, product TEXT)");
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [1, 'Alice']);
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [2, 'Bob']);
  db.run("INSERT INTO orders (id, user_id, product) VALUES (?, ?, ?)", [1, 1, 'Laptop']);
  db.run("INSERT INTO orders (id, user_id, product) VALUES (?, ?, ?)", [2, 1, 'Phone']);
  db.run("INSERT INTO orders (id, user_id, product) VALUES (?, ?, ?)", [3, 2, 'Tablet']);
  
  const res = db.exec(`
    SELECT users.name AS user_name, orders.product AS product
    FROM users
    JOIN orders ON users.id = orders.user_id
  `);
  
  // 解析查询结果
  if (res.length > 0) {
    const columns = res[0].columns;
    const values = res[0].values;
    
    values.forEach(row => {
      const record = {};
      row.forEach((value, index) => {
        record[columns[index]] = value;
      });
      console.log(record);  // 输出每一条记录
    });
  }
});

总结

通过 sql.js，我们可以在浏览器中轻松地操作 SQLite 数据库。它提供了一个强大的工具，使我们能够在前端进行复杂的数据操作而无需依赖后端服务器。这意味着我们可以构建更为响应和灵活的Web应用。