TaskBuilder数据修改页面前后端交互原理解析

在TaskBuilder内打开学员管理项目前端文件里的update.tfp页面，下面以这个文件为例介绍一下数据修改页面如何实现前后端的数据交互。
4.6.3.1表单数据查询设置
要在输入项中显示数据，需要将输入项放在表单组件里，并设置好表单组件的 数据查询设置，以学员管理项目的update.tfp页面为例，在页面中选中表单组件form1，然后点击属性中的 数据查询设置，可以打开如下图所示的界面：

在该对话框中，需要先选择好数据模型，然后选择要查询的字段。
点击 请求参数 选项卡，可以在此设置需要客户端发送给后台服务的请求参数，对于修改页面来说，需要在此设置从列表页面通过URL传过来的id参数，设置界面如下：

在上图的界面中，参数名 表示要传给后台服务的参数名称，参数类型 这里设置为 URL参数，表示要从当前页面的URL路径里获取该参数的值，参数值 表示这个参数在URL里的名称，如果与要传给后台的参数名一致，则可以不用设置。大家可以回顾一下前面介绍数据列表页面的实现原理时，就讲解了如何在数据列表里打开修改页面，并通过URL路径给修改页面传递当前行数据的id值，正是因为列表页传了这个id参数，修改页才能通过该id值查询对应的学员信息，并在执行数据修改操作时，也才能知道具体要修改哪个学员的信息。
点击 查询条件 选项卡，可以查看和设置查询表单数据的SQL语句的查询条件，这个示例里设置的条件为：
id={req.id}
上述查询条件表示在学员信息表中查询id字段的值等于前端传递给后台的id参数的值，设置界面如下图所示：

保存上述设置后，再保存页面，就会自动创建该数据查询设置对应的后台服务文件，学员管理示例项目的update.tfp页面生成的数据查询的后台服务名为update_form1_query.tbs，在学员管理项目的后台服务里点击该文件，即可在后台服务设计器中打开，界面如下图所示：

从上图可知，在该后台服务中，最外层是一个数据查询语句，在查询完毕后，会将查询结果（一条数据记录）保存到服务响应对象res中，然后终止服务，并将res的内容返回给前端。
点击数据查询语句里的设置按钮，可以打开数据查询设置对话框对查询操作进行详细设置，设置内容和前面介绍数据列表页面的查询设置时的内容基本一致，区别主要是查询条件不一样，修改页面的查询，没有动态查询条件，只需要设置固定查询条件，就是根据列表页面传递的id值只查该id对应的学员信息，设置界面如下图所示：

4.6.3.2设置输入项数据绑定格式
设置好表单组件的数据查询参数后，接下来就需要设置每个输入项的 数据绑定格式，否则各个输入项并不知道要显示查询结果里的哪个字段的数据，设置方法如下：
在update.tfp页面中，选中某个输入项，例如编号为pxnf（培训年份）的单行文本输入框，然后在其属性设置里，将 数据绑定格式 设置为：{pxnf} ，表示在绑定表单查询到的数据时，要将查询结果里的 pxnf 这个字段的值绑定到这个输入项上，输入项的编号和字段名不一定要一样，只不过通过向导生成的页面里，输入项编号和要绑定到字段的名是一样的，实际上在 数据绑定格式 内，可以设置多个字段，并能跟静态内容拼接，例如：{pxnf}年第{qs}，如果查询结果里pxnf字段值为：2024，qs字段的值为：2期，则这个输入项的值为：2024年第2期。
4.6.3.3请求后台服务查询并显示数据
在页面运行时，等页面加载完所有静态内容并解析渲染完毕后，表单组件会自动请求后台服务进行数据查询，并将查询结果绑定到各个输入项中。
4.6.3.4设置表单的数据提交参数
修改页面里表单组件的数据提交设置、确定按钮设置、提交后的事件设置与添加页面里的设置基本一致，区别是在修改页面里的表单组件在设置数据提交参数时，还需要设置请求参数和修改条件，具体设置方法如下：
在表单组件的数据提交设置对话框中，点击 请求参数 选项卡，可以看到如下界面：

可以在此设置需要客户端发送给后台服务的请求参数，对于数据修改操作来说，需要在此设置从列表页面通过URL传过来的id参数。
然后点击 修改条件 选项卡，可以看到如下界面：

在此可以设置修改数据的条件，这里设置成了：id={req.id}，表示只修改id字段的值等于前端传过来的id参数值的学员信息。