关于c#: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 的性能

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/…

用过咱们组件库的小伙伴，反映说”示例少“，这里和大家讲一下起因，因为一个组件的性能很多，咱们不太可能，全副都做成示例，如果你想看下，支不反对更多的性能，能够如下图所示，点击 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

环境筹备 & 运行

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 去启动你的我的项目。

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

第一个界面是 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/mi…