作者介绍

陈超超
Ant Design Blazor 我的项目贡献者
领有十多年从业教训，长期基于.Net技术栈进行架构与开发产品的工作，Ant Design Blazor 我的项目贡献者，现就职于正泰团体

第二次写专栏，结尾还是不晓得说什么，所以……先来段广告????
《进击吧！Blazor！》是自己与张善友老师单干的Blazor零根底入门系列视频，此系列能让一个从未接触过Blazor的程序员把握开发Blazor利用的能力。
视频地址：https://space.bilibili.com/48...
本系列文章是基于《进击吧！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。

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();}

_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组件的页面制作方法。