写点什么

Masa Blazor in Blazor Day

  • 2022 年 4 月 06 日
  • 本文字数:2752 字

    阅读完需:约 9 分钟

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 上面是怎么做到这点)


  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 的详情




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



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


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

环境准备 &运行


  1. 安装 Docker

  2. 安装 Dapr

  3. 安装.Net 6

  4. 使用 Docker Compose 启动项目

  5. 使用浏览器访问 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

发布于: 刚刚阅读数: 2
用户头像

还未添加个人签名 2021.10.26 加入

还未添加个人简介

评论

发布
暂无评论
Masa Blazor  in Blazor Day_C#_MASA技术团队_InfoQ写作平台