db update
Former-commit-id: 3efab3f3c7cf7a34d78ebc1aebcf895fe1832970 [formerly 3efab3f3c7cf7a34d78ebc1aebcf895fe1832970 [formerly 3efab3f3c7cf7a34d78ebc1aebcf895fe1832970 [formerly 3efab3f3c7cf7a34d78ebc1aebcf895fe1832970 [formerly 3608951ec0d14f5fdda5f5c3d74ca1658b4c220a [formerly b3ea1a90fb68b439126a0e163a017e242a0a8dbd]]]]] Former-commit-id: 452ee4fcd7e53cad75c82f54925db50caf4da311 Former-commit-id: a6b77ca047f33d44ec3cc9c7311ad85fda1cbdaf Former-commit-id: 625313ff14d3e4a6c4496e0dbbc5d1e2e4624543 [formerly 7b93944ff7f9803377076bd9312f11c82ad60ddd] Former-commit-id: dab47fcc9792a84172a95410cf8359e31c7c08de Former-commit-id: e341761c086bb8eb5d842abf411189ec35699361 Former-commit-id: 2bada492361b11dc9e7c5e2eff0baaad7a1aa822 Former-commit-id: 66175c2c3ac72e9b31a66021d4d208c76348e70a Former-commit-id: b6844ade3e3cdfabb5e58010df6ad0ffa2b2da97
This commit is contained in:
liyang
@@ -40,7 +40,9 @@ export default {
|
|||||||
title: '数据持久化',
|
title: '数据持久化',
|
||||||
icon: 'database',
|
icon: 'database',
|
||||||
children: [
|
children: [
|
||||||
{ path: `${pre}db/util`, title: 'db.util', icon: 'cube' }
|
{ path: `${pre}db/all`, title: '全部数据', icon: 'table' },
|
||||||
|
{ path: `${pre}db/user`, title: '用户数据', icon: 'user' },
|
||||||
|
{ path: `${pre}db/public`, title: '公用数据', icon: 'users' }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
29
src/pages/demo/playground/db/all/index.vue
Normal file
29
src/pages/demo/playground/db/all/index.vue
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
<template>
|
||||||
|
<d2-container class="page">
|
||||||
|
<template slot="header">
|
||||||
|
<el-button type="primary" @click="load">
|
||||||
|
重新获取本地数据
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<d2-highlight :code="dbData"/>
|
||||||
|
</d2-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import db from '@/libs/db.js'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
dbData: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.load()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
load () {
|
||||||
|
this.dbData = JSON.stringify(db.value(), null, 2)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
118
src/pages/demo/playground/db/public/index.vue
Normal file
118
src/pages/demo/playground/db/public/index.vue
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
<template>
|
||||||
|
<d2-container class="page">
|
||||||
|
<template slot="header">持久化存储公用数据（所有用户共享）</template>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<p class="d2-mt-0">增加不重复字段</p>
|
||||||
|
<el-button @click="handleSetRandom">增加</el-button>
|
||||||
|
<p>增加自定义字段</p>
|
||||||
|
<el-input v-model="keyNameToSet" placeholder="字段名" class="d2-mr-5" style="width: 100px;"/>
|
||||||
|
<el-input v-model="valueToSet" placeholder="值" class="d2-mr-5" style="width: 100px;"/>
|
||||||
|
<el-button @click="handleSet">增加</el-button>
|
||||||
|
<p>删除字段</p>
|
||||||
|
<el-select
|
||||||
|
v-model="keyNameToDelete"
|
||||||
|
placeholder="请选择要删除的 key">
|
||||||
|
<el-option
|
||||||
|
v-for="item in keyNameList"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
<p>清空当前用户数据</p>
|
||||||
|
<el-button @click="handleClear">清空</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<d2-highlight :code="dataDisplay"/>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</d2-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import day from 'dayjs'
|
||||||
|
import { mapActions } from 'vuex'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
dataDisplay: '',
|
||||||
|
keyNameToSet: '',
|
||||||
|
valueToSet: '',
|
||||||
|
keyNameList: [],
|
||||||
|
keyNameToDelete: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
keyNameToDelete (value) {
|
||||||
|
if (value) {
|
||||||
|
this.handleDelete(value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.load()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions('d2admin/db', [
|
||||||
|
'database',
|
||||||
|
'databaseClear'
|
||||||
|
]),
|
||||||
|
/**
|
||||||
|
* 加载本地数据
|
||||||
|
*/
|
||||||
|
async load () {
|
||||||
|
const db = await this.database()
|
||||||
|
this.dataDisplay = JSON.stringify(db.value(), null, 2)
|
||||||
|
this.keyNameList = Object.keys(db.value()).map(k => ({
|
||||||
|
value: k,
|
||||||
|
label: k
|
||||||
|
}))
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 删除一个字段
|
||||||
|
*/
|
||||||
|
async handleDelete (name) {
|
||||||
|
const db = await this.database()
|
||||||
|
db
|
||||||
|
.unset(name)
|
||||||
|
.write()
|
||||||
|
this.load()
|
||||||
|
this.keyNameToDelete = ''
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 清空当前用户的数据
|
||||||
|
*/
|
||||||
|
async handleClear () {
|
||||||
|
const db = await this.databaseClear()
|
||||||
|
// db 是已经清空了的数据库对象
|
||||||
|
this.load()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 添加一个数据
|
||||||
|
*/
|
||||||
|
async handleSet () {
|
||||||
|
if (this.keyNameToSet === '') {
|
||||||
|
this.$message.error('字段名不能为空')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const db = await this.database()
|
||||||
|
db
|
||||||
|
.set(this.keyNameToSet, this.valueToSet)
|
||||||
|
.write()
|
||||||
|
this.load()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 添加一个随机数据
|
||||||
|
*/
|
||||||
|
async handleSetRandom () {
|
||||||
|
const id = day().valueOf()
|
||||||
|
const db = await this.database()
|
||||||
|
db
|
||||||
|
.set(id, Math.round(id * Math.random()))
|
||||||
|
.write()
|
||||||
|
this.load()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
118
src/pages/demo/playground/db/user/index.vue
Normal file
118
src/pages/demo/playground/db/user/index.vue
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
<template>
|
||||||
|
<d2-container class="page">
|
||||||
|
<template slot="header">持久化存储用户数据（用户区分存储）</template>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<p class="d2-mt-0">增加不重复字段</p>
|
||||||
|
<el-button @click="handleSetRandom">增加</el-button>
|
||||||
|
<p>增加自定义字段</p>
|
||||||
|
<el-input v-model="keyNameToSet" placeholder="字段名" class="d2-mr-5" style="width: 100px;"/>
|
||||||
|
<el-input v-model="valueToSet" placeholder="值" class="d2-mr-5" style="width: 100px;"/>
|
||||||
|
<el-button @click="handleSet">增加</el-button>
|
||||||
|
<p>删除字段</p>
|
||||||
|
<el-select
|
||||||
|
v-model="keyNameToDelete"
|
||||||
|
placeholder="请选择要删除的 key">
|
||||||
|
<el-option
|
||||||
|
v-for="item in keyNameList"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
<p>清空当前用户数据</p>
|
||||||
|
<el-button @click="handleClear">清空</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<d2-highlight :code="dataDisplay"/>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</d2-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import day from 'dayjs'
|
||||||
|
import { mapActions } from 'vuex'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
dataDisplay: '',
|
||||||
|
keyNameToSet: '',
|
||||||
|
valueToSet: '',
|
||||||
|
keyNameList: [],
|
||||||
|
keyNameToDelete: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
keyNameToDelete (value) {
|
||||||
|
if (value) {
|
||||||
|
this.handleDelete(value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.load()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions('d2admin/db', [
|
||||||
|
'databaseByUser',
|
||||||
|
'databaseByUserClear'
|
||||||
|
]),
|
||||||
|
/**
|
||||||
|
* 加载本地数据
|
||||||
|
*/
|
||||||
|
async load () {
|
||||||
|
const db = await this.databaseByUser()
|
||||||
|
this.dataDisplay = JSON.stringify(db.value(), null, 2)
|
||||||
|
this.keyNameList = Object.keys(db.value()).map(k => ({
|
||||||
|
value: k,
|
||||||
|
label: k
|
||||||
|
}))
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 删除一个字段
|
||||||
|
*/
|
||||||
|
async handleDelete (name) {
|
||||||
|
const db = await this.databaseByUser()
|
||||||
|
db
|
||||||
|
.unset(name)
|
||||||
|
.write()
|
||||||
|
this.load()
|
||||||
|
this.keyNameToDelete = ''
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 清空当前用户的数据
|
||||||
|
*/
|
||||||
|
async handleClear () {
|
||||||
|
const db = await this.databaseByUserClear()
|
||||||
|
// db 是已经清空了的数据库对象
|
||||||
|
this.load()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 添加一个数据
|
||||||
|
*/
|
||||||
|
async handleSet () {
|
||||||
|
if (this.keyNameToSet === '') {
|
||||||
|
this.$message.error('字段名不能为空')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const db = await this.databaseByUser()
|
||||||
|
db
|
||||||
|
.set(this.keyNameToSet, this.valueToSet)
|
||||||
|
.write()
|
||||||
|
this.load()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 添加一个随机数据
|
||||||
|
*/
|
||||||
|
async handleSetRandom () {
|
||||||
|
const id = day().valueOf()
|
||||||
|
const db = await this.databaseByUser()
|
||||||
|
db
|
||||||
|
.set(id, Math.round(id * Math.random()))
|
||||||
|
.write()
|
||||||
|
this.load()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -1,116 +0,0 @@
|
|||||||
<template>
|
|
||||||
<d2-container>
|
|
||||||
<template slot="header">header</template>
|
|
||||||
<el-alert
|
|
||||||
:title="alertTitle"
|
|
||||||
type="success"
|
|
||||||
:closable="false"
|
|
||||||
class="d2-mb"/>
|
|
||||||
<el-row :gutter="10">
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-row :gutter="10">
|
|
||||||
<el-col :span="12">
|
|
||||||
<p class="d2-mt-0">dbName</p>
|
|
||||||
<el-input v-model="dbName" placeholder="dbName" disabled/>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<p class="d2-mt-0">path</p>
|
|
||||||
<el-input v-model="path" placeholder="path" disabled/>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row :gutter="10">
|
|
||||||
<el-col :span="12">
|
|
||||||
<p>key</p>
|
|
||||||
<el-input v-model="key" placeholder="key"/>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<p>value</p>
|
|
||||||
<el-input v-model="value" placeholder="value"/>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<p>存储</p>
|
|
||||||
<el-button @click="handleSet" class="d2-mb-10">保存 {{key}} = "{{value}}"</el-button>
|
|
||||||
<br>
|
|
||||||
<el-button @click="handleSetByUser">保存 {{key}} = "{{value}}" 当前用户</el-button>
|
|
||||||
<p>取值</p>
|
|
||||||
<el-button @click="handleGet" class="d2-mb-10">取值 key = "{{key}}"</el-button>
|
|
||||||
<br>
|
|
||||||
<el-button @click="handleGetByUser">取值 key = "{{key}}" 当前用户</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-card shadow="never">
|
|
||||||
<template slot="header">db.get('{{dbName}}').value()</template>
|
|
||||||
<div style="height: 400px; overflow: auto;">
|
|
||||||
<d2-highlight :code="dbData"/>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</d2-container>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { mapMutations, mapActions } from 'vuex'
|
|
||||||
import db from '@/libs/db.js'
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
dbName: 'db',
|
|
||||||
path: 'demo-playground-db-util',
|
|
||||||
key: 'demoKey',
|
|
||||||
value: 'demo text',
|
|
||||||
dbData: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
this.load()
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
alertTitle () {
|
|
||||||
return `依据当前设置，数据将会在 "${this.dbName}" 数据库下的 "${this.path}.${this.key}" 路径下更新，请在右侧数据中查看`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
...mapMutations('d2admin/db', [
|
|
||||||
'set',
|
|
||||||
'setByUser'
|
|
||||||
]),
|
|
||||||
...mapActions('d2admin/db', [
|
|
||||||
'get',
|
|
||||||
'getByUser'
|
|
||||||
]),
|
|
||||||
load () {
|
|
||||||
this.dbData = JSON.stringify(db.get(this.dbName).value(), null, 2)
|
|
||||||
},
|
|
||||||
handleSet () {
|
|
||||||
this.set({
|
|
||||||
dbName: this.dbName,
|
|
||||||
path: `${this.path}.${this.key}`,
|
|
||||||
value: this.value
|
|
||||||
})
|
|
||||||
this.load()
|
|
||||||
},
|
|
||||||
handleSetByUser () {
|
|
||||||
this.setByUser({
|
|
||||||
dbName: this.dbName,
|
|
||||||
path: `${this.path}.${this.key}`,
|
|
||||||
value: this.value
|
|
||||||
})
|
|
||||||
this.load()
|
|
||||||
},
|
|
||||||
async handleGet () {
|
|
||||||
const value = await this.get({
|
|
||||||
dbName: this.dbName,
|
|
||||||
path: `${this.path}.${this.key}`
|
|
||||||
})
|
|
||||||
this.$alert(`value: ${value}`, `${this.dbName}.${this.path}.${this.key}`)
|
|
||||||
},
|
|
||||||
async handleGetByUser () {
|
|
||||||
const value = await this.getByUser({
|
|
||||||
dbName: this.dbName,
|
|
||||||
path: `${this.path}.${this.key}`
|
|
||||||
})
|
|
||||||
this.$alert(`value: ${value}`, `${this.dbName}.${this.path}.${this.key}`)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1 +1 @@
|
|||||||
16b7e123957b7e4ef7d5c6270616b8f00d2dd381
|
ca12a11b6d9d0552250eb2da1e7bac555902f68d
|
||||||
@@ -17,16 +17,15 @@ function pathInit ({
|
|||||||
validator = () => true,
|
validator = () => true,
|
||||||
defaultValue = ''
|
defaultValue = ''
|
||||||
}) {
|
}) {
|
||||||
const sys = db.get(dbName)
|
|
||||||
const uuid = util.cookies.get('uuid') || 'ghost-uuid'
|
const uuid = util.cookies.get('uuid') || 'ghost-uuid'
|
||||||
const currentPath = `${user ? `user.${uuid}` : 'public'}.${path}`
|
const currentPath = `${dbName}.${user ? `user.${uuid}` : 'public'}${path ? `.${path}` : ''}`
|
||||||
const value = sys.get(currentPath).value()
|
const value = db.get(currentPath).value()
|
||||||
if (!(value && validator(value))) {
|
if (!(value && validator(value))) {
|
||||||
sys
|
db
|
||||||
.set(currentPath, defaultValue)
|
.set(currentPath, defaultValue)
|
||||||
.write()
|
.write()
|
||||||
}
|
}
|
||||||
return `${dbName}.${currentPath}`
|
return currentPath
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -71,6 +70,56 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
|
/**
|
||||||
|
* @description 获取存储数据库对象
|
||||||
|
*/
|
||||||
|
database () {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
resolve(db.get(pathInit({
|
||||||
|
dbName: 'database',
|
||||||
|
user: false,
|
||||||
|
defaultValue: {}
|
||||||
|
})))
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 清空存储数据库对象
|
||||||
|
*/
|
||||||
|
databaseClear () {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
resolve(db.get(pathInit({
|
||||||
|
dbName: 'database',
|
||||||
|
user: false,
|
||||||
|
validator: () => false,
|
||||||
|
defaultValue: {}
|
||||||
|
})))
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 获取存储数据库对象 [区分用户]
|
||||||
|
*/
|
||||||
|
databaseByUser () {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
resolve(db.get(pathInit({
|
||||||
|
dbName: 'database',
|
||||||
|
user: true,
|
||||||
|
defaultValue: {}
|
||||||
|
})))
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 清空存储数据库对象 [区分用户]
|
||||||
|
*/
|
||||||
|
databaseByUserClear () {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
resolve(db.get(pathInit({
|
||||||
|
dbName: 'database',
|
||||||
|
user: true,
|
||||||
|
validator: () => false,
|
||||||
|
defaultValue: {}
|
||||||
|
})))
|
||||||
|
})
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
* @description 获取数据
|
* @description 获取数据
|
||||||
* @description 效果类似于 dbName.path || defaultValue
|
* @description 效果类似于 dbName.path || defaultValue
|
||||||
@@ -84,7 +133,7 @@ export default {
|
|||||||
path = '',
|
path = '',
|
||||||
defaultValue = ''
|
defaultValue = ''
|
||||||
}) {
|
}) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise(resolve => {
|
||||||
resolve(db.get(pathInit({
|
resolve(db.get(pathInit({
|
||||||
dbName,
|
dbName,
|
||||||
path,
|
path,
|
||||||
|
|||||||
Reference in New Issue
Block a user