ABP Framework 支持的 UI 框架
该页面详细介绍了 ABP Framework 支持的三种 UI 框架(Angular、Blazor、MVC/Razor Pages),以及它们的架构、依赖、项目结构和共享基础设施。
框架概述
ABP 提供三种独立又可组合使用的 UI 框架,它们通过共享后端服务保持功能一致性,满足不同开发偏好和部署场景。
Blazor Server
Blazor WebAssembly
MVC Razor Pages
Blazor UI 框架
Blazor 托管模型
Blazorise 集成
组件类型 | 包 | 用途 |
---|
核心组件 Core Components | Blazorise | 基础 UI 组件 |
数据网格 Data Grid | Blazorise.DataGrid | 带排序、过滤的高级数据表格 |
通知 Notifications | Blazorise.Snackbar | Toast 通知 |
扩展组件 Extended Components | Blazorise.Components | 额外 UI 元素 |
Bootstrap 主题 | Blazorise.Bootstrap5 | Bootstrap 5 样式 |
图标 Icons | Blazorise.Icons.FontAwesome | FontAwesome 图标集成 |
项目依赖
- 身份管理:
Volo.Abp.Identity.Blazor.Server
(用户和角色管理) - 租户管理:
Volo.Abp.TenantManagement.Blazor.Server
(多租户) - 设置管理:
Volo.Abp.SettingManagement.Blazor.Server
(配置) - 认证:
Volo.Abp.Account.Web.OpenIddict
(OAuth/OpenID Connect) - 主题:
Volo.Abp.AspNetCore.Components.Server.LeptonXLiteTheme
(UI 主题)
MVC 和 Razor Pages 框架
MVC 项目结构
关键 MVC 功能
- 模块化 UI:每个 ABP 模块提供兼容 MVC 的 UI 组件
- 主题系统:可插拔主题架构,默认使用 LeptonXLite
- 标签助手:用于常见 UI 模式的自定义标签助手
- 捆绑:自动 CSS/JS 捆绑和压缩
- 本地化:带资源文件的服务器端本地化
共享基础设施
主题系统架构
模块用户界面集成
模块 | Blazor 包 | MVC 包 |
---|
身份 | Volo.Abp.Identity.Blazor.Server | Volo.Abp.Identity.Web |
租户管理 | Volo.Abp.TenantManagement.Blazor.Server | Volo.Abp.TenantManagement.Web |
权限管理 | 集成在其他模块 | 集成在其他模块 |
设置管理 | Volo.Abp.SettingManagement.Blazor.Server | Volo.Abp.SettingManagement.Web |
功能管理 | Volo.Abp.FeatureManagement.Blazor.Server | Volo.Abp.FeatureManagement.Web |
账户 | Volo.Abp.Account.Web.OpenIddict | Volo.Abp.Account.Web.OpenIddict |
跨框架兼容性
- 认证
Authentication
:所有框架使用相同的基于 OpenIddict 的认证 - 授权
Authorization
:权限系统在所有 UI 中一致工作 - 本地化
Localization
:相同的资源文件和本地化键 - 多租户
Multi-tenancy
:租户解析和切换统一工作 - 模块集成
Module Integration
:业务模块为所有框架提供 UI