Blazor —— 大家来找茬之 ServerSide 和 WebAssembly

最新推荐文章于 2024-06-08 08:08:19 发布

叫我 Teacher 周

最新推荐文章于 2024-06-08 08:08:19 发布

阅读量2.3k

点赞数 1

分类专栏： ASP.NET Core 文章标签： Blazor 前端 AspNetCore .NET Core

所有原创文章版权均归博主“佛系最高指挥官”所有，若要转载，必须注明出处！！！

本文链接：https://blog.csdn.net/playermaker57/article/details/107480885

版权

ASP.NET Core 同时被 2 个专栏收录

23 篇文章 8 订阅

订阅专栏

Blazor

12 篇文章 10 订阅

订阅专栏

前言

再次强调，Blazor 是一套前端框架，和 Vue/Angular/React 三大框架是一回事。不同的是 Blazor 采用的是 C# 作为编程语言，而它可以基于 .NET Core 的体系，与 MVC / Razor Page / WebApi 框架进行混用，并且开发人员可以选择成为全栈 or 纯前端的模式。

Blazor-ServerSide

基于 .NET CORE 的托管，通信方式使用的是 SinglR ，而托管取决于你的 Program 类的托管服务，所以在 Program 里面没有任何特殊变化。

public static async Task Main(string[] args)
{
    var builder = Host.CreateDefaultBuilder(args)
        .ConfigureWebHostDefaults(host =>
        {
            host.UseStartup<Startup>();
        });

    await builder.Build().RunAsync();
}

需要在 Startup.cs 中添加服务 services.AddServerSideBlazor() 服务。
并且要添加路由和终结点：

app.UseEndpoints(route =>
{
    route.MapBlazorHub();
    route.MapFallbackToPage("/_Host");
});

这个 Host 是一个 Razor 页面，即 _Host.cshtml

@page "/"
@{
    Layout = null;
}
@addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Blazor Server</title>
    <base href="/" />
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>
    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

项目需要引用的 nuget 包：Microsoft.AspNetCore.Components

Blazor-WebAssembly

采用的是基于 WebAssembly 技术，由于是纯前端，所以在 Program 中有变化：

public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.RootComponents.Add<App>("app");

    builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

    await builder.Build().RunAsync();
}

如果是后端交互，则需要使用远程访问请求的方式，例如 HTTP / TCP 等等，而不是直接调用后端代码。因为它是纯前端。

然后需要在 wwwroot 中添加一个 index.html 页面，也就是首页：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Blazor WebAssembly</title>
    <base href="/" />
</head>

<body>
    <app>Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>

可以说，这样的 index.html 引导主页面是任何一个前端框架必备的，最终会将前端内容呈现在 <app> ...</app> 这个元素中。

没有 Startup 没有依赖注入配置，因为他不是后端。

概览比较

	ServerSide	WebAssembly
Program.cs	使用 `Host` 托管	使用 `WebAssemblyHostBuilder` 托管
Startup.cs	添加 `ServerSideBlazor` 服务的注入，添加 `app.MapBlazorHub` 和 `app.MapFallbackPage` 中间件	无 `Startup.cs` 类文件
启动页面	`Pages/_Host.cshtml`	`wwwroot/index.html`
App.razor	代码相同	代码相同
Nuget包	`Microsofot.AspNetCore.Components`	`Microsoft.AspNetCore.Components.WebAssembly`
.NET SDK	netcoreapp3.1	netstandard2.1
交互方式	SinglR	支持 Web assembly 技术的浏览器

全栈 or 前端

一般来说，全栈意味着功能是垂直划分，前端->后端->数据库，完整的一个功能划分；而前后端，则需要由前端人员处理界面，后端人员处理数据，通过一种通信方式（目前常见的是 web api）将两人的功能进行串联。

这两种优劣势的争议已经互相厮杀了很久，对于个人来说，全栈是牛逼的象征，对于管理者来说，都是从成本出发。

但还有一个比较重要的因素，就是审美。大部分后端人员对于前端部分的审美、排版是有障碍的，而前端人员对于后端的逻辑、中间件、性能、服务器等等也只懂皮毛。如果想要通吃，那这个人的管理成本就会提升。

因此，最头疼的应该就是管理者了，需要进行权衡和考虑，它牵扯的不单单是技术问题。

叫我 Teacher 周

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Blazor —— 大家来找茬之 ServerSide 和 WebAssembly

再次强调，Blazor 是一套前端框架，和 Vue/Angular/React 三大框架是一回事。不同的是 Blazor 采用的是 C# 作为编程语言，而它可以基于 .NET Core 的体系，与 MVC / Razor Page / WebApi 框架进行混用，并且开发人员可以选择成为全栈 or 纯前端的模式。
复制链接

扫一扫