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

 更新时间:2024年05月23日 10:57:22   作者:看点博客  
这篇文章主要介绍了vue3+vite+SQL.js如何读取db3文件数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

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模式 ./ 历史模式 /

总结

完美解决!

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3+vant4封装日期时间组件方式(年月日时分秒)

    vue3+vant4封装日期时间组件方式(年月日时分秒)

    这篇文章主要介绍了vue3+vant4封装日期时间组件方式(年月日时分秒),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 如何在Vue3中实现文件上传功能结合后端API

    如何在Vue3中实现文件上传功能结合后端API

    文件上传的功能实现是我们做Web应用时候最为常见的应用场景,下面这篇文章主要给大家介绍了关于如何在Vue3中实现文件上传功能结合后端API的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • 解决vue单页使用keep-alive页面返回不刷新的问题

    解决vue单页使用keep-alive页面返回不刷新的问题

    下面小编就为大家分享一篇解决vue单页使用keep-alive页面返回不刷新的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue请求代理地址localhost报错:[HPM] Error occurred while trying to proxy request的解决方案

    Vue请求代理地址localhost报错:[HPM] Error occurred whi

    这篇文章主要介绍了在前后端联调测试Vue时遇到的请求超时问题,通过排查发现是由于Vue请求的后端服务只监听了IPv4,而Vue发送的localhost地址请求被解析为IPv6的回环地址导致的,通过修改hosts文件将localhost改为127.0.0.1,并将Vue代理请求更换成127.0.0.1,解决了问题
    2026-02-02
  • vue相关配置文件详解及多环境配置详细步骤

    vue相关配置文件详解及多环境配置详细步骤

    这篇文章主要介绍了vue相关配置文件详解及多环境配置的教程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • vue上传图片到oss的方法示例(图片带有删除功能)

    vue上传图片到oss的方法示例(图片带有删除功能)

    这篇文章主要介绍了vue上传图片到oss的方法示例(图片带有删除功能),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue跳转方式的常见方式以及区别分析

    vue跳转方式的常见方式以及区别分析

    在Vue.js中页面跳转是前端开发中常见的需求,Vue提供了多种页面跳转方式,这篇文章主要给大家介绍了关于vue跳转方式的常见方式以及区别分析的相关资料,需要的朋友可以参考下
    2024-02-02
  • vue父元素点击事件与子元素点击事件冲突问题

    vue父元素点击事件与子元素点击事件冲突问题

    这篇文章主要介绍了vue父元素点击事件与子元素点击事件冲突问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

    Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

    文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一些配置项,如格式化表头日期、设置甘特图尺寸、启用只读模式、设置表格列等,感兴趣的朋友一起看看吧
    2025-02-02
  • vue中数据字典dicts的简单说明和用法介绍

    vue中数据字典dicts的简单说明和用法介绍

    这篇文章主要给大家介绍了关于vue中数据字典dicts的简单说明和用法的相关资料,如果您想在Vue中使用字典查询,您可以使用Vue的计算属性和方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01

最新评论