项目

本文档有多个版本。请选择最适合您的选项。

UI
Database
Tiered

ABP 入门指南:创建分层 Web 应用程序

在本快速入门指南中,您将学习如何使用 ABP Studio 创建和运行一个分层(且可能是模块化)的 Web 应用程序。

设置您的开发环境

首先,最重要的事情!在创建第一个项目之前,我们先来设置您的开发环境。您的开发机器上应安装以下工具:

有关这些工具的更多详细信息,请查看 先决条件文档

创建新解决方案

ABP 启动解决方案模板针对您的特定需求提供了许多选项。如果您不理解某个选项,这可能意味着您不需要它。我们为您选择了通用默认值,因此您可以保留这些选项不变。

假设您已 安装并登录 应用程序,打开 ABP Studio 时应该会看到以下屏幕:

abp-studio-welcome-screen

在主菜单中选择 文件 -> 新建解决方案,或单击欢迎屏幕上的 新建解决方案 按钮以打开 创建新解决方案 向导:

abp-studio-new-solution-dialog

在本教程中,我们将使用 应用程序(分层) 解决方案模板,因此请选择它并单击 下一步 按钮:

abp-studio-new-solution-dialog-solution-properties

在该屏幕上,您可以为解决方案选择一个名称。您可以使用不同级别的命名空间;例如 BookStoreAcme.BookStoreAcme.Retail.BookStore

然后选择一个输出文件夹来创建您的解决方案。创建解决方案文件夹 选项将在给定的输出文件夹中创建一个与解决方案同名的文件夹。

配置完成后,单击 下一步 按钮导航到 UI 框架 选择:

abp-studio-new-solution-dialog-ui-framework-mvc

在这里,您可以看到该启动解决方案模板支持的所有可能的 UI 选项。选择 MVC / Razor Pages

请注意:一旦您选择了 UI 类型,UI 框架列表下将出现一些附加选项。您可以进一步配置这些选项或保留默认值,然后单击下一步按钮进入数据库提供程序选择屏幕:

abp-studio-new-solution-dialog-database-provider

在该屏幕上,您可以通过选择提供的选项之一来决定您的数据库提供程序。每个数据库提供程序都有一些附加选项。保留默认值或根据您的偏好更改它们,然后单击 下一步 按钮进入附加的数据库配置

abp-studio-new-solution-dialog-database-configurations

在这里,您可以选择数据库管理系统(DBMS)。然后,单击 下一步 按钮进入附加的多租户选择:

abp-studio-new-solution-dialog-multi-tenancy

在这里,您可以为解决方案启用或禁用多租户。您可以进一步配置选项或保留默认值,然后单击 下一步 按钮进入 UI 主题 选择屏幕:

abp-studio-new-solution-dialog-ui-theme

请注意:一旦您选择了 UI 类型,UI 框架列表下将出现一些附加选项。您可以进一步配置这些选项或保留默认值,然后单击下一步按钮进入数据库提供程序选择屏幕:

LeptonX 是建议用于生产环境的 UI 主题。选择一个主题,配置附加选项,然后单击 下一步 按钮进入 移动框架 选择:

abp-studio-new-solution-dialog-mobile-framework

在这里,您可以看到该启动解决方案模板中可用的所有移动应用程序。这些移动应用程序与您的解决方案良好集成,可以与您的 Web 应用程序使用相同的后端。它们简单(没有像 Web 应用程序那样多的预构建功能),但是构建移动应用程序的一个非常好的起点。

选择最适合您的一个,或者如果您不希望在解决方案中包含移动应用程序,请选择 ,然后单击下一步导航到 公共网站 屏幕:

abp-studio-new-solution-dialog-public-website

该启动解决方案模板还提供了一个在解决方案内创建第二个 Web 应用程序的选项。第二个应用程序称为公共网站,是一个 ASP.NET Core MVC / Razor Page 应用程序。它可用于为您的产品创建公共落地页/推广页。它很好地集成到解决方案中(例如,可以共享相同的服务、实体、数据库和相同的身份验证逻辑)。如果您愿意,还可以将 CMS Kit 模块 添加到您的解决方案中,以为您的 Web 应用程序添加动态内容功能。

因此,选择 公共网站 或跳过它,然后单击下一步按钮进入 可选模块 选择:

abp-studio-new-solution-dialog-optional-modules.png

该列表中的每一项都是一个预构建的应用程序模块。您可以单击模块名称附近的蓝色图标以获取有关该模块的更多信息。您可以保持列表原样(因此,它会为您安装最常见和使用的模块)或根据您的偏好进行自定义。

创建解决方案后安装模块可能需要手动步骤。因此,最好在开始时决定模块。您可以在实际解决方案之前创建一个示例解决方案来探索解决方案和模块。

选择所需模块后,单击 下一步 按钮进入 解决方案结构 屏幕:

abp-studio-new-solution-dialog-solution-structure-tiered

它会创建一个仅提供 HTTP (REST) API 的独立主机应用程序。然后,Web 应用程序对每个操作都向该应用程序执行远程 HTTP 调用。如果未选择 分层 选项,则 Web 和 HTTP API 托管在单个应用程序中,并且从 UI 层到 API 层的调用在进程内执行。

分层架构允许您在无法访问数据库服务器的服务器上托管 Web (UI) 应用程序。然而,这会带来轻微的性能损失(因为 UI 和 HTTP API 应用程序之间的 HTTP 调用)并使您的架构、开发和部署更加复杂。如果您不理解分层结构,请直接跳过它。

完成 分层 选择后,您可以单击 下一步 按钮进入 语言选择 页面:

abp-studio-no-layers-new-solution-language-selection

在此步骤中,您可以选择您的应用程序将支持的语言。

  • 默认语言:选择您应用的主要语言。
  • 可本地化的用户界面:打开此选项以支持多种语言。
  • 可用语言:勾选您想要包含的语言。
  • 如果要添加未列出的语言,请单击“添加自定义语言”。

如果需要,您以后可以更改这些设置。然后点击 下一步 按钮进入 附加选项 页面:

abp-studio-new-solution-dialog-additional-options

如果您取消选中 Kubernetes 配置 选项,解决方案将不包含 Kubernetes 配置文件,例如 Helm 图表和其他与 Kubernetes 相关的文件。您还可以指定 社交登录;如果您取消选中此选项,解决方案将不会配置为社交登录。最后,您可以指定 包含测试 选项以在解决方案中包含或排除测试项目。

在下一个屏幕上,您可以配置解决方案的模块化选项:

如果选择 设置为模块化解决方案 选项,则解决方案更易于进行 模块化单体开发,并允许您在解决方案创建阶段添加子模块。

abp-studio-new-solution-modularity

现在,我们准备允许 ABP Studio 创建我们的解决方案。只需单击 创建 按钮,让 ABP Studio 为您完成其余工作。单击创建按钮后,对话框关闭,您的解决方案将加载到 ABP Studio 中:

abp-studio-created-new-solution

您可以探索解决方案,但在运行解决方案中的任何应用程序之前,您需要等待后台任务完成。

解决方案结构可能因您选择的选项而异。

运行应用程序

创建解决方案后,您可以在您喜欢的 IDE(例如 Visual Studio、Visual Studio Code 或 Rider)中打开它并开始开发。但是,ABP Studio 提供了一个 解决方案运行器 系统。您可以使用它轻松运行和浏览解决方案中的应用程序,而无需外部工具。

在 ABP Studio 左侧打开 解决方案运行器 部分,如下图所示:

解决方案运行器结构可能因您选择的选项而异。

abp-studio-quick-start-application-solution-runner

一旦您单击左侧的 播放 图标,该部分将在与解决方案资源管理器部分相同的位置打开。ABP Studio 还会在主内容区域打开 应用程序监视器 视图。应用程序监视器 实时显示您应用程序的有用洞察(例如 HTTP 请求事件异常)。您可以使用它来查看应用程序中发生的事情,从而轻松跟踪错误和许多有用的详细信息。

在解决方案运行器部分(左侧),您可以看到当前解决方案中所有可运行的应用程序。对于包含公共网站和 MAUI 移动端的 MVC 示例,我们有四个应用程序:

abp-studio-quick-start-example-applications-in-solution-runner

您可以运行所有应用程序或逐个启动它们。要启动应用程序,可以单击应用程序附近的 播放 图标,或右键单击并选择 运行 -> 启动 上下文菜单项。

ABP Studio 默认会构建应用程序。因此,您无需在运行之前手动构建应用程序。

您可以启动以下应用程序:

  • Docker-Dependencies

  • Acme.BookStore.AuthServer

  • Acme.BookStore.HttpApi.Host

  • Acme.BookStore.Web

Docker-Dependencies 用于在 Docker 中运行基础设施服务(例如 Redis)。首先启动它,这样 Web 应用程序才能正常启动。

请注意,在 docker-compose 中运行的服务会暴露给您的本地主机。如果本地主机上的任何服务已经使用相同的端口,您将收到错误。在这种情况下,请先停止您的本地服务。

一旦 Acme.BookStore.Web 应用程序启动,您可以右键单击它并选择 浏览 命令:

abp-studio-quick-start-browse-command

浏览 命令会在内置浏览器中打开 Web 应用程序的 UI:

abp-studio-quick-start-browse

您可以在 ABP Studio 的功能齐全的 Web 浏览器中浏览您的应用程序。单击应用程序 UI 中的 登录 按钮,输入 admin 作为用户名,1q2w3E* 作为密码以登录应用程序。

以下截图来自应用程序中预安装的 Identity 模块用户管理 页面:

abp-studio-quick-start-browse-user-list

在 Visual Studio 中打开解决方案

您可以使用任何 IDE(例如 Visual Studio、Visual Studio Code 或 Rider)来开发您的解决方案。这里,我们将以 Visual Studio 为例进行演示。

首先,我们可以在 ABP Studio 中停止应用程序,这样在 Visual Studio 中运行它时就不会发生冲突。 不要停止 Docker-Dependencies,因为应用程序在运行时需要它运行的服务。

您可以使用 ABP Studio 通过 Visual Studio 打开解决方案。右键单击 Acme.BookStore 模块,然后选择 打开方式 -> Visual Studio 命令:

abp-studio-open-in-visual-studio

如果 Visual Studio 命令不可用,这意味着 ABP Studio 无法在您的计算机上检测到它。您可以在本地文件系统中打开解决方案文件夹(您可以使用 打开方式 -> 资源管理器 作为快捷方式),然后手动在 Visual Studio 中打开解决方案。

解决方案在 Visual Studio 中打开后,您应该会看到如下所示的屏幕:

解决方案结构可能因您选择的选项而异。

visual-studio-bookstore-application

右键单击 Acme.BookStore.Web 项目,然后选择 设置为启动项目 命令。然后您可以按 F5Ctrl + F5 来运行 Web 应用程序。它将运行并在您的默认浏览器中打开应用程序 UI:

bookstore-browser-users-page

您可以使用 admin 作为用户名,1q2w3E* 作为默认密码登录应用程序。

运行移动应用程序

注意:如果您未选择移动框架,可以跳过此步骤。

启动移动应用程序之前,请确保已为 react-nativeMAUI 配置好。

您可以启动以下应用程序:

  • Docker-Dependencies

  • Acme.BookStore.AuthServer

  • Acme.BookStore.HttpApi.Host

  • react-nativeAcme.Bookstore.Maui

mobile-sample

运行公共网站

注意:如果您未选中公共网站,可以跳过此步骤。

在启动 Docker-DependenciesAcme.BookStore.AuthServerAcme.BookStore.HttpApi.Host 应用程序之后。 您可以启动 Acme.BookStore.Web.Public 应用程序。

例如,在非分层的带有公共网站的 MVC 应用程序中:

solution-runner-public-website

在本文档中