2022年第一場Blazor中文社區的開發者分享活動,我們的團隊也全程參與其中,在議程中,也分享了我們團隊的Blazor 管理后台模板,針對於Blazor,先科普一波,避免有些朋友不了解,Blazor是微軟推出的基於.NET的前端技術。利用現有的.NET生態,受於.NET的性能,可靠性和安全性,不僅能過夠在服務器和客戶端之間共享應用程序邏輯,還能夠在不同的操作系統上高效、穩定的運行。本次Masa Blazor 也是分享最新的Blazor技術進展和開發實踐。
Masa技術團隊全程參與
我們分享的議題是“開源的Blazor管理后台模板”。通過我們開源的項目MASA Framework Admin展開介紹,依次介紹了具體的功能、技術棧、分享了我們的Masa Blazor的組件和Masa Blazor Pro,同時也詳細的說明了MASA Framework的環境怎么安裝、怎么運行等... 詳細的具體內容,我們精簡成文字版給到大家,當天沒有參與直播的朋友們,看這篇就夠啦~僅限我們的分享部分哦!
背景
我們做這個事情,其實是很突然的,之前我們公司的內部搞了一個小型的黑客松,大家花了3天時間,基於我們的組件庫和框架,就把這樣的一個項目給大家做出來了,因為是剛做出來的,用時也較短,其實可以說,還是個“寶寶”。基本上的功能演示是已經做出來了,沒有那么完善,如果期待值很高,那還是需要給一些時間的。
MASA Framework Admin 的功能
- 多點登錄互斥,同一個賬號,只能在一台電腦上登錄
如果開了隱私模式的瀏覽器,或者是在另外一個電腦上面,登錄同一個賬號,那么之前登錄的賬號就會被踢掉,是一個很實用的功能,我們也用Blazor去給大家演示,在Blazor上面是怎么做到這點)
- 引入Dapr,提供Pubsub、Secret等示例
Pubsub就是事件,我們把MQ用起來了
Secret就是密鑰這些,大家會習慣於放在.NET配置文件里,通過Secret就可以放到Dapr的配置文件里面
- 定時任務,提供基礎的定時計算報表數據的示例
只是簡單的給大家提供了一個定時計算報表的示例
- RBAC0,引入Role的概念,並將權限與角色進行關聯。用戶通過扮演某種角色,具有該角色的權限
引入角色的概念,把權限和角色關聯起來,讓用戶去扮演某種角色,然后具有該角色的權限。如果用RBAC,根據業務的復雜性,大家更傾向於用RBAC3,但MASA Framework Admin是一個比較簡單的東西,暫時不會實現RBAC3這么復雜的功能。如果你需要RBAC3,然后又需要單點登錄,然后不同項目之間的關系管理等等...如果需要這樣的東西,可以稍微等一下。我們預計在今年7月前后,會開源另一個項目,叫MASA Auth。MASA Auth是我們MASA Stack里面的第一個正式開源的項目,里面會給大家提供非常完整的權限功能,你拿過去用,可以滿足絕大多數的要求,基本上是不需要二開的
- 集成可觀測性
這個功能其實也是dapr提供的
技術棧
-
.Net 6
-
Dapr
-
MASA Blazor
-
MASA Framework
-
Docker Compose
MASA Blazor組件庫演示
Masa Blazor組件庫風格
Material Design
我們做這個組件庫的時候,是照着vuetify做的,基本上是1:1還原的
我們做了自己的首頁,也可以在首頁,了解更多Masa Blazor的詳情
通過首頁點擊“開始使用”,在安裝部分,我們提供了演示視頻,大家可以根據視頻去操作,如果不喜歡看視頻,下面的命令行就比較適合你啦!直接快速看命令行就可以了,都是比較簡單的。
組件也是做了蠻多的,感興趣的可以直接到官網,點擊了解更多。
https://blazor.masastack.com/getting-started/installation
用過我們組件庫的小伙伴,反映說”示例少“,這里和大家講一下原因,因為一個組件的功能很多,我們不太可能,全部都做成示例,如果你想看下,支不支持更多的功能,可以如下圖所示,點擊API進入之后,就可以看到我們的組件,提供了多少屬性、插槽、事件等,用過vue的小伙伴,對插槽這些,應該很熟悉。
”MASA Blazor Pro“,MASA Blazor的實踐
Masa Blazor Pro其實是一個純前端的項目,是沒有任何業務端的,群里的小伙伴,一直都在說,我們的Pro蠻好看的,但是沒有后端的演示代碼,希望我們補充一下,我們做Admin也是有這樣的一個契機。大家要的布局,然后多頁簽、面包屑...這些我們都是有做的,還包括多語言i18n,功能還原度上,都是做了的。打的版本號上,我們是保守了一點,現在為止,我們還沒有打1.0的版本。我們希望1.0版本是可以給到大家長期支持的,所以我們對1.0的要求比較高,但實際上0.3.0也是足夠大家用的,
組件展示
MASA Blazor Pro效果圖
MASA Framework介紹
底層框架、后端代碼的部分我們用的是MASA Framework,現在看到的是我們第一個版本的功能清單。項目的模板、Dapr Starter...如果你用Dapr,應該就有了解。Dapr D的邊車,每次啟動的時候,會比較麻煩。所以我們做了一個Dapr Starter,只需要一行代碼,它會自動去幫你管理Dapr D的整個生命周期,包括配置、包括端口映射等等一系列的操作,全部都會幫你做好。
Building Blocks 是我們提供的整個框架的接口標准,就是我們提供了哪些功能,這些功能都是通過接口標准提供的。Contribe就是實現了Building Blocks這些接口的,然后我們提供了一些,我們認為,你在用這些功能的時候,可能默認要用的一些選項。在我們Building Blocks 里面,除了一些數據類相關的、服務類相關的,還有比如說Event Bus,包括隔離性、可觀測性等這些都是有的。
MASA Framework Admin
環境准備&運行
-
安裝Docker
-
安裝Dapr
-
安裝.Net 6
-
使用Docker Compose啟動項目
-
使用瀏覽器訪問 https://localhost:8443
Dapr學習鏈接
手把手教你學Dapr - 3. 使用Dapr運行第一個.Net程序
https://www.cnblogs.com/doddgu/p/dapr-learning-3.html
這個鏈接是之前我們出的《Dapr教學系列》文章里的一篇,里面有講如何安裝Dapr,其實還是很簡單的,前三步安裝之后,克隆代碼這些就不用說了,然后直接使用Docker Compose去啟動你的項目。
運行起來的登錄界面,就是下面的這個樣子
第一個界面是Dashboard演示,我們做了一個簡單的定時的計算任務,因為是按小時,所以頁面上看到的是沒跑到,看到的都是0,但訪問的日志,是已經寫進去了。這些報表類的組件,我們用的是Echart
角色管理這部分,就是標准的RBAC,在角色里,可以添加角色,去繼承角色等
也可以切換到WebAssembly的站點
可觀測性的部分,比如你有一堆請求,在這里就可以看到,是通過dapr寫進來的。實際場景就是:業務報錯了,當時的sql呢?當時請求的訪問DB的sql語句呢?可以通過這里看到,全程是被記錄的,訪問服務的原始請求、請求路徑、請求參數...,實際執行起來是不難的
我們的地址:
Admin模板
https://github.com/masalabs/MASA.Framework.Admin
純交互組件庫
https://github.com/BlazorComponent/BlazorComponent
Material Design組件庫
https://github.com/BlazorComponent/MASA.Blazor
https://gitee.com/blazorcomponent/MASA.Blazor
Pro模板