D2Admin 8月更新: 高級數據持久化|標籤頁右鍵|模塊化等

時間 2019-11-17

標籤 d2admin admin 8月更新高級數據持久標籤右鍵模塊化简体版

原文原文鏈接

劇透：此次，D2Admin 帶來了其它同類模板都沒有的「花式」數據持久化功能，以及極少同類產品纔有的標籤頁右鍵控制...vue

概述

D2Admin 7月份更新到了 1.1.5 版本相關介紹，8月份即將結束，首先仍是按照慣例羅列本月比較重要的更新內容：git

1.1.6 | 1.1.7 | 1.1.10

這三個版本分別新增和完善了多標籤頁控制的右鍵菜單功能github

1.1.9

優化了多標籤頁數據持久化取值邏輯，如今修改路由信息後，刷新頁面時數據從持久化存儲取值時會多通過一部數據處理，根據 name 字段匹配新的路由數據api

1.2.0

新版首頁
全局狀態管理模塊化而且從新設計了 API
全新的數據持久化 API
數據持久化如今不只僅支持區分用戶，還能夠區分路由
路由快照功能
文檔重構
菜單支持跳轉到外部連接
頁面過渡動畫設置加入全局狀態管理並支持用戶私有持久化
$logAdd 和 $log 快速記錄日誌和打印日誌，並提供演示頁面
頂欄和側邊欄菜單支持 svg 圖標

細節介紹

多標籤頁控制右鍵菜單

標籤頁右鍵菜單以下圖紅色框內所示，模擬了常見瀏覽器或者文件管理器標籤頁的功能：瀏覽器

演示 - 關閉左側：app

演示 - 其它功能：框架

右側依然保留了傳統的控制菜單：iview

我對比了 www.awesomes.cn vue專題控制面板上每一個控制面板，最後發現支持右鍵菜單的居然少之又少，大部分不支持多頁，支持多頁又支持頁籤右鍵的目前除了 D2Admin 只發現了一個。svg

項目	多頁模式	多標籤頁右鍵菜單	菜單功能
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 能夠在控制檯輸出美觀的日誌信息

膠囊

此方法打印一行「膠囊」樣式的信息，即上圖前四條

參數：

$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'
      }
    ]
  }
]
複製代碼