快速入门

创建天气预报应用

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

本教程将指导用户使用 SnapDevelop 可视化设计器快速创建天气预报数据维护场景（前端为 Web 页面，后端为 C# Web API）。

在演示过程中，将选择 浏览器端 Web 和 API 项目类型从零开始创建应用程序。

创建设计器项目

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

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

    image-20250312165155888

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

    image-20250312165214554

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

    image-20250312165225217

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

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

创建实体文件

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

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

image-20250312165508850

步骤 2：在 WeatherForecast 实体文件中，从左边 组件库 > 基础组件 中拖拽 空白表 到中间的设计区，然后参考下图添加字段及设置字段类型。

image-20250310155437645

注意：

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

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

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

    image-20250314131527330

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

    image-20250310144223053

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

    image-20250310144058829

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

创建逻辑文件

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

image-20250312170047604

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

image-20250310160033182

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

添加过滤器

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

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

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

    image-20250312170309983

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

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

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

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

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

image-20250310162425907

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

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

image-20250311095234572

添加方法

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

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

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

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

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

    image-20250312170752193

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

    image-20250312170833160

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

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

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

    image-20250314140013655

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

    image-20250310150138048

  6. 选中 集合，将 CityModel 字段的值设置为 查询.QueyModel，将 City 字段的值设置为 查询.QueryModel.City。

    image-20250314144511746

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

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

    image-20250312171017287

  2. 选择 数据源 为 WeatherForecast。

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

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

image-20250311110015658

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

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

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

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

    image-20250314140013655

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

    image-20250310152334165

  3. 设置模型字段的值为以下表达式。

    Total 字段

    Count(查询.WeatherForecast)

    MinTemperature 字段

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

    MaxTemperature 字段

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

    AVGTemperature 字段

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

    City 字段

    First(查询.WeatherForecast.City)

    image-20250311111303456

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

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

  2. 选择 数据源 为 WeatherForecast。

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

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

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

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

    image-20250314153134685

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

  8. 选择 结果 字段为 查询.WeatherForecast，总数 字段为 查询.Total。

    image-20250314153524896

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

创建视图文件

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

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

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

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

image-20250311163715759

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

    视图文件名称指定为 Edit。

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

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

    视图文件名称指定为 Detail。

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

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

    视图文件名称指定为 List。

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

配置List视图文件

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

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

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

image-20250312172956215

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

image-20250312173025918

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

image-20250312171932183

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

image-20250312172254368

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

image-20250312172015947

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

image-20250312172321349

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

image-20250312172346622

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

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

image-20250312172436520

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

image-20250312172920655

配置导航页面

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

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

image-20250312173128907

此时，天气预报应用的前端和后端已完成。您可以生成并运行项目来查看前端和后端。

生成和运行项目

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

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

image-20250313100526333

生成以下项目：

image-20250313100705354

为了让应用运行时带有示例数据，我们在 SourceCode\CSharp\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。

image-20250313100842272

image-20250313100919321

Web API 成功启动：

image-20250314160529829

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

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

image-20250313101025306

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

image-20250313101115059

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

image-20250314160639621