10 changed files with 364 additions and 35 deletions
@ -0,0 +1,21 @@ |
|||||
|
<template> |
||||
|
<view class="container p-3"> |
||||
|
<u-button type="primary" @click="add">add</u-button> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
components: {}, |
||||
|
data: () => ({}), |
||||
|
computed: {}, |
||||
|
methods: { |
||||
|
add() { |
||||
|
this.$db.create('projects', { id: '123' }); |
||||
|
}, |
||||
|
}, |
||||
|
watch: {}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style></style> |
||||
@ -1,33 +1,185 @@ |
|||||
import { name, version } from '@/config'; |
import { name } from '@/config/db'; |
||||
|
import { curry } from 'lodash'; |
||||
|
|
||||
// 创建表
|
// 创建表
|
||||
const createTable = (Vue, db) => { |
const createCollection = (Vue, db) => { |
||||
// projects项目表
|
// projects项目表
|
||||
Vue.prototype.$db.projects = db.createObjectStore('projects', { keyPath: 'id' }); |
!db.objectStoreNames.contains('projects') && db.createObjectStore('projects', { keyPath: 'id' }); |
||||
// roles 角色表
|
// roles 角色表
|
||||
Vue.prototype.$db.roles = db.createObjectStore('roles', { keyPath: 'id' }); |
!db.objectStoreNames.contains('roles') && db.createObjectStore('roles', { keyPath: 'id' }); |
||||
// plan_tasks 定期任务
|
// plan_tasks 定期任务
|
||||
Vue.prototype.$db.plan_tasks = db.createObjectStore('plan_tasks', { keyPath: 'id' }); |
!db.objectStoreNames.contains('plan_tasks') && db.createObjectStore('plan_tasks', { keyPath: 'id' }); |
||||
// fixed_tasks 固定全局任务
|
// fixed_tasks 固定全局任务
|
||||
Vue.prototype.$db.fixed_tasks = db.createObjectStore('fixed_tasks', { keyPath: 'id' }); |
Vue.prototype.$db.fixed_tasks = !db.objectStoreNames.contains('fixed_tasks') && db.createObjectStore('fixed_tasks', { keyPath: 'id' }); |
||||
// variable_tasks 可变全局任务
|
// variable_tasks 可变全局任务
|
||||
Vue.prototype.$db.variable_tasks = db.createObjectStore('variable_tasks', { keyPath: 'id' }); |
Vue.prototype.$db.variable_tasks = |
||||
|
!db.objectStoreNames.contains('variable_tasks') && db.createObjectStore('variable_tasks', { keyPath: 'id' }); |
||||
// plugins 插件表
|
// plugins 插件表
|
||||
Vue.prototype.$db.plugins = db.createObjectStore('plugins', { keyPath: 'id' }); |
Vue.prototype.$db.plugins = !db.objectStoreNames.contains('plugins') && db.createObjectStore('plugins', { keyPath: 'id' }); |
||||
}; |
}; |
||||
|
|
||||
|
/** |
||||
|
* 新增数据 |
||||
|
* |
||||
|
* @param {object} db 数据库database |
||||
|
* @param {string} collection 集合/表 |
||||
|
* @param {object} data 数据 |
||||
|
*/ |
||||
|
const create = (db, collection, data) => { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
const request = db.transaction([collection], 'readwrite').objectStore(collection).add(data); |
||||
|
|
||||
|
request.onsuccess = event => { |
||||
|
console.log(event); |
||||
|
// FIXME:
|
||||
|
resolve(event); |
||||
|
}; |
||||
|
|
||||
|
request.onerror = event => { |
||||
|
console.log(event); |
||||
|
// FIXME:
|
||||
|
reject(event); |
||||
|
}; |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 找到1条数据 |
||||
|
* |
||||
|
* @param {object} db 数据库database |
||||
|
* @param {string} collection 集合/表 |
||||
|
* @param {string} key 索引关键字 一般是id |
||||
|
*/ |
||||
|
const findOne = (db, collection, key) => { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
const request = db.transaction([collection]).objectStore(collection).get(key); |
||||
|
request.onerror = event => { |
||||
|
console.log('indexedDB findOne error:', event); |
||||
|
// FIXME:
|
||||
|
reject(event); |
||||
|
}; |
||||
|
request.onsuccess = event => { |
||||
|
console.log('indexedDB findOne success:', event); |
||||
|
// FIXME:
|
||||
|
resolve(event); |
||||
|
}; |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 找到所有数据 |
||||
|
* |
||||
|
* @param {object} db 数据库database |
||||
|
* @param {string} collection 集合/表 |
||||
|
*/ |
||||
|
const find = (db, collection) => { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
const request = db.transaction(collection).objectStore(collection).openCursor(); |
||||
|
request.onerror = event => { |
||||
|
console.log('indexedDB find error:', event); |
||||
|
reject(event); |
||||
|
}; |
||||
|
request.onsuccess = event => { |
||||
|
const cursor = event.target.result; |
||||
|
if (cursor) { |
||||
|
console.log('indexedDB find success:', cursor); |
||||
|
cursor.continue(); |
||||
|
// FIXME:
|
||||
|
resolve(event.target.result); |
||||
|
} else { |
||||
|
console.log('没有更多数据了'); |
||||
|
} |
||||
|
}; |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 更新数据 |
||||
|
* |
||||
|
* @param {object} db 数据库database |
||||
|
* @param {string} collection 集合/表 |
||||
|
* @param {object} newData 新数据 |
||||
|
*/ |
||||
|
const update = (db, collection, newData) => { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
const request = db.transaction([collection], 'readwrite').objectStore(collection).put(newData); |
||||
|
request.onerror = event => { |
||||
|
console.log('indexedDB UPDATE error:', event); |
||||
|
reject(event); |
||||
|
}; |
||||
|
request.onsuccess = event => { |
||||
|
console.log('indexedDB UPDATE success:', event); |
||||
|
// FIXME:
|
||||
|
resolve(event); |
||||
|
}; |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 移除数据 通过关键字 |
||||
|
* |
||||
|
* @param {object} db 数据库database |
||||
|
* @param {string} collection 集合/表 |
||||
|
* @param {string} key 关键字 |
||||
|
*/ |
||||
|
const remove = (db, collection, key) => { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
const request = db.transaction([collection], 'readwrite').objectStore(collection).delete(key); |
||||
|
request.onerror = event => { |
||||
|
console.log('indexedDB REMOVE error:', event); |
||||
|
reject(event); |
||||
|
}; |
||||
|
request.onsuccess = event => { |
||||
|
console.log('indexedDB REMOVE success:', event); |
||||
|
resolve(event); |
||||
|
}; |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 创建索引 |
||||
|
* |
||||
|
* @param {object} db 数据库database |
||||
|
* @param {string} collection 集合/表 |
||||
|
* @param {string} field 创建索引的字段名称 |
||||
|
* @param {string} key 关键字 |
||||
|
*/ |
||||
|
const createIndexAndFind = (db, collection, field, key) => { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
const index = db.transaction([collection], 'readonly').objectStore(collection).index(field); |
||||
|
const request = index.get(key); |
||||
|
// FIXME:
|
||||
|
request.onerror = event => reject(event); |
||||
|
request.onsuccess = event => resolve(event); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const curriedCreate = curry(create); |
||||
|
export const curriedFindOne = curry(findOne); |
||||
|
export const curriedFind = curry(find); |
||||
|
export const curriedRemove = curry(remove); |
||||
|
export const curriedUpdate = curry(update); |
||||
|
export const curriedIndex = curry(createIndexAndFind); |
||||
|
|
||||
const install = Vue => { |
const install = Vue => { |
||||
|
Vue.prototype.$db = {}; |
||||
Vue.prototype.$db.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; |
Vue.prototype.$db.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; |
||||
const request = window.indexedDB.open(name, version); // IDBRequest 对象
|
const request = Vue.prototype.$db.indexedDB.open(name, Date.now()); // IDBRequest 对象
|
||||
request.onerror = error => console.error('打开数据库失败', error); |
request.onerror = error => console.error('打开数据库失败', error); |
||||
request.onsuccess = event => { |
request.onsuccess = event => { |
||||
|
console.log('INDEXED_DB OPEN SUCCESS'); |
||||
Vue.prototype.$db.db = event.target.result; |
Vue.prototype.$db.db = event.target.result; |
||||
}; |
}; |
||||
request.onupgradeneeded = event => { |
request.onupgradeneeded = event => { |
||||
|
console.log('INDEXED_DB OPEN onupgradeneeded'); |
||||
Vue.prototype.$db.db = event.target.result; |
Vue.prototype.$db.db = event.target.result; |
||||
// 创建表
|
// 创建表
|
||||
createTable(Vue, Vue.prototype.$db.db); |
createCollection(Vue, Vue.prototype.$db.db); |
||||
}; |
}; |
||||
|
|
||||
|
// create
|
||||
|
console.log(curriedCreate(Vue.prototype.$db.db)); |
||||
|
Vue.prototype.$db.create = curriedCreate(Vue.prototype.$db.db); |
||||
}; |
}; |
||||
|
|
||||
export default { install }; |
export default { install }; |
||||
|
|||||
Loading…
Reference in new issue