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 可以在控制檯輸出美觀的日誌資訊

膠囊

此方法列印一行“膠囊”樣式的資訊，即上圖前四條

引數：

$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 作為你對這個專案的認可與支援，謝謝。

官方公眾號：

關注及時獲得最新更新資訊。