页面持久化大体功能实现
Former-commit-id: 6de284ac144ef2dc9add34aa16502109485a16d2 [formerly 6de284ac144ef2dc9add34aa16502109485a16d2 [formerly 6de284ac144ef2dc9add34aa16502109485a16d2 [formerly 6de284ac144ef2dc9add34aa16502109485a16d2 [formerly 99351410cdef9041c1acbcd105ab7f02e23c4db1 [formerly d70ea9b6ea91dec0463c7e925a8eaab9c1990a6d]]]]] Former-commit-id: 88212ee98bd64a47532ce9dac84a572f55248a87 Former-commit-id: 017b329b1b91a670b85398e771d34504cc027f26 Former-commit-id: 9d4254f31c10c6e1cc65c65b42847d91e3645566 [formerly b0c0b3fa63225f698741d26af019cee2c9e9258c] Former-commit-id: 4a4e25525dd02ec2f4a566716a04d5751dc836f8 Former-commit-id: 32994d19e44dd945d144c72134c4aec7b0bc5b13 Former-commit-id: 625b25670c37b0fd33826ddfa845802f1a8e5533 Former-commit-id: ac609aa4a8a3284e927f6b704ccda7786c7df8a6 Former-commit-id: 47d02c0e39e0a6fcba7dfdc98782045193e40c6b
This commit is contained in:
liyang
127
src/pages/demo/playground/db/page-public/index.vue
Normal file
127
src/pages/demo/playground/db/page-public/index.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<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', [
|
||||
'databasePage',
|
||||
'databasePageClear'
|
||||
]),
|
||||
/**
|
||||
* 加载本地数据
|
||||
*/
|
||||
async load () {
|
||||
const db = await this.databasePage({
|
||||
vm: this
|
||||
})
|
||||
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.databasePage({
|
||||
vm: this
|
||||
})
|
||||
db
|
||||
.unset(name)
|
||||
.write()
|
||||
this.load()
|
||||
this.keyNameToDelete = ''
|
||||
},
|
||||
/**
|
||||
* 清空当前用户的数据
|
||||
*/
|
||||
async handleClear () {
|
||||
await this.databasePageClear({
|
||||
vm: this
|
||||
})
|
||||
this.load()
|
||||
},
|
||||
/**
|
||||
* 添加一个数据
|
||||
*/
|
||||
async handleSet () {
|
||||
if (this.keyNameToSet === '') {
|
||||
this.$message.error('字段名不能为空')
|
||||
return
|
||||
}
|
||||
const db = await this.databasePage({
|
||||
vm: this
|
||||
})
|
||||
db
|
||||
.set(this.keyNameToSet, this.valueToSet)
|
||||
.write()
|
||||
this.load()
|
||||
},
|
||||
/**
|
||||
* 添加一个随机数据
|
||||
*/
|
||||
async handleSetRandom () {
|
||||
const id = day().valueOf()
|
||||
const db = await this.databasePage({
|
||||
vm: this
|
||||
})
|
||||
db
|
||||
.set(id, Math.round(id * Math.random()))
|
||||
.write()
|
||||
this.load()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
111
src/pages/demo/playground/db/page-snapshot-public/index.vue
Normal file
111
src/pages/demo/playground/db/page-snapshot-public/index.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<el-alert
|
||||
slot="header"
|
||||
type="success"
|
||||
:closable="false"
|
||||
title="下面的表单来自 Element 的表单示例，
|
||||
在 D2Admin 的本页示例中你可以随意填写这个表单，
|
||||
表单内容会自动实时持久化，
|
||||
无论是切换标签页、重新打开标签页、刷新浏览器、重开浏览器、重开浏览器标签页等，
|
||||
该页面数据都会自动恢复到上次填写的状态，
|
||||
这些都只需要你使用 D2Admin 提供的两个方法，
|
||||
总共只需要多写十几行代码"/>
|
||||
<el-form ref="form" :model="form" label-width="80px" style="max-width: 600px; margin: 0px auto;">
|
||||
<el-form-item label="活动名称">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域">
|
||||
<el-select v-model="form.region" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动时间">
|
||||
<el-col :span="11">
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col :span="2" style="text-align: center;">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="即时配送">
|
||||
<el-switch v-model="form.delivery"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动性质">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox label="线上活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="地推活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="线下活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="品牌曝光" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="特殊资源">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio label="线上品牌商赞助"></el-radio>
|
||||
<el-radio label="线下场地免费"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动形式">
|
||||
<el-input type="textarea" v-model="form.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary">立即创建</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button
|
||||
slot="footer"
|
||||
type="danger"
|
||||
@click="handleClear">
|
||||
<d2-icon name="trash-o"/>
|
||||
删除当前页面快照
|
||||
</el-button>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
async created () {
|
||||
const data = await this.pageLoad({ vm: this })
|
||||
for (const key in data) {
|
||||
if (data.hasOwnProperty(key)) this[key] = data[key]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$data: {
|
||||
handler () {
|
||||
this.pageSet({ vm: this })
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/db', [
|
||||
'pageSet',
|
||||
'pageLoad',
|
||||
'pageClear'
|
||||
]),
|
||||
async handleClear () {
|
||||
await this.pageClear({ vm: this })
|
||||
this.$message.success('此页面快照已经删除，请重新进入该页面或者关闭选项卡重新打开')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
111
src/pages/demo/playground/db/page-snapshot-user/index.vue
Normal file
111
src/pages/demo/playground/db/page-snapshot-user/index.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<el-alert
|
||||
slot="header"
|
||||
type="success"
|
||||
:closable="false"
|
||||
title="下面的表单来自 Element 的表单示例，
|
||||
在 D2Admin 的本页示例中你可以随意填写这个表单，
|
||||
表单内容会自动实时持久化，
|
||||
无论是切换标签页、重新打开标签页、刷新浏览器、重开浏览器、重开浏览器标签页等，
|
||||
该页面数据都会自动恢复到上次填写的状态，
|
||||
这些都只需要你使用 D2Admin 提供的两个方法，
|
||||
总共只需要多写十几行代码"/>
|
||||
<el-form ref="form" :model="form" label-width="80px" style="max-width: 600px; margin: 0px auto;">
|
||||
<el-form-item label="活动名称">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域">
|
||||
<el-select v-model="form.region" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动时间">
|
||||
<el-col :span="11">
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col :span="2" style="text-align: center;">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="即时配送">
|
||||
<el-switch v-model="form.delivery"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动性质">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox label="线上活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="地推活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="线下活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="品牌曝光" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="特殊资源">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio label="线上品牌商赞助"></el-radio>
|
||||
<el-radio label="线下场地免费"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动形式">
|
||||
<el-input type="textarea" v-model="form.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary">立即创建</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button
|
||||
slot="footer"
|
||||
type="danger"
|
||||
@click="handleClear">
|
||||
<d2-icon name="trash-o"/>
|
||||
删除当前页面快照
|
||||
</el-button>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
async created () {
|
||||
const data = await this.pageLoad({ vm: this, user: true })
|
||||
for (const key in data) {
|
||||
if (data.hasOwnProperty(key)) this[key] = data[key]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$data: {
|
||||
handler () {
|
||||
this.pageSet({ vm: this, user: true })
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/db', [
|
||||
'pageSet',
|
||||
'pageLoad',
|
||||
'pageClear'
|
||||
]),
|
||||
async handleClear () {
|
||||
await this.pageClear({ vm: this, user: true })
|
||||
this.$message.success('此页面快照已经删除，请重新进入该页面或者关闭选项卡重新打开')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
132
src/pages/demo/playground/db/page-user/index.vue
Normal file
132
src/pages/demo/playground/db/page-user/index.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<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', [
|
||||
'databasePage',
|
||||
'databasePageClear'
|
||||
]),
|
||||
/**
|
||||
* 加载本地数据
|
||||
*/
|
||||
async load () {
|
||||
const db = await this.databasePage({
|
||||
vm: this,
|
||||
user: true
|
||||
})
|
||||
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.databasePage({
|
||||
vm: this,
|
||||
user: true
|
||||
})
|
||||
db
|
||||
.unset(name)
|
||||
.write()
|
||||
this.load()
|
||||
this.keyNameToDelete = ''
|
||||
},
|
||||
/**
|
||||
* 清空当前用户的数据
|
||||
*/
|
||||
async handleClear () {
|
||||
await this.databasePageClear({
|
||||
vm: this,
|
||||
user: true
|
||||
})
|
||||
this.load()
|
||||
},
|
||||
/**
|
||||
* 添加一个数据
|
||||
*/
|
||||
async handleSet () {
|
||||
if (this.keyNameToSet === '') {
|
||||
this.$message.error('字段名不能为空')
|
||||
return
|
||||
}
|
||||
const db = await this.databasePage({
|
||||
vm: this,
|
||||
user: true
|
||||
})
|
||||
db
|
||||
.set(this.keyNameToSet, this.valueToSet)
|
||||
.write()
|
||||
this.load()
|
||||
},
|
||||
/**
|
||||
* 添加一个随机数据
|
||||
*/
|
||||
async handleSetRandom () {
|
||||
const id = day().valueOf()
|
||||
const db = await this.databasePage({
|
||||
vm: this,
|
||||
user: true
|
||||
})
|
||||
db
|
||||
.set(id, Math.round(id * Math.random()))
|
||||
.write()
|
||||
this.load()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">持久化存储用户数据（用户区分存储）</template>
|
||||
<template slot="header">持久化存储公用数据（当前用户）</template>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<p class="d2-mt-0">增加不重复字段</p>
|
||||
@@ -55,14 +55,14 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/db', [
|
||||
'databaseByUser',
|
||||
'databaseByUserClear'
|
||||
'database',
|
||||
'databaseClear'
|
||||
]),
|
||||
/**
|
||||
* 加载本地数据
|
||||
*/
|
||||
async load () {
|
||||
const db = await this.databaseByUser()
|
||||
const db = await this.database({ user: true })
|
||||
this.dataDisplay = JSON.stringify(db.value(), null, 2)
|
||||
this.keyNameList = Object.keys(db.value()).map(k => ({
|
||||
value: k,
|
||||
@@ -73,7 +73,7 @@ export default {
|
||||
* 删除一个字段
|
||||
*/
|
||||
async handleDelete (name) {
|
||||
const db = await this.databaseByUser()
|
||||
const db = await this.database({ user: true })
|
||||
db
|
||||
.unset(name)
|
||||
.write()
|
||||
@@ -84,7 +84,7 @@ export default {
|
||||
* 清空当前用户的数据
|
||||
*/
|
||||
async handleClear () {
|
||||
await this.databaseByUserClear()
|
||||
await this.databaseClear({ user: true })
|
||||
this.load()
|
||||
},
|
||||
/**
|
||||
@@ -95,7 +95,7 @@ export default {
|
||||
this.$message.error('字段名不能为空')
|
||||
return
|
||||
}
|
||||
const db = await this.databaseByUser()
|
||||
const db = await this.database({ user: true })
|
||||
db
|
||||
.set(this.keyNameToSet, this.valueToSet)
|
||||
.write()
|
||||
@@ -106,7 +106,7 @@ export default {
|
||||
*/
|
||||
async handleSetRandom () {
|
||||
const id = day().valueOf()
|
||||
const db = await this.databaseByUser()
|
||||
const db = await this.database({ user: true })
|
||||
db
|
||||
.set(id, Math.round(id * Math.random()))
|
||||
.write()
|
||||
|
||||
Reference in New Issue
Block a user