ivx简单实战,多图新手小白速成(1:签到系统)

简介: ivx简单实战,多图新手小白速成(1:签到系统)

签到系统功能描述:简易的四个页面快速上手ivx(本文参考了1_bit大大的教程制作的)

1.创建一个签到:当点击创建签到时跳转到创建签到页面然后输入签到名和选择签到的时间点击发布签到之后生成一个签到链接

2.用户扫码签到:当用户点击签到链接时跳转到输入名字并且扫码签到页面,当用户填写完自己的名字后点击其他地方然后二维码刷新用户扫码之后会提示用户名签到成功

(不做重复教如何建立,节省文章篇幅,有后台先后台-》前台绘图-》前台交互)

画第一个页面:签到系统后台页面

前台:

1.点击前台新建一个名为“签到系统相同”的页面(注意只有点击前台才有新建一个页面的功能)

2.点击新建一个横行然后命名为头部在里面加入一个文本框输入内容文字(可以多次复制这个头部,只需要修改文字就好)

3.添加一个横行作为主要内容,设置高度auto以及添加一个操作行作为3个操作的存放

将3个竖直行放进操作行中并且加入文本框写上操作行为名称

交互:

1.创建签到

目前只做一个创建签到行为,当点击创建签到时跳转到创建签到页

选中文本框之后点击右上角的i号为这个文本框绑定点击跳转事件

右上箭头点击之后可以去选择右边对象树的对象,所以想要跳转页面就是选择前台然后选择跳转页面的事件进行跳转

画第二个页面:创建签到页面

后台:

1.建立数据库表(签到数据库)

此表作用:储存发布的签到名和签到的开始时间结束时间的三个字段数据

如何建立:点击后台然后点击

新建字段:分别是签到名字和签到的开始结束时间(这3个字段的名字都是文本)

2.数据库的操作服务(签到发布)

此服务作用:操作签到数据库

如何建立:点击后台然后点击接受前台传输的参数然后进行返回一个数据id值

新建事件:当服务开始时选择签到数据库然后接受前台传输的参数提交到签到数据库

回调函数完成进行返回一个数据id值

前台:

1.与第一个页面的不同之处,如何创建

与第一个页面不同之处,添加了输入框、按钮、日期时间选择器手机版、时间变量、分割线

值得注意的是网页打开是组件是默认展开的就没有文字提示是一个个小图标然后找不到这个日期时间选择器手机版所以当收缩后点击这个按钮就有文字提示也可以找到相对应的组件

2.绘画思路

(日期时间选择器手机版点击小眼睛默认隐藏)

交互:

1.点击跳转首页

给存放首页文本框文字的竖直行设置点击事件

当用户点击首页文本那一栏时页面跳转返回到首页

2.点击显示日期时间选择器

给+选择签到时间设置点击事件

当用户点击此按钮时,日期时间选择器手机版显示

3.设置日期时间选择器

给对象树中的日期时间选择器设置点击事件

当点击取消时隐藏本对象

当点击确定时选择开始时间(将你选择的开始时间赋值给开始时间时间变量)——》选择结束时间(将你选择的结束时间赋值给结束时间时间变量)——》进行隐藏

4.点击发布签到

给发布签到按钮绑定点击事件

当用户点击时选择后台的签到发布服务,获取签到名、开始时间、结束时间,将这三个参数通过签到发布服务去将这三个数据进行提交。回调函数获取服务返回的数据id值拼接到下一个页面的链接中并且赋值给签到链接的输入框中(拼接方式是使用&然后自己命名一个值赋值,我这里就是叫id)

(下一个页面的链接是你创建下一个新页面签到二维码页面的网络链接,你只需要创建后点击预览本页面然后复制拿过来用) (可以利用这个链接进行跳转页面传参)


画第三个页面:签到二维码页面

后台:

1.搜索签到信息:

当服务开始时对比签到数据库中的数据id是否一致结果也是返回id,id时每一个签到的标识

前台:

1.与第一、二个页面的不同之处,如何创建

多了一个对象变量,以及页面的交互是再页面出现的时候就开始生成

签到的对象变量内部结构:4个字符串类型的变量

2.绘画思路

交互:

1.页面加载事件

点击页面之后设置事件

选择应用系统然后获取url参数的值就是为了获取上一个链接拼接传递过来的id值。回调函数就是进行搜索签到服务然后根据签到id也就是上一个页面传递过来的值进行搜索数据库数据如何返回存储到本页面中,然后拼接下一个页面地址生成一个二维码让人扫码签到


2.传递用户名

这个事件是为了可以显示是谁签到成功了,如果只有上面一个的话只会显示签到成功而不知道是谁签到成功了,当输入完后失去焦点之后二维码就会刷新一次带有用户名的扫码签到

画第四个页面:签到二维码页面

后台:

1.签到人员数据库表

三个字段用户,签到时间,签到id(属于哪一个签到)

2.签到提交:

3个参数:提交用户,签到时间,签到id

当服务开始时获取三个参数提交到签到人员数据库中

前台:

1.与第一、二个页面的不同之处,如何创建

2.绘画思路

签到成功就显示签到成功页面,失败就显示签到失败页面,所以开局隐藏,签到时间要大于钱都的开始时间和小于结束时间才能签到成功

交互:

1.页面加载事件

点击页面之后设置事件

当页面显示前先获取到用户的名字的值

当页面显示时获取签到id值识别是哪一个签到

回调函数搜索签到信息找到这个签到

回调函数赋值签到信息、开始签到时间、结束签到时间、对比时间查看是否是签到时间然后进行签到提交服务,提交用户的名字和签到时间和签到id

回调函数提交成功后显示签到成功页面

否则就是签到失败页面

2.点击头部显示用户名字签到成功

给头部绑定一个点击事件

点击头部将数据赋值到签到的文本框中

以上便是一个创建签到——》扫码签到——》完成签到的过程

剩下还有删除签到,核实签到功能就是自己实现


相关文章
|
7月前
|
缓存 前端开发 NoSQL
No192.精选前端面试题,享受每天的挑战和学习
No192.精选前端面试题,享受每天的挑战和学习
|
7月前
|
存储 前端开发 JavaScript
No121.精选前端面试题,享受每天的挑战和学习
No121.精选前端面试题,享受每天的挑战和学习
|
7月前
|
JavaScript 前端开发 开发者
No29.精选前端面试题,享受每天的挑战和学习
No29.精选前端面试题,享受每天的挑战和学习
|
7月前
|
JSON 前端开发 JavaScript
No26.精选前端面试题,享受每天的挑战和学习
No26.精选前端面试题,享受每天的挑战和学习
|
7月前
|
前端开发 JavaScript API
No164.精选前端面试题,享受每天的挑战和学习
No164.精选前端面试题,享受每天的挑战和学习
|
7月前
|
敏捷开发 前端开发 JavaScript
No148.精选前端面试题,享受每天的挑战和学习
No148.精选前端面试题,享受每天的挑战和学习
|
7月前
|
XML JSON 网络协议
No45.精选前端面试题,享受每天的挑战和学习
No45.精选前端面试题,享受每天的挑战和学习
|
7月前
|
存储 JSON 前端开发
No89.精选前端面试题,享受每天的挑战和学习
No89.精选前端面试题,享受每天的挑战和学习
|
7月前
|
存储 缓存 前端开发
No115.精选前端面试题,享受每天的挑战和学习
No115.精选前端面试题,享受每天的挑战和学习
|
7月前
|
存储 设计模式 JavaScript
No15.精选前端面试题,享受每天的挑战和学习
No15.精选前端面试题,享受每天的挑战和学习

热门文章

最新文章