4. 对象映射 - Mapping.Mapster

4. 对象映射 - Mapping.Mapster

前言

在项目中我们会经常遇到对象的映射,比如像Model和Dto之间的映射,或者是对象的深拷贝,这些都是需要我们自己实现的。此时,项目中会出现很多初始化对象的代码,这些代码写起来相当的枯燥乏味,那么有没有什么办法减轻我们的工作量,使得我们可以把时间花费到业务功能上呢?

目前,.Net中的对象映射框架,功能强大且性能极佳的对象映射框架已经存在,其中使用最多的有:

阅读更多
3. Caller 服务调用 - dapr
2. Caller服务调用 - HttpClient

2. Caller服务调用 - HttpClient

前言

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

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

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

阅读更多
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上运行可不可以?

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

Masa Blazor自定义组件封装

前言

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

1211423-20220428200958133-2043602818.gif

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

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

前言

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

阅读更多
在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. 以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。
阅读更多
使用MASA.Blazor写一个标准的查询表格页

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

前言

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

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

阅读更多
7. 堪比JMeter的.Net压测工具 - Crank 总结篇 - crank带来了什么