.NET Core Blazor 1-Blazor项目文件分析

时间 2019-12-09

标签 core blazor 项目文件分析繁體版

原文原文链接

.NET Core Blazor 1-Blazor项目文件分析

本节内容为Blazor的基本文件html

简介

Blazor是一个使用.NET技术用于代替JavaScript/typescript的前端WEB框架。在前端开发中使用.NET语言进行书写逻辑有利于咱们的性能、可靠性和安全性。而且对于使用.NET开发人员而言，全栈的成本更低。前端

截止文章发布时，.NET Core已经发布了3.1版本，Blazor已经正式发布了Server-Side的框架，基于WebAssembly的Client-Side已经进入测试，预计2020年发布。Blazor实现了 .NET Standard2.0 。git

Blazor你能够简单的理解为使用C#写Angular框架，Blazor是基于组件化开发的一款框架，Blazor的组件和页面一般使用Razor标记页的形式进行编码，所以咱们也成为Razor组件(.razor)，借助Razor引擎，咱们能够将html文件和C#语法进行切换。不过对于Blazor而言，它的设计思路和传统MVC是彻底不一样的，即便他们都使用Razor进行页面的开发，Blazor更倾向于客户端UI和逻辑的构成。github

Blazor的运行模式

咱们知道，Blazor目前有两种运行方式，他们有着很本质的区别，以下文web

Server-Side

Server-Side 也被称为Blazor服务器，它是彻底运行于服务器上面，也就是说客户端的浏览器只是一个空壳页面，它不包含任何的逻辑和除了首页（一般会被称为‘_Host’）之外的任何页面，该种模式彻底托管于服务器，UI的修改已经前端所发生的一切事件都须要传往服务器进行计算。传输的过程使用的是SignalR的方式。typescript

使用这种方式意味着对于服务器的带宽以及性能要求会极其之高，可是对于一些须要使用到SignalR的应用以及一些访问量不大的地方使用SignalR也许会有不小的用途。小程序

一次点击事件在websockets中的传输c#

而且在无操做的状况下，网页仍须要按期发送心跳包确认服务器状态，若服务器无响应，则整个网页中止服务api

ClientSide

Client-Side是SPA(Single Page Application)应用，基于一种叫WebAssembly的技术，WebAssembly(wasm)是一个开发的web标准，它是一种很底层的相似于字节码的东西，WebAssembly能够经过JavaScript访问浏览器的完整功能。在咱们.NET运行在浏览器以前，Blazor会提早向浏览器发送一个能够运行在WebAssembly上的迷你版本的mono，咱们知道.NET中的语言是能够运行在mono之上的，所以咱们就等于变相的实现了在浏览器中运行.NET。而且全部代码都是在JavaScript沙盒中运行，也防护了许多不安全操做。浏览器

对于客户端模式，Blazor是将整个项目程序集和运行时(mono)一同发送到了浏览器，经过WebAssembly对JavaScript互操做处理DOM节点和相关api的调用。

两种方式对比

事实上两种方式都有其优缺点，ServerSide在访问量并非那么大的时候，或者说你的服务器足够好的时候，能够很轻松的完成须要的任务，而且在网络聊天这种须要保持长期的网络链接的时候，ServerSide显然是首选，对于一些博客、或者一些普通的以页面展现为目的的网站，ClientSide显然要比ServerSide好一些，可是ClientSide有一个致命的缺点，也就是你的代码质量必须高，代码须要精简。由于你的程序集的大小会影响你的加载速度，所以咱们应当尽量缩小程序集。

ServerSide项目文件解析

在微软提供的模板上面，大致上仍是和咱们的ASP.NET Core是接近的。在依赖注入中，由于咱们利用了Razor来实现C#和html的混合编码以及咱们使用的是ServerSide的Blazor，注入代码以下：

public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();
        services.AddServerSideBlazor();
    }

中间件以下

app.UseEndpoints(endpoints =>
    {
        //匹配咱们的signalR的链接
        endpoints.MapBlazorHub();
        //会自动的去pages/下寻找
        endpoints.MapFallbackToPage("/_Host");
    });

'_Host.cshtml'中

<app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>

这种方式会自动的去寻找App组件做为根组件，而且还有另外一种方式

<app>
        @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
    </app>

这种方式能够无缝将你的MVC或者其余模式下的ASP.NET Core应用迁移到Blazor，这种方式是设置预渲染，使用Html.RenderComponentAsync () HTML帮助器预呈现应用程序内容。

而对于其余文件的布局是和咱们经典的MVC模式同样的。

ClientSide项目文件解析

对于ClientSide，就相似咱们使用ASP.NET Core进行SPA应用开发的格式，对于Client的页面须要单独的一个项目去村，内部和普通的mvc或者serverside的写法相似，可是须要将中间件的服务修改以及咱们的WebHost进行修改

// 替换为IBlazorApplicationBuilder
    public void Configure(IBlazorApplicationBuilder app)
    {
        //添加根组件
        app.AddComponent<App>("app");
    }
    // 更换webhost
    public static IWebAssemblyHostBuilder CreateHostBuilder(string[] args) =>
        BlazorWebAssemblyHost.CreateDefaultBuilder()
            .UseBlazorStartup<Startup>();

随后你须要添加一个Server项目用于启动咱们的服务，只须要在依赖注入中添加如下配置，中间件中激活咱们的Blazor便可。

services.AddResponseCompression(options =>
    {
        options.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(new[]
        {
            MediaTypeNames.Application.Octet,
            WasmMediaTypeNames.Application.Wasm,
        });
    });
    // 中间件
    app.UseBlazor<Client.Startup>();

若是个人文章帮助了您，请您在github.NETCoreGuide项目帮我点一个star，在博客园中点一个关注和推荐。

Github

BiliBili主页

WarrenRyan'sBlog

博客园