Masa Blazor in Blazor Day

2022年第一场Blazor中文社区的开发者分享活动，我们的团队也全程参与其中，在议程中，也分享了我们团队的Blazor 管理后台模板，针对于Blazor，先科普一波，避免有些朋友不了解，Blazor是微软推出的基于.NET的前端技术。利用现有的.NET生态，受于.NET的性能，可靠性和安全性，不仅能过够在服务器和客户端之间共享应用程序逻辑，还能够在不同的操作系统上高效、稳定的运行。本次Masa Blazor 也是分享最新的Blazor技术进展和开发实践。

Masa技术团队全程参与

本次年度的Blazor Day,我们分享的议题是“开源的Blazor管理后台模板”。通过我们开源的项目MASA Framework Admin展开介绍，依次介绍了具体的功能、技术栈、分享了我们的Masa Blazor的组件和Masa Blazor Pro，同时也详细的说明了MASA Framework的环境怎么安装、怎么运行等... 详细的具体内容，我们精简成文字版给到大家，当天没有参与直播的朋友们，看这篇就够啦~仅限我们的分享部分哦！

背景

我们做这个事情，其实是很突然的，之前我们公司的内部搞了一个小型的黑客松，大家花了3天时间，基于我们的组件库和框架，就把这样的一个项目给大家做出来了，因为是刚做出来的，用时也较短，其实可以说，还是个“宝宝”。基本上的功能演示是已经做出来了，没有那么完善，如果期待值很高，那还是需要给一些时间的。

MASA Framework Admin 的功能

1.多点登录互斥，同一个账号,只能在一台电脑上登录

如果开了隐私模式的浏览器，或者是在另外一个电脑上面，登录同一个账号，那么之前登录的账号就会被踢掉，是一个很实用的功能，我们也用Blazor去给大家演示，在Blazor上面是怎么做到这点

2.引入Dapr，提供Pubsub、Secret等示例

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

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

3.定时任务，提供基础的定时计算报表数据的示例

只是简单的给大家提供了一个定时计算报表的示例

4.RBAC0，引入Role的概念，并将权限与角色进行关联。用户通过扮演某种角色，具有该角色的权限

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

5.集成可观测性

这个功能其实也是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程序

手把手教你学Dapr - 3. 使用Dapr运行第一个.Net程序 - 寻找和谐 - 博客园

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

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

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

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

也可以切换到WebAssembly的站点

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

我们的地址：

Admin模板

GitHub - masalabs/MASA.Framework.Admin

纯交互组件库

https://github.com/BlazorComponent/BlazorComponent

Material Design组件库

https://github.com/BlazorComponent/MASA.Blazor

MASA.Blazor: 一组基于 Material Design 和 Blazor WebAssembly 的企业级 UI 组件。

Pro模板

https://github.com/BlazorComponent/MASA.Blazor.Pro

完整视频回看：Blazor Day in China-CSDN直播