forked from ccsens_fe/tall-mui-3
wangrongrong
4 years ago
11 changed files with 420 additions and 80 deletions
@ -1,45 +1,45 @@ |
|||
{ |
|||
"pages": [ |
|||
{ |
|||
"path": "pages/index/index", |
|||
"style": { |
|||
"navigationStyle": "custom" , |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/plugin-test/plugin-test", |
|||
"style": { |
|||
"navigationBarTitleText": "iframe-测试" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/rich-text/rich-text", |
|||
"style": { |
|||
"navigationBarTitleText": "rich-text 测试" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/pinch/pinch", |
|||
"style": { |
|||
"navigationBarTitleText": "pinch 测试" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "components/Title/Title", |
|||
"style": { |
|||
"navigationStyle": "custom" , |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
} |
|||
], |
|||
"globalStyle": { |
|||
"navigationBarTextStyle": "black", |
|||
"navigationBarTitleText": "uni-app", |
|||
"navigationBarBackgroundColor": "#F8F8F8", |
|||
"backgroundColor": "#F8F8F8" |
|||
}, |
|||
"easycom": { |
|||
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" |
|||
} |
|||
} |
|||
{ |
|||
"pages": [ |
|||
{ |
|||
"path": "pages/index/index", |
|||
"style": { |
|||
"navigationStyle": "custom" , |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/plugin-test/plugin-test", |
|||
"style": { |
|||
"navigationBarTitleText": "iframe-测试" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/rich-text/rich-text", |
|||
"style": { |
|||
"navigationBarTitleText": "rich-text 测试" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/pinch/pinch", |
|||
"style": { |
|||
"navigationBarTitleText": "pinch 测试" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "components/Title/Title", |
|||
"style": { |
|||
"navigationStyle": "custom" , |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
} |
|||
], |
|||
"globalStyle": { |
|||
"navigationBarTextStyle": "black", |
|||
"navigationBarTitleText": "uni-app", |
|||
"navigationBarBackgroundColor": "#F8F8F8", |
|||
"backgroundColor": "#F8F8F8" |
|||
}, |
|||
"easycom": { |
|||
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" |
|||
} |
|||
} |
|||
|
|||
@ -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项目表
|
|||
Vue.prototype.$db.projects = db.createObjectStore('projects', { keyPath: 'id' }); |
|||
!db.objectStoreNames.contains('projects') && db.createObjectStore('projects', { keyPath: 'id' }); |
|||
// roles 角色表
|
|||
Vue.prototype.$db.roles = db.createObjectStore('roles', { keyPath: 'id' }); |
|||
!db.objectStoreNames.contains('roles') && db.createObjectStore('roles', { keyPath: 'id' }); |
|||
// 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 固定全局任务
|
|||
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 可变全局任务
|
|||
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 插件表
|
|||
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 => { |
|||
Vue.prototype.$db = {}; |
|||
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.onsuccess = event => { |
|||
console.log('INDEXED_DB OPEN SUCCESS'); |
|||
Vue.prototype.$db.db = event.target.result; |
|||
}; |
|||
request.onupgradeneeded = event => { |
|||
console.log('INDEXED_DB OPEN onupgradeneeded'); |
|||
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 }; |
|||
|
|||
Loading…
Reference in new issue