Blazor-Blazor WebAssmbly项目结构（上）

news2025/1/24 4:07:51

创建项目

今天我们来创建一个BlazorWebAssmbly项目，来看看项目结构是如何得，我们创建带模板得项目，会创建出一个demo，来看看项目结构。
在这里插入图片描述

创建的项目可以直接启动运行，首次启动会看见加载的过程，这个过程是正在下载.NET的捆绑包等资源
在这里插入图片描述

项目结构

我们可以看到如下的整体项目结构，我们可以一级一级来看看文件都有什么作用
在这里插入图片描述

Program.cs

在这里插入图片描述

这个文件相信大家都很熟悉了，是项目的入口函数，我们看看文件里写的内容都有什么作用，具体每段的解释已经写在注释里了，供同学参考

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

namespace BlazorApp1
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            //运行 Blazor 的主机对象和其它默认配置
            var builder = WebAssemblyHostBuilder.CreateDefault(args);

            //表示在根组件集合中添加 App.razor 组件，
            //并将 App.razor 组件中的内容在index.html 文件的id=”app”的<div>元素中呈现
            builder.RootComponents.Add<App>("#app");

            //表示在根组件集合中添加 HeadOutlet 组件，
            该组件是 Blazor 提供的内置组件，用于呈现 PageTitle 和 HeadContent 组件提供的内容。
            builder.RootComponents.Add<HeadOutlet>("head::after");

            //注册服务
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            //启动项目
            await builder.Build().RunAsync();
        }
    }
}

在上面的代码中存在#app和head::after熟悉JS的同学们可能已经猜到了这个是选择器的作用
#app 表示选择id为app的元素
head::after 表示选择head标记底部

launchSettings.json

配置应用程序在开发环境中运行和调试使用的端口号及启动方式，在开发环境中使用；发布到生产环
境中不需要此配置文件。
在这里插入图片描述

我们从外层至内层来看看各个配置项的作用
在这里插入图片描述

$schema

指定json使用的标准

iisSettings

用于对 IIS 和 IIS Express 使用的端口号、windowsAuthentication 和 anonymousAuthentication 进行配置

  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:16708",
      "sslPort": 44358
    }

windowsAuthentication：是否启用 Windows 身份验证
anonymousAuthentication：是否启用匿名身份验证
applicationUrl：设置应用程序使用 IIS Express 运行时访问 http 协议的 URL 地址和端口号
sslPort：用于 SSL 安全访问的端口号

profiles

配置项目的启动方式，可配置 http、https 或 IIS Express启动方式

"profiles": {
  "http": {
    "commandName": "Project",
    "dotnetRunMessages": true,
    "launchBrowser": true,
    "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
    "applicationUrl": "http://localhost:5191",
    "environmentVariables": {
      "ASPNETCORE_ENVIRONMENT": "Development"
    }
  },
  "https": {
    "commandName": "Project",
    "dotnetRunMessages": true,
    "launchBrowser": true,
    "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
    "applicationUrl": "https://localhost:7277;http://localhost:5191",
    "environmentVariables": {
      "ASPNETCORE_ENVIRONMENT": "Development"
    }
  },
  "IIS Express": {
    "commandName": "IISExpress",
    "launchBrowser": true,
    "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
    "environmentVariables": {
      "ASPNETCORE_ENVIRONMENT": "Development"
    }
  }
}

http，https默认启动的是 Kestrel 服务器

commandName：
IISExpress：启动 IIS Express 运行应用程序。
Project：启动 ASP.NET Core 内置的 Kestrel 服务器。
launchBrowser：设置在应用程序运行或调试时是否自动打开默认浏览器访问
applicationUrl：配置访问应用程序的 URL 地址，多个 URL 地址使用分号隔开。
inspectUri：在 Blazor WebAssembly 应用程序上启用调试的 URL 地址。
dotnetRunMessages：使用 dotnet run 命令运行项目时，是否显示反馈信息。
environmentVariables：以键/值对的方式配置环境变量，“ASPNETCORE_ENVIRONMENT”: "Development"表示当前是开发环境