快速创建和运行 Web 和 API 应用程序（含案例）
最后更新时间：2025 年 03 月
在 SnapDevelop IDE 中，您可以通过可视化设计器快速创建和运行一个 Web 应用程序（前端为（基于 Vue）的 Web 应用，后端为 Web API）。
前提条件
安装组件
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 应用程序设计器项目包括以下两种项目类型（在 SnapDevelop IDE 中选择菜单 文件 > 新建 > 新建项目，在 新建项目 窗口的 设计器开发 选项卡中选择项目类型）：
-
浏览器端 Web 和 API：创建一个可以生成后端 Web API 以及前端浏览器 Web 应用的设计项目。
-
移动端 Web 和 API：创建一个可以生成后端 Web API 以及前端 H5 及 UniApp 应用的设计项目。
-
H5 项目可以直接通过 SnapDevelop 发布到文件夹或者 Docker。详情请参考：发布和托管应用程序 。
-
UniApp 项目可以通过 HBuilderX 运行和发布。详情请参考以下 UniApp 官方文档。
运行操作：https://uniapp.dcloud.net.cn/quickstart-hx.html#%E8%BF%90%E8%A1%8Cuni-app
发布操作：https://uniapp.dcloud.net.cn/quickstart-hx.html#%E5%8F%91%E5%B8%83uni-app
-
Web 应用程序设计器项目可以包含以下工作项（在 IDE 中选择菜单 项目 > 新建项，选择 设计器开发 选项卡，然后选择工作项）：
- 实体设计（从零开始）：创建一个空的实体元数据文件。
- 实体设计（从数据库导入）：通过从现有数据库导入数据库架构来创建实体元数据文件。
- 逻辑设计（API）：根据实体创建过滤器及方法设计文件。
- 视图设计（基于模板）：根据 API 以及页面模板创建一个视图设计文件。
- 视图设计（从零开始）：创建一个空的视图设计文件。您可以自由关联API，添加页面组件，并设计布局。
这些设计器在 设计器项目指南 文档中已有详细说明。
创建及运行应用
我们将直接运行一个包含 WeatherForecast 示例的 移动端 Web 应用程序 设计器项目，以展示 Web 应用程序的运行效果。（如您想从零开始创建一个 Web 和 API 应用程序，请参考 SnapDevelop快速上手。
在此演示中，我们将选择 移动端 Web 应用程序 项目类型，并且选择 包含示例案例，然后将其生成 Web API 后端及前端 Web 应用程序。
示例案例中默认包含一个实体文件、一个逻辑文件、以及八个视图（用于添加/获取/编辑、主页、以及布局）。 您可以直接生成并运行项目，无需做任何修改。
步骤 1：创建一个包含示例的移动端 Web 应用程序设计器项目。
从 文件 > 新建 > 新建项目，选择 设计器开发 选项卡； 然后选择 移动端 Web 和 API 并单击 下一步。
保持默认设置，点击 下一步，然后单击 创建。
项目显示在解决方案资源管理器中。该示例项目包含以下文件：
- 一个实体设计文件 ：WeatherForecast.sde 配置了基本的数据结构。
- 一个逻辑设计文档：WeatherForecast.sdlg 配置了基本的过滤器及方法。
- 八个视图设计文件：Create.sdv（添加数据）、Detail.sdv（显示一条数据的明细）、Edit.sdv（编辑数据）、List.sdv（显示多条数据的明细）、Home.sdv（应用的主页）、Layout.sdv（应用的布局）。
- logo.png等图片文件：应用的logo等图片文件。
步骤 2（可选）：双击实体设计文件或逻辑设计文件在设计器中查看或修改相关设置。
WeatherForecast.sde 实体设计文件：
WeatherForecast.sdlg 逻辑设计文件：
步骤 3（可选）：双击视图文件在视图设计器中查看或修改视图设置。
步骤 4（可选）：点击 IDE 工具栏的 自定义数据结构 图标（
)查看和修改枚举和模型。
步骤 5：从设计项目生成项目。
单击 IDE 工具栏上的 生成项目 下拉按钮然后选择 Profile；或右键单击项目节点，然后选择 生成项目。
在 Profile 窗口的右上角单击 生成项目 按钮。
将生成以下两类项目：
后端服务类：
- [project].Common：被合约层或认证服务层引用或依赖的开发工具包和扩展功能。
- [project].Contracts：定义服务合约的合约层。
- [project].Controllers：定义服务控制器的控制器层。
- [project].Repository：数据访问层，例如 EF Core，其中包含与数据库相关的配置（存储库、工作单元、DbContext）和数据初始化（值比较器、值转换器）。
- [project].Services：实现合约的服务层。
- [project].WebApi：向用户发送数据的表示层。
前端展示层：
- [project]：实现应用的前端展示。
步骤 6：运行项目。
1）首先从 IDE 工具栏运行 [project].WebApi 项目以启动后端 Web API。
当 Web API 成功运行后，您将看到以下界面。
2）从工具栏选择 [project] 项目以启动前端 Web 应用程序。
