Blazor带我重玩前端(三)

最新推荐文章于 2024-08-16 08:58:32 发布

dotNET跨平台

最新推荐文章于 2024-08-16 08:58:32 发布

阅读量926

点赞数

VS自带的Blazor模板介绍

需要升级VS2019以及.NET Core到最新版（具体的最低支持，我已经忘了，总是越新支持的就越好），以更好的支持自己开发Blazor项目。

使用VS创建Blazor WebAssembly项目

搜索Blazor模板
选择Blazor WebAssembly App模板
项目实例
项目实例

BlazorApp.Shared：提供最一般的支持，包括各个Model
BlazorApp.Client：依赖BlazorApp.Shared，该项目侧重于Pages功能
BlazorApp.Server：依赖BlazorApp.Shared、BlazorApp.Client，该项目侧重于提供接口功能

BlazorApp.Client

项目结构

从上图可知该项目主要包括wwwroot、Pages、Shared三个文件夹，以及_Imports.razor、App.razor、Program.cs这三个单独的文件。

wwwroot

这个文件夹和我们ASP.NET Core MVC里的wwwroot基本一致，不过需要注意的是，这个文件夹里面有一个比较重要的文件index.html，它是我们Blazor项目的起点。这个文件里也引用了blazor.webassembly.js，可是我们在项目中没有看到。这没关系，因为它会由Microsoft.AspNetCore.Components.WebAssembly.Build提供，在运行编译的时候会自己出现的。

Shared

这个文件夹里，有三个文件，分别是MainLayout.razor、NavMenu.razor、SurveyPrompt.razor。

MainLayout是Layout文件，它定义了该项目的基本布局
NavMenu是Component，它实现了菜单功能，并对外提供了独立而又单一的组件功能
SurveyPrompt也是Component，它实现了文件传入与连接跳转功能，对外也是提供了独立而又单一的菜单功能，同时这也是一个带参的组件组件功能后续会详细介绍，但是需要提前说明的是，任何组件一经对外使用，都是独立而又单一的。接下来看一下运行后的效果图：整体的风格、左侧的菜单、右侧的链接都像我们展示了布局和组件功能

其他文件

_Imports.razor，这个文件和我们在ASP.NET Core项目中的_Imports.cshtml文件，没有什么区别
App.razor，这是根组件，里面定义了路由功能、默认布局、以及404展示
Program.cs 在职能上和我们ASP.NET Core项目的Program.cs文件也没有什么区别，但是里面定义了Http所要调用的EndPoint（builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });）