Masa Blazor in Blazor Day

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 的功能

Masa Blazor in Blazor Day_第1张图片

  1. 多点登录互斥,同一个账号,只能在一台电脑上登录
如果开了隐私模式的浏览器,或者是在另外一个电脑上面,登录同一个账号,那么之前登录的账号就会被踢掉,是一个很实用的功能,我们也用Blazor去给大家演示,在Blazor上面是怎么做到这点)
  1. 引入Dapr,提供Pubsub、Secret等示例

Pubsub就是事件,我们把MQ用起来了

Secret就是密钥这些,大家会习惯于放在.NET配置文件里,通过Secret就可以放到Dapr的配置文件里面

  1. 定时任务,提供基础的定时计算报表数据的示例
只是简单的给大家提供了一个定时计算报表的示例
  1. RBAC0,引入Role的概念,并将权限与角色进行关联。用户通过扮演某种角色,具有该角色的权限
引入角色的概念,把权限和角色关联起来,让用户去扮演某种角色,然后具有该角色的权限。如果用RBAC,根据业务的复杂性,大家更倾向于用RBAC3,但MASA Framework Admin是一个比较简单的东西,暂时不会实现RBAC3这么复杂的功能。如果你需要RBAC3,然后又需要单点登录,然后不同项目之间的关系管理等等...如果需要这样的东西,可以稍微等一下。我们预计在今年7月前后,会开源另一个项目,叫MASA Auth。MASA Auth是我们MASA Stack里面的第一个正式开源的项目,里面会给大家提供非常完整的权限功能,你拿过去用,可以满足绝大多数的要求,基本上是不需要二开的
  1. 集成可观测性
这个功能其实也是dapr提供的

技术栈

  • .Net 6
  • Dapr
  • MASA Blazor
  • MASA Framework
  • Docker Compose

MASA Blazor组件库演示

Masa Blazor组件库风格

Material Design

我们做这个组件库的时候,是照着vuetify做的,基本上是1:1还原的

我们做了自己的首页,也可以在首页,了解更多Masa Blazor的详情

Masa Blazor in Blazor Day_第2张图片

Masa Blazor in Blazor Day_第3张图片

通过首页点击“开始使用”,在安装部分,我们提供了演示视频,大家可以根据视频去操作,如果不喜欢看视频,下面的命令行就比较适合你啦!直接快速看命令行就可以了,都是比较简单的。

Masa Blazor in Blazor Day_第4张图片

组件也是做了蛮多的,感兴趣的可以直接到官网,点击了解更多。

https://blazor.masastack.com/...

Masa Blazor in Blazor Day_第5张图片
Masa Blazor in Blazor Day_第6张图片

用过我们组件库的小伙伴,反映说”示例少“,这里和大家讲一下原因,因为一个组件的功能很多,我们不太可能,全部都做成示例,如果你想看下,支不支持更多的功能,可以如下图所示,点击API进入之后,就可以看到我们的组件,提供了多少属性、插槽、事件等,用过vue的小伙伴,对插槽这些,应该很熟悉。

Masa Blazor in Blazor Day_第7张图片

Masa Blazor in Blazor Day_第8张图片

”MASA Blazor Pro“,MASA Blazor的实践

Masa Blazor Pro其实是一个纯前端的项目,是没有任何业务端的,群里的小伙伴,一直都在说,我们的Pro蛮好看的,但是没有后端的演示代码,希望我们补充一下,我们做Admin也是有这样的一个契机。大家要的布局,然后多页签、面包屑...这些我们都是有做的,还包括多语言i18n,功能还原度上,都是做了的。打的版本号上,我们是保守了一点,现在为止,我们还没有打1.0的版本。我们希望1.0版本是可以给到大家长期支持的,所以我们对1.0的要求比较高,但实际上0.3.0也是足够大家用的,

Masa Blazor in Blazor Day_第9张图片

组件展示

Masa Blazor in Blazor Day_第10张图片

MASA Blazor Pro效果图

Masa Blazor in Blazor Day_第11张图片

MASA Framework介绍

底层框架、后端代码的部分我们用的是MASA Framework,现在看到的是我们第一个版本的功能清单。项目的模板、Dapr Starter...如果你用Dapr,应该就有了解。Dapr D的边车,每次启动的时候,会比较麻烦。所以我们做了一个Dapr Starter,只需要一行代码,它会自动去帮你管理Dapr D的整个生命周期,包括配置、包括端口映射等等一系列的操作,全部都会帮你做好。

Building Blocks 是我们提供的整个框架的接口标准,就是我们提供了哪些功能,这些功能都是通过接口标准提供的。Contribe就是实现了Building Blocks这些接口的,然后我们提供了一些,我们认为,你在用这些功能的时候,可能默认要用的一些选项。在我们Building Blocks 里面,除了一些数据类相关的、服务类相关的,还有比如说Event Bus,包括隔离性、可观测性等这些都是有的。

Masa Blazor in Blazor Day_第12张图片

MASA Framework Admin

环境准备&运行
  1. 安装Docker
  2. 安装Dapr
  3. 安装.Net 6
  4. 使用Docker Compose启动项目
  5. 使用浏览器访问 https://localhost:8443
Dapr学习链接

手把手教你学Dapr - 3. 使用Dapr运行第一个.Net程序

https://www.cnblogs.com/doddg...

这个链接是之前我们出的《Dapr教学系列》文章里的一篇,里面有讲如何安装Dapr,其实还是很简单的,前三步安装之后,克隆代码这些就不用说了,然后直接使用Docker Compose去启动你的项目。

运行起来的登录界面,就是下面的这个样子

Masa Blazor in Blazor Day_第13张图片

第一个界面是Dashboard演示,我们做了一个简单的定时的计算任务,因为是按小时,所以页面上看到的是没跑到,看到的都是0,但访问的日志,是已经写进去了。这些报表类的组件,我们用的是Echart

Masa Blazor in Blazor Day_第14张图片

角色管理这部分,就是标准的RBAC,在角色里,可以添加角色,去继承角色等

Masa Blazor in Blazor Day_第15张图片

也可以切换到WebAssembly的站点

Masa Blazor in Blazor Day_第16张图片

可观测性的部分,比如你有一堆请求,在这里就可以看到,是通过dapr写进来的。实际场景就是:业务报错了,当时的sql呢?当时请求的访问DB的sql语句呢?可以通过这里看到,全程是被记录的,访问服务的原始请求、请求路径、请求参数...,实际执行起来是不难的

Masa Blazor in Blazor Day_第17张图片

Masa Blazor in Blazor Day_第18张图片
Masa Blazor in Blazor Day_第19张图片

我们的地址:

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/mi...

你可能感兴趣的:(Masa Blazor in Blazor Day)