第二次寫專欄，開頭還是不知道說什么，所以……先來段廣告😁
《進擊吧！Blazor！》是本人與張善友老師合作的Blazor零基礎入門系列視頻，此系列能讓一個從未接觸過Blazor的程序員掌握開發Blazor應用的能力。
視頻地址：https://space.bilibili.com/483888821/channel/detail?cid=151273
本系列文章是基於《進擊吧！Blazor！》直播內容編寫，升級.Net5，改進問題，講解更全面。
每一個教程的第一個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項目創建完畢😀
項目結構
下圖是項目結構
BlazorToDo.Client
Blazor項目，本身就是一個Asp.Net Core項目，如果只做前端，就可以直接拿這個項目進行發布和部署。之后我們的分享就圍繞着這個項目進行。
Program.cs
程序入口，這里與Web項目的差異就是Builder使用了WebAssemblyHostBuilder。
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>進行映射。
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中找到正確的元素，不然程序無法正常顯示。
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++; } }
代碼很簡潔，意思如下
- 聲明了變量
currentCount，要在頁面上顯示可以使用@currentCount，這里使用@符號從HTML轉換為c#。 - html元素
button中我們使用@onclick捕獲事件，讓他觸發IncrementCount函數，這個函數中累加currentCount變量。
關於razor語法將來后續分享中重點介紹
次回預告
我將通過一個ToDo示例介紹路由的工作原理，Blazor組件的頁面制作方法。