创建 Web 应用程序

最后更新时间：2025 年 03 月

在 SnapDevelop IDE 中，您可以通过可视化设计器快速创建一个（基于Vue）Web 应用程序。

前提条件

安装组件

SnapDevelop 安装程序将自动安装 Web 应用程序设计器项目所需的组件和环境。

配置网络环境

请确保当前机器可以连接互联网，以便可以成功从 NuGet 源站点下载软件包。

如果是通过代理连接互联网的话，请首先确认代理正常工作，而且例外列表中没有排除掉 NPM 源相关的站点。然后通过 NPM 命令设置代理 IP 和端口，例如：npm config set proxy=“http://[ProxyIP]:[Port]/”。

如果网络连接正常，但 SnapDevelop 仍然提示网络连接错误，请重新启动 SnapDevelop IDE 后再尝试一次。

检查 Node.js 版本

在 SnapDevelop 中创建 Web 项目时要求使用 Node.js v20.11.1。

SnapDevelop 安装程序默认安装的 Node.js 版本为 v20.11.1。

但是如果您在机器上重新安装或升级了 Node.js 版本，您可以在终端窗口中输入命令： node -v 查看 Node.js 当前版本。

Web应用项目类型和工作项

本小节将主要描述 Web 应用程序 设计器项目（如想了解 Web API 设计器项目的更多信息，请参考 创建 Web API 设计器项目）。

Web 应用程序 设计器项目包括以下两种项目类型（在 SnapDevelop IDE 中选择菜单 文件 > 新建 > 新建项目，在 新建项目 窗口的 设计器开发 选项卡中选择项目类型）：

  • 浏览器端 Web 和 API：创建一个可以生成后端 Web API 以及前端浏览器 Web 应用的设计项目。
  • 移动端 Web 和 API：创建一个可以生成后端 Web API 以及前端 H5 及 UniApp 应用的设计项目。UniApp应用可以通过 HBuilderX 或命令行工具编译为多个平台的应用，包括H5、小程序（如微信小程序、支付宝小程序、百度小程序等）、App（iOS和Android）等。

Web 应用程序设计器项目可以包含以下工作项（在 IDE 中选择菜单 项目 > 新建项，选择 设计器开发 选项卡，然后选择工作项）：

  • 实体设计（从零开始）：创建一个空的实体元数据文件。
  • 实体设计（从数据库导入）：通过从现有数据库导入数据库架构来创建实体元数据文件。
  • 逻辑设计（API）：根据实体创建过滤器及方法设计文件。
  • 视图设计（基于模板）：根据 API 以及页面模板创建一个视图设计文件。
  • 视图设计（从零开始）：创建一个空的视图设计文件。您可以自由关联API，添加页面组件，并设计布局。

这些设计器在 创建设计器项目 文档中已有详细说明。

创建及运行应用

我们将直接运行一个包含 WeatherForecast 示例的 移动端 Web 应用程序 设计器项目，以展示 Web 应用程序的运行效果。（如您想从零开始创建一个 Web 应用程序，请参考 创建天气预报系统（快速入门））。

在此演示中，我们将选择 移动端 Web 应用程序 项目类型，并且选择 包含示例案例，然后将其生成 Web API 后端及前端应用程序。

示例案例中默认包含一个实体文件、一个逻辑文件、以及八个视图（用于添加/获取/编辑、主页、以及布局）。 您可以直接生成并运行项目，无需做任何修改。

步骤 1：创建一个包含示例的移动端 Web 应用程序设计器项目。

从 文件 > 新建 > 新建项目，选择 设计器开发 选项卡； 然后选择 移动端 Web 和 API 并单击 下一步。

image-20250328103614143

保持默认设置，点击 下一步，然后单击 创建。

image-20250328104051490

image-20250328104104581

项目显示在解决方案资源管理器中。该示例项目包含以下文件：

  • 一个实体设计文件 ：WeatherForecast.sde 配置了基本的数据结构。
  • 一个逻辑设计文档：WeatherForecast.sdlg 配置了基本的过滤器及方法。
  • 八个视图设计文件：Create.sdv（添加数据）、Detail.sdv（显示一条数据的明细）、Edit.sdv（编辑数据）、List.sdv（显示多条数据的明细）、Home.sdv（应用的主页）、Layout.sdv（应用的布局）。
  • logo.png等图片文件：应用的logo等图片文件。

image-20240801135433949

步骤 2（可选）：双击实体设计文件或逻辑设计文件在设计器中查看或修改相关设置。

WeatherForecast.sde 实体设计文件：

image-20250328130345501

WeatherForecast.sdlg 逻辑设计文件：

image-20250328130424528

步骤 3（可选）：双击视图文件在视图设计器中查看或修改视图设置。

image-20250328130528606

步骤 4（可选）：点击 IDE 工具栏的 自定义数据结构 图标（image-20250328105921374)查看和修改枚举和模型。

image-20250328130558078

步骤 5：从设计项目生成项目。

单击 IDE 工具栏上的 生成项目 下拉按钮然后选择 Profile；或右键单击项目节点，然后选择 生成项目。

image-20250328110306642

在 Profile 窗口的右上角单击 生成项目 按钮。

image-20250328110456300

将生成以下两类项目：

后端服务类：

  • [project].Common：被合约层或认证服务层引用或依赖的开发工具包和扩展功能。
  • [project].Contracts：定义服务合约的合约层。
  • [project].Controllers：定义服务控制器的控制器层。
  • [project].Repository：数据访问层，例如 EF Core，其中包含与数据库相关的配置（存储库、工作单元、DbContext）和数据初始化（值比较器、值转换器）。
  • [project].Services：实现合约的服务层。
  • [project].WebApi：向用户发送数据的表示层。

前端展示层：

  • [project]：实现应用的前端展示。

image-20250328110843644

步骤 6：运行项目。

1）首先从 IDE 工具栏运行 [project].WebApi 项目以启动 Web API。

image-20250328111317266

当 Web API 成功运行后，您将看到以下界面。

image-20250328111420697

2）从工具栏选择 [project] 项目以启动 Web 应用程序。

image-20250328111456842

image-20250328111732715