项目

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

UI
Database

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

在本快速入门指南中,您将学习如何使用 ABP Studio 创建和运行单层Web应用程序。

设置开发环境

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

查看前置要求文档获取有关这些工具的详细信息。

创建新解决方案

🛈 本文档使用 ABP Studio 创建新的ABP解决方案。您也可以使用 ABP CLI 创建新解决方案,并使用 入门页面 轻松构建 ABP CLI 命令。

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-blazor-webapp

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

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

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

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

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

在这里,您可以选择数据库管理系统(DBMS)和连接字符串。然后,点击下一步进入附加的多租户选择:

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

在这里,您可以启用或禁用解决方案的多租户功能。您可以进一步配置选项或保持默认,然后点击下一步进入UI主题选择屏幕:

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

LeptonX是建议的生产环境使用的UI主题。选择一个主题,配置附加选项,然后点击下一步进入可选模块选择:

然后,您可以根据偏好选择可选模块。

abp-studio-no-layers-new-solution-additional-options

选择您想在项目中使用的模块;您可以根据偏好禁用不需要的模块。然后,点击下一步进入语言选择页面:

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

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

  • 默认语言:选择应用程序的主要语言

  • 可本地化用户界面:开启此选项以支持多种语言

  • 可用语言:勾选您想要包含的语言

  • 如果要添加列表中未列出的语言,请点击添加自定义语言

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

abp-studio-no-layers-new-solution-additional-options

根据需要配置任何附加选项,然后点击下一步继续。在下一个屏幕上,您可以配置解决方案的模块化选项:

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

abp-studio-no-layers-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请求事件异常)。您可以使用它查看应用程序中的情况,从而轻松跟踪错误和许多有用的详细信息。

在解决方案运行器部分(左侧),您可以看到当前解决方案中所有可运行的应用程序。对于MVC网站示例,我们只有一个应用程序:

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

要启动应用程序,请点击应用程序旁边的播放图标,或右键单击并选择运行 -> 启动上下文菜单项。

您可以启动 Acme.BookStore

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

abp-studio-quick-start-browse-command

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

abp-studio-quick-start-browse

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

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

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

在Visual Studio中打开解决方案

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

首先,我们可以在 ABP Studio 中停止应用程序,这样在 Visual Studio 中运行时就不会产生冲突。

您可以使用 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

然后您可以按 F5Ctrl + F5 来运行 Web 应用程序。它将运行并在您的默认浏览器中打开应用程序UI:

bookstore-browser-users-page

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

在本文档中