前言

在 Web 應用開發中，前端數據處理的重要性日益增加。為了實現更高效的前端數據管理，特別是在處理結構化數據時，sql.js 提供了一個出色的解決方案。sql.js 是將 SQLite 數據庫編譯為 JavaScript 的庫，允許開發者在瀏覽器環境中直接操作 SQLite 數據庫。本教程將詳細介紹如何使用 sql.js 實現多張表的關聯操作，從而提高前端數據處理的靈活性和效率。

什么是 sql.js？

sql.js 是一個用 JavaScript 實現的 SQLite 數據庫。SQLite 是一種自包含、無服務器、零配置、事務性 SQL 數據庫引擎。簡而言之，它提供了一種在瀏覽器中輕松操作結構化數據的方法。

準備工作

在開始之前，我們需要確保先下載 sql.js。你可以通過以下方式獲取：

通過 NPM 安裝

npm install sql.js

通過 CDN 引入

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

使用指南

接下來，我們來看如何在代碼中使用 sql.js。

1. 初始化數據庫

首先，我們需要創建一個數據庫實例。你可以使用一段簡單的 JavaScript 代碼來完成這一步：

const initSqlJs = window.initSqlJs;initSqlJs().then(function (SQL) {// 創建一個新的數據庫const db = new SQL.Database();// 輸出數據庫對象console.log(db);
});

2. 創建表格

有了數據庫實例之后，我們就可以開始創建表格了。我們將創建一個簡單的用戶信息表，包括 id 和 name 兩個字段：

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. 插入數據

表格創建好之后，我們就可以插入一些數據了：

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. 查詢數據

插入數據后，我們可以查詢數據。以下代碼展示了如何從數據庫中查詢數據：

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. 更新數據

有時候我們需要更新已經存在的數據。以下代碼展示了如何更新用戶表中的數據：

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. 刪除數據

最后，我們來看如何刪除數據：

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 表。

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. 插入數據

創建好表之后，我們向表中插入一些數據：

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 聯合查詢來獲取關聯表的數據。例如，獲取所有用戶及其對應的訂單信息：

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 productFROM usersJOIN orders ON users.id = orders.user_id`);console.log(res);
});

4. 處理查詢結果

db.exec 返回的結果是一個數組，數組中的每個元素是一個對象，代表了查詢結果的一個表格。你需要解析這個結果以展示數據：

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 productFROM usersJOIN 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應用。