SnapDevelop 快速上手及进阶

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

五分钟设计任务管理项目

首先是基础的增删改查功能，只需要简单几步即可完成，运行后效果图如下：

1. 创建一个新项目

目前，SnapDevelop提供了三种类型的设计器开发项目，分别为后端API、浏览器端Web和API以及移动端Web和API，具体介绍见 此文档。这里选择创建一个不带示例案例的 浏览器端Web和API项目。

2. 设计实体

接下来，根据以下数据表设计对应的task实体。

字段名	类型	必填	说明
task_id	自增ID	自动	主键
task_name	字符串（50字）	是	任务标题
description	字符串	是	任务详情
status	枚举：待办/进行中/已完成/已取消	是	任务状态（默认：待办）
priority	枚举：高/中/低	是	优先级（默认：中）
due_date	日期	否	截止日期
created_at	日期时间	自动	创建时间
completed_at	日期时间	否	完成时间（仅当状态=已完成时显示）

2.1 新建实体文件

首先，在创建的新项目上右键菜单找到新建项。低代码项目提供了几种不同的新建项，这里选择 实体设计（从零开始） 创建一个空的实体文件，其它类型文件介绍见 此文档。

2.2 设计实体

新创建的实体文件中包括 ①表组件库区域，②大纲树，③数据库/表配置区域，④实体（表）设计区域四个部分，这里先直接从①表组件库区域 选择一个空白表拖入 ④实体（表）设计区域，此时 ②大纲树也会同步显示，③数据库/表配置区域会显示对应的可配置项，如下。

现在，需要根据预先设计好的task表，在实体文件中设计一个task实体。先在③配置区域配置表名等基础信息，接着再一一设计task表的全部字段。例如，设计一个不可空且最大长度为50字符的字符串字段task_name。

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

字段名	类型	必填	说明
task_name	字符串（50字）	是	任务标题

依此类推，设计好task表的其它字段。

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

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

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

2.3 设计枚举字段

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

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

设置好枚举字段的多个枚举值之后，点击确定即可完成枚举类型的设计，按照同样的步骤设计好priority字段。

2.4 修改模型（可选）

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

为taskModel（实体task对应的模型）的task_name字段设置必填校验和长度校验。

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

3. 快速创建逻辑

之后直接点击快速创建逻辑，选择前端页面所需的基础API，一键生成基础的增删改查接口。

生成的逻辑文件如下，包含了已勾选的基础增删改查接口。

4. 生成页面

通过先前的逻辑快速生成各个页面。

4.1 任务列表页面

首先，需要先添加一个视图文件。同样在项目上右键菜单选择 添加 → 新建项，选择视图设计（基于模板），命名为task_list.sdv，点击下一步。视图模板选择表格页面，并选择分页接口GetPage，快速创建任务列表页面，如下。

直接生成的任务列表页面，即task_list.sdv视图文件如下。

这里，暂时保持默认配置，不进行自定义配置。

4.2 新增任务页面

按照前面的方法，添加一个task_create.sdv视图文件。

这里视图模板选择表单页面，由于是新增数据，所以表单获取Api无需选择，表单提交Api选择Add接口，直接创建即可。

生成的新增任务页面如下。

4.3 任务编辑页面

同样的操作，创建一个task_edit.sdv视图文件，视图模板也选择表单页面，表单获取Api选择Get接口，表单提交Api选择Update接口，点击创建。

5. 设置页面交互

前面已设计好实体和逻辑，以及简单的增改查页面，接下来将通过组件设置，完成页面功能的交互。

5.1 添加导航菜单项

首先，需要将任务列表页面添加到导航菜单中。

创建的项目中默认有一个Layout.sdv视图文件，打开该视图，在属性页菜单配置项中添加“任务”菜单项，并绑定task_list视图。

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

5.2 配置新增任务功能

切换到task_list.sdv任务列表视图文件，通过API创建的此视图文件默认有添加、编辑、详情和删除按钮，但未配置相关功能。

（1）配置添加按钮的事件逻辑，切换到事件配置部分，添加框架操作动作，选择当前窗口打开方式，跳转到task_create视图页面；

（2）task_create配置页面返回操作，切到表单容器组件的事件配置，配置表单容器的提交完成事件为返回/关闭（当使用者新增一个任务后，自动返回到任务列表页面）。

5.3 配置任务编辑功能

通过同样的方式配置任务编辑功能，先选中编辑按钮，切到事件配置部分，添加在当前窗口打开task_edit视图页面的动作，并将task_id参数的值设置为当前行数据的id，如下。

如此配置后，点击行数据上的编辑按钮，会跳转到有当前行数据的任务编辑页面。再打开task_edit.sdv文件，也需要为编辑表单的表单容器配置提交完成之后的返回/关闭事件。

5.4 配置删除任务功能

默认的删除按钮点击后有确认框，所以配置行数据的删除功能，需要切换到删除按钮外层的气泡确认框上配置。切到气泡确认框的事件配置部分，先添加一个接口操作，配置请求接口为Delete接口，task_id参数的值为当前行数据的id。

配置后，当使用者点击删除提示框的确认按钮后，将会使用当前行数据的id去请求Delete接口删除当前行数据。

删除完所选行数据后，需要获取最新的任务数据，所以可以在删除的动作后，再添加一个刷新数据的动作，执行表格容器的加载数据操作，如下。

6. 生成代码并运行

6.1 生成前后端代码

按照上面的步骤配置好页面后，点击工具栏的生成配置文件，打开生成设置页面。

生成设置页面提供多种生成代码配置，可以根据个人需求修改，点击“生成项目”按钮直接生成前后端代码。

6.2 运行前后端

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

（1）运行后端

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

（2）运行前端

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

（3）运行效果

运行成功后添加一条新的任务信息，效果如下。

这样就完成了一个简单的带有新增、编辑和删除功能的个人任务管理系统。

进阶一：设计任务搜索功能

前面已完成个人任务管理系统的基础增删改查功能，现在来为任务列表页面添加搜索功能。将任务的标题和状态作为搜索条件，设计完成后运行效果如下。

1. 设计过滤器和方法

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

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

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

接着，直接在新建项中使用“表格页面”模板和GetPageByNameAndStatusFilter方法创建一个带过滤条件的列表页面。生成的task_list_filter.sdv文件如下。

3. 设置菜单项

同样需要在Layout.sdv视图文件中将task_list_filter.sdv视图绑定到菜单中，如下。

4. 重新生成代码并运行

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

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

在完成简单的增删改查功能后，接下来来尝试统计不同状态的任务数量，可以选择通过饼图来呈现，效果如下。

1. 设计统计方法

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

1.1 配置查询节点

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

（1）勾选分组，并设置按照status字段分组；

（2）勾选查询字段，设置要返回的两个数据，即分组对应的状态status和状态对应任务数量TaskCount，其中status值设置为Keys.status，TaskCount值设置为Count(Values.task)，如下；

（3）结果设置选择返回集合。

1.2 配置结束节点

饼图展示需要接收状态数据和状态对应的任务数量，所以需要先定义一个结果模型，存放这两个字段数据。

在工具栏中打开自定义数据结构设计面板，设计以下的模型，包含Status和TaskCount两个字段。

配置好模型后，切换到GetTaskCountByStatus方法的结束节点上，返回值选择刚定义好的模型，勾选集合，并在数据适配为模型绑定前面查询节点拿到的数据，配置如下。

2. 设计饼图

接下来拖动一个饼图组件添加到Home.sdv，并直接绑定前面设计好的GetTaskCountByStatus方法，如下。

数据源绑定前面设计好的GetTaskCountByStatus，然后将Status和TaskCount分别绑定到数据名和数据值上。

3. 重新生成代码并运行

设计完成后，直接重新生成代码并运行，效果如下。

进阶三：自定义任务展示页面

现在，来尝试自定义一些页面设计，例如通过列表组件分别显示待办任务和进行中的任务，效果如下。

1. 设计组件

首先在Home.sdv首页视图中拖拽一个卡片，并在卡片中放置一个列表组件，列表启用栅格并设置列数为3，设计好的组件如下。

接着在列表项上开启操作区域，并拖入一个按钮，用于绑定任务的编辑功能，组件设计如下。

然后设计列表项的样式，即每个任务展示区域的样式，这里设置了内外边距和背景色，可以根据个人需要设计，列表项的样式设计如下。

2. 绑定数据

设计完组件及组件样式后，需要为组件绑定数据。

首先需要为列表组件绑定数据源，选择GetPageByNameAndStatusFilter接口，由于这里只根据状态过滤任务数据，所以这里SearchTaskName不赋值，SearchStatus设置为固定的状态即枚举值“待办”，如下。

接着为列表项中的标题组件绑定任务标题字段，先切换到标题组件，将值配置切换为字段绑定方式，绑定到任务标题字段，如下。

通过同样的方式，将任务详情字段绑定到列表项里面的文本组件上。

紧接着按照前面表格中编辑按钮的事件设计，将编辑按钮事件同样设置为跳转到task_edit.sdv，如下。

这样，一个自定义的待办任务列表就完成了。复制该“待办”任务卡片，将卡片标题修改为“进行中”，可再调整列表项的背景颜色，与待办任务区分开。

再将列表组件数据源配置处的GetPageByNameAndStatusFilter接口的SearchStatus参数的值改为默认的枚举值“进行中”即可增加进行中任务列表，如下。

3. 重新生成代码并运行

设计完成后，直接重新生成代码并运行，效果如下。

进阶四：自定义任务更新逻辑

最后，尝试为任务添加快捷操作。例如，将待办任务快捷设置成“进行中”或“已取消”，将进行中的任务快捷设置成“已完成”，效果如下。

1. 设计方法

为了达到上述的效果，需要有一个接口能够改变任务的状态status和更新任务的已完成时间completed_at，并且只有任务状态为已完成时才更新任务的已完成时间，在task.sdlg逻辑文件中添加一个UpdateStatus方法，并拖入一个条件节点和两个更新节点，如下。

现在开始配置各个节点，首先UpdateStatus方法需要接收要变更数据的任务ID和任务要更新的状态值，所以要在开始节点中定义TaskId和UpdateTaskStatus接收前端传递过来的参数值。

接着配置条件节点，这里需要判断任务要更新的状态值是否为已完成，配置如下。

然后分别配置条件为true和条件为false的更新节点。

首先是条件为true时的更新节点配置。先要将过滤器参数task_id设置为传入的TaskId，找到对应的任务。接着，条件为true时即要更新任务的状态值为已完成，需要将已完成时间completed_at字段设置为当前时间，以及更新任务的状态数据，配置如下。条件为false的更新节点也是同样的配置，只是更新字段中不需要配置completed_at字段。

2. 组件绑定

完成方法的设计后，接下来需要在任务列表中添加按钮并绑定。

在待办任务列表原先的编辑按钮后面添加一个组合，并新增两个按钮，分别为“进行中”和“取消”。首先为“进行中”按钮绑定事件，添加一个接口操作动作，并绑定刚设计好的UpdateStatus接口，其中TaskId参数的值为当前列表项的Id，UpdateTaskStatus参数采用手动赋值的方式指定为枚举值“进行中”。

由于修改任务的状态后，待办列表数据有更新，所以需要在UpdateStatus接口操作后分别添加待办任务列表和进行中的任务列表的加载数据动作，如下。

按照同样的方式配置好“取消”按钮。

接着在进行中任务列表的列表项中同样添加一个组合，并加入一个”已完成“按钮，按照相同的方式配置UpdateStatus接口和列表的加载数据动作，如下。

3. 重新生成代码并运行

前面组件及组件事件配置完成后，直接重新生成代码并运行，运行后修改任务状态，效果如下。