《進擊吧！Blazor！》第一章 2.Hello Blazor

時間 2021-01-22

標籤 html 前端程序員 web 小程序 c# 後端 app 框架 async 欄目 HTML 简体版

原文原文鏈接

第二次寫專欄，開頭仍是不知道說什麼，因此……先來段廣告😁
《進擊吧！Blazor！》是本人與張善友老師合做的Blazor零基礎入門系列視頻，此係列能讓一個從未接觸過Blazor的程序員掌握開發Blazor應用的能力。
視頻地址：https://space.bilibili.com/483888821/channel/detail?cid=151273
本系列文章是基於《進擊吧！Blazor！》直播內容編寫，升級.Net5，改進問題，講解更全面。html

每個教程的第一個Demo都是Hello，巧了，Blazor的默認模板就是一個現成的Hello Blazor，咱們就從他的默認模板開始。前端

環境介紹

IDE：Visual Studio 16.8程序員

建立項目

選擇Blazor應用
設置項目名稱，這裏我取名「BlazorToDo」是由於接下來第一個完整Demo是一個待辦事項小程序。
選擇Blazor應用模式，咱們接下來開發主要以Blazor WebAssembly App進行。
ASP.NET Core hosted選項用於控制是否生成帶有託管Blazor程序的ASP.NET Core服務端程序，咱們勾上。
咱們將BlazorToDo.Server設爲啓動項，而後啓動，應該能看到Hello, world!

到這裏Hello Blazor項目建立完畢😀

項目結構

下圖是項目結構
web

BlazorToDo.Client

Blazor項目，自己就是一個Asp.Net Core項目，若是隻作前端，就能夠直接拿這個項目進行發佈和部署。以後咱們的分享就圍繞着這個項目進行。小程序

Program.cs

程序入口，這裏與Web項目的差別就是Builder使用了WebAssemblyHostBuilder。c#

1 public static async Task Main(string[] args)
2 {
3     var builder = WebAssemblyHostBuilder.CreateDefault(args);
4     builder.RootComponents.Add<App>("#app");
5     builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
6     await builder.Build().RunAsync();
7 }

_Imports.razor

全局導入配置，在這裏使用using引入後，至關於在全部razor文件中都進行了引入。後端

App.razor

Blazor的根組件，經過Program.cs中的builder.RootComponents.Add<App>進行映射。app

wwwroot

靜態文件存放位置，用途和Aps.net core相同，裏面的index.html文件就是主頁框架

<!--index.html-->
<body>
    <div id="app">Loading...</div>

    <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>

Program.cs文件中builder.RootComponents.Add<App>("#app");中的選擇器#app必須能在index.html中找到正確的元素，否則程序沒法正常顯示。async

Pages

業務組件存放位置，Blazor都是由組件組成的，頁面就是含有路由配置的組件。組件文件擴展名razor，天然使用的是Razor語法，以Index.razor文件爲例，代碼以下

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

Razor語法的使用方法在後續分享中重點介紹，此處就不展開了。

Shared

共享組件存放位置。

BlazorToDo.Server

服務端程序，也是一個Asp.Net Core項目，能夠用他給前端提供WebAPI，而且承載了Client編譯的靜態文件，若是咱們先後端部署在一塊兒，那麼直接發佈他便可，這也是結構最簡單部署方式。

BlazorToDo.Shared

共享項目，這就是Blazor相對於其餘前端開發解決方案的最大的優點，Blazor的先後端使用了相同的語言、相同的框架和語言規範。所以咱們能夠把先後端共享的代碼放入此項目，好比Dto，經常使用組件庫，相同的業務等

代碼解析

Counter.razor

點擊按鈕後數字跳動，效果以下

下面是Counter.razor的代碼

@page "/counter"
<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}