<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" } ] } ]};