Java 開發 2021 年發生的的一些自我總結和教訓,即使反省
前言
你知道光是基於 Vue 的後臺框架在 Github 上有多少個倉庫麼?
如果你搜索vue admin
會得到13120個倉庫,如果用vue 後臺
會得到7596個倉庫,如果把兩者結合一下,搜尋vue admin 後臺
也還是能得到2719個(以上搜索統計截止至 2021/1/2)。
當然,如果你需要找一款後臺框架用來做專案或者是產品,大概率你不會上 Github 現搜,國內有很多文章整理過值得一用的後臺框架,例如 vue-element-admin 、d2-admin 、vue-antd-admin 等等,但只有這些了麼?
今天,就給大家正式介紹一款值得進入你收藏夾吃灰你在 2021 年關注的後臺框架:
Fantastic-admin——一款開箱即用的 Vue 中後臺管理系統框架
為什麼要用它?
後臺框架這麼多,Fantastic-admin為什麼值得你去了解,它又有什麼亮點,下面就簡單介紹一下。
Tip:以下部分介紹為專業版功能
繼承自 vue-automation
我在之前的《收下這款 Vue 專案模版,它將讓你的開發效率在 2021 年提高 50%》這篇文章裡介紹過vue-automation這款 Vue 專案模版,它集成了很多不錯的特性可以方便在開發中直接使用,而必備浪費太多時間,而Fantastic-admin也繼承了大部分特性。
豐富的主題與佈局
雙側邊欄佈局 | 頭部導航佈局 | 單側邊欄佈局 |
自適應 | 自適應(有最小寬度) | 定寬居中 | 定寬居中(有最大寬度) |
除此之外,還提供了 5 款內建主題風格的介面可以選擇
預設 | Vue CLI 風格 | 碼雲風格 | 清新 | 素雅 |
當然,也提供的自定義配置主題的檔案,可快速擴充套件一套自定義風格的主題。
路由導航
通過路由配置生成選單導航是後臺框架的必備功能,除此之外,路由配置還支援外鏈、標記、許可權等功能,並且還支援無限層級的頁面快取。
關於頁面快取的問題,之前我也特別寫過一篇文章叫《一勞永逸,解決基於 keep-alive 的後臺多級路由快取問題》,感興趣的小夥伴可以前往瞭解。
許可權驗證
除了路由上的許可權驗證外,還分別提供了鑑權元件、鑑權指令和鑑權函式,提供全方位鑑權。
鑑權元件
頁面中某個模組,當前使用者具備該許可權是如何顯示,不具備該許可權又是如何顯示,針對這樣的需求,框架提供了<Auth>
和<AuthAll>
元件,具體使用如下:
<!-- 單許可權驗證 -->
<Auth :value="'department.create'">
你有該許可權
<template slot="no-auth">
你沒有該許可權
</template>
</Auth>
<!-- 多許可權驗證,使用者只要具備其中任何一個許可權,則驗證通過 -->
<Auth :value="['department.create', 'department.edit']">
你有該許可權
<template slot="no-auth">
你沒有該許可權
</template>
</Auth>
<!-- 多許可權驗證,使用者必須具備全部許可權,才驗證通過 -->
<AuthAll :value="['department.create', 'department.edit']">
你有該許可權
<template slot="no-auth">
你沒有該許可權
</template>
</AuthAll>
鑑權指令
對於單個元素,也提供了v-auth
和v-auth-all
鑑權指令,使用上對比鑑權元件更方便,當然它能做的事情也更簡單。
<!-- 單許可權驗證 -->
<button v-auth="'department.create'">新增部門</button>
<!-- 多許可權驗證,使用者只要具備其中任何一個許可權,則驗證通過 -->
<button v-auth="['department.create', 'department.edit']">新增部門</button>
<!-- 多許可權驗證,使用者必須具備全部許可權,才驗證通過 -->
<button v-auth-all="['department.create', 'department.edit']">新增部門</button>
鑑權函式
鑑權元件和鑑權指令控制的是頁面上的元素是否展示,而鑑權函式則更多是使用在業務流程程式碼裡的許可權判斷。
// 單許可權驗證,返回 true 或 false
this.$auth('department.create')
// 多許可權驗證,使用者只要具備其中任何一個許可權,則驗證通過,返回 true 或 false
this.$auth(['department.create', 'department.edit'])
// 多許可權驗證,使用者必須具備全部許可權,才驗證通過,返回 true 或 false
this.$authAll(['department.create', 'department.edit'])
多頁面(Tab 標籤欄)
雖然我個人覺得這個功能挺雞肋的,實際效果體驗也不如瀏覽器原生的 tab 標籤欄,但咱得有這功能。並且這功能目前在我看來,幾乎秒殺了其它同類框架,用一張圖簡單演示下吧:
國際化
國際化的支援當然也不能少,預設提供了簡體中文、繁體中文和英語三種語言包。
最後
除了以上介紹的外,還支援 mock 、CDN 、GZip 等特性,就不一一詳細介紹了,歡迎感興趣的小夥伴可以來詳情瞭解並使用Fantastic-admin