1.5项目点赞与分享功能的设置|学习笔记(一)

简介: 快速学习1.5项目点赞与分享功能的设置

开发者学堂课程【低代码认证-第一章:项目评选系课程1.5项目点赞与分享功能的设置】学习笔记,与课程紧密联系,让用户快速学习知识。  

课程地址:https://developer.aliyun.com/learning/course/1007/detail/15057


项目点赞与分享功能的设置


内容介绍

一、功能介绍

二、实操演练

三、点赞功能

四、课程总结


一、功能介绍

分享功能:点击可以将喜欢的项目链接复制,分享给其他人,他人可以点击链接查看相关的数据。

访问功能:点击进入到当前项目详情页,查看更多项目介绍。

点赞功能:点击为喜欢的项目投票,每人仅限一票。

图片1.png

相关接口功能介绍:

图片2.png

接口 :/v1/form/updateFormData.json 。

接口作用 :更新表单中指定组件值

用法:请求类型: POST 自动加载:关闭

请求地址: /dingtalk/web/ 应用

AppType/v1/form/updateFormData.ison 参数: forminstld 要更新的表单数据ID

updateFormDatalson 要更新的表单组件值

接口 : /v1/form/saveFormData.json 接口作用 :新增表单实例

用法:请求类型: POST 自动加载:关闭

请求地址: /dingtalk/web/ 应用

AppType/v1/form/saveFormData.ison 参数: formUuid 表单 ID

appType 应用 ID

formDatalson 表单数据

实现功能:

当点击分享时,弹出需要分享的链接并可以进行复制

实现步骤:

容器绑定点击动作>>在动作面板内书写相关逻辑

如右图所示:

图片3.png

弹出的是一个弹框,后面定义了 name ,里面就是获取到的循环数据里面的项目名称。获取项目名称之后,同样通过 API 方法将链接拼接上项目名称,赋值给对话框内的输入框组件。然后再去配置 nok ,也就是对话框的确定时间。

右图当中的 bug 为断点。这里是用于查看当点击时是否触发了点击事件。

在弹窗之后是否获取到内容,也就是获取循环里面的项目名称。

点赞功能配置流程:

图片4.png

在项目展示页面,这个自定义页面当中获取项目表达里面的项目数据,也就是获取点赞的数据,获取完成后,文本也是点赞的文本绑定获取的点赞数据进行展示。

再给点赞容器绑定上动作。这里绑定的动作用于去查询当前登录人是否已投票,如果当前登录人已投票,那么返回到项目展示页面当中进行弹窗提醒,如果没有在投票中间表当中记录投票的人员,并且更新项目点赞数,更新到项目数据当中。

通过给文本绑定变量数据源,控制点赞数据。

步骤:选择文本组件>>默认值绑定变量>>循环内数据默认用 item 取循环值>>判断是否有值并展示相关数据,有值展示值,没有展示0。

图片5.png

 

二、实操演练

实现点击分享时弹出分享链接,并且可以进行复制,所以首先要在节目当中选中一个对话框组件。这个对话框组件用来放置链接地址。

图片6.png

将输入框的标题更改为链接地址。将对话框的标题更改为分享链接。完成后,将对话框的确认按钮更改成复制。这样复制就更清晰明了。然后来进行绑定动作,设置去书写代码。

图片7.png

在对话框组件的下方动作设置当中绑定 onOK 。

这里已经提前收集好了,将它复制过来,并更改里面的唯一标识为链接地址的唯一标识,直接在高级当中获取的。

这样就书写完成了,接下来要再点击分享时显示出这个对话框,所以先复制对话框的唯一标识。然后将它隐藏。选择分享的容器,给容器绑定点击动作。

在这里面要使用的是 API 的方法。通过this.对话框的唯一标识. show 的方式去获取对话框,弹窗之后,想要将自定义页面的访问链接拼接上相,名称放置在链接地址输入框内,所以需要在弹窗后的回调函数当中去输写相关的业务逻辑,在这里定义一个内容。

图片8.png

然后使用 this.item.formsts. 这里获取到的组建的唯一标识是向表单当中巷名称的组件标识,也可以直接在这边已经提前绑定好了,就可以直接复制,粘贴,

图片9.png 

接下来要将它拼接在一起,并用 API 的 set value 的方式赋值给链接地址,这个输入框,所以先写入链接地址的唯一标识. set value,这里面的拼接用加号去进行拼接,拼接的是内部。

回到项目评选应用当中,找到访问的链接,将它复制过来,

图片10.png

将后面的 copy ID 去掉 hope,更改成 name,等于通过这种方式去进行拼。

完成后保存,预览查看一下它的效果,点击分享。点击复制,复制完成,新开一个页面,粘贴过来。

图片11.png

现在我们的链接已经拼接上了。刚才布置的项目名称回到设置页面。下面我们要实现的,就是当点击这个链接之后,展示相关的这一条数据,而不是展示所有的数据。

配置初始化的筛选功能,首先打开数据源

这里是自动加载的数据,这里面有用到的接口,是根据条件搜索表单实例详情的接口,所以打开使用手册。找到3.6。

图片12.png

可以看到,这里面可以传递一个参数,是根据表单内组件值查询。可以根据这个参数来实现自动加载时只展示这样一条数据。返回到的数据当中。在这里之前是携带的固定的参数,现在想要将它更改成变量参数,在变量参数内可以进行判断。所以选择绑定使用变量。

首先是 formuid 设置参数,获取它的值,复制,接下来是 search field Jason,这里通过. url camera,点的方式,来获取携带的 name 参数,如果有的话,将它转换成 json 的格式去查找数据,返回到向表单页面当中找到巷名称的唯一标识,复制过来,然后将携带的项名称粘贴过去。

图片13.png


 

相关文章
|
运维 网络协议 网络架构
网络技术基础(6)——IP路由基础
【2月更文挑战第10天】网络基础笔记(加班了几天,中途耽搁了,预计推迟6天)
|
存储 关系型数据库 MySQL
使用 MHA 和 HAProxy 部署高可用 MySQL
使用 MHA 和 HAProxy 部署高可用 MySQL
|
10月前
|
人工智能 达摩院 搜索推荐
通义大模型:解码中国AI的"通"与"义"
“通义”取自中国传统文化中“通晓大义”,寓意技术与人文的结合。作为阿里巴巴旗下的超大规模语言模型,通义在知识蒸馏、动态稀疏激活和文化感知模块上实现三大突破,大幅提升效率与适切性。其已在医疗、司法、文化传播等领域落地,如辅助病历处理、法律文书生成及文物解说等。测试显示,通义在中文诗歌创作、商业报告生成等方面表现优异。同时,开放的开发者生态已吸引5万+创新者。未来,通义将探索长期记忆、自我反思及多智能体协作,向AGI迈进,成为智能本质的载体。其对中文语境情感的精准把握,更是中国AI“通情达义”的典范。
2711 22
|
SQL NoSQL 关系型数据库
超强数据库管理软件推荐-没有之一-还在用Navicat管理本地数据库的吗?还在为Navicat寻求绿色版或者购买正版的费用望而却步吗?DBeaver让你解决所有数据库本地编写问题-优雅草央千澈-DBeaver下载和安装
超强数据库管理软件推荐-没有之一-还在用Navicat管理本地数据库的吗?还在为Navicat寻求绿色版或者购买正版的费用望而却步吗?DBeaver让你解决所有数据库本地编写问题-优雅草央千澈-DBeaver下载和安装
1035 18
超强数据库管理软件推荐-没有之一-还在用Navicat管理本地数据库的吗?还在为Navicat寻求绿色版或者购买正版的费用望而却步吗?DBeaver让你解决所有数据库本地编写问题-优雅草央千澈-DBeaver下载和安装
|
JSON Rust 安全
【一起学Rust | 框架篇 | Viz框架】轻量级 Web 框架——Viz
【一起学Rust | 框架篇 | Viz框架】轻量级 Web 框架——Viz
629 0
|
Ubuntu 网络协议 Android开发
使用ruri快速构建跨架构chroot容器
【7月更文挑战第10天】使用ruri快速构建跨架构chroot容器:先确认binfmt_misc支持;安装qemu-user-static;用rootfstool脚本获取rootfs;下载最新ruri二进制;解压rootfs并启动容器;配置DNS。完成这些步骤后,可在x86_64上运行arm64的Ubuntu容器。注意,ruri处于实验阶段,使用前需评估风险,并根据需求调整与优化。此流程提供基础参考,具体操作可能需微调。
457 6
|
存储 监控 Linux
在Linux中,列出几种常用的Linux备份工具并说明各自的适用场景。
在Linux中,列出几种常用的Linux备份工具并说明各自的适用场景。
|
消息中间件 负载均衡 监控
基于kafka项目之Keepalived高可用详细介绍
基于kafka项目之Keepalived高可用详细介绍
|
SQL Java Apache
超详细步骤!整合Apache Hudi + Flink + CDH
超详细步骤!整合Apache Hudi + Flink + CDH
908 0