SnapDevelop 快速上手
本文档将通过一个简单的个人任务管理系统分步介绍SnapDevelop的使用，可根据需求查看对应的部分。
五分钟设计任务管理系统
针对个人任务管理模板，只需要简单几步即可完成，运行后效果图如下：
1. 创建一个新项目
目前，SnapDevelop提供了三种类型的低代码项目，分别为后端API、浏览器端Web和API以及移动端和API，具体介绍见 此文档。这里选择创建一个不带示例案例的 浏览器端Web和API项目TaskManagementSystem。
2. 配置实体文件
接下来，需要新建一个实体文件并设计实体。
2.1 新建实体文件
首先，在创建的新项目中右键实体设计 → 添加 → 新建项，选择实体设计（从零开始）创建一个空的实体设计文件TaskManagement，其他类型文件介绍见 此文档。
2.2 设计实体
成功新建实体文件TaskManagement.sde后，需要添加一个实体（表）。在实体设计界面的组件库选中空白表拖入设计区域，然后进行实体（表）配置。
首先进行实体（表）的常规配置，例如修改表名称为PersonalTask和显示名称为个人任务。
接下来，根据以下设计，配置PersonalTask实体的全部字段。
| 列名 | 显示名称 | 数据类型 | 可空 | 说明 |
|---|---|---|---|---|
| Id | Id | Int32（32位整数） | 否 | 自动生成的主键字段 |
| TaskName | 任务 | String（字符串） | 否 | 最大长度为50字符 |
| Description | 详情 | String（字符串） | 否 | |
| Status | 状态 | 枚举（待办/进行中/已完成/已取消） | 否 | |
| Priority | 优先级 | 枚举（高/中/低） | 否 | |
| CreatedAt | 创建时间 | DateTime（日期时间） | 是 | 默认为当前时间 |
| DueDate | 截止日期 | DateOnly（日期） | 是 | |
| CompletedAt | 完成时间 | DateTime（日期时间） | 是 |
2.2.1 设计常规字段
例如，设计一个不可空且最大长度为50字符的字符串字段TaskName。
（注意：这里设置的不可空和最大长度，将会生成到数据库表字段上）
| 列名 | 显示名称 | 数据类型 | 可空 | 说明 |
|---|---|---|---|---|
| TaskName | 任务 | String（字符串） | 否 | 最大长度为50字符 |
依此类推，设计好PersonalTask表的其他字段。
2.2.2 设计枚举字段
PersonalTask表中有Status和Priority两个枚举字段，在添加字段选择数据类型时，需要设置对应的枚举类型，设计枚举的步骤如下：
（1）在数据类型下拉列表中，找到枚举，点击添加；
（2）设置好枚举字段的多个枚举值之后，点击确定即可完成枚举类型的设计，同时Status字段绑定该枚举字段，并将以第一个枚举值作为默认值；
（3）按照同样的步骤设计好Priority枚举和字段。
2.2.3 设置字段默认值
其中，CreatedAt创建时间字段可以设置为自动获取当前时间，具体步骤如下：
（1）将CreatedAt字段的默认值设置方式切换为表达式，即可打开表达式设计器，通过表达式设计器，可快速设计字段的默认值，值格式等等；
（2）在表达式设计面板中找到 日期 → Now，将CreatedAt字段的默认值设置为Now()，随后确认保存，即可自动获取当前时间存入到数据库表的CreatedAt字段中。
2.3 修改模型（可选）
设计完表实体后会自动生成一个对应的模型，可通过工具栏上方自定义数据结构进入模型维护页面。
现在为PersonalTaskModel（实体PersonalTask对应的模型）的TaskName字段设置必要校验和长度校验。
点击添加，选择必要校验，输入校验错误信息；再选择长度校验，这里自动读取了添加字段时设置的长度50，也可重新设置，同样输入校验错误信息，如下。
3. 生成逻辑和视图文件
完成实体设计之后，接下来进行逻辑和视图设计。SnapDevelop提供快速生成逻辑和视图设计功能， 可通过创建好的实体一键生成对应的逻辑和视图设计文件。系统会自动完成以下操作：
（1）生成逻辑设计文件：自动生成基础业务接口（如数据的增删改查接口）；
（2）生成视图设计文件：自动创建基础的增改查页面（如数据提交表单页，数据展示页，数据详情页）；
（3）事件关联：自动为页面元素绑定常用交互事件，无需手动绑定事件（如数据列表页的添加操作、数据行的编辑操作等）。
快速生成逻辑和视图设计文件的具体步骤如下：
（1） 完成表实体设计后，点击设计区域右上角生成逻辑和视图设计，选择所需的基础API；
（2）点击“下一步配置视图”，选择所需的前端页面并点击“确认”。
生成的逻辑设计文件和视图设计文件如下：
4. 设置页面交互
创建的项目中默认有一个Layout.sdv视图文件，打开该视图，在属性配置的标题配置项中可配置应用的名称。
接着需要将任务列表页面List.sdv添加到导航菜单中，在菜单配置项中添加“任务”菜单项，并绑定List.sdv视图。
添加完成后，在设计/预览区域，可以看到左侧导航菜单中有“任务”菜单项，点击菜单项，右侧切换到任务列表页面，如下。
5. 生成代码并运行
5.1 生成前后端代码
完成以上步骤之后，点击工具栏上的生成项目入口，打开生成设置页面。
生成设置页面提供多种生成代码配置，可根据个人需求修改，同时可预览代码。这里使用默认的生成配置文件Profile，点击生成项目直接生成前后端代码。
5.2 运行前后端
可在SnapDevelop中直接修改生成的代码，也可通过其它IDE进行修改。这里不对生成的前后端代码做修改，直接运行。
（1）运行后端
切换到生成代码中的WebApi项目，直接点击运行后端。
（2）运行前端
再切换到对应的前端Web项目，直接点击运行，也可通过终端命令运行前端。
（3）运行效果
运行成功后添加一条新的任务信息，效果如下。
这样就完成了一个简单的带有新增、编辑和删除功能的个人任务管理系统。
进阶一：设计业务规则
前面已通过实体一键生成基础的前端页面，现在来尝试为任务新增/编辑页面添加业务规则。
业务规则：新增时任务状态默认为“代办”且不能修改；编辑时可修改任务状态，如果将任务状态修改为“已完成”，则必须填写完成时间。
设计思路：状态的禁用配置项绑定创建表单模式，完成时间设置动态展示并添加必填校验。
效果：（1）打开任务新增页面，“状态”表单项为禁用状态，如下；
（2）打开任务编辑页面，将任务状态设置为“已完成”时，需要填写“完成时间”且为必填。
1. 设计表单项禁用
打开自动生成的AddOrUpdate.sdv文件，默认生成的新增和编辑功能使用的是同一个视图；当该视图为新增时，禁用“状态”表单项，所以需要将该表单项的禁用配置项设置为表单模式→创建模式，如下。
2. 设计组件动态显示
当任务状态为“已完成”时，完成时间的表单项才显示，故需要在该表单项的隐藏配置项上设置业务规则，如下。
这里采用表达式实现，当数据中的Status值为枚举值“已完成”时，则“完成时间”表单项不隐藏，否则隐藏。表达式配置如下，点击“确认”即可完成。
3. 设计校验规则
设计好表单项的隐藏规则后，接下来需要设计“完成时间”表单项的必填校验规则。如下，在表单项的规则配置项上点击添加一个视图规则。
之后编辑视图规则，规则类型默认为“必填”，填写标题和错误信息，点击“应用并关闭”。
配置完成的“完成时间”表单项如下。
4. 生成代码并运行
（1）生成代码运行后，点击添加按钮，打开添加任务弹窗。如下，“状态”默认为待办且为禁用状态。另外，由于“状态”为待办，故不显示“完成时间”表单项。
（2）编辑状态为“待办”的任务，如下，未显示“完成时间”表单项。
将任务状态修改为已完成时，显示“完成时间”表单项，未填写“完成时间”时点击“确认”按钮会出现配置好的校验错误信息。
进阶二：设计任务搜索功能
前面已完成个人任务管理系统的基础增删改查功能，现在来尝试添加一个带搜索功能的任务列表页面，方便快速查找目标任务。
场景：使用任务名称和任务状态查找任务。
设计思路：设计一个带过滤条件的方法，过滤参数为任务名称和任务状态，并用其生成一个任务列表页面。
效果：将该页面添加到菜单中，设计完成后运行，如下。
1. 设计过滤器和方法
要实现搜索功能，可以在前面生成的PersonalTask.sdlg逻辑文件中添加一个过滤器并用此生成一个新方法。例如，要将任务的标题和状态作为搜索条件，可以设计如下的过滤器，包含SearchTaskName任务名称和SearchStatus任务状态两个过滤参数，其中任务名称为模糊匹配，任务状态为枚举匹配。
设计好过滤器之后，使用该过滤器直接生成带搜索条件的GetPageByNameAndStatusFilter方法。
2. 生成带搜索条件的列表页面
接着，直接在新建项中使用表格页面模板和GetPageByNameAndStatusFilter方法创建一个带过滤条件的列表页面。
生成的SearchList.sdv文件如下。
3. 设置菜单项
同样需要在Layout.sdv视图文件中将SearchList.sdv视图绑定到菜单中，并设置菜单项图标，如下。
4. 重新生成代码并运行
在完成前面步骤后，直接点击工具栏的生成配置，一键重新生成代码，并重新运行前后端，运行效果如下。
进阶三：设计任务状态统计功能
在完成简单的增删改查功能后，接下来来尝试统计不同状态的任务数量，方便用户直观查看待办任务数量或其他状态任务的数量。
场景：统计不同状态的全部任务数量。
设计思路：设计一个使用状态字段的对任务进行分组统计的方法。
效果：在首页使用饼图展示不同状态的任务数量，效果如下。
1. 设计统计方法
为了使用饼图统计不同状态任务数量，需要先有统计接口。首先需要按照状态对全部任务进行分组，再统计每种状态的任务数量，切换到PersonalTask.sdlg逻辑文件，按照以下设置，新增一个方法并改名为GetTaskCountByStatus。
1.1 配置查询节点
接下来对GetTaskCountByStatus方法进行配置，切换到方法上的查询节点，按照如下步骤配置查询节点。
（1）开启启用分组，并设置按照Status字段分组；
（2）开启启用查询字段，设置要返回的两个数据，即分组对应的状态Status和状态对应任务数量TaskCount，其中Status值设置为Keys.Status，TaskCount值通过表达式设置为Count(Values.PersonalTask)；
（3）点击生成模型，根据查询字段快速生成模型，命名为PieDataModel；
（4）结果需要返回不同状态任务的数据，这里结果设置选择返回集合。
配置完成的查询节点如下。
1.2 配置结束节点
配置好查询节点后，切换到结束节点，返回值选择查询结果即可，如下。
2. 设计饼图
接下来拖动一个饼图组件添加到Home.sdv，对饼图进行如下配置。
（1）饼图数据源绑定前面设计好的GetTaskCountByStatus；
（2）标签名称绑定Status字段；
由于方法返回的Status是枚举值，所以绑定Status字段时需要配置一个值转化器将枚举值转化为对应的文本，点击“添加值转化器”按钮，打开设置值转化器面板。
在全局分类下添加一个值转化器，并修改显示名称，输入值和输出值会根据枚举设置自动生成，也可自行修改。
设置完成后点击“应用并关闭”，将会自动绑定该值转化器，点击“确认”完成标签名称的配置。
（3）数值绑定TaskCount字段；
（4）编辑饼图标题，清除子标题。
整个饼图配置完成后如下。
3. 重新生成代码并运行
设计完成后，直接重新生成代码并运行，添加多条不同状态的任务后，效果如下。
进阶四：自定义任务展示页面
现在，来尝试自定义一些页面设计，例如通过列表组件分别显示待办任务和进行中的任务。
场景：按状态分别展示待办任务和进行中的任务，并可快捷编辑任务。
设计思路：设计目标的任务展示样式，使用进阶二设计的带过滤参数的方法分别获取待办任务和进行中的任务数据，添加编辑按钮并设计打开编辑页面事件。
效果：在首页使用卡片组件内嵌列表组件，分别展示获取到的待办任务和进行中的任务数据，效果如下。
1. 设计组件
首先在Home.sdv视图中拖拽一个卡片组件放置到饼图下方，并在卡片中放置一个列表组件，列表启用栅格并设置列数为3，设计好的组件如下。
接着在列表项上开启操作区域，并拖入一个按钮，用于绑定任务的编辑功能，组件设计如下。
然后设计任务展示区域的样式，可以根据个人需要设计，这里设置了卡片标题、列表间隔、列表项背景色和编辑按钮的样式等，设计后的待办任务卡片如下。
2. 绑定数据
设计完组件及组件样式后，需要为组件绑定数据。
首先需要为列表组件绑定数据源，选择前面搜索页面设计好的GetPageByNameAndStatusFilter接口，由于这里只根据状态过滤任务数据，所以这里SearchTaskName不赋值，SearchStatus设置为固定的状态即枚举值“待办”，如下。
接着为列表项中的标题组件绑定TaskName字段，先切换到标题组件，点击配置项右侧按钮，打开高级绑定配置面板，通过数据绑定的方式，绑定到TaskName(任务)字段，如下。
通过同样的方式，将Description(详情)字段绑定到列表项里面的文本组件上。
紧接着将编辑按钮点击事件设置为页面跳转，设置跳转页面为AddOrUpdate.sdv，并设置传递参数为组件绑定 → 列表的当前行数据中的Id，如下。
这样，一个自定义的待办任务列表就完成了。
复制该“待办”任务卡片，将卡片标题修改为“进行中”，调整列表项的背景颜色，使其与待办任务区分开。再将列表组件数据源配置处的GetPageByNameAndStatusFilter接口的SearchStatus参数值改为默认的枚举值“进行中”，即可增加进行中任务列表，如下。
3. 重新生成代码并运行
设计完成后，直接重新生成代码并运行，效果如下。
进阶五：自定义任务更新逻辑
最后，尝试为任务添加快捷操作，一键将待办任务设置成“进行中”或“已取消”，将进行中的任务设置成“已完成”。
场景：一键更改任务状态，将待办任务状态快速改为“进行中”或“取消”，或将进行中的任务快速改为“已完成”。
设计思路：设计一个变更任务状态的方法，且当要变更的状态为“已完成”时，自动获取当前时间写入“完成时间”。
效果：在任务列表添加快捷操作按钮，设计对应操作，生成代码运行，效果如下。
1. 设计方法
为了达到上述的效果，需要有一个接口能够改变任务的状态Status和更新任务的已完成时间CompletedAt，并且只有任务状态为已完成时才更新任务的已完成时间，在PersonalTask.sdlg逻辑文件中添加一个UpdateStatus方法，并拖入一个条件节点和两个更新节点，如下。
现在开始配置各个节点，首先UpdateStatus方法需要接收要变更数据的任务ID和任务要更新的状态值，所以要在开始节点中定义UpdateTaskId和UpdateTaskStatus接收前端传递过来的参数值。
接着配置条件节点，这里需要判断任务要更新的状态值是否为已完成，配置如下。
然后分别配置条件为true和条件为false的更新节点。
首先是条件为true时的更新节点配置。先要将过滤器参数Id设置为传入的UpdateTaskId，找到对应的任务。接着，条件为true时即要更新任务的状态值为已完成，需要将已完成时间CompletedAt字段设置为当前时间，以及更新任务的状态数据，配置如下。条件为false的更新节点也是同样的配置，只是更新字段中不需要配置CompletedAt字段。
2. 组件绑定
完成方法的设计后，接下来需要在任务列表中添加按钮并绑定。
在待办任务列表原先的编辑按钮后面新增两个按钮，分别为“进行中”和“取消”。首先为“进行中”按钮绑定事件，添加一个接口操作动作，并绑定刚设计好的UpdateStatus接口，其中UpdateTaskId参数的值为当前列表项的Id，UpdateTaskStatus参数采用手动赋值的方式指定为枚举值“进行中”。
由于修改任务的状态后，任务数据有变化，所以需要在UpdateStatus接口操作成功时添加更新页面数据动作，触发饼图、待办任务列表和进行中任务列表获取最新数据，如下。
按照同样的方式配置好“取消”按钮。
接着在进行中任务列表的列表项中添加一个“已完成”按钮，按照相同的方式配置UpdateStatus接口和更新页面数据动作，如下。
3. 重新生成代码并运行
前面组件及组件事件配置完成后，直接重新生成代码并运行，运行后修改任务状态，效果如下。
