开发者学堂课程【低代码开发师认证课程：项目点赞与分享功能的设置】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/1046/detail/15213
项目点赞与分享功能的设置
内容介绍
九、绑定数据源控制点赞数据
十、实操演练
十一、课程总结
九、绑定数据源控制点赞数据
通过文本绑定变量数据源。控制点赞数据的实现步骤是在画布当中选择文本组件，将文本组件的默认值绑定变量。变量里面用 item 来取循环值，最终判断他是否有值并展示相关的数据。如果有值展示它的值，如果没有展示括号零。进行实操演练。
十、实操演练
实践学习一下分享的功能，想要实现点击分享时弹出分享链接并且可以进行复制
1、分享功能
首先要在组件库当中拖动一个对话框组件，这个对话框组件用来放置链接地址。将输入Dialog 标题更改为链接地址,将对话框的标题更改为分享链接。定义完成后，将对话框的确认按钮更改成复制，这样复制更清晰明了
然后来进行绑定动作设置，去书写复制代码。在对话框组件的下方动作设置当中绑定 onOK，复制过来，并更改里面组建的唯一标识为链接地址的唯一标识，这里的唯一标识直接在高级当中获取的。这样就书写完成了
接下来要再点击分享时显示出这个对话框，所以先复制对话框的唯一标识然后隐藏。选择分享的容器，给容器绑定点击动作在这里面要使用的是 API 的方法。通过this.$("dialog_kymoz54q")（对话框的唯一标识）.show() 的方式去显示对话框
弹窗之后，想要将自定页面的访问链接拼接上项目名称放置在链接地址输入框，所以，需要在弹窗后的回调函数当中去书写相关的逻辑，在这里定义一个 name。然后使用 this.item.fromData 这里获取到的组建的唯一标识是项目表单当中项目名称的组件标识，这边已经提前绑定好了，也可以直接复制过来，粘贴。这样就获取到了循环里面的项目名称
接下来拼接在一起，并用 API 的 setvalue 的方式复制给链接地址这个输入框，所以先写入链接地址的唯一标识点 setvalue。这里面的拼接用加号去进行拼接，拼接的是 name。回到项目评选应用当中找到访问的链接复制过来。将后面的 copeID 去掉更改成 name 等于。通过这种方式去进行拼接，设置完成后保存，预览查看一下效果，点击分享，点击复制，复制完成，新开一个页面，粘贴过来，现在链接已经拼接上了刚才复制的项目名称。
回到设置页面要实现就是点击这个链接之后展示相关的这一条数据而不是展示所有的数据。
所以在这里面来配置初始化的筛选功能
首先打开数据源这里是自动加载的数据，里面有用到的接口是根据条件搜索表单实例详情的接口，所以打开使用手册找到3.6可以看到这里面可以传递一个参数是根据表单内组件之查询，可以根据这个参数来实现自动加载时展现这样一条数据。返回到数据源当中在这里之前是携带的固定的参数，现在想要更改成变量参数，在变量参数内可以进行判断，所以选择绑定使用变量
首先是 formUuid 必填的参数,值复制过来。接下来是 searchFieldJson。通过this.state.urlParams.name 的方式来获取携带的 name 参数。如果有的话转换成 json 的格式去查找这个数据，返回到向表单页面当中，找到项目名称的唯一标识复制过来。然后将携带的项目名称粘贴过去，最后配置如果没有项目名称的话传递为空，点击确定，保存，预览来看一下效果，点击分享复制。新开一个页面，在新开的页面当中展示了当前儿童快乐家园的这个项目名称的数据。这就是分享功能。 2、查询功能
返回到自定义设置页面。接下来配置查询的功能。查询组件也是同样的配置，首先给查询的组件绑定动作在属性高级当中新建提交时触发的动作。这里使用到的是动作面板当中用远程数据源的方法，所以参考 API 文档
打开 API 参考文档复制下面的加载远程数据源的方法，粘贴过来，需要更改的是携带的参数也就是定义的 paragraph。可以直接将远程数据源当中绑定的变量复制过来，粘贴，然后去更改里面的 searchFieldJson，因为调用的是同一个表单 ID 所以不需要去进行更改。删除完成之后，将查询组件的项目名称获取到，通过this.$("dialog_kymoz54q")（对话框的唯一标识）.getvalue() 的方式获取到分类的唯一标识
需要打开项目表单的表单设计界面，找到分类的唯一标识复制。然后同样的通过getvalue 的方式。获取到查询组件分类里面的值。这样携带参数就已经配置完成了 接下来配置远程数据源，需要更改的是远程数学名称更改成配置的远程数据名称，复制过来，请求成功之后会有一个弹窗提醒请求成功，保存，预览。新窗口打开查看一下。
搜索一个项目名称，点击搜索。这里告知已经请求成功，查询组件就已经配置完成了。
3、点赞功能
实现点赞的功能，首先回到项目评选应用，这里已经提前创建好了一个投票中间表里面包含成员，成员组建，投票项目，大红门组建，这是为后续投票只能每人投一票的功能做准备，再次回到这个页面当中。绑定点赞容器的点赞动作
现在来实现点赞的功能，这里要实现的是点击点赞时查询当前等人是否已投票。所以要定一个查询的远程数据源。如果当前的人没有投票并且想要为项目进行投票，那么就需要新增一条数据到投票中间表当中，并且，同时要更新表单当中的点赞数据。所以需要定义三个远程数据源，分别为查询的远程数据源、新增表单实例的远程数据源和更新表单中指定组件值的远程数据源来自定义一下。
首先是查询的远程数据。这里起名为 getData2。然后去设置请求地址，这里的请求地址可以先点击保存。将上方的复制过来。关闭掉自动加载,就配置完成了查询的 接下来配置新增的。这里起名为 saveDate。同样的关闭自动加载，点击保存，复制上方的请求地址去更改里面的请求地址。后面拼接的请求接口可以在文档当中去找到新增表单实例的接口。复制过来，并且去更新请求类型为 post 类型。
配置完成之后来配置更新的远程数据源。同样的关闭自动下载。请求地址同样的保存复制上方的地址。将接口从文档当中获取到。这里使用到的更新组件值使用到的3.2。请求类型也是 post 类型更改为 POST。全部都配置完成之后，回到动作面板当中去书写业务逻辑。
首先要调用接口去进行查询，所以来到宜搭开发中心当中复制加载远程数据源的方法。粘贴在这里，然后去更改里面的携带参数，必填参数有，formUuid,formUuid可以在应用当中找到部署运维。需要去查询的是投票中间表，所以获取到投票中间表的 formUuid 粘贴过来。 接下来配置查询的参数,复制过来。查询同样的转换成json 的格式。然后去找到查询的这个成员。所以找到投票中间表在里面获取成员的唯一标识,复制过来。这里面的查询传递的参数是一个数组的格式,并且是 userid的，所以在这里使用到的是 API 方法获取当前登录人的 userid 找到获取登录用户 ID 的方法将它复制过来。由于传递的是数组的格式，所以在外面包了一个中括号。
请求参数配置完成之后，来更改请求的远程数据源的名称将它复制过来。为了查看是否请求成功是默认自带了一个 dialog，也就是弹出的一个对话框来查看数据是否请求成功。先来保存预览，看一下实现效果。点击点赞。已经请求成功了，说明配置的是正确的
继续来书写里面的业务逻辑同时将对话框去掉或者注释掉。请求成功之后要对这个返回的数据进行判断。使用 if 进行判断,判断的是 response。里面的 date 第零项是否有数据,因为 response 返回的数据，存储的表单数据在 data 当中，只要看第零项是否有数据就可以知道当前登录人是否有投票。所以在有数据的情况下，来进行弹窗提醒，这里的弹窗可以直接复制上方的弹窗，也可以在 API 参考当中找到的dialog 复制过来。来更改里面的提示内容，更改为您已投出一票。配置完成之后，同样的复用在下方。更改的内容为您仅有一票。是否为当前项目进行投票？这样弹窗就配置完成了
接下来要配置的是如果用户点击确定，就需要去新增一个表单实例去记录当前的投票人员投票的项目同时调用接口去更新向表单当中点赞数，确定事件在 onOK 的回调里面去进行配置。
同样的先来定义一个 parrot。首先来新增表单实例，所以来看新增表单实例里面需要传递哪些参数。首先是 formUuid。这里的 formUuid 可以直接在上方。查询的时候就是查询的中间表的 ormUuid 所以可以直接拿下来
接下来是 appType。可以直接在浏览器的上方复制过来。还有表单数据,同样的转换成 json 的格式。表单数据内需要去新增的表单数据是里面的成员，复制过来。这里成员里面同样的是通过 API 方法获取到 userid 将上方的复制过来。
然后是项目名称。先复制中间表当中的投票项目来接收项目名称。通过this.item.formData. 项目名称的唯一标识需要去图片文本里获取到。当然，在项目表单的页面当中也可以获取到里面的项名称的唯一标识。
配置完成之后，调用。可以通过 this.dataSourcMap 直接复制过来进行调用,去更改里面的远程数据源的名称。因为在这里新增完表单实例后，不需要再做任何的操作，所以去除了回调函数。
接下来定义更新表单的携带参数,同样的来到文档当中。这里需要获取的 formInstId,通过 this.item.formInstId 的方式获取的。
接下来需要去设置 updatefromdatejson。同样的使用到 Json.string.fy 转换一下格式,更新的数据是项目表单当中的点赞数，所以找到项目表单。在这里面去获取点赞数的唯一标识。粘贴。然后通过 this.item 的方式来获取到当前这条数据的点赞数，然后将转换成数值的格式进行加一的操作。这里面使用到的 passage,然后加一。这样更新的携带参数就已经配置完成了
调用一下更新的远程数据源。找到更新远程数据源，将名称复制过来,复制完成之后，更改 palace 改成刚才定义好的，全部都配置完成之后，想要在页面不刷新的情况下，在当前页面当中就展示已经加一的点赞数，所以通过简单的方式去配置回调。
可以直接选择将上方的。复制过来，然后加上两个括号，也可以选择自行去配置。在这里面，再次去调用一次 get this，这里面不需要传任何参数，直接再次调用一次就可以了。
配置完成之后来绑定点赞的数量，想要去进行判断如果当前有点赞的数量的话，显示当前返回的点赞数量，如果没有的话，就显示为零，同样的通过item.fromdate。复制过来进行判断，用拼接的方式将括号拼接过来，复制。如果没有的话，去配置为零。最终点击确定保存。 预览来看一下效果。这里面为儿童快乐家园进行投票，点击确定。刚才是215个赞，现在已经是216个赞，说明调用已经成功了，再次点击。现在提示，我已投出一票，不可以再次进行投票。这样就实现了点赞的功能。
十一、课程总结
通过对项目评选系统背景了解和需求去分析确定应用所需要的功能，并掌握了自定义页面的创建与配置。那项目评选系统实践整体流程回顾如下，首先创建了一个项目录入的表单页面，然后创建了一个自定义页面，布局了这个页面并且配置展示样式。然后在页面当中获取了项目数据，并进行展示和搜索的功能配置。配置完成之后，来配置分享访问和点赞自动更新功能。
下面来看一下当中所需要用到哪些组件，后续的应用场景有哪些。在自定义页面当中，用到了 HTML、JSX、查询组件、容器组件、图标组件、文本组件，还有对话框组件，这些组件都在的实践当中去进行使用。
本章学习的一些功能，比如说 HTML 组件结合 JS 的一个使用，远程数据源的使用，远程数据源和JS面板结合的使用，页面布局的样式设计，这就是本章设计的功能点。
那更多场景，比如说菜单展示页面、应用首页面都可以使用到页面去进行搭建，然后里面如果有一些复杂的业务逻辑，还可以通过远程数据源和JS面板结合进行配置。
课后的单选题，以下哪个接口能根据条件获取流程的实例详情。
这道题的答案是D。
