开发者学堂课程【低代码认证-第一章:项目评选系课程:1.5项目点赞与分享功能的设置】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/1007/detail/15057
1.5项目点赞与分享功能的设置
最后配置,如果没有这个项名称,传递为空,点击确定。保存。预览来看一下它的效果。点击分享,复制,新开一个页面。
在新开的页面当中,展示了当前儿童快乐家园的这个项目名称的数据这就是分享功能。
查询功能:
首先给查询功能绑定动作,提交时出发的动作。这里使用到的是动作面板当中调用远程数据源的方法,所以我们参考 API 文档。
打开 API 参考文档。
复制下面的加载远程数据源的方法。粘贴过来。这里面需要更改的是它携带的参数,也就是定义的 purpose。可以直接将远程数据源当中绑定的变量过来。
粘贴在这里面。然后去更改里面的 search Jason。因为调用的是同一个表单 ID,所以这边不需要去进行更改来将查询组建的项目名称获取到,通过 just 为标识。
第二,Get value 的方式来进行实现。获取到分类的唯一标识,这里需要打开向表单的表单设计界面。找到分类的唯一标识,复制。然后同样的通过 get value 的方式。获取到查询组件分类里面值,这样的携带参数就已经配置完成了。
第三,接下来来配置用远程数据源,这里面需要更改的是它的远程数据源名称,将它更改成我们配置的远程数据源名称复制过来。当请求成功之后,它会有一个弹窗提醒我们请求成功。那来保存预览新窗口,打开查看一下,来搜索一个项目名称,点击搜索,这里告知已经请求成功,
那的查询组件就已经配置完成了。
三、点赞功能
现在我们来实现点赞的功能,首先回到像评选应用,这里我已经提前创建好了一个投票中间表,里面包含成员成员,组建投票项目,然后组建,这是为后续投票只能每人投一票的功能做准备。
再次回到自定义页面当中。绑定点赞容器的点赞动作。现在来实现点赞的功能。
这里要实现的是点击,点赞时查询当前的人是否已投票,所以要定一个查询的原始数据员,如果当前的人没有投票,并且想要为项目进行投票,那么就需要新增一条数据到投票中列表当中。并且,同时要更新项目表单当中的点赞数据,所以我们需要定义三个月投资元,分别为查询远程数据源、新增表单实例的远程春娟和更新表单中指定兼职的远程数据源来自定义一下。
首先是查询的远程主角,这里起名为二,然后去设置它的枕头地址。这里的请求地址可以先点击保存。将上方的复制过来。关闭掉他的自动加载。
这样就配置完成查询的接下来配置新增的,起名为 savedate 。This 同样的,关闭自动加载,点击保存复制上方的请求地址去更改里面的请求地址。这里面后面拼接的请求接口,可以在文档当中去找到新增表单实例的接口,将它复制过来,并且去更新它的请求类型为 post 类型。配置完成之后,来配置更新的远程数据源,同样的,关闭自动加载请求地址,同样的保存复制上方的地址将接口。将接口从文档当中获取到。
这里使用到的更新组件直视使用到的3.2。他的请求类型也是 post 类型。将它更改为。全部都配置完成之后,回到动作面板当中去书写他的业务逻辑。
首先我们要调用接口去进行查询,所以来到一大开发中心当中复制加载远程数据源的方法。粘贴在这里。然后去更改里面的携带参数。这里面它的必填参数有报名ID。
报名 ID 可以在应用当中找到需要去查询的是投票中间表,所以获取到投票中间表的报名 ID。
粘贴过来。接下来配置查询的参数。将它复制过来。查询同样的通过 json 的方式。去将它转换成 json 的格式。然后去找到查询的这个成员。
所以找到投票中间表。在里面获取成员的唯一标识。将它复制过来。传递的参数是一个数组的格式,并且是悠的,所以在这里使用到的是 API 方法获取当前登录的ID。
找到获取登录用户 ID 的方法。将它复制过来。由于我们传递的是数组的格式,所以在外面包了一个公众号。请求参数配置完成之后,来更改请求的远程数据源的名称。
将它复制过来。为了查看是否请求成功,在这边是默认自带了一个 dialog,也就是弹出的一个对话框来查看数据是否请求成功,先来保存预览,看一下它的实现效果。
在这里面点击点赞。他已经请求成功了,说明配置的正确,继续来书写里面的业务逻辑。同时将对话框去掉。或者注释掉。请求成功之后要对这个返回的数据进行判断。这里我们使用if进行判断。判断的是 response。里面的 data。第零项是否有数据。存储的表单数据在 data 当中,只要看他的形象是否有数据,就可以知道当前工人是否有投票。所以在有数据的情况下,来进行弹窗提醒。这里的弹窗,可以直接复制上方的弹窗,可以在 API 参考当中找到的 love。将它复制过来。来更改里面的提示内容,这里更改为:您已投出一票。配置完成之后,同样的作用在下方。
现在实现点赞的功能,首先您仅有一票。是否为当前项目进行投票?这样弹窗就配置完成了,接下来要配置的是如果用户点击确定,我们就需要去新增一个表单实例去记录当前的投票人员投票的项目,同时调用接口去更新项目表单当中点赞数,确定事件,在 onOK 的回调里面去进行配置。实例,所以来看新增表单实例里面需要传递哪些参数。首先是报名 ID。
这里的报名 ID 可以直接在上方。查询的时候就是查询的中间表的报名 ID ,所以可以直接将它拿下来。接下来是 APP 。
可以直接在浏览器的上方将它复制过来。还有表单数据。这个表单数据同样的的方式转换成 json 的格式。表单数据内需要去新增的表单数据是。里面的成员,所以将它复制过来。这里成员里面同样的是通过 API 方法获取的 ID。
只要上方的复制过来。然后事项名称。我们先复制中间表当中的投票项目来接收我们的项目名称。通过 atom 点儿方队。将名称的唯一标识,需要去。在这里获取到项目名标识。配置完成之后,调用。通过点滴 stop map 直接将它复制过来进行调用。去更改里面的远程数据源的名称。因为在这里新增完表单实例后,不需要再做任何的操作,所以去除了点儿回调函数。接下来来定义。更新表单的携带参数。同样的来到文档当中。
通过绿色@第二方面的 ID 的方式。获取到。接下来需要去设置 update from Jason。同样的使用到 json。
转换一下它的格式。更新的数据是项目表单当中的点赞数,所以找到像表单。在这里面去获取点赞数的唯一标识,然后通过便捷的方式。来获取到当前这条数据的简单树,然后将它转换成数值的格式加一的操作。这里面使用到的 passage。然后加一。
这样更新的携带参数就已经配置完成了。我们来调用一下更新的元素,找到远程数据源,将他的名称复制过来。复制完成之后,更改他的 parents。更改成刚才定义好的。全部都配置完成之后想要在页面不刷新的情况下,在当前页面当中就展示已经加一的点赞数,所以在这里面通过点赞的方式去配置它的回调。可以直接选择将上方复制过来。然后加上两个括号,也可以选择自行去配置。
在这里面再次去调动一次 gatdats ,把任何的参数直接再次调用一次就可以。配置完成之后,绑定点赞的数量,这里面去进行判断,如果当前有点赞的数量,显示当前返回的点赞数量,没有显示为零,这边同样的我们通过 @.gad 。将它复制过来。进行判断,用拼接的方式将括号拼接过来,让他复制,如果没有,配置为零。
最终点击确定为0.预览来看一下效果。这里面为儿童快乐家园进行投票。点击确定。
刚才是215个赞,现在已经是216个赞,说明我们的调用成功,我们再次点击。
现在提示我,我已投出一票,不可以再次进行投票。这样就实现了点赞的功能。
四、课程总结
通过对项目评选系统背景了解和需求分析,确定应用所需要的功能,并掌握了自定义页面的创建与配置。
项目评选系统实践整体流程回顾:
创建项目录入表单页面
创建自定义页面,布局页面展示样式
自定义页面获取项目数据并进行展示和搜索
配置分享、访问和点赞自动更新功能
自定义页面组件: HTML、JSX、查询组件、容器、图标、文本、对话框
功能:
·HTML 结合 JSX 的使用
·远程数据源的使用
·远程数据源和 IS 面板的结合使用
·页面布局的样式设计
更多场景:菜单展示页面,应用首页面……