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

乐闻x2024-12-21 8:50

前言

在 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应用。

相关推荐
qq_392794484 分钟前
前端缓存策略：强缓存与协商缓存深度剖析
前端·缓存
doubt。26 分钟前
【BUUCTF】[RCTF2015]EasySQL1
网络·数据库·笔记·mysql·安全·web安全
小美的打工日记40 分钟前
ES6+新特性，var、let 和 const 的区别
前端·javascript·es6
helianying551 小时前
云原生架构下的AI智能编排：ScriptEcho赋能前端开发
前端·人工智能·云原生·架构
Maybe_ch1 小时前
群晖部署-Calibreweb
数据库·群晖·nas
小辛学西嘎嘎1 小时前
MVCC在MySQL中实现无锁的原理
数据库·mysql
@PHARAOH1 小时前
HOW - 基于master的a分支和基于a的b分支合流问题
前端·git·github·分支管理
涔溪1 小时前
有哪些常见的 Vue 错误？
前端·javascript·vue.js
程序猿online1 小时前
前端jquery 实现文本框输入出现自动补全提示功能
前端·javascript·jquery
CC呢1 小时前
基于STM32单片机火灾安全监测一氧化碳火灾
数据库·mongodb
热门推荐
01xgboost: Why not implement distributed XGBoost on top of spark02Dell服务器升级ubuntu 22.04失败解决03半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)04密码学原理技术-第六章-introduction to pulibc-key cryptography05(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明06优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间07centos7 init.d 和system.d08Windows10安装PCL1.14.0及点云配准09渗透测试之SQLMAP工具详解 kali自带SQLmap解释 重点sqlmap --tamper 使用方式详解 搞完你就很nice了10ChatGPT + Stable Diffusion + 百度AI + MoviePy 实现文字生成视频，小说转视频，自媒体神器！(二)