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模板
https://github.com/BlazorComponent/MASA.Blazor.Pro
完整視頻回看:https://live.csdn.net/room/microsoftreactor/aELKQY0A
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/456943.html
標籤:C#
上一篇:C# 將PDF轉為Excel
