/**
* 这是前端浏览器indexDB工具类
* 可实现创建数据库增删改查操作
* date 20220626 author by lin
*/
export class dbActive{
/**
* 构造函数
* @param dbname type string 数据库名称
* @param tbName type []表对象名称多个表数组
* @param field type obj表字段对象,直接传入新增数据的对象如{height:15},那么将height作为字段名
*/
constructor(dbname, tbName,field) {
this.db = null; //数据库对象
this.tableName = tbName; //表格名称[]
this.dbName = dbname //数据库名称 myDB
this.dataList = [];
this.field = field;
this.result = {success:true,msg:"操作成功",data:[]} //默认返回样式
}
/**
* 由于初始化数据库是异步函数,此时需用await等待其执行完毕,先调用此函数
* @param v 版本号默认为1,
* @returns {Promise<unknown>}
*/
async initDB(v) {
v = v > 1 ? v :1
return new Promise(resolve => {
let request = indexedDB.open(this.dbName,v);
// error 回调
request.onerror = event => {
console.log('数据库打开/创建报错', event)
//如果是版本引起错误,提取当前版本
if(event.target.error.message.indexOf('requested version')) {
let versionArray = event.target.error.message.match(/\d+(.\d+)?/g) //提取错误信息,将当前版本号提取出来
resolve(this.initDB(versionArray[1]))
//alert(event.target.error.message)
}
else{
this.result.msg = event.target.error.message
this.result.success = false
resolve(this.result)
}
}
//如果指定的版本号,大于数据库的实际版本号,就会发生数据库升级事件upgradeneeded。
//升级后自动触发success
request.onupgradeneeded = event => {
this.db = event.target.result;
//建表 名为person,主键为id
this.tableName.map((item)=>{
if (this.db.objectStoreNames.contains(item)) { // 判断表是否存在
this.db.deleteObjectStore(item);
}
//主键自增ID
let store = this.db.createObjectStore(item, {
keyPath: 'id',autoIncrement: true
});
for (let key in this.field) {
// arrayColors.push(key);
//新建索引名称、索引所在的属性、配置对象(说明该属性是否允许有重复的值)
store.createIndex(key, key, {
unique: false
});
}
})
console.log('数据库升级')
}
// success
request.onsuccess = event => {
this.db = event.target.result;
// if (!this.db.objectStoreNames.contains(this.tableName)) { // 判断表是否存在
// //建表 名为person,主键为id
// this.tableName.map((item)=>{
// //主键自增ID
// let store = this.db.createObjectStore(item, {
// keyPath: 'id',autoIncrement: true
// });
// for (let key in this.field) {
// // arrayColors.push(key);
// //新建索引名称、索引所在的属性、配置对象(说明该属性是否允许有重复的值)
//
// store.createIndex(key, key, {
// unique: false
// });
// }
// })
//
// }
console.log('数据库打开/创建成功', event)
this.db.onversiοnchange=e=>{
this.db.close() // 关闭连接
console.log("页面内容已过期,请刷新");
}
resolve(this.getList());
}
});
}
/**
* 删除数据库
* @param dbName
* @returns {Promise<unknown>}
*/
databaseDel(dbName){
return new Promise((resolve => {
let request = indexedDB.open(dbName);
request.onerror = ev => {
resolve({msg:'数据库打开失败,无法删库',success:false})
}
request.onsuccess = ev => {
window.indexedDB.deleteDatabase(dbName)
resolve({msg:'删除数据库成功',success:true})
}
}))
}
/**
* 新增
* @param table 目标表格
* @param person 数据
* @returns {Promise<void>}
*/
async clickAdd(table,person) {
let tbName = table
if(!tbName) {
tbName = this.tableName[0]
}
return new Promise(resolve => {
// 建立读写事务,向对象仓库写入数据记录
// person.id = new Date().getTime()
let request = this.db.transaction([tbName], 'readwrite').objectStore(tbName).add(person)
request.onsuccess = event => {
console.log(event.target.result)
this.result.success = true
this.result.msg = '新增成功'
this.result.lastid = event.target.result
resolve ( this.result)
};
request.onerror = event => {
this.result.msg="重复数据写入失败"
this.result.success = false
resolve( this.result)
}
})
// return this.dataList;
}
/**
* 关键词模糊查询特定表数据
* @param table
* @param keyword
* @returns {Promise<unknown>}
*/
fuzzySearch(table,keyword){
return new Promise((resolve)=>{
let tbName = table
if (!tbName) {
tbName = this.tableName[0]
}
let list=[];
const store = this.db.transaction([tbName]).objectStore(tbName)
const request = store.getAll()
request.onsuccess = (e) => {
// console.log(e.target.result);
if (!keyword) {
list= e.target.result
}
else{
let data = e.target.result
data.forEach((item)=>{
let value = Object.values(item).join(";");
if ( !!~value.toUpperCase().indexOf(keyword.toUpperCase()) ) {
list.push(data)
}
})
}
this.result.success = true
this.result.data = list
resolve(this.result)
}
request.onerror = () => {
console.log('查询失败');
this.result.success = false
reject(this.result)
}
})
}
/**
* 索引查询数据
* @param table 名称
* @param param 参数
* @param filed 查找的字段
* @returns {Promise<unknown>}
*/
async read(table,param,filed) {
let tbName = table
if(!tbName) {
tbName = this.tableName[0]
}
return new Promise((resolve => {
let transaction = this.db.transaction([tbName]);
let objectStore = transaction.objectStore(tbName);
let request = null
if (!filed)
request = objectStore.get(param);
else{
//通过索引获取数据
request = this.db.transaction([tbName], 'readonly').objectStore(tbName).index(filed).get(param);
}
request.onerror = function(event) {
console.log('获取列表失败');
this.result.msg = '获取列表失败'
this.result.success = false
resolve(this.result)
};
request.onsuccess = function(event) {
this.result.success = true
if (request.result) {
this.result.data = request.result
resolve(this.result)
} else {
console.log('未获得数据记录');
this.result.msg = "查为空"
resolve(this.result)
}
};
}))
}
/**
* 获取表所有数据
* @param table 获取的目标对象仓库如果没有,则默认tablename[0]
* @returns {*[]}
*/
async getList(table) {
return new Promise((resolve, reject) => {
let tbName = table
if (!tbName) {
tbName = this.tableName[0]
}
const store = this.db.transaction([tbName]).objectStore(tbName)
const request = store.getAll()
request.onsuccess = (e) => {
this.result.success = true
// console.log(e.target.result);
this.result.data = e.target.result
resolve(this.result)
}
request.onerror = () => {
console.log('查询失败');
this.result.success = false
resolve(this.result)
}
})
}
/**
* 批量更新数据
* @param table 目标表格对象
* @param data 数据值[]
*/
update(table,data) {
let tbName = table
if(!tbName) {
tbName = this.tableName[0]
}
let msg = ''
return new Promise(resolve => {
if(data.constructor == Object){
let request = this.db.transaction([tbName], 'readwrite').objectStore(tbName).put(data)
request.onsuccess = event => {
console.log('数据更新成功')
msg+= '更新成功'
}
request.onerror = event => {
console.log('数据更新失败')
msg+= '更新失败'
}
}
else if(data.constructor == Array) {
data.map((item) => {
let request = this.db.transaction([tbName], 'readwrite').objectStore(tbName).put(item)
request.onsuccess = event => {
console.log('更新成功')
msg += '更新成功'
}
request.onerror = event => {
console.log('更新失败')
msg += '更新失败'
}
})
}
this.result.msg = msg
this.result.success = true
resolve(this.result)
})
}
/**
* 删除
* @param table 目标表格
* @param id 主键ID
* @returns {Promise<unknown>}
*/
clickDel(table,id) {
let tbName = table
if(!tbName) {
tbName = this.tableName[0]
}
return new Promise(resolve => {
if(id.constructor ==Array){
id.map((item)=>{
let request = this.db.transaction([tbName], 'readwrite')
.objectStore(tbName)
.delete(item);
request.onsuccess = event => {
this.notify('删除成功')
};
request.onerror = event => {
this.notify('删除失败')
}
})
resolve ( this.getList(tbName))
}
else{
let request = this.db.transaction([tbName], 'readwrite')
.objectStore(tbName)
.delete(id);
request.onsuccess = event => {
this.notify('删除成功')
resolve (this.getList(tbName))
};
request.onerror = event => {
this.notify('删除失败')
this.result.success = false
this.result.msg='删除失败'
resolve(this.result)
}
}
})
}
notify=(msg)=> {
console.log(msg)
}
}