使用sql.js實(shí)現(xiàn)前端SQLite數(shù)據(jù)庫(kù)操作

更新時(shí)間：2024年12月17日 08:49:41 作者：樂聞x

sql.js?是將?SQLite?數(shù)據(jù)庫(kù)編譯為?JavaScript?的庫(kù),允許開發(fā)者在瀏覽器環(huán)境中直接操作?SQLite?數(shù)據(jù)庫(kù),本文主要介紹了如何使用sql.js實(shí)現(xiàn)多張表的關(guān)聯(lián)操作,需要的可以了解下

前言

在 Web 應(yīng)用開發(fā)中，前端數(shù)據(jù)處理的重要性日益增加。為了實(shí)現(xiàn)更高效的前端數(shù)據(jù)管理，特別是在處理結(jié)構(gòu)化數(shù)據(jù)時(shí)，sql.js 提供了一個(gè)出色的解決方案。sql.js 是將 SQLite 數(shù)據(jù)庫(kù)編譯為 JavaScript 的庫(kù)，允許開發(fā)者在瀏覽器環(huán)境中直接操作 SQLite 數(shù)據(jù)庫(kù)。本教程將詳細(xì)介紹如何使用 sql.js 實(shí)現(xiàn)多張表的關(guān)聯(lián)操作，從而提高前端數(shù)據(jù)處理的靈活性和效率。

什么是 sql.js

sql.js 是一個(gè)用 JavaScript 實(shí)現(xiàn)的 SQLite 數(shù)據(jù)庫(kù)。SQLite 是一種自包含、無(wú)服務(wù)器、零配置、事務(wù)性 SQL 數(shù)據(jù)庫(kù)引擎。簡(jiǎn)而言之，它提供了一種在瀏覽器中輕松操作結(jié)構(gòu)化數(shù)據(jù)的方法。

準(zhǔn)備工作

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

通過 NPM 安裝

npm install sql.js

通過 CDN 引入

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

使用指南

接下來(lái)，我們來(lái)看如何在代碼中使用 sql.js。

1. 初始化數(shù)據(jù)庫(kù)

首先，我們需要?jiǎng)?chuàng)建一個(gè)數(shù)據(jù)庫(kù)實(shí)例。你可以使用一段簡(jiǎn)單的 JavaScript 代碼來(lái)完成這一步：

const initSqlJs = window.initSqlJs;

initSqlJs().then(function (SQL) {
  // 創(chuàng)建一個(gè)新的數(shù)據(jù)庫(kù)
  const db = new SQL.Database();
  
  // 輸出數(shù)據(jù)庫(kù)對(duì)象
  console.log(db);
});

2. 創(chuàng)建表格

有了數(shù)據(jù)庫(kù)實(shí)例之后，我們就可以開始創(chuàng)建表格了。我們將創(chuàng)建一個(gè)簡(jiǎn)單的用戶信息表，包括 id 和 name 兩個(gè)字段：

initSqlJs().then(function (SQL) {
  const db = new SQL.Database();
  
  // 創(chuàng)建一個(gè)用戶表
  db.run("CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)");
  
  console.log("Table created successfully!");
});

3. 插入數(shù)據(jù)

表格創(chuàng)建好之后，我們就可以插入一些數(shù)據(jù)了：

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

  // 插入一些數(shù)據(jù)
  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. 查詢數(shù)據(jù)

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

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']);
  
  // 查詢數(shù)據(jù)
  const res = db.exec("SELECT * FROM users");

  // 輸出查詢結(jié)果
  console.log(res);
});

5. 更新數(shù)據(jù)

有時(shí)候我們需要更新已經(jīng)存在的數(shù)據(jù)。以下代碼展示了如何更新用戶表中的數(shù)據(jù)：

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']);

  // 更新數(shù)據(jù)
  db.run("UPDATE users SET name = ? WHERE id = ?", ['Charlie', 1]);

  // 查詢更新后的數(shù)據(jù)
  const res = db.exec("SELECT * FROM users");

  console.log(res);
});

6. 刪除數(shù)據(jù)

最后，我們來(lái)看如何刪除數(shù)據(jù)：

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']);

  // 刪除數(shù)據(jù)
  db.run("DELETE FROM users WHERE id = ?", [1]);

  // 查詢刪除后的數(shù)據(jù)
  const res = db.exec("SELECT * FROM users");

  console.log(res);
});

進(jìn)階操作：多張表關(guān)聯(lián)

在實(shí)際的應(yīng)用場(chǎng)景中，通常需要關(guān)聯(lián)多張表來(lái)完成更復(fù)雜的數(shù)據(jù)查詢和操作。

1. 創(chuàng)建多張表

接下來(lái)，我們創(chuàng)建兩個(gè)表：users 和 orders。users 表存儲(chǔ)用戶信息，orders 表存儲(chǔ)用戶的訂單信息，并通過 user_id 關(guān)聯(lián)到 users 表。

initSqlJs().then(function (SQL) {
  const db = new SQL.Database();
  
  // 創(chuàng)建用戶表
  db.run("CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)");
  
  // 創(chuàng)建訂單表
  db.run("CREATE TABLE orders (id INTEGER PRIMARY KEY, user_id INTEGER, product TEXT)");
  
  console.log("Tables created successfully!");
});

2. 插入數(shù)據(jù)

創(chuàng)建好表之后，我們向表中插入一些數(shù)據(jù)：

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)");
  
  // 插入用戶數(shù)據(jù)
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [1, 'Alice']);
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [2, 'Bob']);
  
  // 插入訂單數(shù)據(jù)
  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. 查詢關(guān)聯(lián)數(shù)據(jù)

我們可以通過 SQL 聯(lián)合查詢來(lái)獲取關(guān)聯(lián)表的數(shù)據(jù)。例如，獲取所有用戶及其對(duì)應(yīng)的訂單信息：

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']);
  
  // 聯(lián)合查詢用戶及其訂單數(shù)據(jù)
  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. 處理查詢結(jié)果

db.exec 返回的結(jié)果是一個(gè)數(shù)組，數(shù)組中的每個(gè)元素是一個(gè)對(duì)象，代表了查詢結(jié)果的一個(gè)表格。你需要解析這個(gè)結(jié)果以展示數(shù)據(jù)：

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
  `);
  
  // 解析查詢結(jié)果
  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);  // 輸出每一條記錄
    });
  }
});

總結(jié)

通過 sql.js，我們可以在瀏覽器中輕松地操作 SQLite 數(shù)據(jù)庫(kù)。它提供了一個(gè)強(qiáng)大的工具，使我們能夠在前端進(jìn)行復(fù)雜的數(shù)據(jù)操作而無(wú)需依賴后端服務(wù)器。這意味著我們可以構(gòu)建更為響應(yīng)和靈活的Web應(yīng)用。

到此這篇關(guān)于使用sql.js實(shí)現(xiàn)前端SQLite數(shù)據(jù)庫(kù)操作的文章就介紹到這了,更多相關(guān)sql.js實(shí)現(xiàn)SQLite數(shù)據(jù)庫(kù)操作內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: