首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >D2Admin 8月更新: 高级数据持久化|标签页右键|模块化等

D2Admin 8月更新: 高级数据持久化|标签页右键|模块化等

作者头像
IMWeb前端团队
发布2019-12-03 17:21:11
1K0
发布2019-12-03 17:21:11
举报
文章被收录于专栏:IMWeb前端团队IMWeb前端团队

本文作者:IMWeb FairyEver 原文出处:IMWeb社区 未经同意,禁止转载

剧透:这次,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 在浏览器中的使用方式:

``` js {5} 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](https://lodash.com/) 语法直接操作存储实例,最后使用 [lowdb](https://github.com/typicode/lowdb) 的 `write` API 将变化同步回浏览器的 LocalStorage。

##### 用户私有

用户私有指不同的用户使用同一个 api 访问到的存储实例指向的存储位置,例如 A 用户使用下面的代码存储了一段信息:

``` js {5}
const db = await this.$store.dispatch('d2admin/db/database', {
  user: true
})
db
  .set('myName', 'userA')
  .write()

B 用户使用下面的代码存储了一段信息:

``` js {5} const db = await this.$store.dispatch('d2admin/db/database', { user: true }) db .set('myName', 'userB') .write()

请注意代码的前三行都是一样的,两个用户使用的获取存储实例接口是同一个接口,只不过保存的数据不同。

然后 A 和 B 使用同样的取值代码取值:

``` js {4}
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 中使用下面的代码存储一段信息:

``` js {5} const db = await this.$store.dispatch('d2admin/db/databasePage', { vm: this }) db .set('pageName', 'page1') .write()

在 **页面2** 中使用同样的代码存储一段不同的信息:

``` js {5}
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。证明数据被依据路由划分。

“路由存储”同时也支持“用户私有”,您可以将两者结合使用,使用下面的代码即可获得用户私有的路由存储:

``` js {3} const db = await this.$store.dispatch('d2admin/db/databasePage', { vm: this, user: true })

##### 数据格式

首先展示完整的 D2Admin 数据存储格式:

**不要被这张图吓到,在您使用过程中根本不会对这个结构有任何感知,API 会直接返回供您操作的节点**

![](https://user-gold-cdn.xitu.io/2018/8/23/1656292e0f287ec3?w=1868&h=1822&f=png&s=235027)

这张图体现了数据的普通存储、用户存储、路由存储、私有路由存储、路由快照以及私有路由快照的存储位置,现在您会感觉很乱,但是请注意以下几点:

* sys 模块您在业务代码中不会访问
* database 中的存储结构您绝不会使用某一个 API 全部获得,每次您操作的只是某个节点下的一部分数据,D2Admin 通过不同 API 来简化您在上述数数据中快速定位到需要的数据节点

### 错误捕捉

框架内已经做好错误捕捉处理,您不需要任何设置,当发生一个错误时,错误会被自动记录在日志中,并且在控制台显示相关错误信息。

日志查看界面:

![](https://user-gold-cdn.xitu.io/2018/8/23/1656292e185ee6e8?w=1724&h=1796&f=png&s=319536)

控制台输出:

> 只在开发模式下输出

![](https://user-gold-cdn.xitu.io/2018/8/23/1656292e1c65258c?w=3844&h=1152&f=png&s=490740)

### 日志记录

使用 $logAdd 可以快速记录日志

示例:

![](https://user-gold-cdn.xitu.io/2018/8/23/1656292e20c49b6f?w=1522&h=424&f=png&s=43778)

查看日志:

![](https://user-gold-cdn.xitu.io/2018/8/23/1656292e471616ca?w=1716&h=1104&f=png&s=96361)

使用方式:

``` js
this.$logAdd('your log text')

控制台输出小工具

使用 $log 可以在控制台输出美观的日志信息

胶囊

此方法打印一行“胶囊”样式的信息,即上图前四条

参数:

$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 图标

项目地址

在最后,如果你看完了,并且觉得还不错,希望可以到 项目主页 上点一个 star 作为你对这个项目的认可与支持,谢谢。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-08-23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 概述
    • 1.1.6 | 1.1.7 | 1.1.10
      • 1.1.9
        • 1.2.0
        • 细节介绍
          • 多标签页控制右键菜单
            • 多种数据持久化方式
              • 我应该选择哪种方式
              • 概念
            • 控制台输出小工具
              • 胶囊
              • 彩色文字
              • 快速方法
            • 菜单支持直接跳转外链
              • 菜单支持设置 svg 图标
              • 项目地址
              相关产品与服务
              对象存储
              对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档