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 的功能
- 多点登录互斥,同一个账号,只能在一台电脑上登录
如果开了隐私模式的浏览器,或者是在另外一个电脑上面,登录同一个账号,那么之前登录的账号就会被踢掉,是一个很实用的功能,我们也用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
Masa Blazor in Blazor Day的更多相关文章
- 使用WebApi和Asp.Net Core Identity 认证 Blazor WebAssembly(Blazor客户端应用)
原文:https://chrissainty.com/securing-your-blazor-apps-authentication-with-clientside-blazor-using-web ...
- WTM Blazor,Blazor开发利器
Blazor从诞生到现在也有一段时间了,之前一直在观望,从dotnet5中Blazor的进步以及即将到来的dotnet6中的规划来看,Blazor的前途还是光明的,所以WtmBlazor来了! Bla ...
- 初识MASA Blazor
MASA Blazor是一个Blazor的UI组件库.就像大家写前端熟知的Bootstrap, Ant Design一样. MASA Blazor官网地址:https://blazor.masasta ...
- MASA Blazor入门这一篇就够了
1.什么是Blazor? 有什么优势? ASP.NET Core Blazor 简介 Blazor 是一个使用 Blazor 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScr ...
- Blazor是春天还是寒风里的挣扎
官方解释Blazor Blazor允许您使用c#而不是JavaScript构建交互式web UI. Blazor应用由可重用的web UI组件组成,这些组件使用c#.HTML和CSS实现.客户端和服务 ...
- MAUI与Blazor共享一套UI,媲美Flutter,实现Windows、macOS、Android、iOS、Web通用UI
1. 前言 距离上次发<MAUI初体验:爽>一文已经过去2个月了,本计划是下半年或者明年再研究MAUI的,现在计划提前啦,因为我觉得MAUI Blazor挺有意思的:在Android.iO ...
- 来自后端的突袭? --浅尝最新开源的C# Web引擎 Blazor
在今年年初, 恰逢新春佳节临近的时候. 微软给全球的C#开发者们, 着实的送上了一分惊喜. 微软正式开源Blazor ,将.NET带回到浏览器. 这个小惊喜, 迅速的在dotnet开发者中间传开了. ...
- .NET in Browser - Blazor
什么是Blazor Blazor 是一个实验性的. NET web 框架, 使用 C# 和 HTML 在任何浏览器中不需要插件即可运行 WebAssembly 程序集. 什么是WebAssembly ...
- 来自后端的突袭? --开包即食的教程带你浅尝最新开源的C# Web引擎 Blazor
在今年年初, 恰逢新春佳节临近的时候. 微软给全球的C#开发者们, 着实的送上了一分惊喜. 微软正式开源Blazor ,将.NET带回到浏览器. 这个小惊喜, 迅速的在dotnet开发者中间传开了. ...
随机推荐
- pandas常用操作详解——pandas的去重操作df.duplicated()与df.drop_duplicates()
df.duplicated() 参数详解: subset:检测重复的数据范围.默认为数据集的所有列,可指定特定数据列: keep: 标记哪个重复数据,默认为'first'.1.'first':标记重复 ...
- 30 面向对象编程 抽象类 abstract 修饰符可以用来修饰方法也可以修饰类
抽象类 概念 abstract 修饰符可以用来修饰方法也可以修饰类, 如果修饰方法,那么该方法就是抽象方法: 如果修饰类,那么该类就是抽象类. 抽象类中可以没有抽象方法,但是有抽象方法的类一定要声明为 ...
- Vue3+ElementPlus的一套开源前台+后台管理模板
Vue-Element-Faster 基于最新版vue.js 3.x与element-plus2.x实现的一套前台展示系统.后台管理系统模板,自带权限管理模块. API接口基于SpringBoot2. ...
- 《Shader入门精要》第11章-11.3.1流动的河流中的offset.x的解释
在我学习入门精要的时候,经常遇到不解释api,甚至是关键代码的实现原理. 11.3.1流动的河流中的offset.x的sin函数查了一下好像大家也都是书上原话直接复制,现在好不容易想明白了希望能帮到和 ...
- java 实现装饰器设计模式
package com.gylhaut.base; /** * 装饰器 * 类与类之间的关系 * 1.依赖:形参(局部变量) * 2.关联:属性 * 聚合 属性 整体和部分 不一致的生命周期 人和手 ...
- vscode中使用git
vscode中使用git 使用vscode打开git的文件时,会自动的跟踪文件的改动, 如果要提交修改,首先点击+,这个相当于git add, 这样会暂时保存,然后点击上面的√,然后在输入栏中输入修改 ...
- [SPDK/NVMe存储技术分析]003 - NVMeDirect论文
说明: 之所以要翻译这篇论文,是因为参考此论文可以很好地理解SPDK/NVMe的设计思想. NVMeDirect: A User-space I/O Framework for Application ...
- springboot通过maven下载依赖失败解决
公司直接用不了内网遇到的好的坑.导入网上的springboot项目的启动入口一致有报错,如:Cannot resolve symbol 'SpringApplication' maven配置设置都做了 ...
- w3af漏扫的基本使用
一.安装 apt安装 apt-get update apt-get install -y w3af 出现无法定位软件包 源码安装 sudo apt-get install git sudo apt-g ...
- luoguP4383 [八省联考2018]林克卡特树(树上dp,wqs二分)
luoguP4383 [八省联考2018]林克卡特树(树上dp,wqs二分) Luogu 题解时间 $ k $ 条边权为 $ 0 $ 的边. 是的,边权为零. 转化成选正好 $ k+1 $ 条链. $ ...