了解MASABlazor

MASABlazor是Blazor的UI组件库。就像大家写前端时熟悉的Bootstrap和AntDesign一样。MASABlazor官网地址：https://blazor.masastack.comMASABlazorGithub地址：https://github.com/BlazorComp...MASABlazorPro演示地址：https://blazor-pro.masastack....MASABlazorProGithub地址：https://github.com/BlazorComp...什么是Blazor？在介绍MASABlazor之前，有必要了解一下什么是Blazor。如果你已经知道Blazor是什么，可以直接跳过，继续往下看。Blazor是一个使用.NET生成交互式客户端WebUI的框架。使用Blazor，开发人员可以使用C#语言在服务器和客户端上进行编码，以构建丰富的Web应用程序。是不是很好听？不熟悉前端开发语言的后端朋友也可以使用Blazor进行web应用开发。看看官方说明就知道了。如果你想进一步了解Blazor，可以阅读这篇文章，详细介绍了什么是Blazor以及Blazor与其他前端技术的比较。或者直接看官方文档，这里就不多说了。了解了MaterialDesign之后，我们简单了解一下MaterialDesign，为什么是MaterialDesign，因为MASABlazor是基于MaterialDesign设计的。简介：MaterialDesign，中文名称：材料设计语言，也有人称之为纹理设计，是谷歌推出的一种跨平台设计语言，旨在为手机、平板、台式机等“其他”提供高度一致的用户体验平台”和视觉效果。优点：MaterialDesign包括关于如何使用阴影、如何使用动画，甚至在设计过程中使用多少像素边框的建议。它可以帮助我们构建更合理的页面结构，如何排版，字体大小和间距，它定义了优雅流畅的交互效果，引导用户在页面上的视觉聚焦和交互操作。MaterialDesign的核心是简单。大而简，简而精。它将物理世界的体验带到了屏幕上。去除现实中的杂质和随意性，保留其最原始纯粹的形态、空间关系、变化和过渡，配合虚拟世界灵活多变的特性，还原最接近真实的体验，达到简单直观的效果。它的优势当然不止这些。很多国外的应用，包括大量的网站，都是基于MD设计的。在国外还是很受欢迎的。想进一步了解MD的朋友可以去它的官网看看，这里先介绍一下。VuetifyVuetify是全球流行的VueUI框架。它是一个构建在Vue.js之上的完整界面框架。不同于其他框架。Vuetify的设计初衷是易于学习，并且拥有数百个来自材料设计规范的精心设计的组件。Vuetify采用移动优先设计，这意味着您的应用程序无论是在手机、平板电脑还是台式机上都可以开箱即用。所以使用vue的朋友可以使用Vuetify轻松搭建一套基于MaterialDesign设计风格的应用。是不是很酷？说了这么多都是前端的东西，那Blazor有这样的UI组件库吗？答案当然是，那就是MASABlazor。终于轮到我们的主角了。MASABlazorMASABlazor开头已经说过了，它是Blazor的一个UI组件库，Blazor可以让你不用JavaScript开发web应用，MASABlazor可以让你构建一个非常漂亮的web应用。MASABlazor是严格按照MaterialDesign的设计规范精心设计的UI组件库。接下来说说它的优点吧。基于MaterialDesign的设计风格，具备MaterialDesign的所有设计优势，多端体验、交互、优秀的操作以及与Blazor的深度集成，让后端开发者非常容易上手。自然响应，除了Vuetify的部分组件外，还有Url、breadcrumbs、导航三联动、高级搜索、i18n等活跃社区等诸多预置组件，简单易用，专职团队维护MASABlazor并还原所有Vuetify在深度组件中，除了1:1还原之外，还增加了非常实用的预置组件，封装了一些常用的组件或者一组组件，更适合开发者的日常使用，大大减少开发时间，增加开发时间.效率。同时，他也解决了大部分后端人调样式的烦恼。几行代码就能快速搭建出漂亮的页面。那我们就来看看如何在Blazor项目中引入吧。使用MASABlazor环境：.NET6.0.0+VisualStudio2022创建BlazorServer应用dotnetnewblazorserver-oBlazorServerApp添加MASA.Blazor包可以使用Nuget包管理工具搜索MASA.Blazor添加，或者你可以直接dotnetaddpackageMASA.Blazor在Program.cs中添加MasaBlazor相关服务。builder.Services.AddMasaBlazor();此处使用的是.net6.0MinimalApi，没有Startup类。代码看起来也更简单。如果是之前的.net版本，添加services.AddMasaBlazor();在Startup.ConfigureServices中；正好。在Pages/_Layout.cshtml中引入样式、字体和脚本在头部添加样式和字体在正文底部添加js脚本如果是.net6.0之前的版本，这些代码引用了Pages/_Host.cshtml(Server)中_Imports.razor文件中的MASA.Blazor，而BlazorComponent明显有空格，这样我们就不用在每个文件都引用@usingMASA.Blazor@usingBlazorComponent替换Shared/MainLayout.razor中的内容@Body使用模板快速创建Blazorprojects经过以上步骤，就可以使用MASABlazor开发了。但是步骤是不是有点太多太复杂了？当然这些MASABlazor也已经为我们考虑到了，所以它提供了一种更简单的安装方式，就是通过模板来安装。通过dotnet命令dotnetnew--installMASA.Template安装模板，基于MASABlazor组件库dotnetnewmasab-oBlazorServerApp创建BlazorServer项目，简单两步即可完成。通过这种方式创建的项目将帮助您完成上述步骤。效果展示接下来我们将原来的demo组件替换为MASABlazor的侧边栏和顶部工具栏。部分代码截图：使用了MNavigationDrawer和MAppBar。效果图如下：官网有很多漂亮有趣的组件，有实例和代码，比如这个AppBar：点击查看源码，然后复制代码，一个组件就完成了。检查一下：就这么简单。我们来看看官方Admin模板（MASABlazorPro）的效果：MASABlazorPro演示了大部分MASABlazor组件的使用。并且是开箱即用的后台和前端管理模板。全部开源且免费。有兴趣的朋友可以去解决。MASABlazor官网地址：https://blazor.masastack.comMASABlazorGithub地址：https://github.com/BlazorComp...MASABlazorPro演示地址：https://blazor-pro.masastack....MASABlazorProGithub地址：https://github.com/BlazorComp...我们在行动，新框架，新生态。我们的目标是免费、易于使用、高度可塑、功能丰富且健壮。所以我们正在构建一个新的框架，MASAFramework，基于Buildingblocks的设计理念。它有什么特点？原生支持Dapr，让Dapr可以被传统的通讯方式替代。架构不受限制。单体应用、SOA、微服务都支持.Net原生框架，减少学习负担。除了特定领域必须引入的概念，坚持不造新轮子丰富的生态支持，除了框架，还有组件库、权限中心、配置中心、故障排除中心、告警中心等单元测试覆盖系列产品核心代码库率90%+开源、免费、社区驱动，还有什么？我们等你一起探讨。经过几个月的生产项目实践，POC已经完成，之前的积累目前正在重构为新的开源项目。源码已经开始同步到Github（文档站点正在规划中，即将发布）慢慢完善：MASA.BuildingBlocksMASA.ContribMASA.UtilsMASA.EShopBlazorComponentMASA.BlazorQQ群：7424099微信群：加技术操作微信（MasaStackTechOps），注明来意，邀请进群------END------作者简介闫鹏举：MASA技术团队成员。