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

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

本節內容爲Blazor的基本文件

簡介

Blazor是一個使用.NET技術用於代替JavaScript/typescript的前端WEB框架。在前端開發中使用.NET語言進行書寫邏輯有利於咱們的性能、可靠性和安全性。而且對於使用.NET開發人員而言，全棧的成本更低。

截止文章發佈時，.NET Core已經發布了3.1版本，Blazor已經正式發佈了Server-Side的框架，基於WebAssembly的Client-Side已經進入測試，預計2020年發佈。Blazor實現了 .NET Standard2.0 。

Blazor你能夠簡單的理解爲使用C#寫Angular框架，Blazor是基於組件化開發的一款框架，Blazor的組件和頁面一般使用Razor標記頁的形式進行編碼，所以咱們也成爲Razor組件(.razor)，藉助Razor引擎，咱們能夠將html文件和C#語法進行切換。不過對於Blazor而言，它的設計思路和傳統MVC是徹底不一樣的，即便他們都使用Razor進行頁面的開發，Blazor更傾向於客戶端UI和邏輯的構成。

Blazor的運行模式

咱們知道，Blazor目前有兩種運行方式，他們有着很本質的區別，以下文

Server-Side

Server-Side 也被稱爲Blazor服務器，它是徹底運行於服務器上面，也就是說客戶端的瀏覽器只是一個空殼頁面，它不包含任何的邏輯和除了首頁（一般會被稱爲‘_Host’）之外的任何頁面，該種模式徹底託管於服務器，UI的修改已經前端所發生的一切事件都須要傳往服務器進行計算。傳輸的過程使用的是SignalR的方式。

使用這種方式意味着對於服務器的帶寬以及性能要求會極其之高，可是對於一些須要使用到SignalR的應用以及一些訪問量不大的地方使用SignalR也許會有不小的用途。

一次點擊事件在websockets中的傳輸

而且在無操做的狀況下，網頁仍須要按期發送心跳包確認服務器狀態，若服務器無響應，則整個網頁中止服務

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

博客園