VUE+前端数据存储indexDB

背景

最近项目中基于需求限制需要使用mineMap地图绘制路段,路段数据有3万+条(大概27.6M),前后端请求一次耗时38s,这么长的基础数据请求时间对任何一个项目来说都是无法接受的。基于此前后端做了以下操作以期解决这个问题:

  1. 后端清除不需要的返回字段,处理后数据大小降至18.6M,请求时间缩短至28s
  2. 前端寻求浏览器存储大量数据的方案只在第一次打开页面时请求,后续均从浏览器存储中获取数据(indexDB)
  3. 路段数据由基础路段和虚拟路段组成,虚拟路段可能会变化,沟通此处需求是否可以变更为只渲染不变的基础路段数据,这样方案可以变更为前端项目里直接请求本地json文件即可,不再需要请求后端

虽然最后不再采用indexDB存储,但是还是记录下vue中使用indexDB的相关代码

indexDB

IndexedDB 是一种底层 API,用于在客户端存储大量的结构化数据(也包括文件/二进制大型对象(blobs))。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用,但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。

indexDB操作步骤如下:

  • 打开/创建数据库(如果没有就会创建)。
  • 首次创建则在数据库中创建一个对象仓库(也就是建一个表)。
  • 数据库操作(增删改查等)

代码如下

全局定义几个变量:

let indexDB
let db
let objectStore

数据库操作(created里):

        const that this        
        // 创建indexDB内存数据库,存储基础路段数据
        indexDB = window.indexedDB.open('sectionsData')
        
        // 数据库首次创建版本,或者window.indexedDB.open传递的新版本(版本数值要比现在的高)
        indexDB.onupgradeneeded = function (event) {
          db = event.target.result
          if (!db.objectStoreNames.contains('sections')) {
            objectStore = db.createObjectStore('sections', { keyPath: 'sectionCode' })//        定义主键,相当于id
            objectStore.createIndex('sectionCode', 'sectionCode', { unique: true })
            objectStore.createIndex('flow', 'flow', { unique: false })
            objectStore.createIndex('trafficStatus', 'trafficStatus', { unique: false })
            objectStore.createIndex('coordinates', 'coordinates', { unique: false })
          }
        }

        // 数据库成功打开
        indexDB.onsuccess = function (event) {
          //获取db容器
          db = indexDB.result
          //判断是否有值--objectStore数据存储仓库(表)
          objectStore = db.transaction('sections', 'readwrite').objectStore('sections')
           //此处根据里面是否有sectionCode=0的数据来判断是否已存储路段数据
          let request = objectStore.get(0)
          request.onsuccess = function (event) {
            if (request.result) {
              let allRecords = objectStore.getAll()
              allRecords.onsuccess = function () {
                //拿到所有路段数据,进行需要的操作
                console.log(allRecords.result)
              }
            } else {
              //如果表中无数据则走接口请求逻辑
              getRoadData().then(res => {
                const data = res.data
                data.forEach((item, index) => {
                  //数据入表
                  that.add({
                    sectionCode: item.sectionCode,
                    flow: item.flow || 1000,
                    trafficStatus: item.trafficStatus || 1,
                    coordinates: JSON.stringify(coordinates)
                  })
                })
                that.add({ sectionCode: 0 })
              })
            }
          }
        }
        

add方法:

add(item) {
      const objectStore = db.transaction(['sections'], 'readwrite').objectStore('sections')
      objectStore.add(item)
    },

  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
Vue和Element UI提供了很好的前端工具和组件,可以帮助我们实现数据查询的功能。以下是一个简单的示例。 首先,我们需要在Vue项目中引入Element UI的库文件,可以通过npm安装或者使用CDN链接。 然后,在Vue的组件中,我们可以使用Element UI提供的表单组件,比如Input、Select等来实现查询条件的输入。 接着,我们可以使用Element UI的按钮组件来触发查询操作。 在查询操作被触发时,我们可以在Vue的data选项中定义一个空的数组,用于存储查询后的数据。 我们可以利用Vue的生命周期钩子函数中的created方法,在组件初始化时,调用后端接口获取初始数据。 在created方法中,我们可以使用axios或者其他HTTP库来发送GET请求,获取数据并保存到data选项中定义的数组中。 此时,页面就会显示出查询后的数据。 最后,我们可以在页面上使用Element UI的表格组件来展示数据,通过绑定data选项中的数组来动态渲染表格内容。 需要注意的是,我们可能需要对数据进行分页、排序等处理,这些可以通过Element UI提供的分页组件和表格的相关属性来实现。 总结起来,使用Vue和Element UI可以很方便地实现数据查询的前端功能。我们可以利用Element UI的表单组件和按钮组件来输入查询条件和触发查询操作,使用HTTP库发送请求获取数据,再利用Element UI的表格组件展示数据。同时,可以使用分页组件和表格属性来处理分页和排序等需求。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

辣姐什么鬼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值