体验了一把最近很火的开源项目-MASA Blazor

前言

很惭愧直到去年底才接触到Blazor。那什么是Blazor呢?相信大家都看过官方文档的详细说明,另外MASA团队也有不错的说明介绍 。用官方的话说Blazor是一个交互式客户端Web UI的框架,并且使用C#开发而不是JavaScript。好了言归正传,事情的起因是这样的,公司组织内部竞赛需要用Blazor做一个简单的网页。为了可以更好的做出效果就简单的尝试了几个开源组件。

开源组件选择

遇事不决先找官方Blazor 教程,跟着微软的教程会得到下面这个样子的页面。

嗯,还是挺清新的…估计会被领导喷死吧。既然官方提供的样式太清新。那就要想一下怎么弯道超车了。

于是乎开始网上冲浪,首先想到的是Bootstrap Blazor组件库,也没有什么特别的原因可能只是因为以前经常用它写后台页面吧。打开它的文档站点是下面这样的

无惊无喜吧,组件库看起来还是蛮丰富的。接着在比较下Ant Design Blazor

颜值党感觉拉不开差距,接着就看到了前几天发布的MASA Blazor。跟上面两个大名鼎鼎相比这个名气相对小了一些。不过人不可貌相海水不可瓢崴,这个官网首页高大上了不少啊。希望组件库别翻车。

虽然说组件库是列表展示没有平铺那么直观吧,但是这几个示例做的也好看太多了。 既然好看就赶紧趁热再多了解一下,打开源码他们也是有快速创建项目模板的。这里我就直接把官方的使用介绍拿来用了。

按照模板生成出来的是这个样子的,我个人是非常喜欢这种设计风格的,感觉可以省不少事。

使用MASA Blazor做个后台管理页面

1.输入框

1
<MTextField @bind-Value="_options.Title" Label="标题"></MTextField>

这样就完成了一个输入框并且绑定了_options.Title这个对象。查看了官网文档并且进入了官方的交流区,发现了还有更实用的技巧。使用onEnteronSearch就可以实现回车触发检索条件了,相当于JS的onkeydown事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<PPageHeader Title="搜索" ShowFiltersByDefault OnSearch="() => FetchList()">
<Filters Context="filter">
<MRow Dense>
<MCol Cols="12" Sm="6" Md="4">
<MTextFieldLabel="标题"
@bind-Value="_options.Title"
Dense
HideDetails="auto"
Outlined
Clearable
OnKeyDown="filter.onEnter"
OnClearClick="filter.onSearch">
</MTextField>
</MCol>
</MRow>
</Filters>
</PPageHeader>

2.下拉框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<MSelect Label="状态" 
Dense
HideDetails="auto"
Outlined
Clearable
MenuProps="(props) => props.OffsetY = true"
Items="Enum<StateTypes>.GetEnumObjectList<StateTypes>()"
ItemText="item => item.Name"
ItemValue="item => item.Value"
@bind-Value="_options.State"
TItem="EnumObject<StateTypes>"
TValue="StateTypes?"
TItemValue="StateTypes"
OnSelectedItemUpdate="filter.onSearch"
OnClearClick="filter.onSearch">
</MSelect>

这样就可以实现把枚举StateTypes直接转成下拉菜单展示了。

3.日期选择器

1
2
3
4
5
6
7
8
9
10
11
<PDateTimePicker Label="发布开始时间"
Clearable
Dense
DefaultSelectedValue="DateTime.UtcNow"
HideDetails="auto"
Outlined
Format="yyyy-MM-dd HH:mm:ss"
@bind-Value="_options.ReleaseStartTime"
OnOk="filter.onSearch"
OnClearClick="filter.onSearch">
</PDateTimePicker>

4.数据表格

数据表格这里使用的时候遇到了一个小问题。就是分页的数量。从官网的示例中可以看到这里是支持全部获取的,但真实的场景这种情况肯定是要规避的。看了官方博客使用MASA.Blazor写一个标准的查询表格页 - MASA Blogs也没有找到好的答案。

还好开发者很积极的告诉了我为什么要这样设计并且展示,也告诉了我自定义的方法。只需要对FooterProps赋值并设置ItemsPerPageOptions属性就可以了。因为后台有很多列表页面,每一个都设置一次就太麻烦了所以重写了一下MDataTable设置了默认值为每页取5,10,15条数据分别。下面是组件的使用及相关参数配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
public partial class DefaultDataTable<TItem> : MDataTable<TItem>
{
public override async Task SetParametersAsync(ParameterView parameters)
{
FooterProps = new Dictionary<string, object>()
{
{
"ItemsPerPageOptions", new List<OneOf<int, DataItemsPerPageOption>>() { 5, 10, 15 }
}
};

await base.SetParametersAsync(parameters);
}
}

下面是Headers属性的设置,这里我加了一个actions用于对数据做也写额外的操作。比如编辑,删除这些。

1
2
3
4
5
6
7
8
9
10
11
12
private readonly List<DataTableHeader<BlogInfoListViewModel>> _headers = new()
{
new DataTableHeader<BlogInfoListViewModel>()
{
Text = "标题", Value = nameof(BlogInfoListViewModel.Title), Sortable = false
},
//这里还有很多字段......
new DataTableHeader<BlogInfoListViewModel>()
{
Text = "操作", Value = "actions", Sortable = false
}
};

下面是组件的使用及效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<DefaultDataTable Headers="_headers"
Items="_tableData"
Loading="_loading"
OnOptionsUpdate="HandleOnOptionsUpdate"
Page="_options.PageIndex"
ItemsPerPage="_options.PageSize"
ServerItemsLength="_totalCount"
TItem="BlogInfoListViewModel">
<ItemColContent>
@if (context.Header.Value == "actions")
{
<Actions>
<Action Color="primary"
Icon="mdi-eye-outline"
Label="查看"
OnClick="() => HrefDetailPage(context.Item.Id)">
</Action>
</Actions>
}
else
{
@context.Value
}
</ItemColContent>
</DefaultDataTable>

分页改掉了,并且一个后台的管理页面也差不多出来了。虽然没有官方模板做的那么优雅,但是看起来整体还是挺舒服的。

5.表单对话框

这里使用弹窗做了个审核下架的功能。使用了预置组件里面的FormModal。很简单的可以写一个对话框。

1
2
3
4
5
6
7
8
9
<FormModal Visible="_withdrawModalVisible"
Title="@($"下架文章({CurrentModel?.Title})")"
Width="800"
OnCancel="() => _withdrawModalVisible = false"
OnOk=@HandleOnOk>
<MRow>
//这里就可以画具体的内容了
</MRow>
</FormModal>

6.单选按钮

单选按钮是用在表单对话框里根据枚举做单选。放在FormModal的插槽里使用的。

1
2
3
4
5
6
7
8
9
10
11
<MRadioGroup @bind-Value="Data.ReasonType" TValue=ReasonTypes>
<LabelContent>
下架原因
</LabelContent>
<ChildContent>
@foreach (var item in Enum<ReasonTypes>.GetEnumObjectList<ReasonTypes>())
{
<MRadio Value="@item.Value" Label=@item.Name TValue="ReasonTypes"></MRadio>
}
</ChildContent>
</MRadioGroup>

7.多行文本框

该组件我依然是在FormModal使用的,很简单直接贴代码。

1
2
3
4
5
6
7
<MTextarea Label="原因详情"
Clearable
Dense
HideDetails="auto"
Outlined
@bind-Value="Data.ReasonDetail">
</MTextarea>

完整的对话框展示

个人感触

首先很感谢开发者可以提供一个好用美观且免费的组件库。感谢对开源做出的贡献,让我做页面的时候多了一个选择。当然也是全程跟着官方的文章一步步来的,传送门MASA Blazor入门这一篇就够了 - MASA Blogs。分享的初衷可能相比于官方更想说明,怎样可以简单优雅的做出来一个实际的页面。当然也参考了很多的文章,咨询了开发者。这里很喜欢官网上的一句话希望与大家共勉。“MASA Blazor 不是 一个个人秀。 是一群非常活跃和投入的技术人员组成的团队,想要通过不断努力为开发人员带来更好的体验。

1. 一行代码让你的项目轻松使用Dapr

1. 一行代码让你的项目轻松使用Dapr

介绍

Dapr简化了云原生开发,让开发可以把焦点放在应用的业务逻辑上,从而让代码简单、可移植,那作为一个.Net开发者,我们也希望项目可以快速用上dapr,那究竟应该如何做呢?

Dapr提出了Sidecar(边车)的概念,在启动项目时再额外启动一个Sidecar, 通过Sidecar可以解决进程间通信,为此官方提供了两种部署方式

  1. 自托管方式下运行Dapr
  2. 在 Kubernetes 模式中部署和运行 Dapr

其中Kubernetes模式部署是通过Kubernetes来完成的,在开发中我们更多的是通过自托管模式使用Dapr,那自托管模式是怎么做的呢?

使用命令行工具,在项目根目录输入:

1
dapr run --app-id assignment-server --app-port 5038 dotnet run

详细文档参考:手把手教你学Dapr - 3. 使用Dapr运行第一个.Net程序

参考以上详细文档操作后,我们就可以在命令行工具中执行dapr invoke --app-id assignment-server --method hello或者Http请求来调用对应的应用的方法

看似好像也不是很复杂,但如果你需要调试dotnet项目呢?再复杂一点的需要启动多个项目进行调试呢?端口一多起来的确会显得很麻烦。

有没有什么办法可以解决呢?有,docker-compose。

但我还不想用这么重的东西,我想像平时开发项目一样直接在windows上运行可不可以?

阅读更多
2. 让服务调用更简单 - Caller.HttpClient

2. 让服务调用更简单 - Caller.HttpClient

前言

绝大多数项目都离不开服务调用,服务的调用方式通常是基于Http、RPC协议的调用,需要获取到对应服务的域名或者ip地址以及详细的控制器方法后才能进行调用,如果项目需要支持分布式部署,则需要借助服务发现或者Nginx才能实现。

但随着Dapr的崛起,服务的调用方式也发生了变化,它不仅仅提供了处理重试和瞬态错误等功能,还内置服务发现,启用dapr的服务仅需知道任意一个启用dapr服务的HttpPort端口、gRpc端口、以及对应服务的appid以及对应的方法名称就可以完成调用,dapr的出现使得服务间调用变得更为的简单、方便

目前我们有一个项目是Dapr的,但它所依赖的另外一个项目是基于Http协议的调用,目前只能使用HttpClientRestSharp实现服务间的调用,但未来有一天它会使用Dapr,因为我们计划会把所有的项目都逐步升级到Dapr上

阅读更多
Masa Blazor自定义组件封装

Masa Blazor自定义组件封装

前言

实际项目中总能遇到一个”组件”不是基础组件但是又会频繁复用的情况,在开发MASA Auth时也封装了几个组件。既有简单定义CSS样式和界面封装的组件(GroupBox),也有带一定组件内部逻辑的组件(ColorGroup)。
本文将一步步演示如何封装出一个如下图所示的ColorGroup组件,将MItemGroup改造为ColorGroup,点击选择预设的颜色值。

1211423-20220428200958133-2043602818.gif

阅读更多
在MAUI中使用Masa Blazor

在MAUI中使用Masa Blazor

Masa Blazor是什么

在此之前我们已经介绍过什么是Masa Blazor,以及如何使用Masa Balzor,如果还有不了解Masa Blazor的同学可以看我上篇文章【初识Masa Blazor】。那么今天就带大家探索一下如何在MAUI中使用Masa Blazor,那么我们先来了解一下什么是MAUI?

MAUI是什么

.NET MAUI全称为 .NET Multi-platform App UI ,顾名思义就是.NET多平台应用 UI,是一个跨平台的框架,是 Xamarin.Forms 的演变,其使用C#和XAML创建本机移动和桌面应用,这里的XAML可以替换成RazorView。 使用 .NET MAUI,可以开发可在 Android、iOS、macOS 和 Windows从单个共享代码库运行的应用,一套代码多端运行。

maui.png

MAUI优点:

  • 从 XAML 和 C# 中的单个共享代码库编写跨平台Visual Studio。
  • 跨平台共享 UI 布局和设计。
  • 跨平台共享代码、测试和业务逻辑。
  • 另一个优点是跨框架重用 Razor 组件,它可以实现为 Razor 类库 (RCL) 并与 Blazor Server 和 WebAssembly 共享。这允许最大限度地重用代码并从单个代码库生成移动、桌面和 Web 解决方案。

今天我们重点在实操,就不介绍那么多概念性的东西了。想了解更多关于MAUI的同学可以移步官方文档介绍 什么是 .NET MAUI?,本篇文章会带大家使用MAUI+Masa Blazor做一个移动端常见的时间轴页面,并加一点切换主题色的小功能,效果图如下:

_16505270394387.png

接下来让我们一步步去实现它。首先我们先准备好必备的环境。

注:文章示例演示环境为(Maui 6.0.200-preview.14.5 + Masa.Blazor 0.3.0)

MAUI环境准备

  1. 首先要确保安装了最新版的 Visual Studio,并且安装了Mobile development with .NET工作负载。 vs-workloads.png

  2. 启用硬件加速才能最大化 Android 模拟器性能,我们可以启用Hyper-V或HAXM加速,这里只介绍第一种

    • 在 Windows 搜索框中输入“Windows 功能”,然后在搜索结果中选择“打开或关闭 Windows 功能” 。 在“Windows 功能”对话框中,启用“Hyper-V”和“Windows 虚拟机监控程序平台” :

    windows-features.png

    进行这些更改后,重新启动计算机。

    请确保 在 Android Device Manager 中创建 的虚拟设备是 x86 64 或基于 x86的系统映像。 如果使用基于 Arm 的系统映像,则不会加速虚拟设备,并且运行速度会缓慢。启用 Hyper-v 后,可以运行加速 Android 仿真器。HAXM加速和详细设置可参考:如何使用 Android 仿真程序 & 启用硬件加速

创建MAUI应用并引入Masa Blazor

  1. 创建项目选择.NET MAUI Blazor App。这样的话我们就能使用Blazor View来写UI界面了

  2. 在nuget中安装Masa.Blazor,并在MauiProgram.cs文件中注册相关服务image-20220328145955206.png

    image-20220328152448798
    1
    builder.Services.AddMasaBlazor();

    CreateMauiApp()方法简单理解:在启动方法中,调用了RegisterBlazorMauiWebView()构建器对象的扩展方法,然后将 BlazorWebView 本身添加到具有该builder.Services属性的 DI 容器的 Services 集合中。这将执行依赖注入加载特定于平台的视图以呈现输出 HTML,因为每个平台都有自己的 Web 引擎,BlazorWebView(从View继承)控件,它能够在运行时处理 Razor 组件并生成其等效的 HTML。该 HTML 将使用平台的本机 Web 引擎呈现,而无需任何 Web 服务器的参与。

  3. wwwroot/index.html 中引入样式、字体、脚本image-20220328150333463

    1
    2
    3
    4
    5
    6
    7
    8
    <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.masastack.com/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.masastack.com/npm/materialicons/materialicons.css" rel="stylesheet">
    <link href="https://cdn.masastack.com/npm/fontawesome/v5.0.13/css/all.css" rel="stylesheet">

    <script src="_content/BlazorComponent/js/blazor-component.js"></script>
    <script src="https://cdn.masastack.com/npm/echarts/5.1.1/echarts.min.js"></script><!-- echarts脚本文件不需要可以不引入 -->

    注意:1.MAUI项目中需要在index.html中引入这些文件,而不是像Blazor那样是在Pages/_Layout.cshtml中。

    2.从Masa Blazor0.3.0开始采用和微软相同的命名规范(大驼峰),MASA改成了Masa所以升级了0.3.0和之后的版本要注意别写错了,不然会找不到样式文件和js文件

  4. 在_Imports.razor文件中引用Masa.BlazorBlazorComponent命名空间,这样我们就不用每个文件都去引用一遍了

时间轴功能实现

我们先在布局页MainLayout.razor中搞出我们页面的大概布局,顶部需要一个Toolbar工具条,底部是底部导航,中间是我们的子页面

这样一种常规的布局页面,点击工具条上面的菜单我们可以切换主题颜色,我们来用Masa Blazor简单实现下。

顶部工具条我们主要用到了MToolbar组件和MMenu组件,底部因为BottomNavigation组件官网暂时暂时还没有,后面版本才会出来,影响不大,我们先用MFooter组件代替。这样我们布局模板页已经搞好了,全局的颜色我们通过变量存起来,通过MMenu选中的值来进行控制image-20220328162300359.png

Mainlayout.razor完整代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
@inherits LayoutComponentBase

<MApp>
<MToolbar MaxHeight="64" Color="@_color" Dark>
<MAppBarNavIcon></MAppBarNavIcon>
<MSpacer></MSpacer>
Timeline
<MSpacer></MSpacer>
<MMenu Left
OffsetY
Transition="slide-x-transition"
Bottom>
<ActivatorContent>
<MButton Icon @attributes="@context.Attrs">
<MIcon>mdi-dots-vertical</MIcon>
</MButton>
</ActivatorContent>
<ChildContent>
<MList>
@foreach (var item in _colors)
{
<MListItem OnClick="()=>{_color = item.Value;}">
<MListItemTitle>@item.Text</MListItemTitle>
</MListItem>
}
</MList>
</ChildContent>
</MMenu>
</MToolbar>

<div style="width:100%; height:100%">
<CascadingValue Value="_color">
@Body
</CascadingValue>
</div>

<MFooter Color="#FAFAFA" Elevation="2">
<MRow NoGutters Justify="JustifyTypes.SpaceBetween">
<MCol Style="display:flex; justify-content:center;">
<MButton Color="@_color" Icon Class="my-2 white--text">
<MBadge OverLap Color="error" Content="6">
<ChildContent>
<MIcon>mdi-chat</MIcon>
</ChildContent>
</MBadge>
</MButton>
</MCol>
<MCol Style="display:flex; justify-content:center;">
<MButton Color="@_color" Icon Class="my-2 white--text">
<MIcon>mdi-account-details</MIcon>
</MButton>
</MCol>
<MCol Style="display:flex; justify-content:center;">
<MButton Color="@_color" Icon Class="my-2 white--text">
<MIcon>mdi-compass</MIcon>
</MButton>
</MCol>
</MRow>
</MFooter>

</MApp>

@code{
private string _color = "purple darken-3";
private List<(string Text, string Value)> _colors = new()
{
new("pink", "purple darken-1"),
new("indigo", "indigo"),
new("teal", "teal"),
new("deep-purple", "deep-purple darken-1"),
new("yellow", "yellow darken-4"),
};
}

接下来我们再来实现Body页面,Body页面就是我们的主要内容了。这里我们可以去Masa Blazor官网找一下Timelines组件直接使用,刚好官网有移动端Timeline的示例demo,只是示例没有改变颜色的功能,没关系我们拿过来改一改。

image-20220328163333337.png

我们把代码Copy过来,去掉他顶部的工具条,因为我们顶部已经在布局页面里写过了,而且是应用在每个子页面的,所以这里就不用在写了。但是这里要考虑怎么把_color参数传到Timeline页面里面,这里我们用到了级联参数,通过 CascadingValue 来把参数传递给子页面,子页面通过CascadingParameter来接收,这样我们在子页面里就可以拿到颜色变量了。

image-20220328163812627.png

Timeline.razor完整代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
@page "/"

<MCard Elevation="0" Class="mx-auto">
<MCard Dark
Flat>
<MButton Absolute
Bottom
Color="@Color"
Right
Fab>
<MIcon>mdi-plus</MIcon>
</MButton>
<MImage Src="https://cdn.masastack.com/stack/images/website/masa-blazor/cards/forest.jpg"
Gradient="to top, rgba(0,0,0,.44), rgba(0,0,0,.44)" Dark>
<MContainer Class="fill-height">
<MRow Align="@AlignTypes.Center">
<strong class="text-h1 font-weight-regular mr-6">8</strong>
<MRow Justify="@JustifyTypes.End">
<div class="text-h5 font-weight-light">
Monday
</div>
<div class="text-uppercase font-weight-light">
February 2015
</div>
</MRow>
</MRow>
</MContainer>
</MImage>
</MCard>
<MCardText Class="py-0">
<MTimeline AlignTop
Dense>
<MTimelineItem Color="pink"
Small>
<MRow Class="pt-1">
<MCol Cols="3">
<strong>5pm</strong>
</MCol>
<MCol>
<strong>New Icon</strong>
<div class="text-caption">
Mobile App
</div>
</MCol>
</MRow>
</MTimelineItem>

<MTimelineItem Color="@Color"
Small>
<MRow Class="pt-1">
<MCol Cols="3">
<strong>3-4pm</strong>
</MCol>
<MCol>
<strong>Design Stand Up</strong>
<div class="text-caption mb-2">
Hangouts
</div>
<MAvatar>
<MImage Src="https://avataaars.io/?avatarStyle=Circle&topType=LongHairFrida&accessoriesType=Kurt&hairColor=Red&facialHairType=BeardLight&facialHairColor=BrownDark&clotheType=GraphicShirt&clotheColor=Gray01&graphicType=Skull&eyeType=Wink&eyebrowType=RaisedExcitedNatural&mouthType=Disbelief&skinColor=Brown"></MImage>
</MAvatar>
<MAvatar>
<MImage Src="https://avataaars.io/?avatarStyle=Circle&topType=ShortHairFrizzle&accessoriesType=Prescription02&hairColor=Black&facialHairType=MoustacheMagnum&facialHairColor=BrownDark&clotheType=BlazerSweater&clotheColor=Black&eyeType=Default&eyebrowType=FlatNatural&mouthType=Default&skinColor=Tanned"></MImage>
</MAvatar>
<MAvatar>
<MImage Src="https://avataaars.io/?avatarStyle=Circle&topType=LongHairMiaWallace&accessoriesType=Sunglasses&hairColor=BlondeGolden&facialHairType=Blank&clotheType=BlazerSweater&eyeType=Surprised&eyebrowType=RaisedExcited&mouthType=Smile&skinColor=Pale"></MImage>
</MAvatar>
</MCol>
</MRow>
</MTimelineItem>

<MTimelineItem Color="pink"
Small>
<MRow Class="pt-1">
<MCol Cols="3">
<strong>12pm</strong>
</MCol>
<MCol>
<strong>Lunch break</strong>
</MCol>
</MRow>
</MTimelineItem>

<MTimelineItem Color="@Color"
Small>
<MRow Class="pt-1">
<MCol Cols="3">
<strong>9-11am</strong>
</MCol>
<MCol>
<strong>Finish Home Screen</strong>
<div class="text-caption">
Web App
</div>
</MCol>
</MRow>
</MTimelineItem>
</MTimeline>
</MCardText>

</MCard>

@code{
[CascadingParameter]
public string Color { get; set; }
}

然后我们把这个页面想要随着主题色变动的颜色改成通过Color变量控制就好了。image-20220328165104848.png

这样我们就完成了一个时间轴页面并且可以切换主题色,这里我们还可以基于这个示例加一些功能,比如点击这个+号按钮去弹窗再去添加一个时间任务去渲染到页面上,也是挺简单的,就不做演示了。本篇文章主要介绍了在MAUI中如何使用Masa Blazor,并做了一个小demo。抛砖引玉,大家也可以尝试用MAUI + Blazor去做一些应用体验一下。

完整示例代码:codding-y/Maui.MasaBlazor (github.com)

MASA Blazor入门这一篇就够了

MASA Blazor入门这一篇就够了

1.什么是Blazor? 有什么优势?

ASP.NET Core Blazor 简介

Blazor 是一个使用 Blazor 生成交互式客户端 Web UI 的框架:

  1. 使用 C# 代替 JavaScript 来创建信息丰富的交互式 UI。
  2. 共享使用 .NET 编写的服务器端和客户端应用逻辑。
  3. 将 UI 呈现为 HTML 和 CSS,以支持众多浏览器,其中包括移动浏览器。
  4. 与新式托管平台(如 Docker)集成。

Blazor 优势:

  1. 使用 C# 代替 JavaScript 来编写代码。
  2. 利用现有的 .NET 库生态系统。
  3. 在服务器和客户端之间共享应用逻辑。
  4. 受益于 .NET 的性能、可靠性和安全性。
  5. 在 Windows、Linux 和 macOS 上使用 Visual Studio 保持高效工作。
  6. 以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。
阅读更多
使用Helm打造应用商店

使用Helm打造应用商店

1. 简介

利用Kubernetes部署一个应用,需要Kubernetes原生资源文件如deployment、replicationcontroller、service或pod 等。而对于一个复杂的应用,会有很多类似上面的资源描述文件,如果有更新或回滚应用的需求,可能要修改和维护所涉及的大量资源文件,且由于缺少对发布过的应用版本管理和控制,使Kubernetes上的应用维护和更新等面临诸多的挑战,而Helm可以帮我们解决这些问题。

Helm是目前Kubernetes服务编排领域的唯一开源子项目,做为Kubernetes应用的一个包管理工具,可理解为Kubernetes的apt-get / yum,由Deis 公司发起,该公司已经被微软收购。Helm通过软件打包的形式,支持发布的版本管理和控制,很大程度上简化了Kubernetes应用部署和管理的复杂性。

Helm把Kubernetes资源(比如deployments、services或 ingress等) 打包到一个chart中,而chart被保存到chart仓库。通过chart仓库可用来存储和分享chart。Helm使发布可配置,支持发布应用配置的版本管理,简化了Kubernetes部署应用的版本控制、打包、发布、删除、更新等操作。

阅读更多
使用MASA.Blazor写一个标准的查询表格页

使用MASA.Blazor写一个标准的查询表格页

前言

大家好,我是开源项目 MASA Blazor 主要开发者之一,如果你还不了解MASA Blazor,可以访问我们的 官网 和博客 《初识MASA Blazor》 一探究竟。简单来说,MASA Blazor 是一个基于 Material Design 设计语言的 Blazor 组件库,dotNET开发者只需或者甚至不需要懂得 javascript 就能开发一个企业级中后台系统。

我这次分享的主题是《使用MASA Blazor开发一个标准的查询表格页》,我会先从创建项目开始手撸一个没有任何技巧的查询表格页,然后我会分享一些技巧和封装的组件,实现快速开发。

阅读更多
7. 堪比JMeter的.Net压测工具 - Crank 总结篇 - crank带来了什么
6. 堪比JMeter的.Net压测工具 - Crank 实战篇 - 收集诊断跟踪信息与如何分析瓶颈

6. 堪比JMeter的.Net压测工具 - Crank 实战篇 - 收集诊断跟踪信息与如何分析瓶颈

1. 前言

上面我们已经做到了接口以及场景压测,通过控制台输出结果,我们只需要将结果收集整理下来,最后汇总到excel上,此次压测报告就可以完成了,但收集报告也挺麻烦的,交给谁呢……

找了一圈、没找到愿意接手的人,该怎么办呢……思考了会儿还是决定看看能否通过程序解决我们的难题吧,毕竟整理表格太累╯﹏╰

阅读更多