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
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>
|
||||
Reference in New Issue
Block a user