抠丁客 抠丁客
项目
编辑 (2025/12/24)

分层解决方案：Web应用程序

本文档提到的部分功能在免费版中可能不可用。我们使用 * 符号表示该功能仅适用于 团队版 和 企业版 授权许可。

Web应用程序是解决方案的主要用户界面，也是用户与系统交互的入口点。分层解决方案模板支持以下类型的Web应用程序：

  • MVC / Razor Pages：这是一个ASP.NET Core MVC应用程序。它是传统的Web应用程序，向用户提供HTML页面，适合构建服务端渲染的Web应用。
  • Angular：这是一个Angular应用，属于单页面应用（SPA），在客户端运行。它通过HTTP请求与服务器通信，适合构建具有丰富用户界面的现代Web应用。
  • Blazor UI：这是一个使用.NET构建Web应用程序的灵活框架，支持多种托管模型：
    • Blazor WebAssembly：这是客户端SPA，完全在用户的浏览器中运行。它通过HTTP请求与服务器通信，适合具有丰富交互性和离线能力的现代Web应用。
    • Blazor Server：这是服务端SPA，在服务器上运行，并通过SignalR与客户端进行实时通信。适合需要持续连接和快速服务器更新的应用。
    • Blazor WebApp：这是结合了Blazor技术的混合解决方案，优化了同时利用客户端和服务端能力的Web应用构建。
    • Maui Blazor (Hybrid) *：此选项支持构建跨平台应用，结合Blazor的UI和.NET MAUI的原生设备集成能力。适合构建可在桌面和移动平台上运行的应用程序。
  • 无界面：此选项创建一个仅包含后端API的解决方案，不包含Web界面。适合仅提供API的应用或无界面的服务场景。

您可以在解决方案创建过程中的UI框架步骤中选择适合您需求的Web应用程序类型。分层解决方案模板会生成选定的Web应用程序，并包含必要的配置和集成。

Web应用程序

MVC / Razor Pages

MVC（模型-视图-控制器）是构建Web应用程序的常用设计模式。而Razor Pages则是一种基于页面的编程模型，旨在使Web应用构建更简单高效。

当您在分层解决方案模板中选择MVC / Razor Pages选项时，它会生成一个类似Acme.BookStore.Web名称的ASP.NET Core MVC应用程序。该应用作为解决方案的Web界面，使用服务端渲染向用户提供动态HTML页面。

Angular

Angular是一个流行的前端框架，用于构建单页面应用（SPA）。它提供丰富的功能，用于创建具有动态和交互式用户界面的现代Web应用。

当您在分层解决方案模板中选择Angular选项时，它会生成：

  • 一个位于解决方案根目录下的Angular应用程序，通常命名为angular。
  • 一个ASP.NET Core应用程序，通常命名为Acme.Bookstore.HttpApi.Host。

Angular应用作为客户端SPA在用户的浏览器中运行，并通过向*.HttpApi.Host应用发送HTTP请求与服务器通信。

angular文件夹结构

每个ABP模块都是一个NPM包。一些ABP模块作为依赖项添加在package.json中。这些模块及其依赖会一并安装。要查看所有ABP包，可以在angular文件夹中运行以下命令：

yarn list --pattern abp

Angular应用程序结构图：

Angular模板结构图

应用配置

应用配置是应用程序的根配置。一些ABP模块和必要的服务提供程序已被导入到appConfig中。

ABP配置模块也已在appConfig中提供，以满足可懒加载ABP模块的初始需求。

APP_ROUTES

APP_ROUTES中包含可懒加载的ABP模块作为路由。

ABP模块的路径不应更改。

您应在data对象中添加routes属性，以便在菜单中添加链接，重定向到您的自定义页面。

{
   path: 'dashboard',
   loadComponent: () => import('./dashboard/dashboard.component').then(c => c.DashboardComponent),
   canActivate: [authGuard, permissionGuard],
   data: {
      routes: {
         name: 'ProjectName::Menu:Dashboard',
         order: 2,
         iconClass: 'fa fa-dashboard',
         requiredPolicy: 'ProjectName.Dashboard.Host'
      } as ABP.Route
   }
}

在上面的示例中：

  • 如果用户未登录，authGuard会阻止访问并重定向到登录页。
  • permissionGuard会根据routes对象的requiredPolicy属性检查用户权限。如果用户无权访问该页面，则显示403页面。
  • routes的name属性是菜单链接的标签。可以定义为本地化键。
  • routes对象的iconClass属性是菜单链接图标类。
  • routes对象的requiredPolicy属性是访问页面所需的策略键。

在上述routes定义之后，如果用户已授权，仪表板链接将出现在菜单中。

环境配置

src/environments文件夹下的文件包含应用程序的基本配置。

首页组件

首页组件是一个示例懒加载组件，在应用程序的根地址加载。

样式

必需样式文件已添加到angular.json中的styles数组。AppComponent通过LazyLoadService在主包加载后懒加载一些样式文件，以缩短首次渲染时间。

测试

您应在要测试的文件所在同一文件夹中创建测试。

请参阅测试文档。

依赖包

Blazor UI

Blazor是一个使用.NET构建Web应用程序的灵活框架，支持多种托管模型，包括Blazor WebAssembly、Blazor Server、Blazor WebApp和Maui Blazor（Hybrid）。

Blazor WebAssembly

Blazor WebAssembly是一个客户端SPA，完全在用户的浏览器中运行。它通过HTTP请求与服务器通信，适合具有丰富交互性和离线能力的现代Web应用。

当您在分层解决方案模板中选择Blazor WebAssembly选项时，它会生成：

  • 位于解决方案根目录下的Blazor应用，通常命名为*.Blazor，作为主Blazor宿主项目。
  • 一个Blazor客户端应用，命名为*.Blazor.Client，您可以在其中编写客户端（UI逻辑）代码。
  • 一个ASP.NET Core应用，命名为*.HttpApi.Host，用于运行服务端（业务逻辑）代码。

Blazor客户端应用通过向*.HttpApi.Host应用发送HTTP请求与服务器通信。

Blazor Server

Blazor Server是一个服务端SPA，在服务器上运行，并通过SignalR与客户端进行实时通信。适合需要持续连接和快速服务器更新的应用。

当您在分层解决方案模板中选择Blazor Server选项时，它会生成：

  • 位于解决方案根目录下的Blazor应用，通常命名为*.Blazor，作为主Blazor宿主项目。

Blazor WebApp

Blazor WebApp是结合了Blazor技术的混合解决方案，优化了同时利用客户端和服务端能力的Web应用构建。

当您在分层解决方案模板中选择Blazor WebApp选项时，它会生成：

  • 位于解决方案根目录下的Blazor应用，通常命名为*.Blazor，作为主Blazor宿主项目。
  • 一个Blazor客户端应用，命名为*.Blazor.Client，您可以在其中编写客户端（UI逻辑）代码。

Blazor客户端应用通过向*.Blazor应用发送HTTP请求与服务器通信。

Maui Blazor (Hybrid) *

Maui Blazor (Hybrid) 支持构建跨平台应用，结合Blazor的UI和.NET MAUI的原生设备集成能力。适合构建可在桌面和移动平台上运行的应用程序。

当您在分层解决方案模板中选择Maui Blazor (Hybrid) 选项时，它会生成：

  • 位于解决方案根目录下的Maui Blazor (Hybrid) 应用，通常命名为*.MauiBlazor，作为主UI宿主项目。
  • 一个ASP.NET Core应用，命名为*.HttpApi.Host，用于运行服务端（业务逻辑）代码。

Maui Blazor (Hybrid) 应用通过向*.HttpApi.Host应用发送HTTP请求与服务器通信。

无界面

此选项创建一个仅包含后端API的解决方案，不包含Web界面。适合仅提供API的应用或无界面的服务场景。

当您在分层解决方案模板中选择无界面选项时，它会生成一个名为*.HttpApi.Host的ASP.NET Core应用，作为解决方案的后端API。

在本文档中