vue3+vite+SQL.js 读取db3文件数据

前言:好久没写博客了,最近一直在忙,没时间梳理。最近遇到一个需求是读取本地SQLite文件,还是花费了点时间才实现,没怎么看到vite方面写这个的文章,现在分享出来完整流程。

Tips:解决了打包后wasm文件404问题,在后续

1.pnpm下载SQL.js(什么都可以下)

pnpm add SQL.js

2.【重点】如果你执行wasm文件时报错404,请执行:

pnpm add --save-dev @rollup/plugin-wasm

在vite.config,js中写入:

...build: {rollupOptions: {plugins: [// 在这里添加 wasm 插件wasm({include: /\.wasm$/i // 这里可能需要调整为你的文件路径和名称})],}
}
...

3.在使用的页面中,你需要引入了,但是我在使用setup语法糖写法时候报错,因为执行顺序的问题,这里有两种解决办法;
第一种:不使用语法糖,使用setup()形式;
第二种:使用语法糖,结合onMounted,nextTick解决,以下:

import { onMounted, nextTick, ref } from "vue";
import initSqlJs from "sql.js";
const databaseContent = ref(null);
let SQL, db;
onMounted(async (nextTick) => {SQL = await initSqlJs({locateFile: (file) => `/node_modules/sql.js/dist/${file}`});db = new SQL.Database();
});

4.添加选择文件控件,选择.db3文件,触发onFileChange 方法

 <input type="file" @change="onFileChange" /><div><ul><li v-for="(item, index) in databaseContent" :key="index">{{ item }}</li></ul></div>const onFileChange = (event) => {const fileInput = event.target;const file = fileInput.files[0];if (file) {const reader = new FileReader();reader.onload = () => {const Uints = new Uint8Array(reader.result);db = new SQL.Database(Uints);const result = db.exec("SELECT PhotoFile  FROM Photo");if (result && result.length) {let table = result[0].values.flat().map((str) => {let newRow = str.replace(".\\", "");let newOvrRow = newRow + ".ovr";return [newRow, newOvrRow];});databaseContent.value = table.flat();}};reader.readAsArrayBuffer(file);}
};

主要是这几句:

 const Uints = new Uint8Array(reader.result);db = new SQL.Database(Uints);const result = db.exec("SELECT PhotoFile  FROM Photo");...reader.readAsArrayBuffer(file);

这是db3数据库的结构:

在这里插入图片描述
我取其中的PhotoFile值(.ovr不用看,我自己加的):
在这里插入图片描述


以上的操作,在vue打包后再运行会报错,因为wasm文件没有被打包进去,经过排查,主要是sql-wasm.wasm这个文件

1.将该文件复制出来,放在public下,我的路径是public-vender-sql-wasm.wasm

在这里插入图片描述
2.import引入该文件

import sqlWasm from "/vender/sql-wasm.wasm";
onMounted(async (nextTick) => {SQL = await initSqlJs({locateFile: (file) => sqlWasm});
});

3.此时依旧会报错,需修改vite.config.js配置
添加

assetsInclude: ["**/*.wasm"]
publicDir: "public",
publicPath: "./",
base: "/", //   hash模式 ./ 历史模式 /

完美解决

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

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

相关文章

Linux操作系统使用及C高级编程-D9D10Linux 服务搭建与使用

TFTP服务器 TFTP&#xff08;Trivial File Transfer Protocol&#xff09;即简单文件传输协议&#xff0c;是TCP/IP协议中一个用来在客户机与服务器之间进行简单文件传输的协议&#xff0c;提供不复杂、开销不大的文件传输服务。端口号为69 1、使用客户服务器方式和使用UDP数据…

jenkins springCloud项目优雅下线

文章目录 场景解决下线请求效果如图贴一个可用的部署脚本 场景 在 Spring Cloud 项目的微服务实例关闭时&#xff0c;需要首先从注册中心设置为下线&#xff0c;避免该服务的消费者继续请求该服务实例&#xff0c;导致请求失败如果我们在服务实例从注册中心取消注册后&#xff…

银河麒麟安装Docker

# 配置阿里云 Centos8 镜像源&#xff0c;需要额外的一些依赖&#xff0c;而这些依赖在麒麟官方的源里面是没有的 sudo curl -o /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-8.repo# 配置阿里云 docker 镜像源 sudo yum-config-manager --add-r…

RedisConnectionFactory is required已解决!!!!

1.起因&#x1f936;&#x1f936;&#x1f936;&#x1f936; redis搭建完成后&#xff0c;准备启动主程序&#xff0c;异常兴奋&#xff0c;结果报错了&#xff01;&#xff01;&#xff01;&#xff01; 2.究竟是何原因 &#x1f62d;&#x1f62d;&#x1f62d;&#x1f…

LeetCode - 622. 设计循环队列(C语言,顺序存储结构,配图)

目录 ​编辑定义结构体&#xff1a; 1. MyCircularQueue(k): 构造器&#xff0c;设置队列长度为 k 2. Front: 从队首获取元素。如果队列为空&#xff0c;返回 -1 3. Rear: 获取队尾元素。如果队列为空&#xff0c;返回 -1 4. enQueue(value): 向循环队列插入一个元素。…

爬取春秋航空航班信息

一、使用fiddler爬取小程序春秋航空航班信息 使用Fiddler爬取春秋航空微信小程序&#xff08;手机上由于网络问题&#xff0c;无法进入&#xff0c;使用电脑版&#xff09; 搜索航班信息 搜索记录 使用Fiddler查找url(没有得到有效url) 继续查找&#xff0c;发现航班信息列…

【总结】坐标变换和过渡矩阵(易忘记)

xCy&#xff0c;此为x到y的坐标变换。 [β1,β2,…,βn] [α1,α2,…αn]C&#xff0c;此为基α到基β的过渡矩阵。 这个概念经常忘记。。。alpha到beta看来就是alpha后面加一个过渡矩阵了&#xff0c;很直观。坐标变换就是根据过渡矩阵和基本形式推一推得到吧&#xff0c;记…

NEJM一篇新文为例,聊聊孟德尔随机化研究mr

2019年3月14日&#xff0c;新英格兰医学杂志发表了一篇论著&#xff0c;Mendelian Randomization Study of ACLY and Cardiovascular disease, 即《ACLY和心血管疾病的孟德尔随机化研究》。与小咖在2017年1月9日报道的一篇发表在新英格兰医学的孟德尔随机化研究——精读NEJM&am…

基于springboot实现在线外卖平台系统项目【项目源码】

基于springboot实现在线外卖平台管理系统演示 Java技术 Java是由SUN公司推出&#xff0c;该公司于2010年被oracle公司收购。Java本是印度尼西亚的一个叫做爪洼岛的英文名称&#xff0c;也因此得来java是一杯正冒着热气咖啡的标识。Java语言在移动互联网的大背景下具备了显著的…

redis的高可用之持久化

1、redis的高可用考虑指标 &#xff08;1&#xff09;正常服务 &#xff08;2&#xff09;数据容量的扩展 &#xff08;3&#xff09;数据的安全性 2、redis实现高可用的四种方式 &#xff08;1&#xff09;持久化 &#xff08;2&#xff09;主从复制 &#xff08;3&…

「浙江科聪新品发布」新品发布潜伏顶升式移动机器人专用控制器

聚焦专用车型 最小专用控制器 控制器只占整机5%&#xff0c;纵向出线方式&#xff0c;占比更小 更易插拔 整体解决方案 更具价格优势 提供整体解决方案&#xff0c;配套各类型产品设备及车体厂家 打造持久稳定使用 坚持工业级品质 采用车规级接口&#xff0c;不用其它类不可…

【giszz笔记】产品设计标准流程【7】

&#xff08;续上回&#xff09; 今天来讨论下产品设计标准流程中&#xff0c;交互设计和视觉设计的内容。 想参考之前文章的&#xff0c;我把链接给到这里。 【giszz笔记】产品设计标准流程【6】-CSDN博客 【giszz笔记】产品设计标准流程【5】-CSDN博客 【giszz笔记】产品…

【漏洞复现】IP-guard WebServer 存在远程命令执行漏洞

漏洞描述 IP-guard是由溢信科技股份有限公司开发的一款终端安全管理软件,旨在帮助企业保护终端设备安全、数据安全、管理网络使用和简化IT系统管理。 免责声明 技术文章仅供参考,任何个人和组织使用网络应当遵守宪法法律,遵守公共秩序,尊重社会公德,不得利用网络从事危…

微软重磅发布4个适合初学者的机器学习资料

自媒体火起来后&#xff0c;很多科技大佬都开始写博客&#xff0c;录视频了&#xff0c;大佬一入行&#xff0c;整个行业卷上天&#xff0c;像我这样的也只能走资源整合之路了&#xff0c;不过这样也好&#xff0c;科技进步&#xff0c;人类发展需要他们。 除了个人&#xff0…

如何实现MATLAB与Simulink的数据交互

参考链接&#xff1a;如何实现MATLAB与Simulink的数据交互 MATLAB是一款强大的数学计算软件&#xff0c;Simulink则是一种基于模型的多域仿真平台&#xff0c;常用于工程和科学领域中的系统设计、控制设计和信号处理等方面。MATLAB和Simulink都是MathWorks公司的产品&#xff0…

kettle spoon连接MySQL8.0数据库报错解决方法

kettle 连接 mysql 8.0报错&#xff0c;显示无法连接到数据库服务 错误连接数据库 [11] : org.pentaho.di.core.exception.KettleDatabaseException: Error occurred while trying to connect to the databaseError connecting to database: (using class org.gjt.mm.mysql.D…

Android使用Kotlin利用Gson解析多层嵌套Json数据

文章目录 1、依赖2、解析 1、依赖 build.gradle(app)中加入 dependencies { implementation com.google.code.gson:gson:2.8.9 }2、解析 假设这是要解析Json数据 var responseStr "{"code": 200,"message": "操作成功","data&quo…

2023亿发数字化智能工单,专业管理工单处理全流程,助力企业转型腾飞

伴随着智能化和信息化的不断深入&#xff0c;企业数字化转型势如腾飞。在这个过程中&#xff0c;工单管理成为生产、家电、后勤等多个管理场景下频繁应用的关键环节。如何满足管理方对设备、服务等智能化管理的需求&#xff0c;提升工单管理效率、规范管理流程&#xff0c;并实…

(内部资料)收下这几个人工智能学习秘籍!

秘籍一&#xff1a;练好基本功 学习基础知识&#xff1a;人工智能涉及多个学科领域&#xff0c;包括数学、计算机科学、统计学等。因此&#xff0c;学习基础知识是非常重要的。您可以通过学习线性代数、概率论和微积分等数学基础知识&#xff0c;以及掌握Python编程语言和常用…

【网络安全】-网络安全的分类详解

文章目录 介绍1. 网络层安全&#xff08;Network Layer Security&#xff09;理论实操使用VPN保护隐私 2. 应用层安全&#xff08;Application Layer Security&#xff09;理论实操使用密码管理器 3. 端点安全&#xff08;Endpoint Security&#xff09;理论实操定期更新防病毒…