关于前端:初识MASA-Blazor

MASA Blazor是一个 Blazor 的 UI 组件库。就像大家写前端熟知的 Bootstrap, Ant Design 一样。

MASA Blazor 官网地址：https://blazor.masastack.com
MASA Blazor Github 地址：https://github.com/BlazorComp…
MASA Blazor Pro 演示地址：https://blazor-pro.masastack….
MASA Blazor Pro Github 地址：https://github.com/BlazorComp…

什么是 Blazor

在介绍 MASA Blazor 之前，有必要晓得一下什么是 Blazor，如果曾经理解Blazor 是什么的小伙伴能够间接跳过，往下面持续看。

Blazor 是一个应用 .NET 生成交互式客户端 Web UI 的框架，应用 Blazor，开发人员能够应用 C# 语言在服务器和客户端进行编码，构建丰盛 Web 应用程序。听起来是不是很不错，不相熟前端开发语言的后端小伙伴，也能够应用Blazor 进行 Web 利用开发了。简略看一下官网的形容。

如果想深刻理解 Blazor 的小伙伴能够翻一下这篇文章，外面十分具体的介绍了什么是 Blazor 和 Blazor 与其余前端技术的比照。或者能够间接去翻官网文档，这里我就不过多的论述了。

Material Design

理解完 Blazor 再来简略理解一下 Material Design，为什么是Material Design，因为MASA Blazor 就是基于 Material Design 设计的。

简介：Material Design，中文名：资料设计语言，有人也叫它质感设计，是由 Google 推出的跨平台设计语言，其旨在为手机、平板电脑、台式机和“其余平台”提供高度一致应用体验和视觉效果。

长处：Material Design蕴含了在设计时如何应用暗影、如何应用动画、甚至应用多少像素的边框都给出了倡议，它能够帮忙咱们搭建更加正当的页面构造，如何排版、字体大小和间距，它定义了优雅晦涩的交互成果疏导用户在页面中的视觉焦点和交互操作。

Material Design的外围就是简洁。大而简、简而精。它把物理世界的体验带进屏幕。去掉事实中的杂质和随机性，保留其最原始污浊的状态、空间关系、变动与过渡，配合虚拟世界的灵便个性，还原最贴近实在的体验，达到简洁与直观的成果。它的长处当然不止这些。海内的很多利用包含大量 web 网站都是基于 MD 的设计。在国外还是十分火的。想理解更多对于 MD 的小伙伴能够去翻一下它的官方网站，这里就先介绍到这。

Vuetify

Vuetify 是一个在世界范畴内广受欢迎的 VueUI 框架，它是建设在 Vue.js 之上的齐备的界面框架。与其余框架不同。Vuetify从一开始就设计为易于学习的并且领有来自 Material 设计规范 的数百个精心设计组件。Vuetify采纳挪动优先的设计，这意味着无论是在手机、平板电脑还是台式电脑上，你的应用程序都能够开箱即用。

所以应用 vue 的小伙伴能够应用 Vuetify 很轻松的就构建出一套基于 Material Design 设计格调的利用。

是不是很爽呢？说了这么多都是人家前端的货色，那咱们 Blazor 有这样的 UI 组件库吗？答案是当然有，那就是MASA Blazor。终于轮到了咱们的配角。

MASA Blazor

MASA Blazor开篇曾经说过了，他是 Blazor 的一个 UI 组件库，Blazor使你脱离了 JavaScript 进行 web 利用开发，而 MASA Blazor 能够让你不用写，或者写很少的 Css 就能构建出一个十分丑陋的 web 利用。MASA Blazor就是严格依照 Material Design 的 设计规范精心设计的 UI 组件库。接下来说一下他的长处。

1. 基于 Material Design 的设计格调，领有 Material Design 的所有设计长处，多端体验、交互、操作优良
2. 与 Blazor 深度集成，让后端开发人员能十分轻松的上手。
3. 天生具备响应式，除 Vuetify 有的组件外，还有许多预置组件如 Url、面包屑、导航三联动，高级搜寻，i18n 等
4. 社区沉闷、繁难上手，全职团队保护

MASA Blazor深度还原了 Vuetify 的所有组件，做到了 1:1 还原之外还减少了十分实用的预置组件，对罕用的一些组件或一组组件进行封装，更贴合开发者的日常应用，大大缩减了开发工夫，减少了开发的效率。他同时也解决了大部分后端人调款式的懊恼。几句代码就能疾速构建进去一个丑陋的页面。那么接下来咱们就看一看如何在 Blazor 我的项目中引入它。

应用 MASA Blazor

• 环境：.NET 6.0.0 + Visual Studio 2022

• 创立 Blazor Server 利用

  dotnet new blazorserver -o BlazorServerApp

• 增加 MASA.Blazor 包

  能够应用 Nuget 包管理工具搜寻 MASA.Blazor 增加，也能够间接

  dotnet add package MASA.Blazor

• 在 Program.cs 里增加 Masa Blazor 相干服务。

  builder.Services.AddMasaBlazor();

  这里应用的是.net 6.0 Minimal Api 没有了 Startup 类。代码看起来也比拟简洁。如果是之前的.net 版本就在 Startup.ConfigureServices 里增加 services.AddMasaBlazor(); 就好了。

• Pages/_Layout.cshtml 中引入款式、字体、脚本

  在 head 里增加款式和字体

  <link href="_content/MASA.Blazor/css/masa-blazor.css" rel="stylesheet">
  <link href="_content/MASA.Blazor/css/masa-extend-blazor.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@("@mdi")/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
  <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">    

  在 body 的底部增加 js 脚本

  <script src="_content/BlazorComponent/js/blazor-component.js"></script>

  如果是.net6.0 之前的版本，这些代码是在 Pages/_Host.cshtml(Server) 中

• 在_Imports.razor 文件中援用 MASA.Blazor，BlazorComponent 明明空间，这样咱们就不必每个文件都去援用一边了

  @using MASA.Blazor
  @using BlazorComponent

• 替换 Shared/MainLayout.razor 外面的内容

  <MApp>
      @Body
  </MApp>

应用模板疾速创立 Blazor 我的项目

通过上述的步骤你就能够基于 MASA Blazor 进行开发了。然而步骤是不是有一点点多，些许繁冗？当然这些 MASA Blazor 也替咱们思考到了，所以它提供了更简略的装置形式，通过模板进行装置。

1. 通过 dotnet 命令装置模板

   dotnet new --install MASA.Template

2. 创立基于 MASA Blazor 组件库的 Blazor Server 我的项目

   dotnet new masab -o BlazorServerApp

简略两步就搞定了。这样创立完的我的项目就帮你实现了上述的几个步骤。

成果展现

接下来咱们就用 MASA Blazor 的侧边栏和顶部工具栏替换掉原来 demo 的组件。局部代码截图：

应用到了 MNavigationDrawer 和MAppBar两个组件。

效果图如下：

还有很多丑陋乏味的组件官网上都有示例和代码，比方这个AppBar：

点击查看源代码，而后把代码复制过去，一个组件就实现了。

看下成果：

就是这么简略。

咱们再来看一下官网给的 Admin 模板（MASA Blazor Pro）成果如何：

MASA Blazor Pro 演示了大多数 MASA Blazor 组件的应用。而且是一个开箱即用的后盾前端治理模板。都是开源收费的。感兴趣的小伙伴能够去解一下。

MASA Blazor 官网地址：https://blazor.masastack.com
MASA Blazor Github 地址：https://github.com/BlazorComp…
MASA Blazor Pro 演示地址：https://blazor-pro.masastack….
MASA Blazor Pro Github 地址：https://github.com/BlazorComp…

咱们正在口头，新的框架、新的生态

咱们的指标是 自在的 、 易用的 、 可塑性强的 、 功能丰富的 、 强壮的。

所以咱们借鉴 Building blocks 的设计理念，正在做一个新的框架MASA Framework，它有哪些特点呢？

• 原生反对 Dapr，且容许将 Dapr 替换成传统通信形式
• 架构不限，单体利用、SOA、微服务都反对
• 反对.Net 原生框架，升高学习累赘，除特定畛域必须引入的概念，保持不造新轮子
• 丰盛的生态反对，除了框架以外还有组件库、权限核心、配置核心、故障排查核心、报警核心等一系列产品
• 外围代码库的单元测试覆盖率 90%+
• 开源、收费、社区驱动
• 还有什么？咱们在等你，一起来探讨

通过几个月的生产我的项目实际，已实现 POC，目前正在把之前的积攒重构到新的开源我的项目中

目前源码已开始同步到 Github（文档站点在布局中，会缓缓欠缺起来）：

MASA.BuildingBlocks

MASA.Contrib

MASA.Utils

MASA.EShop

BlazorComponent

MASA.Blazor

QQ 群：7424099

微信群：加技术经营微信（MasaStackTechOps），备注来意，邀请进群

​ —— END ——

作者简介

阎鹏举：MASA 技术团队成员。