生成 Blazor 电影数据库应用（第 1 部分 - 创建 Blazor Web App）

本文是 Blazor 电影数据库应用教程的第一部分，介绍有关如何生成具有电影数据库管理功能的 ASP.NET Core Blazor Web App 的基础知识。

本教程系列的这一部分介绍如何创建采用静态服务器端呈现（静态 SSR）的 Blazor Web App。 静态 SSR 表示内容在服务器上呈现，并发送到客户端供显示以响应单个请求。

先决条件

Visual Studio（最新预览版）与 ASP.NET 和 Web 开发工作负载

最新版本：

• Visual Studio Code
• C# 开发工具包
• .NET SDK

本教程中，关于 ASP.NET Core 开发的 Visual Studio Code (VS Code) 说明使用 .NET CLI，它是 .NET SDK 的一部分。 .NET CLI 命令在 VS Code 的集成终端中发出，该终端默认为 PowerShell 命令行界面。 在菜单栏中的“终端”菜单中选择“新终端”，打开“终端”。

.NET SDK（最新版本）

.NET CLI 是 .NET Core SDK 的一部分。 若要发出影响项目的命令，请将命令行界面打开到项目的根文件夹。

创建 Blazor Web App

在 Visual Studio 中：

• 从启动窗口选择“创建新项目”，或者从菜单栏选择“文件”“新建”“项目”。>>

• 在“创建新项目”对话框中，从项目模板列表中选择“Blazor Web App”。 选择“下一步”按钮。

• 在“配置新项目”对话框中，在“项目名称”字段中将项目命名为 （包括匹配大写）。BlazorWebAppMovies 使用这个确切的项目名称非常重要，可确保命名空间与从教程复制到要构建的应用中的代码匹配。

• 确认应用的位置是否合适。 设置“在同一目录中放置解决方案和项目”复选框以匹配首选解决方案文件位置。 选择“下一步”按钮。

• 在“其他信息”对话框中，使用以下设置：

  • 框架：选择“.NET 9.0 (标准期限支持)”。
  • 身份验证类型：无
  • 配置 HTTPS：选中
  • 交互式呈现模式：服务器
  • 交互位置：每页/每组件
  • 包括示例页面：选中
  • 不使用顶级语句未选中
  • 选择创建。

本教程系列部分的 Visual Studio 说明使用 EF Core 命令添加数据库迁移和更新数据库。 使用 EF Core发出 命令。 本教程系列稍后会提供详细信息。

本教程假定你熟悉 VS Code。 如果你不熟悉 VS Code，请参阅 VS Code 文档。 介绍性视频页面列出的视频旨在简要介绍 VS Code 的功能。

确认已安装最新的 C# 开发工具包和 .NET SDK。

在 VS Code 中：

创建新项目：

• 转到“资源管理器”视图，然后选择“创建 .NET 项目”按钮。 或者，可以使用 Ctrl++ 打开“命令面板”，然后键入“.NET”，查找并选择“.NET: 新建项目”命令。

• 从列表中选择 Blazor Web App 项目模板。

• 在“项目位置”对话框中，为项目创建或选择一个文件夹。

• 在“命令面板”中，将项目命名为 ，包括匹配大写BlazorWebAppMovies。 使用这个确切的项目名称非常重要，可确保命名空间与从教程复制到要构建的应用中的代码匹配。

• 选择“ 创建项目 ”以创建应用。

确认已安装最新的 .NET SDK。

在命令行界面中：

• 使用 cd 命令更改为要在其中创建项目文件夹的目录（例如，cd c:/users/Bernie_Kopell/Documents）。

• 使用 dotnet new 命令和 blazor 项目模板，以创建新的 Blazor Web App 项目。 传递给命令的 -o|--output 选项将在当前目录位置的新文件夹中创建项目。 将项目命名为 BlazorWebAppMovies（包括匹配大写），因此命名空间与从教程复制到应用的代码匹配。

  dotnet new blazor -o BlazorWebAppMovies
  

运行应用

在键盘上按 F5 以运行应用。

如果未将项目配置为使用 SSL，Visual Studio 显示以下对话框：

如信任 ASP.NET Core SSL 证书，请选择“是”。

将显示以下对话框：

选择“是”来确认风险并安装证书。

Visual Studio：

• 编译并运行应用。
• 在 https://localhost:{PORT} 处启动默认浏览器，这会显示应用 UI。 {PORT} 占位符是在创建应用时分配的随机端口。 如果由于本地端口冲突而需要更改端口，请更改项目的 Properties/launchSettings.json 文件中的端口。

导航应用的页面以确认应用正常工作。

在 VS Code 中，按 F5 启动应用。

在 VS Code UI 顶部的“命令面板”的“选择调试程序”提示符下，选择 C#。 在下一个提示符下，选择默认启动配置 (C#: BlazorWebAppMovies [Default Configuration])。

默认浏览器在 http://localhost:{PORT} 处启动，这会显示应用 UI。 {PORT} 占位符是在创建应用时分配的随机端口。 如果由于本地端口冲突而需要更改端口，请更改项目的 Properties/launchSettings.json 文件中的端口。

导航应用的页面以确认应用正常工作。

在打开到项目根文件夹的命令行界面中，执行 dotnet watch 命令来编译和启动应用：

dotnet watch

应用已编译并运行。 应用在 http://localhost:{PORT} 处启动，其中，{PORT} 占位符是创建应用时分配给应用的随机端口。 如果由于本地端口冲突而需要更改端口，请更改项目的 Properties/launchSettings.json 文件中的端口。

导航应用的页面以确认应用正常工作。

停止应用

使用以下任一方法停止应用：

• 关闭浏览器窗口。
• 在 Visual Studio 中，执行下列任一操作：

  • 使用 Visual Studio 菜单栏中的“停止”按钮：

    

  • 键盘上按 Shift+F5。

使用以下方法停止应用：

1. 关闭浏览器窗口。
2. 在 VS Code 中，执行下列任一操作之一：
   • 在“运行”菜单中，选择“停止调试”。
   • 键盘上按 Shift+F5。

使用以下方法停止应用：

1. 关闭浏览器窗口。
2. 在命令行界面中，按 Ctrl +C。

检查项目文件

以下部分包含项目文件夹和文件的概述。

如果要生成应用，则无需对以下部分中的项目文件进行更改。 阅读文件夹和文件的说明时，请在项目中检查它们。

如果只阅读文章而不生成应用，则可以在 Blazor示例 GitHub 存储库 (dotnet/blazor-samples) 中引用已完成的示例应用。 选择存储库中的最新版本文件夹。 本教程项目的示例文件夹命名为 BlazorWebAppMovies。 示例应用是在遵循教程系列的所有步骤之后应用的完成版本。 示例中的代码并不总是与本系列结束之前的教程步骤匹配。

Properties 文件夹

Properties 文件夹在 launchSettings.json 文件中保存开发环境配置。

wwwroot 文件夹

wwwroot 文件夹包含静态资产，如图像、JavaScript (.js) 和样式表 (.css) 文件。

Components、Components/Pages 和 Components/Layout文件夹

这些文件夹包含 Razor 组件，通常称为“组件”和支持文件。 组件是用户界面 (UI) 的自包含部分，具有可选的处理逻辑。 组件可在项目之间嵌套、重复使用和共享。

组件是使用 C# 和 HTML 标记的组合在 Razor 组件文件（文件扩展名为 .razor）中实现的。

通常，嵌套在其他组件中且不可通过 URL直接访问（“可路由”）的组件放置在 Components 文件夹中。 可通过 URL 路由的组件通常放置在 Components/Pages 文件夹中。

Components/Layout 文件夹包含以下布局组件和样式表：

• MainLayout 组件 (MainLayout.razor)：应用的布局组件。
• MainLayout.razor.css：应用主布局的样式表。
• NavMenu 组件 (NavMenu.razor)：实现边栏导航。 此组件使用多个 NavLink 组件呈现指向其他 Razor 组件的导航链接。
• NavMenu.razor.css：应用导航菜单的样式表。

Components/_Imports.razor 文件

_Imports 文件 (_Imports.razor) 包括要包含在应用的 Razor 组件中的常见 Razor。 Razor 指令是带有在 @ 标记中显示的 Razor 前缀的保留关键字，更改组件标记或组件元素的编译方式或函数。

Components/App.razor 文件

App 组件 (App.razor) 是应用的根组件，其中包括：

• HTML 标记。
• Routes 组件。
• Blazor 脚本（<script> 的 blazor.web.js 标记）。

根组件是应用加载的第一个组件。

Components/Routes.razor 文件

Routes 组件 (Routes.razor) 为应用设置路由。

appsettings.json 文件

包含配置数据的 appsettings.json 文件，如连接字符串。

警告

不要在客户端代码中存储应用机密、连接字符串、凭据、密码、个人标识号（PIN）、专用 C#/.NET 代码或私钥/令牌，这始终不安全。 在测试/暂存和生产环境中，服务器端 Blazor 代码和 Web API 应使用安全身份验证流，以避免在项目代码或配置文件中维护凭据。 在本地开发测试之外，我们建议避免使用环境变量来存储敏感数据，因为环境变量不是最安全的方法。 对于本地开发测试， 建议使用机密管理器工具 来保护敏感数据。 有关详细信息，请参阅 安全维护敏感数据和凭据。

Program.cs 文件

Program.cs 文件包含用于创建应用并配置应用的请求处理管道的代码。

Blazor Web App 项目模板中的行顺序在 .NET 的所有版本中发生更改，因此 Program.cs 文件中行的顺序可能与本部分中涵盖的行的顺序不匹配。

WebApplicationBuilder 使用预配置默认值创建应用：

var builder = WebApplication.CreateBuilder(args);

Razor 组件服务通过调用 AddRazorComponents添加到应用，使组件能够在 Razor 服务器上呈现和执行代码，并 AddInteractiveServerComponents 添加支持呈现 Interactive Server 组件的服务：

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

生成 WebApplication（由以下代码中的 app 变量保存）：

var app = builder.Build();

接下来，配置 HTTP 请求管道。

在开发环境中：

• 异常处理程序中间件 (UseExceptionHandler) 在开发应用运行时处理错误并显示开发人员异常页。
• HTTP 严格传输安全协议 (HSTS) 中间件 (UseHsts) 处理 HSTS。

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    app.UseHsts();
}

HTTPS 重定向中间件 (UseHttpsRedirection) 通过将 HTTP 请求重定向到 HTTPS 来强制实施 HTTPS 协议（如果 HTTPS 端口可用）：

app.UseHttpsRedirection();

防伪中间件 (UseAntiforgery) 对表单处理强制实施防伪保护：

app.UseAntiforgery();

映射静态资产路由终结点约定（MapStaticAssets） 映射静态文件，如图像、脚本和样式表，在生成过程中生成为终结点：

app.MapStaticAssets();

MapRazorComponents 将根 App 组件中定义的组件映射到给定的 .NET 程序集并呈现可路由的组件，并为 AddInteractiveServerRenderMode 应用配置交互式服务器端呈现（交互式 SSR）支持：

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

注意

扩展方法 AddInteractiveServerComponentsAddRazorComponentsAddInteractiveServerRenderModeMapRazorComponents 使应用能够采用交互式 SSR，这在教程系列的最后一部分关于交互性之前并不相关。 在接下来的几篇文章中，应用的组件仅采用静态 SSR。

通过调用 Run (WebApplication) 上的 app 运行应用：

app.Run();

用完成的示例排除故障

如果在学习本教程时遇到无法从文本中解决的问题，请将代码与 Blazor 示例存储库中已完成的项目进行比较：

Blazor 示例 GitHub 存储库 (dotnet/blazor-samples)

选择最新版本文件夹。 本教程项目的示例文件夹命名为 BlazorWebAppMovies。

其他资源

使用 VS Code 或 .NET CLI 时，本教程系列采用不安全的 HTTP 协议，以简化采用适用于 Linux 和 macOS 用户的 SSL/HTTPS 安全性的转换。 有关采用 SSL/HTTPS 的详细信息，请参阅在 ASP.NET Core 中强制使用 HTTPS。

后续步骤

下一篇：添加和构架模型