了解 Blazor Server App 项目结构

在本文中，你将获得以下问题的答案

先决条件
如何创建 Blazor Server App 项目？
Blazor Server 应用程序的项目结构是什么样的？
每个默认文件夹有什么用
如何设置启动razor组件或页面运行？

先决条件

HTML、CSS 和 Javascript 的基本知识。
Visual Studio Community 2019 / 2022。本文使用 VS Community 2022。

如何创建 Blazor Server App 项目？

启动 VS 社区 2022
点击文件 -> 新建 -> 项目

选择Blazor Server App，点击右下角的“下一步”按钮。

给出项目名称
您想要管理项目的位置。
您想要的解决方案名称
单击“下一步”按钮进入下一个屏幕。

选择您想要的框架。
认证类型模式
配置 HTTPS
启用 Docker：需要安装 DOCKER 才能运行。
点击“创建”按钮创建一个项目，以下屏幕截图为示例。

按 F5 运行项目，浏览器上将出现以下输出。

Blazor Server 应用程序的项目结构是什么样的？

在深入了解项目结构的细节之前，请参考解决方案资源管理器的整体屏幕截图，即项目结构基本视图。

（解决方案资源管理器-项目结构基本视图）

默认有7个主节点和4个主文件。

主要 7 个节点如下

连接服务
依赖项
特性
網站根
数据
页面
共享

连接服务：您可以根据项目需求添加服务的点。

连接服务的类型

有两种类型的连接服务

服务依赖关系
服务参考

按照您所看到的屏幕，右键单击“连接的服务”选项。

单击添加选项

您可以看到上面的屏幕截图，其中连接的服务已轻松添加到项目中。

例子

Azure 存储
Azure 应用程序

ETC

点击“管理连接服务”

2. 添加服务依赖关系。

3. 添加服务引用。

4. 依赖项：您添加和删除类库、COM NuGet 包等…对您的项目的引用。
5. 右键单击“DEPENDENCIES”节点，您可以看到屏幕上出现以下选项。

依赖项有两种选择

分析器：分析器是帮助提高代码质量的强大工具。您可以启用或禁用分析器。
框架：您看到的框架的基本库列表。

特性

此文件夹有一个名为 launchSettings.json 的 JSON 配置文件。此文件包含所有必要的应用程序启动设置。默认情况下，该文件有三个主要 JSON 组。

iis 设置
个人资料
IIS 快讯

launchSetting.json 文件 JSON

{"iisSettings": {"windowsAuthentication": false,"anonymousAuthentication": true,"iisExpress": {"applicationUrl": "http://localhost:49428","sslPort": 44303}},"profiles": {"LearnBlazorServerApp": {"commandName": "Project","dotnetRunMessages": true,"launchBrowser": true,"applicationUrl": "https://localhost:7137;http://localhost:5137","environmentVariables": {"ASPNETCORE_ENVIRONMENT": "Development"}},"IIS Express": {"commandName": "IISExpress","launchBrowser": true,"environmentVariables": {"ASPNETCORE_ENVIRONMENT": "Development"}}}
}

WWWRoot：用于存储和管理所有静态文件（如引导程序、图像、JS 文件）的特殊位置。

您可以看到 WWWROOT 里面有一个子文件夹 CSS。里面有 Bootstrap 和 Open-iconic 文件夹。
数据：此文件夹有两个类文件。
WeatherForecast.cs：普通的 C# 类文件。
WeatherForecastService.cs：具有 GetForecastAsync 方法的服务文件，该方法返回 WeatherForcast[] 数组。

页面

您可以看到有六 (6) 个文件。两种文件 - Razor Component (.Razor) 和 Razor View (.Cshtml)。

共享

_导入.razor

这是一个常见的位置，您可以在此维护通用命名空间，这样就无需一次又一次地声明命名空间。以下命名空间已在 _impory.razor 文件中默认定义。

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using LearnBlazorServerApp
@using LearnBlazorServerApp.Shared

应用程序razor

应用程序的根组件。它使用路由器组件管理客户端路由。

应用程序设置.json

这是一个用于管理 JSON 格式的应用程序配置设置的专用文件。您可以管理数据库连接、AppSetting 变量、日志记录等设置。

{"Logging": {"LogLevel": {"Default": "Information","Microsoft.AspNetCore": "Warning"}},"AllowedHosts": "*"
}

程序.cs

应用程序的入口点和运行设置如中间件和应用程序运行（app.run()）。

如何设置启动razor组件或页面运行？

在运行新创建的项目时，您可以默认看到 INDEX.RAZOR 组件正在运行。

现在我希望计数器剃须刀组件在运行应用程序时默认运行。

Index.razor 代码

@page "/"
@page "/index"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
Now remove @page “/” from index.razor component and same way place on counter.razor component.

更新 Counter.razor 代码

@page "/"
@page "/Counter";
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {private int currentCount = 0;private void IncrementCount(){currentCount++;}
}

要在 Blazor 中设置启动组件，只需将 @page”/”保留在第一行。