D2Admin 8月更新: 高级数据持久化|标签页右键|模块化等
剧透:这次,D2Admin 带来了其它同类模板都没有的“花式”数据持久化功能,以及极少同类产品才有的标签页右键控制...
概述
D2Admin 7月份更新到了 1.1.5 版本 相关介绍,8月份即将结束,首先还是按照惯例罗列本月比较重要的更新内容:
1.1.6 | 1.1.7 | 1.1.10
这三个版本分别新增和完善了多标签页控制的右键菜单功能
1.1.9
优化了多标签页数据持久化取值逻辑,现在修改路由信息后,刷新页面时数据从持久化存储取值时会多经过一部数据处理,根据 name 字段匹配新的路由数据
1.2.0
- 新版首页
- 全局状态管理模块化并且重新设计了 API
- 全新的数据持久化 API
- 数据持久化现在不仅仅支持区分用户,还可以区分路由
- 路由快照功能
- 文档重构
- 菜单支持跳转到外部链接
- 页面过渡动画设置加入全局状态管理并支持用户私有持久化
$logAdd
和$log
快速记录日志和打印日志,并提供演示页面- 顶栏和侧边栏菜单支持 svg 图标
细节介绍
多标签页控制右键菜单
标签页右键菜单如下图红色框内所示,模拟了常见浏览器或者文件管理器标签页的功能:
演示 - 关闭左侧:
演示 - 其它功能:
右侧依然保留了传统的控制菜单:
我对比了 www.awesomes.cn vue专题 控制面板 上每个控制面板,最后发现支持右键菜单的竟然少之又少,大部分不支持多页,支持多页又支持页签右键的目前除了 D2Admin 只发现了一个。
项目 | 多页模式 | 多标签页右键菜单 | 菜单功能 |
---|---|---|---|
vue-element-admin | 支持 | 支持 | 关闭、关闭其他、关闭所有 |
vue-bulma/vue-admin | 不支持 | - | - |
iview-admin | 支持 | 不支持 | - |
vuestic-admin | 不支持 | - | - |
vue-admin | 不支持 | - | - |
d2-admin | 支持 | 支持 | 关闭左侧、关闭右侧、关闭其他、关闭全部 |
coreui-free-vue-admin-template | 不支持 | - | - |
sls-admin-vue | 支持 | 不支持 | - |
Vue-Admin | 不支持 | - | - |
avue | 支持 | 不支持 | - |
dashboard | 不支持 | - | - |
所以如果你希望你的管理后台支持 多页模式 并且有 标签页右键控制,D2Admin 会是你仅有的几个选择之一。
多种数据持久化方式
1.2.0 版本对数据持久化做了更清晰的包装。
这里只拿出官方文档中 四分之一 的篇幅简单介绍,具体使用方式还请移至官方文档。
D2Admin 数据持久化依赖浏览器的 LocalStorage,使用 lowdb API 加自己的取值包装实现了便捷的的操作和取值方法,通过不同的接口可以访问到持久化数据不同的内容,例如不同用户独有的存储区域,系统存储区域,公用存储,根据路由自动划分的存储区域等。
在 src/store/modules/d2admin/modules/db.js
文件中提供了4组共9个方法读写持久化数据
我应该选择哪种方式
有可能您会对如何选择持久化存储的 API 感到困惑,下图会帮助您在存储数据时,根据您的需要选择合适的存储方法:
如果是希望读取数据,依旧遵循上图的选择条件。
概念
D2Admin 数据持久化主要有以下概念:
存储实例
首先请先对 lowdb 有一定的了解,lowdb 通过 lodash 实现了对数据操作的封装,下面的例子演示了 lowdb 在浏览器中的使用方式:
import low from 'lowdb'
import LocalStorage from 'lowdb/adapters/LocalStorage'const adapter = new LocalStorage('db')
const db = low(adapter)db.defaults({ posts: [] }).write()db.get('posts').push({ title: 'lowdb' }).write()
D2Admin 中的存储实例指的是上述代码中 db
那一步(高亮行),在获得了存储实例后你可以使用 lodash 语法直接操作存储实例,最后使用 lowdb 的 write
API 将变化同步回浏览器的 LocalStorage。
用户私有
用户私有指不同的用户使用同一个 api 访问到的存储实例指向的存储位置,例如 A 用户使用下面的代码存储了一段信息:
const db = await this.$store.dispatch('d2admin/db/database', {user: true
})
db.set('myName', 'userA').write()
B 用户使用下面的代码存储了一段信息:
const db = await this.$store.dispatch('d2admin/db/database', {user: true
})
db.set('myName', 'userB').write()
请注意代码的前三行都是一样的,两个用户使用的获取存储实例接口是同一个接口,只不过保存的数据不同。
然后 A 和 B 使用同样的取值代码取值:
const db = await this.$store.dispatch('d2admin/db/database', {user: true
})
const myName = db.get('myName').value()
这次是使用完全一样的代码,但是 A 用户登陆的情况下取得的值是 myName = userA
,B 用户登陆的情况下取得的值是 myName = userB
。
上面介绍的特性即为“用户私有”,在 D2Admin 中,所有的数据持久化 API 都支持数据私有配置。
路由存储
路由存储含义和上面介绍的“用户私有”相像,区别如下:
概念 | 数据区分依据 |
---|---|
用户私有 | 用户 uuid |
路由存储 |
route.name 或者 path 或者 fullPath
|
举例说明:
在 页面1 中使用下面的代码存储一段信息:
const db = await this.$store.dispatch('d2admin/db/databasePage', {vm: this
})
db.set('pageName', 'page1').write()
在 页面2 中使用同样的代码存储一段不同的信息:
const db = await this.$store.dispatch('d2admin/db/databasePage', {vm: this
})
db.set('pageName', 'page2').write()
然后在 页面1 和 页面2 上使用完全相同的代码取值:
const db = await this.$store.dispatch('d2admin/db/databasePage', {vm: this
})
const pageName = db.get('pageName').value()
在 页面1 中会取到 pageName = page1
,在 页面2 中会取到 pageName = page2
。证明数据被依据路由划分。
“路由存储”同时也支持“用户私有”,您可以将两者结合使用,使用下面的代码即可获得用户私有的路由存储:
const db = await this.$store.dispatch('d2admin/db/databasePage', {vm: this,user: true
})
数据格式
首先展示完整的 D2Admin 数据存储格式:
不要被这张图吓到,在您使用过程中根本不会对这个结构有任何感知,API 会直接返回供您操作的节点
这张图体现了数据的普通存储、用户存储、路由存储、私有路由存储、路由快照以及私有路由快照的存储位置,现在您会感觉很乱,但是请注意以下几点:
- sys 模块您在业务代码中不会访问
- database 中的存储结构您绝不会使用某一个 API 全部获得,每次您操作的只是某个节点下的一部分数据,D2Admin 通过不同 API 来简化您在上述数数据中快速定位到需要的数据节点
错误捕捉
框架内已经做好错误捕捉处理,您不需要任何设置,当发生一个错误时,错误会被自动记录在日志中,并且在控制台显示相关错误信息。
日志查看界面:
控制台输出:
只在开发模式下输出
日志记录
使用 $logAdd 可以快速记录日志
示例:
查看日志:
使用方式:
this.$logAdd('your log text')
控制台输出小工具
使用 $log 可以在控制台输出美观的日志信息
<img src="https://user-gold-cdn.xitu.io/2018/8/23/1656292e476ff048?w=520&h=682&f=png&s=55857" style="width: 260px; border: 1px solid #eaecef;"/>
胶囊
此方法打印一行“胶囊”样式的信息,即上图前四条
参数:
$log.capsule( 左侧文字
, 右侧文字
, 主题样式
)
示例:
this.$log.capsule('title', 'success', 'success')
彩色文字
此方法可以随意组合打印文字的颜色顺序
this.$log.colorful([{ text: 'H', type: 'default' },{ text: 'e', type: 'primary' },{ text: 'l', type: 'success' },{ text: 'l', type: 'warning' },{ text: 'o', type: 'danger' }
])
上面的代码效果为效果图中第五行
快速方法
- $log.default
- $log.primary
- $log.success
- $log.warning
- $log.danger
示例:
this.$log.primary('primary style')
这五个快速方法的效果为效果图中第六至十行
菜单支持直接跳转外链
菜单支持设置外部链接,您可以直接这样写:
[{title: '跳转外部链接',icon: 'link',children: [{path: 'https://github.com/d2-projects/d2-admin',title: 'D2Admin Github',icon: 'github'},{path: 'https://juejin.im/user/57a48b632e958a006691b946/posts',title: '掘金',icon: 'globe'}]}
]
以 https://
或者 http://
开头的 path 会被当做外部链接处理。
菜单支持设置 svg 图标
项目地址
- 团队主页 https://github.com/d2-projects
- 中文文档 http://app.d3collection.cn/d2-admin-doc/lastest/zh/
- 完整版 预览地址 https://fairyever.gitee.io/d2-admin-preview/
- 完整版 github https://github.com/d2-projects/d2-admin
- 完整版 码云 https://gitee.com/fairyever/d2-admin
在最后,如果你看完了,并且觉得还不错,希望可以到 项目主页 上点一个 star 作为你对这个项目的认可与支持,谢谢。
官方公众号:
关注及时获得最新更新资讯。
转载于:https://my.oschina.net/u/3871516/blog/1932586
D2Admin 8月更新: 高级数据持久化|标签页右键|模块化等相关推荐
- 怎么下载edge新标签页上的图片和影像
打开edge新标签页时,常常被其背景图惊艳到,就想要截下来保存,特别是"动"起来的影像,更让我动心.(前面废话较多,详细记载了本菜鸟的心路历程和解题步骤,想直接看结论请直接到末尾& ...
- static 控件设置成透明后无法正常更新数据_win10又发布10月更新,提升视频体验,解决闪屏和打印问题...
2020年10月20日,微软windows10系统再次发布了10累积更新KB4580386补丁,对1909版和1903版两版本win10系统同步推送更新补丁,本次win10的2004版未同步进行补丁更 ...
- 求一份 2018年5月更新最新全国省市区县geojson数据(江苏)(echarts等图表可用)
由于1.echarts官网不在提供地图下载 2.江苏省市区县等行政区域调整 求大神提供一个 2018年5月更新最新全国省市区县geojson数据(江苏)的 压缩包,谢谢各位. PS:防止水军,不需要下 ...
- PowerBI 11月更新 数据PPT是否会引领新一轮革命
PowerBI Desktop 2019年11月更新新鲜出炉了: 罗叔作为全球第 80 人观看更新内容者,快速将本月更新全部奉上,供大家参考. 打开预览特性,如下: 本次更新出了三大功能: Power ...
- D2Admin 7月份更新内容:cli3以及更方便的全局控制等
时间过的真快,自从 1.1.4 发布又过去一个月了,这个月依旧每天在忙,D2Admin 也进行了大重构,先介绍一下这次的 1.1.5 相比 1.1.4 有哪些大的改变吧 ~ 重要升级 vue-cli3 ...
- D2Admin 7月份更新内容: cli3以及更方便的全局控制等
时间过的真快,自从 1.1.4 发布又过去一个月了,这个月依旧每天在忙,D2Admin 也进行了大重构,先介绍一下这次的 1.1.5 相比 1.1.4 有哪些大的改变吧 ~ 重要升级 vue-cli3 ...
- 【redismemcached】数据类型、内存管理、数据持久化和集群管理的区别
这几年redis很火,redis也常常被当做memcached的挑战者被提到桌面上来.关于redis和memcached的比较比比皆是.然而,redis真的在功能.性能以及内存使用效率上都超越memc ...
- (译)Windows Azure的7月更新:SQL数据库,流量管理,自动缩放,虚拟机
Windows Azure的7月更新:SQL数据库,流量管理,自动缩放,虚拟机 今早我们释出一些很棒的Windows Azure更新.这些新的提升包括: SQL数据库:支持SQL自动导出和一个新的高级 ...
- Redis和Memcached的区别(数据类型、内存管理、数据持久化、集群管理)
Redis的作者Salvatore Sanfilippo曾经对这两种基于内存的数据存储系统进行过比较: Redis支持服务器端的数据操作:Redis相比Memcached来说,拥有更多的数据结构和并支 ...
最新文章
- jiebaR中文分词,从入门到喜欢
- html逻辑判断符,JavaScript中的逻辑判断符、||与!介绍
- 数据库原理与应用(SQL Server)笔记 第六章 数据完整性
- 计算机综合应用实验,计算机综合应用实验二WORD应用.doc
- ElasticSearch 介绍及使用方法
- 晨哥真有料丨我们要为了对方改变自己吗?
- 11 个非常受欢迎的 JavaScript 动画库
- python中-----数组中的排序
- [ CSS ] animation 快速参考
- linux iptables添加mysql访问
- qt写的在ok6410上的密码锁
- XMind--思维导图
- 信息系统项目管理师学习笔记
- 计算机变网络限速,电脑网速太慢?先别着急找运营商,修改这个限制瞬间变流畅...
- html 轮播图左右切换代码,js实现左右轮播图
- navicat 1146错误
- Win10科大讯飞语音合成系统( Interphonic 5.0)安装方法及报错解决
- 【12】Kotlin函数泛型协程
- mysql explain是什么意思_MySQL中EXPLAIN解释命令详解
- 从培训机构出来的程序员,后来都怎么样了? | 程序员有话说