关于indexeddb:indexedDB学习资料

<template>
  <div class="container">
      <el-button type="primary" @click="closeDB"> 敞开此数据库 </el-button>
      <el-button type="primary" @click="deleteDB"> 删除此数据库 </el-button>
      <el-button type="primary" @click="insertOneData"> 减少单条数据 </el-button>
      <el-button type="primary" @click="insertMoreData"> 减少多条数据 </el-button>
      <el-button type="primary" @click="queryData"> 查问数据（游标）</el-button>
      <el-button type="primary" @click="updateData"> 批改数据 </el-button>
      <el-button type="primary" @click="deleteOneData"> 删除一条数据 </el-button>
      <el-button type="primary" @click="queryAllData"> 查问某张表的所有数据 </el-button>
      <el-button type="primary" @click="queryByPrimaryKey"> 依据主键查问某条数据 </el-button>
      <el-button type="primary" @click="queryByIndex"> 依据索引查问某条数据 </el-button>
      <el-button type="primary" @click="clearTable"> 清空某张表的数据 </el-button>
      <el-button type="primary" @click="deleteByPrimaryKey"> 通过主键删除某条数据 </el-button>
      <el-button type="primary" @click="updateByPrimaryKey"> 通过主键更改某条数据 </el-button>
  </div>
</template>

<script>
/**
 * 形容
 * @date 2021-11-22
 * @des  参考：https://www.npmjs.com/package/idb-js?activeTab=dependencies
 * @装置 npm install idb-js --save
 */
import Idb from "idb-js";
import db_student_config from "../common/db_common_config";
export default {data() {
        return {student_db: null,};
    },
    mounted() {Idb(db_student_config).then((student_db) => {this.student_db = student_db;},
            (err) => {console.log(err);
            }
        );
    },
    methods: {closeDB() {this.student_db.close_db();
        },
        deleteDB() {this.student_db.delete_db();
        },
        insertOneData() {
            this.student_db.insert({
                tableName: "test1",
                data: {
                    id: 3,
                    score: 100,
                    name: "小刚",
                },
                success: () => console.log("增加胜利"),
            });
        },
        insertMoreData() {
            this.student_db.insert({
                tableName: "test1",
                data: [
                    {
                        id: 1,
                        score: 98,
                        name: "小明",
                    },
                    {
                        id: 2,
                        score: 99,
                        name: "小方",
                    },
                ],
                success: () => console.log("增加胜利"),
            });
        },
        queryData() {
            this.student_db.query({
                tableName: "test1",
                condition: (item) => item.score == 99,
                success: (r) => {console.log(r);
                },
            });
        },
        updateData() {
            this.student_db.update({
                tableName: "test1",
                condition: (item) => item.name == "小明",
                handle: (r) => {r.score = 80;},
                success: (r) => {console.log("批改胜利", r);
                },
            });
        },
        deleteOneData() {
            this.student_db.delete({
                tableName: "test1",
                condition: (item) => item.name == "刚",
                success: (res) => {console.log("删除胜利");
                },
            });
        },
        queryAllData() {
            this.student_db.queryAll({
                tableName: "test1",
                success: (res) => {console.log(res);
                },
            });
        },
        queryByPrimaryKey() {
            this.student_db.query_by_index({
                tableName: "test1",
                indexName: "name",
                target: "小明",
                success: (res) => {console.log(res);
                },
            });
        },
        queryByIndex() {
            this.student_db.query_by_primaryKey({
                tableName: "test1",
                target: 1,
                success: (res) => {console.log(res);
                },
            });
        },
        clearTable() {
            this.student_db.clear_table({tableName: "test1",});
        },
        deleteByPrimaryKey() {
            this.student_db.delete_by_primaryKey({
                tableName: "test1",
                target: 1,
                success: () => console.log("删除胜利"),
            });
        },
        updateByPrimaryKey() {
            this.student_db.update_by_primaryKey({
                tableName: "test1",
                target: 1,
                handle: (val) => (val.score = 101),
                success: (res) => {console.log(res);
                },
            });
        },
    },
};
</script>

<style scoped lang="less">
.container{padding: 50px;}
.el-button {margin-bottom: 20px;}
</style>

db_common_config.js

export default {
    dbName: "test-DB", // * 数据库名称
    version: 1, // 数据库版本号（默认为以后工夫戳）tables: [
        // * 数据库的表，即 ObjectStore
        {
            tableName: "test1", // * 表名
            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"}
            ]
        }
    ]
};