跳到主要内容

SnapDevelop 快速上手及进阶

本文档将通过一个简单的个人任务管理系统分步介绍SnapDevelop的使用，可根据需求查看对应的部分。

五分钟设计任务管理系统​

针对个人任务管理模板，只需要简单几步即可完成，运行后效果图如下：

show_web_effects

show_h5_effects

1. 创建一个新项目​

目前，SnapDevelop提供了三种类型的低代码项目，分别为云服务（API）设计、全栈应用设计以及鸿蒙应用设计（Beta），具体介绍见 此文档。这里选择创建一个不带示例案例的 全栈应用设计项目TaskManagementSystem。

create_project

2. 配置实体文件​

接下来，需要新建一个实体文件并设计实体。

2.1 新建实体文件​

首先，在创建的新项目中右键实体设计 → 添加 → 新建项，选择实体设计（从零开始）创建一个空的实体设计文件TaskManagement，其他类型文件介绍见 此文档。

create_sde_file

2.2 设计实体​

成功新建实体文件TaskManagement.sde后，需要添加一个实体（表）。在实体设计界面的组件库选中空白表拖入设计区域，然后进行实体（表）配置。

create_empty_table

首先进行实体（表）的常规配置，例如修改表名称为PersonalTask和显示名称为个人任务。

update_table_info

接下来，根据以下设计，配置PersonalTask实体的全部字段。

列名显示名称数据类型可空说明
IdIdInt32（32位整数）否自动生成的主键字段
TaskName任务String（字符串）否最大长度为50字符
Description详情String（字符串）否
Status状态枚举（待办/进行中/已完成/已取消）否
Priority优先级枚举（高/中/低）否
CreatedAt创建时间DateTime（日期时间）是默认为当前时间
DueDate截止日期DateOnly（日期）是
CompletedAt完成时间DateTime（日期时间）是
2.2.1 设计常规字段​

例如，设计一个不可空且最大长度为50字符的字符串字段TaskName。

（注意：这里设置的不可空和最大长度，将会生成到数据库表字段上）

列名显示名称数据类型可空说明
TaskName任务String（字符串）否最大长度为50字符

add_task_name_field

依此类推，设计好PersonalTask表的其他字段。

2.2.2 设计枚举字段​

PersonalTask表中有Status和Priority两个枚举字段，在添加字段选择数据类型时，需要设置对应的枚举类型，设计枚举的步骤如下：

（1）在数据类型下拉列表中，找到枚举，点击添加；

status_field_add_enum

（2）设置好枚举字段的多个枚举值之后，点击确定即可完成枚举类型的设计，同时Status字段绑定该枚举字段，并将以第一个枚举值作为默认值；

edit_status_enum

（3）按照同样的步骤设计好Priority枚举和字段。

edit_priority_enum

2.2.3 设置字段默认值​

其中，CreatedAt创建时间字段可以设置为自动获取当前时间，具体步骤如下：

（1）将CreatedAt字段的默认值设置方式切换为表达式，即可打开表达式设计器，通过表达式设计器，可快速设计字段的默认值，值格式等等；

switch_setting_mode

（2）在表达式设计面板中找到 日期 → Now，将CreatedAt字段的默认值设置为Now()，随后确认保存，即可自动获取当前时间存入到数据库表的CreatedAt字段中。

set_createdat_default_value

2.3 修改模型（可选）​

设计完表实体后会自动生成一个对应的模型，可通过工具栏上方自定义数据结构进入模型维护页面。

show_model_entry

现在为PersonalTaskModel（实体PersonalTask对应的模型）的TaskName字段设置必要校验和长度校验。

点击添加，选择必要校验，输入校验错误信息；再选择长度校验，这里自动读取了添加字段时设置的长度50，也可重新设置，同样输入校验错误信息，如下。

set_field_validation

3. 生成逻辑和视图文件​

完成实体设计之后，接下来进行逻辑和视图设计。SnapDevelop提供快速生成逻辑和视图设计功能， 可通过创建好的实体一键生成对应的逻辑和视图设计文件。系统会自动完成以下操作：

（1）生成逻辑设计文件：自动生成基础业务接口（如数据的增删改查接口）；

（2）生成视图设计文件：自动创建基础的增改查页面（如数据提交表单页，数据展示页，数据详情页）；

（3）事件关联：自动为页面元素绑定常用交互事件，无需手动绑定事件（如数据列表页的添加操作、数据行的编辑操作等）。

快速生成逻辑和视图设计文件的具体步骤如下：

（1） 完成表实体设计后，点击设计区域右上角生成逻辑和视图设计，选择所需的基础API；

generate_logic

（2）点击“下一步配置视图”，选择所需的前端页面并点击“确认”。

generate_view

生成的逻辑设计文件和视图设计文件如下：

generated_files

4. 设置页面交互​

创建的项目中默认有一个Layout.sdv视图文件，打开该视图，在属性配置的标题配置项中可配置应用的名称。

接着需要将任务列表页面List.sdv添加到导航菜单中，在菜单配置项中添加“任务”菜单项，并绑定List.sdv视图和配置合适的图标。

set_menu_item

添加完成后，在设计/预览区域，可以看到左侧导航菜单中有“任务”菜单项，点击菜单项，右侧切换到任务列表页面，如下。

show_design_preview_area

在设计/预览区域，可切换“电脑/平板/手机”查看不同设备下的设计，切换到手机端，任务页面如下。

switch_devices

5. 生成代码并运行​

5.1 生成前后端代码​

完成以上步骤之后，点击工具栏上的生成项目入口，打开生成设置页面。

show_generate_project_entry

生成设置页面提供多种生成代码配置，可根据个人需求修改，同时可预览代码。这里使用默认的生成配置文件Profile，点击生成项目直接生成前后端代码。

generate_setting_page

5.2 运行前后端​

可在SnapDevelop中直接修改生成的代码，也可通过其他IDE进行修改。这里不对生成的前后端代码做修改，直接运行。

（1）运行后端

切换到生成代码中的WebApi项目，直接点击运行后端。

run_webapi_project

后端启动成功后，会在浏览器打开swagger页面，可以对API进行测试，如下。

show_swagger_ui

（2）运行Web应用

切换到对应的前端Web项目，直接点击运行，也可通过终端命令 npm run dev 运行。

run_web_project

运行后，切换到任务菜单项，添加两个任务，效果如下。

show_web_effects

（3）运行H5应用

再切换到对应的前端H5项目，直接点击运行，同样可通过终端命令运行。

run_h5_project

运行后通过控制台切换为手机设备大小，选择任务菜单项，在Web应用新增的任务可同步查看，效果如下。

show_h5_effects

进阶一：设计业务规则​

前面已通过实体一键生成基础的前端页面，现在来尝试为任务新增/编辑页面添加业务规则。

业务规则：（1）创建时间默认值为当前时间，不需要填写；

（2）新增时任务状态默认为“待办”且不能修改；

（3）编辑时可修改任务状态，如果将任务状态修改为“已完成”，则必须填写完成时间；

设计思路：（1）创建时间表单项隐藏；

（2）状态的禁用配置项绑定创建表单模式；

（3）完成时间设置动态展示并添加必填校验。

效果：（1）打开任务新增页面，“状态”表单项为禁用状态，“创建时间”表单项不显示，如下；

disable_rendering

（2）打开任务编辑页面，“完成时间”表单项默认不显示；将状态改为“已完成”后显示“完成时间”表单项，且不填写就点击确认时提示“请选择完成时间”，如下。

show_error_message

1. 设计表单项隐藏​

由于创建时间已有默认值，不需要展示创建时间表单项，故直接将该表单项的隐藏开启。打开自动生成的AddOrUpdate.sdv文件，默认生成的新增和编辑功能使用的是同一个视图，开启后，无论是新增还是编辑，创建时间表单项均不可见。且在当前设备下设计后，会自动同步到“电脑/平板/手机”三端，所以无需切换到其他端再次设计。

enable_hidden

show_hidden_effect

2. 设计表单项禁用​

当AddOrUpdate.sdv视图为新增时，禁用“状态”表单项，所以需要将该表单项的禁用配置项设置为表单模式→创建模式，如下。

switch_form_mode

select_create_mode

3. 设计表单项动态显示​

当任务状态为“已完成”时，完成时间的表单项才显示，故需要在该表单项的隐藏配置项上设置业务规则，如下。

configure_form_item_hidden

design_hide_expression

4. 设计校验规则​

设计好表单项的隐藏规则后，接下来需要设计“完成时间”表单项的必填校验规则。如下，在表单项的规则配置项上点击添加一个视图规则。

add_view_rule

之后编辑视图规则，规则类型默认为“必填”，填写标题和错误信息，点击“应用并关闭”。

edit_view_rule

配置完成的“完成时间”表单项如下。

design_completed_at

5. 生成代码并运行​

（1）生成代码运行后，点击添加按钮，打开添加任务弹窗。如下，“状态”默认为待办且为禁用状态，“创建时间”不可见。另外，由于“状态”为待办，故不显示“完成时间”表单项。

disable_rendering

（2）编辑状态为“待办”的任务，如下，未显示“完成时间”表单项；

hidden_completed_at

将状态选为“已完成”时，显示“完成时间”表单项；

show_completed_at

未填写完成时间就点击确认，提示“请选择完成时间”。

show_error_message

进阶二：设计任务搜索功能​

前面已完成个人任务管理系统的基础增删改查功能，现在来尝试添加一个带搜索功能的任务列表页面，方便快速查找目标任务。

场景：使用任务名称和任务状态查找任务。

设计思路：设计一个带过滤条件的方法，过滤参数为任务名称和任务状态，并用其生成一个任务列表页面。

效果：将该页面添加到菜单中，设计完成后运行，如下。

search_list_rendering

search_list_rendering_h5

1. 设计过滤器和方法​

要实现搜索功能，可以在前面生成的PersonalTask.sdlg逻辑文件中添加一个过滤器并用此生成一个新方法。例如，要将任务的标题和状态作为搜索条件，可以设计如下的过滤器NameAndStatusFilter，包含SearchTaskName任务名称和SearchStatus任务状态两个过滤参数，其中任务名称为模糊匹配，任务状态为枚举匹配。

set_filter

设计好过滤器之后，使用该过滤器直接生成带搜索条件的GetListByNameAndStatusFilter方法。

generate_api

2. 生成带搜索条件的列表页面​

接着，在视图右键选择 添加 → 新建项，并选择“视图设计（基于模板）”创建一个SearchList.sdv文件。

add_new_file

add_view_file

点击“下一步”，选择表格页面模板和GetListByNameAndStatusFilter方法自动生成带过滤条件的表格页面。

create_search_list

生成的SearchList.sdv文件如下。

show_search_list_view

切换到手机端，自动生成的为更适合手机的列表形式，如下。

show_phone_search_list

3. 设置菜单项​

同样需要在Layout.sdv视图文件中将SearchList.sdv视图绑定到菜单中，并设置菜单项图标，如下。

bind_search_list_view

4. 重新生成代码并运行​

在完成前面步骤后，直接点击工具栏的生成配置，一键重新生成代码，并重新运行前后端，运行效果如下。

search_list_rendering

search_list_rendering_h5

进阶三：设计任务状态统计功能​

接下来来尝试统计不同状态的任务数量，方便用户直观查看待办任务数量或其他状态任务的数量。

场景：统计不同状态的全部任务数量。

设计思路：设计一个使用状态字段的对任务进行分组统计的方法。

效果：在首页使用饼图展示不同状态的任务数量，效果如下。

pie_rendering

pie_rendering_h5

1. 设计统计方法​

为了使用饼图统计不同状态任务数量，需要先有统计接口。首先需要按照状态对全部任务进行分组，再统计每种状态的任务数量，切换到PersonalTask.sdlg逻辑文件，按照以下设置，新增一个方法并改名为GetTaskCountByStatus。

add_pie_api

1.1 配置查询节点​

接下来对GetTaskCountByStatus方法进行配置，切换到方法上的查询节点，按照如下步骤配置查询节点。

（1）开启启用分组，并设置按照Status字段分组；

enable_group

（2）在查询字段中设置要返回的两个数据，即分组对应的状态Status和状态对应任务数量TaskCount，其中Status值设置为Keys.Status，TaskCount值通过表达式设置为Count(Values.PersonalTask)；

edit_search_fields

（3）点击生成模型，根据查询字段快速生成模型，命名为PieDataModel；

generate_model

（4）结果需要返回不同状态任务的数据，这里结果设置选择返回集合。

配置完成的查询节点如下。

design_pie_search_node

1.2 配置结束节点​

配置好查询节点后，切换到结束节点，返回值选择查询结果即可，如下。

design_end_node

2. 设计饼图​

接下来拖动一个卡片组件添加到Home.sdv，将卡片标题改为“任务状态统计”。之后在卡片中添加一个饼图，对饼图进行如下配置。

（1）饼图数据源绑定前面设计好的GetTaskCountByStatus；

（2）标签名称绑定Status字段；

由于方法返回的Status是枚举值，所以绑定Status字段时需要配置一个值转化器将枚举值转化为对应的文本，点击“添加值转化器”按钮，打开设置值转化器面板。

bind_label_name

在全局分类下添加一个值转化器，并修改显示名称，输入值和输出值会根据枚举设置自动生成，也可自行修改。

add_enum_converter

设置完成后点击“应用并关闭”，将会自动绑定该值转化器，点击“确认”完成标签名称的配置。

bind_enum_converter

（3）数值绑定TaskCount字段；

（4）编辑饼图标题，清除子标题。

整个饼图配置完成后如下。

design_pie

3. 重新生成代码并运行​

设计完成后，直接重新生成代码并运行，添加多条不同状态的任务后，Web和H5运行效果分别如下。

pie_rendering

pie_rendering_h5

进阶四：设计变更任务优先级功能​

最后来尝试添加快速变更任务优先级功能，方便用户快速调整目标任务优先级。

场景：快速修改任务优先级。

设计思路：在搜索的任务列表内设计一个单选框组用于快速调整任务的优先级。

效果：切换到前面生成的搜索页面，调整任务优先级，效果如下。

change_priority_rendering_h5

1. 设计变更优先级方法​

为了快速变更任务优先级，可以设计一个方法，只更新优先级字段。如下，添加一个方法，并命名为UpdatePriority。

add_empty_api

1.1 配置开始节点​

选中开始节点，在参数位置添加两个字段，分别为Int32类型的“TaskId”和枚举Priority类型的“Priority”，如下。

design_priority_start_node

1.2 添加更新节点​

从组件库中拖入一个更新节点到方法上，数据源绑定PersonalTask表；

add_priority_update_node

过滤器参数的Id绑定开始节点的“TaskId”；

bind_filter_param

更新字段只勾选“Priority”字段，如下。

select_update_field

更新字段的Priority值绑定开始节点的“Priority”。

bind_update_field

1.3 配置结束节点​

之后切换到结束节点，返回值选择更新结果的“Success(成功)”。

design_priority_end_node

1.4 配置方法​

最后切换到方法配置栏，将请求方法设置为“PUT”，将API参数来源中的TaskId的来源改为“Route”，如下。

design_priority_endpoint

完成UpdatePriority方法的全部配置后，保存PersonalTask.sdlg文件。

2. 设计单选框组​

打开SearchList.sdv，切换到phone端，拖动一个弹性布局组件到任务卡片的任务详情后面，并在其中添加一个文本组件和单选框组组件，如下。

add_radio_group

（1）将文本组件的值改为“优先级:”；

（2）单选框组的数据源绑定枚举的“Priority(任务优先级)”；

bind_data_source

单选框组的数据绑定绑定“Priority(优先级)”字段；

bind_priority_radio_group

最后将单选框组的类型改为按钮，如下。

change_radio_group_type

3. 设计值改变事件​

现在需要为单选框组绑定事件，切换到事件配置栏，点击添加事件，添加一个“值改变事件”；

add_change_event

动作类型选择“接口操作”，请求接口选择PersonalTask下的“UpdatePriority”接口；

add_change_event

接口的第一个参数TaskId通过组件绑定的方式，绑定列表的当前行数据下的Id字段；

bind_current_row_id

接口的第二个参数Priority，同样使用组件绑定，先在预览区域选中单选框组，再选择“数据绑定(value)”；

bind_radio_group_value

接着配置请求成功时的提示信息，选择组件操作，选定轻提示组件，并填写提示信息；

design_success_message

同理，配置异常时的提示信息为“操作失败”。配置完成后的单选框组的值改变事件如下。

show_change_event

4. 重新生成代码并运行​

在完成前面步骤后，直接点击工具栏的生成配置，一键重新生成代码，并重新运行前后端。调整第一个任务的优先级，效果如下。

change_priority_rendering_h5