功能设计
再重温一下：
如图：
功能设计
功能测试
封装完毕，要写个测试代码来跑一跑，否则怎么知道到底好不好用呢。
于是写了一个比较简单的测试代码。
建立对象库
dbOpen().then(() =>{
// 建表初始化之后，获取全部对象
getAll()
})
- dbOpen
打开数据库，同时判断是否需要建立数据库，如果需要的话，会根据配置信息自动建立数据库
然后我们按F12，打开Application标签，可以找到我们建立的数据库，如图：
建数据库.png
我们可以看一下索引的情况，如图：
02索引.png
添加对象
addObject('blog',{
id: new Date().valueOf(),
groupId: 1,
title: '这是三个博客',
addTime: '2020-10-15',
introduction: '这是博客简介',
concent: '这是博客的详细内容<br>第二行',
viewCount: 1,
agreeCount: 1
}).then((data) => {
re.value = data
getAll()
})
-
仓库名
第一个参数是对象仓库的名称，目前暂时采用字符串的形式。 -
对象
第二个参数是要添加的对象，其属性必须有主键和索引，其他随意。 -
返回值
成功后会返回对象ID
点右键可以刷新数据，如图：
03刷新.png
更新后的数据，如图：
04新数据.png
修改对象
updateObject('blog',blog).then((data) => {
re.value = data
getAll()
})
-
仓库名
第一个参数是对象仓库的名称，目前暂时采用字符串的形式。 -
对象
第二个参数是要修改的对象，属性可以不全。 -
返回值
成功后会返回对象ID
删除对象
deleteObject('blog',id).then((data) => {
re.value = data
getAll()
})
-
仓库名
第一个参数是对象仓库的名称，目前暂时采用字符串的形式。 -
对象
第二个参数是要删除的对象的ID。 -
返回值
成功后会返回对象ID
清空仓库里的对象
clearStore('blog').then((data) => {
re.value = data
getAll()
})
-
仓库名
第一个参数是对象仓库的名称，目前暂时采用字符串的形式。 -
返回值
成功后会返回对象ID
删除对象仓库
deleteStore('blog').then((data) => {
re.value = data
getAll()
})
-
仓库名
第一个参数是对象仓库的名称，目前暂时采用字符串的形式。 -
返回值
成功后会返回对象ID
删除数据库
deleteDB('dbTest').then((data) => {
re.value = data
getAll()
})
- 数据库名称
第一个参数是数据库的名称
查询功能
// 查询条件
const findInfo = {
indexName: 'groupId',
indexKind: '=', // '>','>=','<','<=','between',
indexValue: 1,
betweenInfo: {
v1:1,
v2:2,
v1isClose:true,
v2isClose:true,
},
where: (object) => {
if (findKey.value == '') return true
let re = false
if (object.title.indexOf(findKey.value) >= 0) {
re = true
}
if (object.introduction.indexOf(findKey.value) >= 0) {
re = true
}
if (object.concent.indexOf(findKey.value) >= 0) {
re = true
}
return re
}
}
const find = () => {
findObject('blog', findInfo).then((data) => {
findRe.value = data
})
}
-
findInfo
查询信息的对象，把需要查询的信息都放在这里 -
indexName
索引名称，可以不设置。 -
indexKind
索引属性的查询方式，如果设置indexName，则必须设置。 -
indexValue
索引字段的查询值 -
betweenInfo
如果 indexKind = 'between' 的话，需要设置。 -
v1
开始值 -
v2
结束值 -
v1isClose
是否闭合区间 -
v2isClose
是否闭合区间 -
where
钩子函数，可以不设置。
内部打开游标后，会把对象返回来，然后我们就可以在这里进行各种条件判断。
全部代码就不贴了，感兴趣的话可以去GitHub看。
贴一个折叠后的效果图吧：
05代码截图.png
就是先把相关的功能和在一起，写一个操作类，然后在setup里面应用这个类就可以了，然后写点代码把各个类关联起来即可。
这样代码好维护多了。
小结
功能不是很完善，目前是自己够用的程度。
本来想用纯js来写个使用方式的，但是发现还是用vue写着方便，于是测试代码就变成了vue的形式。
源码
https://github.com/naturefwvue/nf-vue-cnd/tree/main/cnd/LocalStore/IndexedDB
在线演示
https://naturefwvue.github.io/nf-vue-cnd/cnd/LocalStore/IndexedDB/
参考资料
官网：https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API
阮一峰的网络日志：http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
网友评论