提交表单是非常多案例中都会使用到的一种功能,例如活动报名,提交审核,问卷调研等等。其实它要实现的最终结果就是将前台输入的数据提交到后台的数据库中,今天以这个极简活动报名为例说一下提交表单的具体做法和流程。
使用ivx实现提交报名表单的经验总结_第1张图片
一.数据库
这个极简活动报名中提交的表单中包含Name、Telephone、Have dinner、Session和Self introduction五项,于是我们在数据库中添加对应的五个字段,其中Have dinner字段用数字1和0分别表示是和否。
使用ivx实现提交报名表单的经验总结_第2张图片
二.服务
服务中的五个接收参数则分别对应数据库的五个字段,我们将每个参数提交到数据库对应字段即可,提交完成数据库会返回此次提交是否成功,我们将其作为服务的返回结果。
使用ivx实现提交报名表单的经验总结_第3张图片
三.前台事件
1.组件
在前台我们要输入这五个提交项的具体值,Name、Telephone、Self introduction这三项使用输入框组件,用户直接输入即可。
使用ivx实现提交报名表单的经验总结_第4张图片
Have dinner则是做了一个简易的单项选择器,选择不同的选项会给数值变量“dinner”赋不同的值,而每个选择器的是否选中属性也与“dinner”进行了数据绑定。
使用ivx实现提交报名表单的经验总结_第5张图片
Session使用了一个拓展组件中的单项选择器,在选项属性栏中填入了“Morning”、“Afternoon”、“Evening”三个选项,选择器的确定事件中会将选中选项保存到session项对应的输入框内。
使用ivx实现提交报名表单的经验总结
2.提交
点击confirm按钮,会先判断各个输入框的内容是否为空,还有内容类型是否正确,符合提交条件后会发送给提交报名动作组,不符合则对用户进行提示。
使用ivx实现提交报名表单的经验总结_第6张图片
在动作组中会调用提交报名服务,将之前传入的数据发送给服务,如果服务返回提交成功就清空前台界面的内容以便下一次输入提交,并且告知用户提交成功。至此一个提交表单的流程就完成了。
使用ivx实现提交报名表单的经验总结_第7张图片
总结
可以看到数据的传递流程是用户输入,然后依次传递到动作组、服务和数据库中,所以提交表单功能的关键就是动作组和服务的参数还有数据库的字段都做到相互对应。