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 安装

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/63135.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker 安装 mysql8.0容器外无法连接

文章目录 概要问题描述解决方案其他命令 概要 主要是mysql5.7和mysql8.0的兼容性问题。 排查了很久 其实就是配置文件的一句话的事情 感觉mysql8.0更为严谨 这样可能是考虑杜绝一些漏洞吧 问题描述 在容器内 netstat -an | grep 3306 都不行 在容器外 netstat -an | grep 2…

TCP协议简单分析和握手挥手过程

TCP介绍 TCP是可靠的传输层协议&#xff0c;建立连接之前会经历3次握手的阶段。 确认机制&#xff1a;接受方 收到数据之后会向 发送方 回复ACK重传机制&#xff1a;发送方 在一定时间内没有收到 接收方的ACK就会重新发送 握手目的&#xff1a;与端口建立连接 TCP的三次握手 …

VisualStudio vsix插件自动加载

本文介绍如何在Visual Studio扩展中实现PackageRegistration&#xff0c;包括设置UseManagedResourcesOnly为true&#xff0c;允许背景加载&#xff0c;并针对C#、VB、F#项目提供自动装载&#xff0c;附官方文档链接。增加以下特性即可…… [PackageRegistration(UseManagedRe…

opencv所有常见函数

一、opencv图像操作 二、opencv图像的数值运算 三、opencv图像的放射变换 四、opencv空间域图像滤波 五、图像灰度化与直方图 六、形态学图像处理 七、阈值处理与边缘检测 八、轮廓和模式匹配

【Excel】单元格分列

目录 分列&#xff08;新手友好&#xff09; 1. 选中需要分列的单元格后&#xff0c;选择 【数据】选项卡下的【分列】功能。 2. 按照分列向导提示选择适合的分列方式。 3. 分好就是这个样子 智能分列&#xff08;进阶&#xff09; 高级分列 Tips&#xff1a; 新手推荐基…

【STM32练习】基于STM32的PM2.5环境监测系统

一.项目背景 最近为了完成老师交付的任务&#xff0c;遂重制了一下小项目用STM32做一个小型的环境监测系统。 项目整体示意框图如下&#xff1a; 二.器件选择 单片机&#xff08;STM32F103&#xff09;数字温湿度模块&#xff08;DHT11&#xff09;液晶显示模块&#xff08;0.8…

《开源数据:开启信息共享与创新的宝藏之门》

《开源数据&#xff1a;开启信息共享与创新的宝藏之门》 一、开源数据概述&#xff08;一&#xff09;开源数据的定义&#xff08;二&#xff09;开源数据的发展历程 二、开源数据的优势&#xff08;一&#xff09;成本效益优势&#xff08;二&#xff09;灵活性与可定制性&…

ReactPress最佳实践—搭建导航网站实战

Github项目地址&#xff1a;https://github.com/fecommunity/easy-blog 欢迎Star。 近期&#xff0c;阮一峰在科技爱好者周刊第 325 期中推荐了一款开源工具——ReactPress&#xff0c;ReactPress一个基于 Next.js 的博客和 CMS 系统&#xff0c;可查看 demo站点。&#xff08;…

2024,大模型杀进“决赛圈”

Henry Chesbrough在著作《通过技术创新盈利势在必行》中&#xff0c;曾提出过一个创新的“漏斗模型”。开放式创新一开始鼓励百花齐放&#xff0c;但最终只有10%的技术能够通过这个漏斗&#xff0c;成功抵达目标市场target market&#xff0c;进入到商业化与产业化的下一个阶段…

STM8单片机学习笔记·GPIO的片上外设寄存器

目录 前言 IC基本定义 三极管基础知识 单片机引脚电路作用 STM8GPIO工作模式 GPIO外设寄存器 寄存器含义用法 CR1&#xff1a;Control Register 1 CR2&#xff1a;Control Register 2 ODR&#xff1a;Output Data Register IDR&#xff1a;Input Data Register 赋值…

页面加载速度优化策略:提升用户体验的关键

文章目录 前言一、为什么需要优化页面加载速度&#xff1f;二、前端优化技术三、后端优化策略四、构建与部署优化五、案例研究&#xff1a;实际效果展示结语 前言 在当今快节奏的互联网环境中&#xff0c;页面加载速度不仅是用户体验的重要组成部分&#xff0c;更是影响网站性…

【CSS in Depth 2 精译_081】 13.1:CSS 渐变效果(下)——CSS 径向渐变(13.1.3)+ CSS 锥形渐变(13.1.4)

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第四部分 视觉增强技术 ✔️【第 13 章 渐变、阴影与混合模式】 ✔️ 13.1 渐变 ✔️ 13.1.1 使用多个颜色节点&#xff08;上&#xff09;13.1.2 颜色插值方法&#xff08;中&#xff09;13.1.3 径…

商务礼仪学习笔记

时间,场合,地点 女士: 1. 着装(裙装套装,最短不能超过膝盖一拳,裙子形状直通,颜色简单不能花里胡哨,上下颜色不能超过三种,深灰深蓝;上下颜色,装饰,面料统一;丝袜不要过于花,肉色透明比较推荐) 2. 妆容和发型(经过搭理,不要毛躁; 肤色保持一致,均衡;腮红…

ubuntu 用 ss-tproxy的最终网络结构

1、包含了AD广告域名筛选 2、Ss-tproxy 国内国外地址分类 3、chinadns-ng解析 4、透明网关 更多细节看之前博客 ubuntu 用ss-TPROXY实现透明代理&#xff0c;基于TPROXY的透明TCP/UDP代理,在 Linux 2.6.28 后进入官方内核。ubuntu 用 ss-tproxy的内置 DNS 前挂上 AdGuardHome…

iOS swift开发系列--如何给swiftui内容视图添加背景图片显示

我需要在swiftui项目中显示背景图&#xff0c;有两种方式&#xff0c;一种是把图片拖入asset资源中&#xff0c;另外一种是直接把图片放在源码目录下。采用第一种方式&#xff0c;直接把图片拖到资源目录&#xff0c;但是swiftui项目没有弹出&#xff0c; “Copy items if need…

BUUCTF Pwn [HarekazeCTF2019]baby_rop2 题解

下载 得到两个文件 checksec 64位 拖入IDA64 查看main函数 看到给了个libc说明这题是ret2libc题 这里的打印函数是printf 所以利用printf函数的plt输出真实地址got 但printf的got好像不行 所以换成了read的got 因为这是64位程序 所以用寄存器传参&#xff1b;又因为printf得…

语音识别失败 chrome下获取浏览器录音功能,因为安全性问题,需要在localhost或127.0.0.1或https下才能获取权限

环境&#xff1a; Win10专业版 谷歌浏览器 版本 131.0.6778.140&#xff08;正式版本&#xff09; &#xff08;64 位&#xff09; 问题描述&#xff1a; 局域网web语音识别出现识别失败 chrome控制台出现下获取浏览器录音功能&#xff0c;因为安全性问题&#xff0c;需要在…

【前端知识】Javascript进阶-类和继承

文章目录 概述一、类&#xff08;Class&#xff09;二、继承&#xff08;Inheritance&#xff09; 三、继承的实现方式作用一、类和作用二、继承和作用 概述 当然可以&#xff0c;以下是对JavaScript中类和继承的详细介绍&#xff1a; 一、类&#xff08;Class&#xff09; 定…

前端搭建企业级项目的具体步骤?

‌前端搭建企业级项目的具体步骤如下‌&#xff1a; ‌确定项目技术栈和规划项目结构‌&#xff1a;首先&#xff0c;确定使用的前端框架&#xff0c;如Vue.js&#xff0c;并规划项目的目录结构&#xff0c;包括src、components、routes、store等‌。 ‌准备开发环境‌&#x…

Less和SCSS,哪个更好用?

前言 Less 和 SCSS 都是流行的 CSS 预处理器&#xff0c;它们的目的都是扩展 CSS 的功能&#xff0c;使样式表更具组织性、可维护性和可重用性。虽然它们有许多相似之处&#xff0c;但在语法、特性和工作方式上也存在一些差异。 Less Less 是一种动态样式表语言&#xff0c;…