老规矩,先挂官网链接
https://www.npmjs.com/package/idb-js

关于indexDB 是什么,用到什么地方我就不再解释,百度多得很,只说我在使用的过程中的一些问题

官网解释:
在这里插入图片描述

引入及简单使用

安装:

npm install idb-js --save

使用:

  • 第一步:引入db
import Idb from 'idb-js'  //  引入Idb
  • 第二步:引入数据库配置
import db_student_config from './db_student_config'
  • 第三步:载入配置,数据库开启成功拿到数据库实例进行操作
Idb(db_student_config).then(student_db => {...})

数据库实例 db 方法

(拣选几条常用)

  • close_db - 关闭数据库
  • delete_db - 删除数据库
  • clear_table - 清空某张表的数据
  • insert - 添加单条或者多条数据
  • query - 查询匹配到的数据
  • queryAll - 查询某张表的所有数据
  • delete - 删除数据
  • update - 修改数据

官网举例

数据库配置

 // in db_student_config.js

    export default {
        dbName: "student",                          // *数据库名称
        version: 1,                                 // 数据库版本号(默认为当前时间戳)
        tables: [                                   // *数据库的表,即ObjectStore
            {
                tableName: "grade",                 // *表名
                option: { keyPath: "id" },          // 表配置,即ObjectStore配置,此处指明主键为id
                indexs: [                           // 数据库索引(建议加上索引)
                    {
                        key: "id",                  // *索引名
                        option:{                    // 索引配置,此处表示该字段不允许重复
                            unique: true
                        }
                    },
                    {
                        key: "name"
                    },
                    {
                        key: "score"
                    }
                ]
            },
            {
                tableName: "info",                      // *表名 另外一张表,同理
                option: { keyPath: "id" },
                indexs: [
                    {
                        key: "id",
                        option:{
                            unique: true
                        }
                    },
                    {
                         key: "name"
                    },
                    {
                         key: "age"
                    },
                    {
                         key: "sex"
                    }
                ]
            }
        ]
    };

使用:

// 载入数据配置,数据库开启成功后会拿到db来对数据库进行操作

    import Idb from 'idb-js'  //  引入Idb
    import db_student_config from './db_student_config'   //  引入数据库配置

    Idb(db_student_config).then(student_db => {     //  载入配置,数据库开启成功后返回该数据库实例

       /**
        * @method close_db 关闭此数据库
        * */

        student_db.close_db();


        /**
        * @method delete_db 删除此数据库
        * */

        student_db.delete_db();


        /**
        * @method 增加单条数据
        * */

        student_db.insert({
                tableName: "grade",
                data: {
                    id: 1,
                    score: 98,
                    name: "小明"
                },
                success: () => console.log("添加成功")
        });
       
       
       /**
        * @method 增加多条数据
        * */

        student_db.insert({
                tableName: "grade",
                data: [{
                    id: 1,
                    score: 98,
                    name: "小明"
                },{
                    id: 2,
                    score: 99,
                    name: "小方"
                }],
                success: () => console.log("添加成功")
        });


        /**
        * @method 查询数据(游标)
        * */

        student_db.query({
            tableName: "grade",
            condition: (item)=> item.score == 100,
            success: r => {
                console.log(r);
            }
        });
      
       
        /**
        * @method 修改数据
        * */

        student_db.update({
            tableName: "grade",
            condition:item => item.name == '小明',
            handle: r => {
                r.score = 80;
            },
            success: r => {
                console.log("修改成功", r);
            }
        });
        


       /**
        * @method 删除数据
        * */

        student_db.delete({
          tableName: "grade",
          condition: (item)=> item.name == '小明',
          success: (res) => {
            console.log("删除成功");
          }
        });



        /**
        * @method 查询某张表的所有数据
        * */
        student_db.queryAll({
            tableName: "grade",
            success: (res) => {
                console.log(res)
            }
        });



        /**
        * @method 根据主键查询某条数据
        * */
        student_db.query_by_primaryKey({
            tableName:'grade',
            target:1,
            success:(res)=>{console.log(res)}
        })


        /**
        * @method 根据索引查询某条数据
        * */
        student_db.query_by_index({
            tableName:'grade',
            indexName:'name',
            target:'小明',
            success:(res)=>{console.log(res)}
        })

        /**
        * @method 清空某张表的数据
        * */
        student_db.clear_table({
            tableName:'grade'
        })

        /**
        * @method 通过主键删除某条数据
        * */
        student_db.delete_by_primaryKey({
            tableName:'grade',
            target:1,
            success:()=>console.log('删除成功')
        })


        /**
        * @method 通过主键更改某条数据
        * */
        student_db.update_by_primaryKey({
            tableName: "grade",
            target: 1,
            handle: val => (val.score = 101),
            success: res => {
                console.log(res);
            }
        });
    },err => {
        console.log(err)
    });

自用问题总结

自用配置文件:

export default {
  dbName: 'peopleInfo',
  verison: 1,
  tables: [
    {
      tableName: 'info', // 表名
      option: {
        keyPath: 'id'
      }, // 表配置
      indexs: [
        {
          key: 'id',
          options: {
            unique: true
          }
        },
        {
          key: 'colCard',
          options: {
            unique: true
          }
        },
        {
          key: 'colName'
        },
        {
          key: 'colPhone'
        },
        {
          key: 'type'
        }
      ]
    }
  ]
}
  • 问题:关于option: { keyPath: ‘id’ } 报错问题

这个也算是个遗留问题,刚开始看文档说明是主键就可以,根据数据库知识,主键叫啥名字都可以,所以我写成了 colCard 的字段,也就是身份证号,配置文件中就写成了 { keyPath: ‘colCard’ },但是一直报错。
后面没办法就还是写成了 id ,并且把数据序号 index 存成了 id。就成功了,置于为啥报错,这是不是最简洁的修改方式,欢迎大家跟我交流。

  • 问题: 关于全局使用 idb 的问题

我们看到官网只是引入了,直接使用,根据官网代码我们看到 idb 是个异步的东西,直觉类似于 axios。
此时我们想要全局使用,就可以参考 axios 的全局使用方式,进行全局封装。
但是为了方便我没有封装,只是简单全局引入了一下,使用 then 进行处理结果。

import Idb from 'idb-js'
Vue.prototype.$peopleDB = Idb(peopleInfoDB) // 挂载全局

然后我们在页面中直接使用:

const _vm = this
this.$peopleDB.then(data => {
  data.queryAll({
    tableName: 'info',
    success: result => {
      if (result.length !== 0 && result.length == _vm.raatio) {
        _vm.list = result
        _vm.$store.dispatch("people/setPeopleInfo", result)
      }
    } 
  })
})

其他使用方法同理,当然后续有时间完全可以二次封装。

Logo

前往低代码交流专区

更多推荐