开发者学堂课程【低代码开发师认证课程：项目点赞与分享功能的设置】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/1046/detail/15213
项目点赞与分享功能的设置
内容介绍
一、页面之间的数据联通
二、相关的接口功能介绍
三、容器实现循环渲染分析
四、实操演练
五、页面相关功能按钮介绍
六、相关的接口功能介绍
七、点击分享按钮实现分享数据
八、点赞功能配置流程
续学习项目评选系统实践第五节项目评选实践的数据陈列展示，首先来了解一下页面之间的数据联通。
一、页面之间的数据联通
本案例涉及宜搭表单页面、自定义页面，其中表单页面用来收集数据的页面，自定义负责将表单页面收集到的数据进行处理和展示。使用到的是远程数据源获取数据，并通过远程视频更新数据。
二、相关的接口功能介绍
首先看一下获取数据的相关接口。获取的表单数据，所以使用的接口是根据条件搜索表单的实例详情去搜索表单的数据。
用法是 get 的请求类型，自动加载选择开启，因为想要在一开始页面加载时就可以获取到数据，所以自动加载开启。
请求的地址是 /dingtalk/web/ 应用，后面是应用的应用编码后面拼接的就是现在的这个接口的，请求参数，必填的参数有 formUuid 表单 ID，如果想要搜索条件的话，可以传 searchFeildJson 去进行搜索，通过这个接口获取的数据想要实现循环渲染，那么对容器实现循环渲染来进行分析。
三、容器实现循环渲染分析
循环渲染是能够自动的对表单中多条数据按照相同的布局和结构进行展示，无需重复设计步骤，提高了设计效率。
循环数据，循环数据要求数组的结构，字符串数组，数字数组或者对象数组都可以，也可以使用动态绑定远程数据源接口返回的循环变量，这样来进行循环数据的绑定
迭代变量名，默认可以通过this.item来获取循环里面的值
索引变量名，默认可以通过this.index获取循环下标。
四、实操演练
已经提前创建好了一个表单页面名称叫项目表单，并且已经录了四条数据。接下来要在自定义页面，也就是项目展示这个页面去获取表单的数据并处理绑定在页面当中去进行循环的展示。点击编辑，进入到自定义页面的设计器当中。
1、添加一个远程数据源
在远程数据源这里点击添加去新建一个远程数据源，可以去配置名称，描述，自动加载，加载方式请求地址，请求方法，请求参数还有数据处理等，先给数据源去起一个名称，起名为getdates。然后去更改请求地址，请求地址要去宜搭平台接口文档当中去进行获取。
打开宜搭平台接口文档。
可以看到调用说明，还有示例代码。需要将实例代码复制过来，需要去更改的是应用编码，还有接口路径。将代码先复制到页面当中,复制到请求地址这里,然后去更改应用编码，应用编码使用的是浏览器可以在上方直接复制、粘贴。
如果使用的不是浏览器的话，可以返回到应用管理后台页面当中找到应用设置。在这里找到部署运维。可以看到，应用编码在这里也可以去进行获取。完成之后，去更改接口路径。这里的接口路径，同样的要去宜搭平台接口文档当中去进行获取。 需要去获取的数据是表单数据，所以找到3.6根据条件搜索表单实例详情列表,将接口复制过来。可以看到这里是有请求类型是get并且是受权限控制的，并且这里是有一个必填的参数，是formUuid，先将接口复制过来。然后请求方法get不需要去进行更改。
接下来去添加请求参数。formUuid可以通过两种方式进行添加一种是可以使用变量进行绑定formUuid，另一种方式是去点击添加一下，然后去书写formUuid，复制过来。这里formUuid的参数值同样的可以在应用设置当中部署运维当中找到页面编码，找到对应的一个页面编码复制过来，粘贴在参数值里面。配置完成了
2，数据处理
如果想要去看一下当前的这个远程数据源，返回的这个数据可以通过这个控制台的network去进行查询，还可以通过数据处理去，在控制台当中看到这个数据，点击添加，然后添加一个请求完成的回调函数。在这里面，可以去书写断点。以断点的方式去查看返回的数据，保存。预览 右键点击检查。
然后去刷新一下。因为数据源是自动加载就可以出发的，所以再次刷新的时候就会触发这个数据源里面书写的这个请求回调的函数 将鼠标移动到 content 当中这里有data,data 里面有四条数据，复制、打印可以看到是一个数组包对象的格式，这是容器去进行循环所需要的数据格式，所以现在要去绑定容器把数据绑定上去
返回页面当中找到外层循环，在这里可以通过容器的高级去绑定上循环数据。绑定的循环数据可以直接去变量绑定上数据源，数据源里面的 data 才是所需要的一个数据的一个格式，需要去绑定的时候，然后去通过 space .getDatas,date 的方式去获取到循环数据格式，除了这种方式还可以通过我们在这个数据源当中，在这里的return 当中不 return 一个 content。return 一个 content.date。循环数据当中就可以直接去绑定 space .getDatas
先将数据源当中 deougger 去掉。接下来依次将图片、文本去绑定上循环数据里面具体的值
首先是图片。在图片这里可以看到，是有图片地址。这里图片地址的变量绑定是一个地址的一个格式，所以来看一下页面当中，返回的数据格式。图片是在fromdate里面，并且一个数据格式，拿出来是一个字符串的一个格式,将字符串去掉，然后就可以看到是一个数组包对象的一个格式，这样就可以拿到里面具体的这个图片地址所需要的地址。
所以需要在变量绑定这里去进行一个处理，这里通过 JSON.parse 将转换成 JSON的格式。那在容器里面的图片是通过 item.formDate. 图片的唯一标识，直接将右键去复制路径也是可以的。来进行一个获取 现在通过 JSON.parse，已经将获取的这个复杂的字符串转换成了一个 JSON 的一个数组的格式，那现在通过下标零，然后preview url 的方式，也同样地复制过来。通过这种方式去获取到里面的图片地址。点击确定,保存,预览。可以看到数据已经循环成了四条数据就代表已经获取到容器里面的循环里面的图片并且展示在页面当中
为什么通过 item 的方式去获取到容器里面这些值呢？看一下外层的容器，这里面在高级当中，是有一个迭代变量名默认为 item 也就是说在容器里面的这些数据都可以通过 item. 的方式来获取到这里边的循环的数据，然后依次的去进行一个展示。
现在配置里面的文本。同样的是使用到变量绑定。然后通过 item. 的方式去获取到文本组件的唯一标识。formUuid 下面，去复制路径.这就是项目的名称。
现在来配置项目描述信息。同样的通过这种方式去进行复制。下面是 formInstId 可以进行展示也可以不去进行一个书写，在这里先来进行一个展示。这里的formInstId 是 formdate 是平级的，找到之后，将路径复制过来，点击确定，保存，预览看一下效果
现在图片、项目的名称、项目描述信息都已经展示在页面当中。现在来看一下的这个图片 接下来设置条件绑定，比如说绑定变量当中这里不仅可以去进行一个展示还可以去进行条件的判断。比如说来判断这个图片是否有这个图片，如果有的话，展示这个图片，如果没有的话，展示一个为空。就可以通过 sum 运算符的方式进行判断，首先来看一下当前是否有图片。如果有的话去展示，没有的话展示一个为空。点击确定。这就是条件展示，可以在变量绑定当中去进行一个条件的判断。
接下来事件绑定。点击访问，找到外层的容器在这里面去新建一个动作。
可以去设置一个触发的条件，这里面可以去设置当点击时去进行触发。在右侧弹出的动作面板当中可以去书写逻辑，点击访问时可以跳转到项目详情页面，那就可以通过动作面板的配置去完成，可以去找到的宜搭开发中心这里还有一些API参考可以去进行使用
去进行一个页面的跳转，就可以在右侧找到这个路由。复制过来。这里面包括跳转的地址，携带的参数是否打开，新的页面是否为 url，还有一个跳转方式。 先来看一下链接地址。这里的链接地址回到页面当中。找到项目表达详情数据，随意打开一个这里可以看到一个详情信息的地址，那除了后面的 formInstId 是唯一的以外，前面的都是同样的，所以将前面的这个路径复制过来去配置携带参数，刚才在项目详情中可以了解到表单想起的url地址当中唯一不同的是 formInstId。所以可以复制过来。
这里面它的 formInstId，可以在上方去进行一个定义。定一个同样的名称formInstId，然后通过 this.item.formInstId 这种方式去获取到这个容器里面也就是这个循环容器里面一个 formInstId。
可以确保当前点击的这个访问 formInstId 就是所需要的。
当配置完成之后是否新开页面和是否为url都选择ture.打开了一个类型先去掉、保存、预览。新开一个页面。点击访问。刚才访问的是儿童快乐家园，现在就可以看到项目名称就是儿童快乐家园
主要的一个知识点就是刚才书写的 this.item.formInstId。这里面的 item 也就是刚才所说的容器迭代变量名，在里面去绑定变量可以通过 item. 的方式在动作面板当中可以通过 item. 的方式去进行获取这个循环里面当前点击的这个具体的值。 那本小节，讲解了项目详情数据的陈列展示 继续学习项目评选系统第六节项目点赞/分享功能动作设置
五、页面相关功能按钮介绍
首先对页面相关的功能按钮做介绍。本次页面当中涉及到分享、访问和点赞的功能。
分享功能，点击可以将喜欢的项目链接复制分享给其他人，他人可以点击链接查看相关的数据。访问功能，点击进入到当前的项目详情页，查看更多的项目介绍。
点赞功能，点击为喜欢的项目投票，每人仅限一票，其中访问功能已经讲解完成了。那么，分享和点赞功能都用到哪些接口呢？一起来看一下相关接口的功能。
六、相关的接口功能介绍
用到了两个接口，分别为更新表单中指定组件支持的接口和新增表单实例的接口，两个接口的请求类型多为 POST 的请求类型，自动加载都为关闭，请求地址都为 /dingtalk/web/ 应用后面拼接接口地址。其中更新表单中指定组件指的必填参数有forminstid 填的是要更新的表单数据 ID updateFromDataJson 填的是要更新的表单组件值。 新增表单实例接口，必填的参数有 formUuid 填写的是表单的ID,appType 填写的是应用编码也就是应用 ID，foreDataJson 写的是表单数据。接口功能介绍完，再来看一下分享的功能和步骤。
七、点击分享按钮实现分享数据
想要实现的是，点击分享时弹出需要分享的链接并且可以复制，点击这个分享的链接再次进入到页面当中，可以查看到相关的只有这一条的分享的数据。实践步骤就是在容器当中绑定点击动作，在动作面板当中去书写相关的逻辑。
这里面如右图所示，书写的是弹出一个弹框，后面定义了 name,name 里面就是获取到的循环数据里面的项目名称。获取完项目名称之后同样的通过 API 方法将链接拼接上项目名称，复制给对话框内的输入框组件。
然后再去配置 onOK 也就是对话框的确定时间。右图当中的 debugger 为断点，这里是用于查看当点击时是否触发了点击事件，在弹窗之后是否获取到了 name 也就是获取到了循环里面的项目名称。
八、点赞功能配置流程
学习完分享按钮的配置，再来看一下点赞功能配置的流程。首先要在向展示页面这个自定义面当中获取项目表单里面的项目数据也就是获取点赞的数据。获取完成后，文本就是点赞的文本绑定获取的点赞数据进行展示在给点赞容器绑定上动作，这里绑定的动作用于去查询当前登录人是否已投票，如果当前登录人已投票那么返回到项目展示页面当中进行弹窗提醒，如果没有在投票中间表当中记录投票的人员，并且更新项目点赞数更新到项目数据当中，流程图了解了看一下如何绑定数据源控制点赞数据。
