From df8ee5652fbdbfd4c431a7bb9f1234702c9381b2 Mon Sep 17 00:00:00 2001 From: douzhuo <17611323298@163.com> Date: Tue, 16 Aug 2022 11:58:03 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9Edb.js=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/util/indexedDb.js | 243 +++++++++++++++++++++++++++++++ src/views/admin/log/log.vue | 2 +- src/views/admin/log/msg copy.vue | 83 ----------- 3 files changed, 244 insertions(+), 84 deletions(-) create mode 100644 src/util/indexedDb.js delete mode 100644 src/views/admin/log/msg copy.vue diff --git a/src/util/indexedDb.js b/src/util/indexedDb.js new file mode 100644 index 0000000..94f1e92 --- /dev/null +++ b/src/util/indexedDb.js @@ -0,0 +1,243 @@ +export default { + // indexedDB 兼容 + indexedDB: window.indexedDB || window.webkitindexedDB || window.msIndexedDB || window.mozIndexedDB, + + /** + * 打开数据库 + * 新对象存储空间newStore参数：newStore.name、newStore.key + * 新增对象存储空间要更改数据库版本 + * @param {数据库名称} dbname + * @param {版本} version + * @param {数据库} db + * @param {配置} newStore + * @param {回调函数} callback + * */ + openDB(dbname, version, newStore, callback) { + let db + version = version || 1; + const request = this.indexedDB.open(dbname, version); + + // 打开失败回调 + request.onerror = function () { + throw "IndexedDb数据库打开错误" + } + + // 打开成功回调 + request.onsuccess = function(event) { + db = event.target.result; + if (callback && (typeof callback === 'function')) { + callback(db); + } + } + + // 调用创建新的存储空间 + request.onupgradeneeded = function(event) { + db = event.target.result; + if (newStore) { + if (!db.objectStoreNames.contains(newStore.name)) { + const objectStore = db.createObjectStore(newStore.name, { + keyPath: newStore.key + }) + + newStore.index.forEach(item => { + objectStore.createIndex(`${item}_index`, item, { + unique: false + }) + }) + } + } + } + }, + + /** + * 删除数据库 + * @params {*} dbname + * @params {*} callback + * */ + deleteDb(dbname, callback) { + const deleteQuest = this.indexedDB.deleteDatabase(dbname); + deleteQuest.onerror = function() { + throw "删除数据库出错"; + } + + deleteQuest.onsuccess = function() { + if (callback && (typeof callback === 'function')) { + callback(); + } + } + }, + + /** + * 关闭数据库 + * @params {*} dbname + * */ + closeDB(dbname) { + dbname.close(); + }, + + /** + * 删除数据 + * @params {*} db + * @params {*} storename + * @params {*} key + * @params {*} callback + * */ + deleteData(db, storename, key, callback) { + const store = db.transaction(storename, 'readwrite').objectStore(storename) + const request = store.delete(key); + request.onsuccess = function() { + if (callback && (typeof callback === 'function')) { + callback(`删除${storename}成功`) + } + } + request.onerror = function() { + if (callback && (typeof callback === 'function')) { + callback(`删除${storename}失败`) + } + } + }, + + + /** + * 清空数据 + * @params {*} db + * @params {*} storename + * @params {*} callback + * */ + clearData(db, storename, callback) { + const store = db.transaction(storename, 'readwrite').objectStore(storename); + const request = store.clear(); + + request.onsuccess = function() { + if (callback && (typeof callback === 'function')) { + callback(`清空${storename}成功`) + } + } + request.onerror = function() { + if (callback && (typeof callback === 'function')) { + callback(`清空${storename}失败`) + } + } + }, + + + /** + * 添加数据 + * @params {*} db + * @params {*} storename + * @params {*} obj + * */ + addData(db, storename, list) { + const store = db.transaction(storename, 'readwrite').objectStore(storename); + list.forEach(ls => { + const request = store.add(ls); + request.onsuccess = function() { + console.log(`写入${storename}数据成功`) + } + request.onsuccess = function() { + console.log(`写入${storename}数据失败`) + } + }) + }, + + /** + * 更新数据 + * @params {*} db + * @params {*} storename + * @params {*} obj + * */ + updateData(db, storename, list) { + const store = db.transaction(storename, 'readwrite').objectStore(storename); + list.forEach(ls => { + const request = store.put(ls); + request.onsuccess = function() { + console.log(`更新${storename}数据成功`) + } + request.onsuccess = function() { + console.log(`更新${storename}数据失败`) + } + }) + }, + + /** + * 根据主键获取数据 + * @params {*} db + * @params {*} storename + * @params {*} key + * @return + * */ + getData(db, storename, key) { + const store = db.transaction(storename, 'readwrite').objectStore(storename); + const request = objectStore.get(key); + request.onerror = function() { + console.log(`获取${storename} 里主键 ${key} 的数据失败`) + } + return new Promise(resolve => { + request.onsuccess = function(e) { + resolve(e.target.result) + } + }) + }, + + + /** + * 根据索引获取数据 + * @params {*} db + * @params {*} storename + * @params {*} field + * @params {*} val + * @return + * */ + getDataByIndex(db, storename, field, val) { + const store = db.transaction(storename, 'readwrite').objectStore(storename); + const index = store.index(`${field}_index`); + const request = index.get(val) + return new Promise(resolve => { + request.onsuccess = function(e) { + resolve(e.target.result) + } + }) + }, + + /** + * 获取全部数据 + * @params {*} db + * @params {*} storename + * @return + * */ + getAllData(db, storename) { + const store = db.transaction(storename, 'readwrite').objectStore(storename); + const request = store.openCursor(); + + let data = []; + return new Promise(resolve => { + request.onsuccess = function(e) { + let cursor = e.target.result; + if (cursor) { + data.push(cursor.value); + cursor.continue(); + } else { + resolve(data) + } + } + }) + }, + + /** + * 遍历全部数据，判断是否已存在数据库 + * @params {*} allDbData + * @params {*} key + * @return + * */ + readAllData(allDbData, key) { + let flagIndex + allDbData.then((result) => { + flagIndex = result.findIndex(val => { + return (val.name == key) + }) + }) + return flagIndex; + } + + +} \ No newline at end of file diff --git a/src/views/admin/log/log.vue b/src/views/admin/log/log.vue index dd691ae..f5ae618 100644 --- a/src/views/admin/log/log.vue +++ b/src/views/admin/log/log.vue @@ -3,7 +3,7 @@
-
-
- - -
-
- 确定 -
-
- - - - -