初识MASA Blazor

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

MASA Blazor官网地址:https://blazor.masastack.comMASA Blazor Github地址:https://github.com/BlazorComponent/MASA.BlazorMASA Blazor Pro演示地址:https://blazor-pro.masastack.com/dashboards/ecommerceMASA Blazor Pro Github地址:https://github.com/BlazorComponent/MASA.Blazor.Pro

什么是Blazor

在介绍MASA Blazor之前,有必要知道一下什么是Blazor,如果已经了解Blazor是什么的小伙伴可以直接跳过,往下面继续看。

Blazor 是一个使用 .NET生成交互式客户端 Web UI 的框架,使用Blazor,开发人员可以使用C#语言在服务器和客户端进行编码,构建丰富Web应用程序。听起来是不是很不错,不熟悉前端开发语言的后端小伙伴,也可以使用Blazor进行Web应用开发了。简单看一下官方的描述。

a2845d85a4bbeafc5ecb4b7d770eacbc.png

如果想深入了解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

    3f5139555ae29d038efd5d0d8def839f.png

  • 在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>

    0248b6a9d056dd81de26d75e79bdcb1e.png

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

  • 在_Imports.razor文件中引用MASA.BlazorBlazorComponent明明空间,这样我们就不用每个文件都去引用一边了

    @using MASA.Blazor
    @using BlazorComponent

    6f0be0d58ecadff47f88d08561003a14.png

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

    <MApp>
    @Body
    </MApp>
  • d278a029dadf351e485e1ac45f73d001.png

使用模板快速创建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的组件。部分代码截图:

使用到了MNavigationDrawerMAppBar两个组件。

4b119f5af7d86c711f9eedfe6a255dc8.png

效果图如下:

b5980d814aea72070735ccc4b21d9542.png

还有很多漂亮有趣的组件官网上都有示例和代码,比如这个AppBar

cacef2c9efdfecdf0f60d1f4b76761b6.png

点击查看源代码,然后把代码复制过来,一个组件就完成了。

0c4e75800940fcbfe23f7550a368eb3e.png

看下效果:

c764e4a87b0c9bb16c344a1b0da034cf.png

就是这么简单。

我们再来看一下官方给的Admin模板(MASA Blazor Pro)效果如何:

4d0cf7f6c5eff206e32e55153f2822d8.png

25c8d0fa438838adc6f3943e4ff5f4e1.png

MASA Blazor Pro 演示了大多数MASA Blazor组件的使用。而且是一个开箱即用的后台前端管理模板。都是开源免费的。感兴趣的小伙伴可以去解一下。

MASA Blazor官网地址:https://blazor.masastack.comMASA Blazor Github地址:https://github.com/BlazorComponent/MASA.BlazorMASA Blazor Pro演示地址:https://blazor-pro.masastack.com/dashboards/ecommerceMASA Blazor Pro Github地址:https://github.com/BlazorComponent/MASA.Blazor.Pro

我们正在行动,新的框架、新的生态

我们的目标是自由的易用的可塑性强的功能丰富的健壮的

所以我们借鉴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),备注来意,邀请进群

f190fa9069864cec70069900efd760c3.png

                                                                          ------ END ------

作者简介

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/292904.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Thread.sleep还是TimeUnit.SECONDS.sleep

刚看到TimeUnit.SECONDS.sleep()方法时觉得挺奇怪的&#xff0c;这里怎么也提供sleep方法&#xff1f;public void sleep(long timeout) throws InterruptedException {if (timeout > 0) {long ms toMillis(timeout);int ns excessNanos(timeout, ms);Thread.sleep(ms, ns…

win7技巧

win7鼠标右键菜单清理 win7右键菜单设置 |浏览&#xff1a;7659|更新&#xff1a;2014-03-04 14:23|标签&#xff1a; windows7 鼠标 1234567分步阅读虽然我们现在打开某个软件都是双击解决完事&#xff0c;但是偶尔我们需要右键属性的时候&#xff0c;可以看到右键菜单拖拖拉拉…

shell基础一

Shell支持自定义变量。 定义变量 定义变量时&#xff0c;变量名不加美元符号&#xff08;$&#xff09;&#xff0c;如&#xff1a; variableName"value" 注意&#xff0c;变量名和等号之间不能有空格&#xff0c;这可能和你熟悉的所有编程语言都不一样。 同时&…

python画方波_python实现周期方波信号频谱图

在学习傅里叶变换的时候遇到了求周期方波信号频谱图的例子&#xff0c;在书上和网上查阅了一些资料&#xff0c;发现大都是讨论的都是下图左边的周期信号的频谱&#xff0c;课程老师的PPT中也只列出了另一种周期信号频谱图的结论&#xff0c;没有在进行傅里叶变换&#xff0c;自…

基于Python的电商平台淘宝商品评论数据采集与分析

引言 在电商竞争日益激烈的情况下&#xff0c;商家既要提高产品质量&#xff0c;又要洞悉客户的想法和需求&#xff0c;关注客户购买商品后的评论&#xff0c;而第三方API接口商家获取商品评价主要依赖于人工收集&#xff0c;不但效率低&#xff0c;而且准确度得不到保障。通过…

《Pyflink》Flink集群安装,Python+Flink调研

Flink集群安装&#xff0c;PythonFlink调研 Flink集群部署 下载对应版本安装包&#xff1a;https://flink.apache.org/downloads.html 实验环境为hadoop2.7&#xff0c; scala2.11 所以下载flink-1.7.1-bin-hadoop27-scala_2.11.tgz 配置conf/flink-conf.yaml jobmanager.rpc…

项目手札2---关于分页显示时地址栏的风格

在控制器里&#xff0c;用RequestMapping("")时我们可能用RESTFUL风格的来映射&#xff0c;也有可能是用其他的方式&#xff0c;用或不用RESTFUL风格在分页显示时的地址栏里有些不同。首先来看不用RESTFUL时地址栏的样子&#xff1a; <li><a href"show…

shell基础二

前面已经讲到&#xff0c;变量名只能包含数字、字母和下划线&#xff0c;因为某些包含其他字符的变量有特殊含义&#xff0c;这样的变量被称为特殊变量。例如&#xff0c;$ 表示当前Shell进程的ID&#xff0c;即pid&#xff0c;看下面的代码&#xff1a; $echo $$ 运行结果 29…

hdu 4539(状压dp)

题目链接&#xff1a;http://acm.hdu.edu.cn/showproblem.php?pid4539 思路&#xff1a;跟poj1185简直就是如出一辙&#xff01; 1 #include<iostream>2 #include<cstdio>3 #include<cstring>4 #include<algorithm>5 using namespace std;6 7 int row…

万字长文入门 Redis 命令、事务、锁、订阅、性能测试

Redis 基本数据类型Redis 中&#xff0c;常用的数据类型有以下几种&#xff1a;String&#xff1a;字符串类型&#xff0c;二进制安全字符串&#xff1b;Hash&#xff1a;哈希表&#xff1b;List 列表&#xff1a;链表结构&#xff0c;按照插入顺序排序的字符串元素的集合&…

postgresql 查看page, index, tuple 详细信息

下面的内容需要理解postgres术语 page, tuple, regclass, relname. sql command 需要用到 pgstattuple,pageinspect extension.Setup Extension create extension pgstatuplecreate extension pageinspect 查询page, index 详细信息 show how many pages in one tableselect pg…

python读写文件错误_Python读取csv文件错误解决方法

如果累了就拥抱我取暖 ——侃爷 今天这篇推文很简单&#xff0c;就是给大家总结一下我今天用pandas读取csv文件遇到的坑。 一直处理csv文件都是用pandas的read_csv函数读取csv文件之后处理&#xff0c;都没碰到过什么问题。But&#xff0c;But今天帮朋友处理csv文件时&#xff…

基于应用日志的扫描器检测实践

基于应用日志的扫描器检测实践 在网络上搜索web扫描器时&#xff0c;各类扫描器工具、扫描攻略玲琅满目&#xff0c;但对扫描器检测方法的内容却少之又少。因此&#xff0c;本文对各类web扫描特特征进行了梳理和总结&#xff0c;并结合苏宁应用防火墙&#xff08;SNWAF&#x…

shell基础三

如果表达式中包含特殊字符&#xff0c;Shell 将会进行替换。例如&#xff0c;在双引号中使用变量就是一种替换&#xff0c;转义字符也是一种替换。举个例子&#xff1a; #!/bin/basha10echo -e "Value of a is $a \n" 运行结果&#xff1a; Value of a is 10 这里 …

将一个压缩文件分成多个压缩文件;RAR文件分卷

有时候需要上传压缩文件&#xff0c;但是限制了单个文件的大小&#xff0c;那我们怎么才能将一个比较大的压缩文件分割成多个压缩文件&#xff0c;从而符合要求的进行文件的上传呢&#xff1f;这里小编告诉你一个技巧。 工具/原料 电脑 winrar&#xff08;一般电脑都自带了&…

定义命令别名(alias)

Linux之alias:1.查看当前别名&#xff1a;alias# alias alias cpcp -i alias l.ls -d .* --colortty alias llls -l --colortty alias lsls --colortty alias mvmv -i alias rmrm -i alias whichalias | /usr/bin/which --tty-only --read-alias --show-dot --show-tilde 2.设…

python画相关性可视化图_Python可视化很简单,一文教你绘制饼图、极线图和气泡图...

matplotlib库作为Python数据化可视化的最经典和最常用库&#xff0c;掌握了它就相当于学会了Python的数据化可视化&#xff0c;上次呢&#xff0c;已经和大家聊了关于柱状图、条形图和直方图相关的东东&#xff0c;相信大家已经掌握了哈&#xff0c;那今天呢&#xff0c;咱们再…