快速入门

创建天气预报应用

本教程将以 浏览器端 Web 和 API 项目类型为例，指导用户使用 SnapDevelop 可视化设计器从零开始创建一个天气预报数据维护场景（前端为 Vue Web 页面，后端为 C# Web API）。

本教程旨在帮助您快速了解 SnapDevelop 可视化设计器的基本功能和 UI。因此，本教程仅介绍 SnapDevelop 可视化设计器的核心功能，并演示简单的操作以帮助您完成基本任务。如需更多帮助，请参阅 SnapDevelop 的其他用户文档。

创建设计器项目

步骤 1：创建 Web 和 API 应用程序设计器项目。

1. 在 IDE 中，选择菜单 文件 > 新建 > 新建项目，选择 设计器开发 选项卡；然后选择 浏览器端 Web 和 API 并点击 下一步。

   

2. 将 名称 设置为 WeatherForecastDemo 并点击 下一步。

   

3. 清除 包含示例案例 选项，并点击 创建。

   

这将创建一个不含任何示例案例的空项目。项目显示在解决方案资源管理器中。

接下来，本教程将指导您逐步创建一个具有增删改查功能的天气预报应用，以此帮助您熟悉整个低代码过程和相关设置。

创建实体

此实体用于表示天气预报所需的基本信息：城市、日期时间、天气状态、温度等。

步骤1：从IDE中选择菜单 项目 > 新建项，选择 实体设计（从零开始），指定名称为 WeatherForecast，点击 创建。

步骤 2：在 WeatherForecast 实体文件中，添加一张空白表（从左边 组件库 > 基础组件 中拖拽 空白表 组件到中间的设计视窗）。

然后在右边的 实体（表） 选项卡中修改表名、添加字段、及设置字段类型（参考下图）。

注意：

1. 将表名设置为 WeatherForecast。

2. 将 WeatherState 字段类型设置为枚举类型 WeatherState。

   您需要先按以下步骤创建 WeatherState 枚举：

   点击 数据类型 下拉列表，然后点击 枚举 后面的 + 添加 图标。

   

   在打开的 自定义数据结构 窗口中，添加 WeatherState 枚举，并添加如下字段和值。用于表示天气状况。

   

3. 将 TemperatureStatus 字段类型设置为枚举类型 TemperatureState。参考上述步骤打开 自定义数据结构 窗口，添加 TemperatureState 枚举，并添加如下字段和值。用于表示温度状态。

   

4. 将 WeatherState 以及 Summary 字段设置为 可空。

创建逻辑

点击实体设计视窗顶部工具栏中的 快速创建逻辑。

在 快速创建逻辑 窗口中，选中 WeatherForecast 实体并保持右边增删改查方法的默认选中状态，然后点击 确认。将生成一个跟实体同名的逻辑设计文件：WeatherForecast.sdlg。

该逻辑文件自动包含了 WeatherForecast.sde 实体的增删改查方法。

添加过滤器

接下来，在该逻辑文件中，添加以下过滤器：CityFilter 和 CityNameFilter，实现按城市和天气状况过滤数据。

下面是创建 CityFilter 过滤器的步骤：

1. 在逻辑设计器中，点击左边 逻辑 > 过滤器 后面的 添加 图标。

   

2. 将 过滤器名称 设置为 CityFilter。

3. 单击 添加参数 添加两个参数：City 和 WeatherStatus。

4. 将 WeatherStatus 参数值设置为枚举 WeatherState，然后选中 集合。

5. 选择 WeatherForecast 过滤源。

6. 点击 添加过滤项，添加两个字段：WeatherForecast.City 和 WeatherForecast.WeatherState。

7. 将 WeatherForecast.City 字段的值设置为新添加的参数 City，将 WeatherForecast.WeatherState 字段的值设置为新添加的参数 WeatherStatus。

下面创建 CityNameFilter 过滤器，并设置如下：

1. 将 过滤器名称 设置为 CityNameFilter。
2. 单击 添加参数 添加参数：CityName。
3. 点击 添加过滤项，添加字段：WeatherForecast.City，将 WeatherForecast.City 字段的值设置为新添加的参数 CityName。

添加方法

接下来，添加以下查询方法：GetCityList、GetTempResultInfoByCity、和 GetWeatherPageByCity。

下面是添加和配置 GetCityList 方法的步骤：

1. 在逻辑设计器中，点击左边 逻辑 > 方法 中的 添加 图标。将生成一个新方法。

   

2. 将方法名称修改为：GetCityList。

3. 从 组件库 中拖拽 查询 到中间的设计视窗中。

   

4. 在右边的 查询 选项卡中，1）选择 数据源 为 WeatherForecast，2）选中 字段设置，添加一个字段，名称为City，值为 WeatherForecast.City，3）选中 排序，添加一个排序，选择City字段，4）选中 结果去重。

   

5. 在设计视窗中选中 结束 组件，在右边 结束 选项卡中，将 返回值 设置为 CityModel 模型。

   您需要先按以下步骤创建 CityModel 模型：

   点击 返回值 选项框，然后点击 模型 后面的 + 添加 图标。

   

   在打开的 自定义数据结构 页面，点击 模型 后面的 添加 图标。输入模型名称为：CityModel，并添加如下字段。

   

6. 返回 结束 选项卡中，设置 返回值 为 CityModel 模型，选中 集合，将 CityModel 字段的值设置为 查询.QueyModel，将 City 字段的值设置为 查询.QueryModel.City。

   

下面是创建 GetTempResultInfoByCity 方法的步骤（创建步骤不同于GetCityList方法）：

1. 点击 方法 中的 添加 图标后面的下拉图标。

   

2. 选择 数据源 为 WeatherForecast。

3. 选中 查询多条数据，选择 过滤器 为 CityNameFilter。

4. 点击 添加。将生成一个新方法。

5. 修改方法的名字为：GetTempResultInfoByCity。

6. 在设计视窗中选中 结束 组件，在右边 结束 选项卡中，设置 返回值 为 TempResultInfo 模型。

   您需要先按以下步骤创建 TempResultInfo 模型：

   点击 返回值 选项框，然后点击 模型 后面的 + 添加 图标。

   

   在打开的 自定义数据结构 页面，点击 模型 后面的 添加 图标。输入模型名称为：TempResultInfo，并添加如下字段。

   

7. 返回 结束 选项卡中，设置 返回值 为 TempResultInfo 模型，并设置字段值为以下表达式。

   Total 字段

   Count(查询.WeatherForecast)
   

   MinTemperature 字段

   If(Any(查询.WeatherForecast), Round(Min(If(查询.WeatherForecast.TemperatureStatus== TemperatureState.BelowZero, 0 - 查询.WeatherForecast.TemperatureC, 查询.WeatherForecast.TemperatureC)), 2), 0)
   

   MaxTemperature 字段

   If(Any(查询.WeatherForecast), Round(Max(If(查询.WeatherForecast.TemperatureStatus== TemperatureState.BelowZero, 0 - 查询.WeatherForecast.TemperatureC, 查询.WeatherForecast.TemperatureC)), 2), 0)
   

   AvgTemperature 字段

   If(Any(查询.WeatherForecast), Round(Average(If(查询.WeatherForecast.TemperatureStatus == TemperatureState.BelowZero, 0 - 查询.WeatherForecast.TemperatureC, 查询.WeatherForecast.TemperatureC)), 2), 0)
   

   City 字段

   First(查询.WeatherForecast.City)
   

   

下面是创建 GetWeatherPageByCity 方法的步骤：

1. 点击 方法 中的 添加 图标后面的下拉图标。

2. 选择 数据源 为 WeatherForecast。

3. 选中 查询多条数据，选择 过滤器 为 CityFilter。

4. 点击 添加。将生成一个新方法。

   

5. 修改方法的名字为：GetWeatherPageByCity。

6. 在设计视窗中选中 开始 组件，然后在右边 开始 选项卡中，修改参数名称为：pageParameterInfo，数据类型为：PageParameter 内置模型，Filter 为 CityFilter。

   

7. 在设计视窗中选中 结束 组件，然后在右边 结束 选项卡中，选择 返回值 为 PageResult 内置模型。

8. 设置 结果 为 查询.WeatherForecast，总数 为 查询.Total。

   

至此，天气预报应用的后端服务设计完成。

创建视图

视图文件用于数据增删改查的前端页面展示。

1. （可选）首先在解决方案资源管理器中为项目添加一个目录，用于存放这些视图文件（注意：文件夹名字必须为英文，否则运行时会报错）。

2. 然后从IDE中选择菜单 项目 > 新建项，选择 视图设计（基于模板），指定名称为 Create，点击 下一步。

3. 选择 表单页面，选择 表单提交API 为 WeatherForecast > Add，点击 创建。第一个视图文件 Create.sdv 创建成功。

4. 重复以上步骤，创建第二个视图文件：Edit.sdv。注意：

   视图文件名称指定为 Edit。

   选择 表单页面，选择 表单获取API 为 WeatherForecast > Get，选择 表单提交API 为 WeatherForecast > Update。

5. 创建第三个视图文件：Detail.sdv。注意：

   视图文件名称指定为 Detail。

   与前两个文件不同，该文件需要选择 详情页面 视图模板。选择 详情获取API 为 WeatherForecast > Get。

6. 创建第四个视图文件：List.sdv。注意：

   视图文件名称指定为 List。

   该文件需要选择 树表格页面 视图模板。选择 树表格获取API 为 WeatherForecast > GetWeatherPageByCity。

配置List视图

Create、Detail、Edit 视图使用默认设置即可（API、页面参数等必要设置已经自动配置好）。

下面介绍如何配置 List 视图（根据数据的逻辑关系，我们会从左到右，从上到下设计 List 视图）：

步骤 1：打开 List.sdv 视图文件，在 UI 设计器中选中 树形控件（或者在 大纲树 中选中 行容器 > 列容器 > 卡片 > 树形控件）。然后在右侧的 属性 选项卡中，将 数据源 设置为 GetCityList。

步骤 2：在 UI 设计器中选中 卡片。然后在右侧的 属性 选项卡中，将 数据源 设置为 GetTempResultInfoByCity。

步骤 3：在 物料库 中选中 对话框，拖拽到 UI 设计器中，然后选中对话框中的 视图容器，在右侧的 属性 选项卡中，设置 页面 为 Create 视图。

步骤 4：在 List 视图的 UI 设计器中选中 添加 按钮，在右侧的 事件 选项卡中，在 点击事件 中选择 组件操作，然后选择 对话框 > 打开弹窗。当应用运行时，点击添加按钮将会打开步骤3设计的对话框。

步骤 5：在 物料库 中选中选中 抽屉，然后拖拽到 UI 设计器中，然后选中对话框中的 视图容器，在右侧的 属性 选项卡中，设置 页面 为 Edit 视图。

步骤 6：在 List 视图的 UI 设计器中选中 编辑 按钮，在右侧的 事件 选项卡中，在 点击事件 中选择 组件操作，然后选择 抽屉 > 打开抽屉。当应用运行时，点击编辑按钮将会打开步骤5设计的抽屉。

步骤 7：在 List 视图的 UI 设计器中选中 详情 按钮，在右侧的 事件 选项卡中，在 点击事件 中选择 框架操作，然后选择 当前窗口打开，页面跳转 设置为 Detail 视图，参数id值设置为 表格容器 > 当前行数据 > id。

步骤 8：在 List 视图的 UI 设计器中选中 删除 按钮，然后点击蓝色工具条中的 按钮 切换为 气泡确认框（或者在 大纲树 中选中 气泡确认框），在右侧的 事件 选项卡中，在 确认事件 中添加以下事件：

1. 接口操作，请求接口为 Delete，参数id值为 表格容器 > 当前行数据；
2. 组件操作，选择 卡片 > 树形控件 > 加载数据；
3. 组件操作，选择 卡片 > 加载数据；
4. 组件操作，选择 表格容器 > 加载数据。

步骤 9：在 List 视图的 UI 设计器中选中 表格容器。在右侧的 属性 选项卡中，将PageNum参数的值设置为 表格容器 > 当前页面，将PageSize参数的值设置为 表格容器 > 每页记录数，将City参数的值设置为 卡片 > 树形控件 > 当前行数据 > City，将WeatherStatus参数的值设置为 表格容器 > 多选框组 > 数据绑定。

配置导航页面

1. 双击 Layout.sdv 文件，打开导航视图。

2. 在左侧的大纲树中选择 布局页面。在右侧的 属性 选项卡中，添加一个菜单项：天气，并将值设置为 List 视图。

至此，天气预报应用的前后端均已完成。您可以生成并运行项目来查看前后端的交互情况。

生成和运行项目

步骤 1：从设计器项目生成代码和项目。

在解决方案资源管理器中，右键单击项目节点并选择 生成项目。在配置文件窗口的右上角点击 生成项目。

生成以下项目：

为了让应用初次运行时就带有示例数据，我们在 SourceCode\Server\WeatherForecastDemo.Repository\ConfigurationExtensions.cs 文件中加入以下代码自动生成一些示例数据：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace WeatherForecastDemo.Repository
{
    internal static class ConfigurationExtensions
    {
		internal static void SeedData(this EntityTypeBuilder<WeatherForecast> builder)
		{
		    builder.HasData(
				new WeatherForecast
				{
				    Id = 1,
				    City = "深圳",
				    WeatherState = WeatherState.Cloudy,
				    DateTime = DateOnly.Parse("2025-02-15"),
				    TemperatureC = 17,
				    TemperatureStatus = TemperatureState.AboveZero,
				    Summary = "云层较多"
				},
				new WeatherForecast
				{
				    Id = 2,
				    City = "深圳",
				    WeatherState = WeatherState.Sunny,
				    DateTime = DateOnly.Parse("2025-01-12"),
				    TemperatureC = 13,
				    TemperatureStatus = TemperatureState.AboveZero,
				    Summary = "天气舒适"
				},
				new WeatherForecast
				{
				    Id = 3,
				    City = "深圳",
				    WeatherState = WeatherState.Windy,
				    DateTime = DateOnly.Parse("2025-01-19"),
				    TemperatureC = 24,
				    TemperatureStatus = TemperatureState.AboveZero,
				    Summary = "风力较大，注意防风"
				},
				new WeatherForecast
				{
				    Id = 4,
				    City = "广州",
				    WeatherState = WeatherState.Windy,
				    DateTime = DateOnly.Parse("2025-02-20"),
				    TemperatureC = 13,
				    TemperatureStatus = TemperatureState.AboveZero,
				    Summary = "风力较大，注意防风"
				},
				new WeatherForecast
				{
				    Id = 5,
				    City = "广州",
				    WeatherState = WeatherState.Sunny,
				    DateTime = DateOnly.Parse("2025-03-13"),
				    TemperatureC = 21,
				    TemperatureStatus = TemperatureState.AboveZero,
				    Summary = "天气舒适"
				},
				new WeatherForecast
				{
				    Id = 6,
				    City = "广州",
				    WeatherState = WeatherState.Windy,
				    DateTime = DateOnly.Parse("2025-03-21"),
				    TemperatureC = 16,
				    TemperatureStatus = TemperatureState.AboveZero,
				    Summary = "风力较大，注意防风"
				});
		}
    }
}

步骤 2：运行项目。

运行 WeatherForecastDemo.WebApi 项目以启动 Web API。

Web API 成功启动：

当 Web API 启动时，将自动生成数据库文件（data.db）。

当 Web API 成功运行后，您将看到 Swagger UI，并能够在 Swagger UI 上测试基本 API 和过滤器 API（注意：如果 https 访问受限，您可以尝试使用 http）。

启动 Web API 后，您可以运行 WeatherForecastDemo Web应用项目来启动前端 Web 应用程序。

应用运行后，点击左侧导航栏的 天气 菜单，在右边页面中体验增删改查数据功能。