签到功能完成03《ivx低代码签到系统制作》

制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/

一、签到页制作

上一节完成了签到内容的发布,那我们接下来如何制作一个签到页面并且签到呢?

此时我们先创建一个页面叫做签到二维码页面:
在这里插入图片描述
随后直接预览这个页面,将会看到页面上会有一个pid,这个pid就是ivx 中这个页面的 id 值:
在这里插入图片描述

咱们直接复制这一串值到上一节中对应的发布签到后生成的链接处:
在这里插入图片描述
接着到这个页面中制作页面内容,页面如下:
在这里插入图片描述

这个页面十分简单,类似的顶部内容,然后下面就是一个二维码,此时咱们该部分就不再赘述。

此时当前页面需要接收传入过来的参数,那么此时在当前页面的显示事件中添加参数获取,获取参数使用应用系统即可获取:
在这里插入图片描述

这个id在上一节中我们已经得知,是表示哪一个签到的ID,那么此时得到了这个id那必然是需要得到当前这个ID的签到内容,那么此时需要创建一个服务用语获取这一个ID对应的数据,创建一个服务名叫搜索签到信息:
在这里插入图片描述
接着编写当前服务,接收一个参数为签到ID,随后通过这个ID值在数据库查找对应的签到:
在这里插入图片描述

由于此时是通过id查找值,那么必然该值是一条数据,不可能是多条数据,因为ID值是唯一的,所以在这里我是返回了输出结果的某一行内容,这一行是0,0表示第一行内容因为索引从0开始:
在这里插入图片描述
随后咱们返回到页面的显示事件中,在获取到id 参数后直接调用这个服务:
在这里插入图片描述
完成后直接使用一个对象变量进行赋值:
在这里插入图片描述
那么此时需要创建一个对象变量,这个对象变量需要与传输过来的数据一一对应,该对象变量的字段:
在这里插入图片描述
此时还要创建一个签到名字符串变量,当签到信息的值获取后,直接给与到签到名,并且这个签到名变量是与当前页的标题做绑定的:
在这里插入图片描述
接着咱们在下面创建一个动作给当前页面中的二维码进行赋值即可:
在这里插入图片描述

此时可以看到我再这里用到了一个时间变量:
在这里插入图片描述
这个时间变量需要创建,并且命名为当前时间:
在这里插入图片描述

二、变换的二维码

在第一点中所说的当前时间时为了使二维码发现变换,咱们需要时签到的二维码的时间戳参数为2秒之内,那么每隔2秒就给与这个二维码新的url值即可,但是我个人并不喜欢这个操作,在此我会演示如何使二维码变换,但是我是不会使用这个值进行签到的录入,我将直接使用跳转页面后的时间戳。

此时我们创建一个定时器——触发器:
在这里插入图片描述
此时我更改这个触发器为自动更改验证码,这个触发器是自动响应的:
在这里插入图片描述
每隔3秒进行触发,那触发什么内容呢?我们可以查看事件:
在这里插入图片描述
也就是通过时间变量对其进行赋值即可,因为时间变量获取当前值默认将是当前时间的内容,那么此时我们预览当前页面:
在这里插入图片描述
记住一定要带id,否则将会提示没有当前签到内容,此时我们发现当前二维码每隔3秒进行切换。

三、完成签到功能

需要完成签到功能还需要创建一个页面,用这个页面座位签到的响应:
在这里插入图片描述

这个签到页面分为两个功能,一个是成功提示,还有一个是失败提示:
在这里插入图片描述
在这里插入图片描述
此时保留登录功能,因为之前的文章都有做,在这里就当做一个提示即可。

此时预览这个页面的url,复制对应的uid 到二维码处,这样扫码就可以到这个页面了,接着咱们在这个页面的事件中编写参数获取的内容:
在这里插入图片描述

瘦现货区到结果后复制给签到ID当前签到的id值,随后去搜索当前id的内容,为什么要搜索呢?因为咱们需要从数据库中判断对应的开始喝结束时间,在这里一定要注意,在外部输入的数据“都是不安全的”,我们能用内部数据就用内部的。

接着在搜索完毕后,咱们创建对应的时间变量以及对象变量,并且将返回值给到这些变量之中:
在这里插入图片描述
接着我们直接判断当前时间的值是否在数据库时间戳之中的范围,因为是秒数,所以直接做判断就可以了:
在这里插入图片描述
判断成功后显示成功的块即可:
在这里插入图片描述
否则显示失败的块:
在这里插入图片描述
这两个块默认隐藏即可:
在这里插入图片描述

这样一个签到的核心功能就实现了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286059.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

System.CommandLine参数Argument

前两篇说到Command和Option,这篇说说Argument。Argument的用法和Option很像,只是他的构造和属性有些差别,再就是在运行输入时有区别,接下来看看实现。一个参数//创建根命令 var rootCommand new RootCommand("这是一个命令行…

Kotlin和Java混合开发总结(基于Kotlin1.3.0版本)

我本来是不想学习kotlin的,但是现在的形势,很多公司都在使用kotlin开发,可以说学会kotlin也是无奈之举,既然是潮流,谷歌也在大力推广,所以还是只能硬着头皮逼迫自己学一下,也能更快适应公司的需…

【MATLAB统计分析与应用100例】案例015:matlab读取Excel数据,进行值聚类分析

1. 聚类分析轮廓图 2. matlab完整代码 %*****计算例9.1的距离矩阵 x = [1, 2, 6, 8, 11];

01超精美渐变色动态背景完整示例【CSS动效实战(纯CSS与JS动效)】

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证。 本节案例如下(其他动效篇幅原因逐步讲解,欢迎三…

Liferay 用本地私服(nexus) 打包部署Portlet应用

当我们使用搭建一个nexus本地仓库,并且配置settings.xml来让应用启用这个仓库。我们使用Liferay 6.1.10的archetype来创建liferay portlet, 如下图: 当我们运行命令mvn package liferay:deploy时,会出现以下错误: [DEBUG] Using c…

【MATLAB统计分析与应用100例】案例016:matlab读取Excel数据,进行样品系统聚类分析

1. 聚类分析结果 2. matlab完整代码 (1)读取数据,并进行标准化 [X,textdata] = xlsread(examp09_02.xls); % 从Excel文件中读取数据 X = zscore(X

解决React Native报错:Error:Found unexpected optical bounds (red pixel)

问题背景 同样是在升级 gradle plugin V2.2.3 --> gradle plugin V3.0.1后,运行至打包APK期间报错: Error:found unexpected optical bounds (red pixel) on top border at x14.(错误:在X14的上边框上发现意外的光学边界&am…

webpack 入门

什么是WebPack,为什么要使用它? 为什要使用WebPack 现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法 模块化,让我…

使用vsftp虚拟用户实现安全访问控制

一、ftp连接方式 1、命令连接 ftp在与用户交互时,首先打开的是TCP的21号端口,建立命令连接,这个连接会始终存在,直到用户输入bye的那一刻,才断开命令连接。 2、数据连接 1)主动连接 主动连接是基于TCP21号端…

【前端就业课 第二阶段】CSS 零基础到实战(04)定位

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证。 一、定位 定位分为相对定位以及绝对定位。 相对定位可以理解为在 HTM…

Android TextView设置ClickableSpan 点击结尾空白位置也响应点击的问题

解决办法,在后边紧接着追加一个0宽度字符: builder.append("\u200b"); 相关知识: “\u200b” 为 Unicode Character ‘ZERO WIDTH SPACE’ (U200B),可用于内容标识,不占位数(宽度0&#xff0…

【MATLAB统计分析与应用100例】案例017:matlab读取Excel数据,进行变量系统聚类分析

1. 变量系统聚类分析结果 2. matlab完整代码 (1)读取数据,并转为距离向量 [X,textdata] = xlsread(examp09_03.xls); % 从Excel文件中读取数据 y = 1 -

Wordpress:将图片、post等的URL转换为相对路径

2019独角兽企业重金招聘Python工程师标准>>> 例如上传一张图片,其地址是可能 http://127.0.0.1/wp-content/uploads/2015/12/1_.png, 问题是如果我们通过其他的电脑通过wordpress主机的公网IP访问这张图片时会提示找不到。 最好的处理方法是不…

【MATLAB统计分析与应用100例】案例018:matlab读取Excel数据,进行K均值聚类分析

文章目录 1. K均值聚类分析结果2. matlab完整代码(1)读取数据,并进行标准化变换(2)选取初始凝聚点,进行聚类(3)绘制轮廓图1. K均值聚类分析结果 2. matlab完整代码 (1)读取数据,并进行标准化变换 [X, textdata] = xlsread(examp09_04.xls

CSS 零基础到实战(05)布局、盒子模型、弹性盒子【前端就业课 第二阶段】

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证。 一、流动布局 流动布局有3种布局模型,分别是流动布局&…

DVWA系列之24 high级别上传漏洞

最后再来分析high级别的代码:这里首先有一条语句需要理解:$uploaded_ext substr($uploaded_name, strrpos($uploaded_name, .) 1);在这条语句里,首先利用strrpos() 函数来查找“.”在变量$uploaded_name中出现的位置,然后将得到…

WPF 基础控件之 TreeView 样式

其他基础控件1.Window2.Button3.CheckBox4.ComboBox5.DataGrid 6.DatePicker7.Expander8.GroupBox9.ListBox10.ListView11.Menu12.PasswordBox13.TextBox14.RadioButton15.ToggleButton16.Slider TreeView 实现下面的效果1)TreeView来实现动画;Grid 分两…

HTML Animation 【前端就业课 第二阶段】CSS 零基础到实战(06)

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证。 一、Animation 基础 使用 Animation 可以设置帧动画,与 tr…

史上最全的Visual Studio Code安装C/C++环境,若不行头砍给你。

一、下载Visual Studio Code安装 下载链接地址 二、安装C/C++插件 输入c/c++, 然后点击那里install 三、下载MinGW配置环境变量 下载地址 进入网站后不要点击 "Download Lasted Version",往下滑,找到最新版的 "x86_64-posix-seh"。

C# 11 新特性:泛型 Attribute

之前使用JsonConverterAttribute,我们可以为任意类型自定义 Json 序列化。例如:[JsonConverter(typeof(UserJsonConverter))] public class User {public string Name { get; set; }public override string ToString(){return Name;} }public class User…