一种线上赛事报名表单生成方法及系统与流程

1.本技术涉及赛事报名表单生成技术领域，尤其涉及一种线上赛事报名表单生成方法及系统。


背景技术：

2.随着经济发展，人们越来越注重文化教育，教育领域的线上赛事是指通过网络举办的比赛。参赛成员直接在网上填写报名表单报名，上传个人信息。
3.现有的线上赛事报名表单可通过html、js、css等源码编写生成，每一种赛事都要单独编写表单代码和构建表单样式，工作内容繁杂。在一些现有技术中，为提高表单生成效率采用可视化编辑器来生成表单，如中国专利cn102360296a公开了一种基于web的在线表单开发工具，包括：可视化表单设计器，用于供用户在该界面上设计待生成表单，所述界面上设置有多个表单控件以及至少一个代码编辑器；保存模块，其以html页面文件的格式保存生成的表单，将表单保存在数据库中；数据库，其中设置有保存表单的子数据库和保存业务数据的子数据库；数据集控件，其中建立有表单控件与数据库中的业务数据的对应关系数据；其中，在保存生成的表单时，所述代码编辑器编辑出的业务逻辑与通过表单控件设定的表单页面元素一同保存，并且表单在展现时，通过数据集控件中的对应关系，将数据库中的业务数据显示在表单控件中。但是现有技术中调整表单位置时不方便对齐不同表单组件，并且生成的表单在参赛者输入个人信息时不够便捷，不能够根据用户的输入历史提供输入文字填写表单。


技术实现要素：

4.本技术实施例提供一种线上赛事报名表单生成方法及系统，能够方便对齐不同表单组件，提高设计效率，并且生成的报名表单能够根据用户的输入历史提供输入文字进行报名表单的填写，使用方便。
5.有鉴于此，本技术提供了一种线上赛事报名表单生成方法，包括以下步骤：构建表单组件并将所述表单组件导入到组件列表；根据用户的拖拽动作将表单组件移动到表单编辑页面；根据用户的拖拽动作调整表单组件在表单编辑页面的位置，当上下方向的两个表单组件左边、中间或右边对齐时显现竖直标线，当左右方向的两个表单组件上边、中间或下边对齐时会显现水平标线；表单编辑完成后将表单数据保存为html文件，将所述html文件解析成版式数据流文件；其中，所述表单组件包括文本框组件、下拉框组件、选择框组件和加载组件，每一个文本框组件都包含组件id、组件名称和输入框，在用户从所述输入框中输入信息后将输入的信息与所述组件id绑定并储存，当检测到用户再次在所述输入框中输入信息时，按储存时间分行显示包含与所述组件id绑定的输入信息的下拉文本，用户通过点击所述下拉文本将点击的文本内容输入到所述输入框。
6.可选地，所述根据用户的拖拽动作将表单组件移动到表单编辑页面包括：监听用户是否在所述表单组件上按下鼠标，当用户在所述表单组件上按下鼠标时，将组件信息传
递给表单编辑页面；监听用户是否在所述表单组件上松开鼠标，当用户在所述表单组件上松开鼠标时，拖拽结束，此时接收拖拽的表单组件信息并根据所述表单组件信息在表单编辑页面渲染表单组件。
7.可选地，所述根据用户的拖拽动作调整表单组件在表单编辑页面的位置包括：记录用户在所述表单组件上按下鼠标时表单组件的初始位置坐标；当鼠标拖拽所述表单组件移动时，检测鼠标的实时位置坐标；用实时位置坐标减去初始位置坐标，计算移动距离和移动方向并改变表单组件的位置；
8.检测鼠标是否抬起，当检测到鼠标抬起时结束拖拽事件。
9.可选地，在所述调整表单组件在表单编辑页面的位置时，保存在当前调整时间下的表单组件设置状态数据，通过选取还原时间点下的表单组件设置状态数据还原表单设置状态。
10.可选地，还包括：根据当前表单组件设置状态数据生成表单模板；将所述表单模板按编号储存在模板库中；通过调用所述表单模板自动生成表单。
11.本技术还提供了一种线上赛事报名表单生成系统，包括：构建模块，用于构建表单组件，所述表单组件包括文本框组件、下拉框组件、选择框组件和加载组件，每一个文本框组件都包含组件id、组件名称和输入框；导入模块，用于将所述表单组件导入到组件列表；移动模块，用于根据用户的拖拽动作将表单组件移动到表单编辑页面；调整模块，用于根据用户的拖拽动作调整表单组件在表单编辑页面的位置；标线模块，用于当上下方向的两个表单组件左边、中间或右边对齐时显现竖直标线，当左右方向的两个表单组件上边、中间或下边对齐时会显现水平标线；保存模块，用于将编辑完成后的表单数据保存为html文件；解析模块，用于将所述html文件解析成版式数据流文件；储存模块，用于将用户从所述输入框输入的信息与所述组件id绑定并将所述输入信息储存；显示模块，用于在检测到用户再次在相同组件id的输入框中输入信息时，按储存时间分行显示包含与所述组件id绑定的输入信息的下拉文本；输入模块，用于将用户点击的下拉文本中的文本内容输入到所述输入框。
12.可选地，所述移动模块包括：第一监听单元，用于监听用户是否在所述表单组件上按下鼠标；传递单元，用于当用户在所述表单组件上按下鼠标时，将组件信息传递给表单编辑页面；第二监听单元，用于监听用户是否在所述表单组件上松开鼠标；接收模块，用于当用户在所述表单组件上松开鼠标时，接收拖拽的表单组件信息；渲染单元，用于根据表单组件信息在表单编辑页面渲染表单组件。
13.可选地，所述调整模块包括：记录单元，用于记录用户在所述表单组件上按下鼠标时表单组件的初始位置坐标；检测单元，用于当鼠标拖拽所述表单组件移动时，检测鼠标的实时位置坐标；计算单元，用于用实时位置坐标减去初始位置坐标，计算移动距离和移动方向并改变表单组件的位置；结束单元，用于当检测到鼠标抬起时结束拖拽事件。
14.可选地，还包括：操作数据保存模块，用于在所述调整表单组件在表单编辑页面的位置时，保存在当前调整时间下的表单组件设置状态数据；还原模块，用于通过选取还原时间点下的表单组件设置状态数据还原表单设置状态。
15.可选地，还包括：模板生成模块，用于根据当前表单组件设置状态数据生成表单模板；模板保存模块，将所述表单模板按编号储存在模板库中；调用模块，用于通过调用所述表单模板自动生成表单。
16.从以上技术方案可以看出，本技术实施例具有以下优点：
17.1、通过可视化拖拽表单组件，实现快速地绘制规范化报名表单，表单组件在编辑不同赛事的报名表单时均可以使用，避免重复设计表单组件。
18.2、通过将表单生成的html文件规范，再解析规范化的html文件从而得到版式数据流文件，无需直接通过html来构建表单，从而避免了对源码中修改过程中出现层级混乱。
19.3、通过生成竖直标线和水平标线，便于对齐不同的表单组件，提高设计效率。
20.4、当报名用户输入个人信息时，根据用户历史输入数据显示下拉文本，可以通过点击下拉文本将点击的文本内容输入到输入框，使用户能够快捷地输入信息。
附图说明
21.为了更清楚地表达说明本发明实施例的技术方案，下面将对实施例描述所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
22.图1为本说明书实施例中一线上赛事报名表单生成方法的流程图。
具体实施方式
23.为了使本技术领域的人员更好地理解本技术方案，下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
24.请参照图1，本技术实施例的一种线上赛事报名表单生成方法，包括以下步骤：
25.构建表单组件并将所述表单组件导入到组件列表；
26.根据用户的拖拽动作将表单组件移动到表单编辑页面；
27.根据用户的拖拽动作调整表单组件在表单编辑页面的位置，当上下方向的两个表单组件左边、中间或右边对齐时显现竖直标线，当左右方向的两个表单组件上边、中间或下边对齐时会显现水平标线；
28.表单编辑完成后将表单数据保存为html文件，将所述html文件解析成版式数据流文件。
29.在本实施例中，所述表单组件包括文本框组件、下拉框组件、选择框组件和加载组件。每一个文本框组件都包含组件id、组件名称和输入框，在用户从所述输入框中输入信息后将输入的信息与所述组件id绑定并储存，当检测到用户再次在所述输入框中输入信息时，按储存时间分行显示包含与所述组件id绑定的输入信息的下拉文本，用户通过点击所述下拉文本将点击的文本内容输入到所述输入框。下拉框组件用于供参赛报名用户从下拉选项中选取类型输入；选择框组件能够提供多个选项，参赛报名用户从这些选项中勾选符合的内容；加载组件用于供用户上传图片、文档等附件。每个组件都可以根据需要设定组件样式，设置成适合的长度、宽度、颜色、线条类型等。
30.在本实施例中，报名表单设计者通过可视化拖拽表单组件，自由选择表单组件进行组合排布，实现快速地绘制规范化报名表单，表单组件在编辑不同赛事的报名表单时均
可以使用，避免每种比赛都要重复设计表单组件。通过将表单生成的html文件规范，再解析规范化的html文件从而得到版式数据流文件，无需直接通过html来构建表单，从而避免了对源码中修改过程中出现层级混乱。当拖拽表单组件使其对齐时，会生成竖直标线和水平标线，便于对齐不同的表单组件，提高设计效率。根据本实施例构建的表单组件，当报名用户输入个人信息时，根据用户历史输入数据显示下拉文本，可以通过点击下拉文本将点击的文本内容输入到输入框，使用户能够快捷地输入信息。
31.在本技术的进一步实施例中，所述根据用户的拖拽动作将表单组件移动到表单编辑页面包括：监听用户是否在所述表单组件上按下鼠标，当用户在所述表单组件上按下鼠标时，将组件信息传递给表单编辑页面；监听用户是否在所述表单组件上松开鼠标，当用户在所述表单组件上松开鼠标时，拖拽结束，此时接收拖拽的表单组件信息并根据所述表单组件信息在表单编辑页面渲染表单组件。具体的，每个表单组件均设有可拖拽属性，当拖拽触发，既在所述表单组件上按下鼠标时，触发事件，将组件信息传递给表单编辑页面，组件信息包括组件样式、组件的长度、宽度、颜色、线条类型等。然后在松开鼠标时接收传输的数据并在渲染表单组件，完成将表单组件添加到表单编辑页面的操作。
32.在本技术的进一步实施例中，所述根据用户的拖拽动作调整表单组件在表单编辑页面的位置包括：记录用户在所述表单组件上按下鼠标时表单组件的初始位置坐标；当鼠标拖拽所述表单组件移动时，检测鼠标的实时位置坐标；用实时位置坐标减去初始位置坐标，计算移动距离和移动方向并改变表单组件的位置；检测鼠标是否抬起，当检测到鼠标抬起时结束拖拽事件。通过拖拽表单组件实现表单组件在表单编辑页面的移动，能够实时显示表单组件位置，方便布局。
33.进一步，在本技术的一个实施例中，在上述方案的基础上，还包括，在所述调整表单组件在表单编辑页面的位置时，保存在当前调整时间下的表单组件设置状态数据，通过选取还原时间点下的表单组件设置状态数据还原表单设置状态。在调整过程中，每一个调整步骤都会自动保存，当用户需要返回某个操作步骤时，通过还原该操作步骤时间点下的表单组件设置状态数据就能实现还原操作过程，有利于用户对表单操作做出不同尝试，进行反复修改达成用户所需的报名表单的样式。
34.进一步，在本技术的一个实施例中，在上述方案的基础上，还包括：根据当前表单组件设置状态数据生成表单模板；将所述表单模板按编号储存在模板库中；通过调用所述表单模板自动生成表单。在设计完成好报名表单后，通过生成表单模板，在后续编辑时可以直接使用当前表单，在一些线上教育赛事中报名所需填写的信息往往是相似的，因此有时候可以直接使用编辑过的表单进行较小的改动就能再次使用，另外还可以设计通用模板保存使用，将一些通用的表单组件设计成表单模板，在设计时直接调用模板编辑，使用方便。
35.本技术实施例还提出一种线上赛事报名表单生成系统，包括：构建模块，用于构建表单组件，所述表单组件包括文本框组件、下拉框组件、选择框组件和加载组件，每一个文本框组件都包含组件id、组件名称和输入框；导入模块，用于将所述表单组件导入到组件列表；移动模块，用于根据用户的拖拽动作将表单组件移动到表单编辑页面；调整模块，用于根据用户的拖拽动作调整表单组件在表单编辑页面的位置；标线模块，用于当上下方向的两个表单组件左边、中间或右边对齐时显现竖直标线，当左右方向的两个表单组件上边、中间或下边对齐时会显现水平标线；保存模块，用于将编辑完成后的表单数据保存为html文
件；解析模块，用于将所述html文件解析成版式数据流文件；储存模块，用于将用户从所述输入框输入的信息与所述组件id绑定并将所述输入信息储存；显示模块，用于在检测到用户再次在相同组件id的输入框中输入信息时，按储存时间分行显示包含与所述组件id绑定的输入信息的下拉文本；输入模块，用于将用户点击的下拉文本中的文本内容输入到所述输入框。
36.进一步，所述移动模块包括：第一监听单元，用于监听用户是否在所述表单组件上按下鼠标；传递单元，用于当用户在所述表单组件上按下鼠标时，将组件信息传递给表单编辑页面；第二监听单元，用于监听用户是否在所述表单组件上松开鼠标；接收模块，用于当用户在所述表单组件上松开鼠标时，接收拖拽的表单组件信息；渲染单元，用于根据表单组件信息在表单编辑页面渲染表单组件。
37.进一步，所述调整模块包括：记录单元，用于记录用户在所述表单组件上按下鼠标时表单组件的初始位置坐标；检测单元，用于当鼠标拖拽所述表单组件移动时，检测鼠标的实时位置坐标；计算单元，用于用实时位置坐标减去初始位置坐标，计算移动距离和移动方向并改变表单组件的位置；结束单元，用于当检测到鼠标抬起时结束拖拽事件。
38.进一步，还包括：操作数据保存模块，用于在所述调整表单组件在表单编辑页面的位置时，保存在当前调整时间下的表单组件设置状态数据；还原模块，用于通过选取还原时间点下的表单组件设置状态数据还原表单设置状态。
39.进一步，还包括：模板生成模块，用于根据当前表单组件设置状态数据生成表单模板；模板保存模块，将所述表单模板按编号储存在模板库中；调用模块，用于通过调用所述表单模板自动生成表单。
40.所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统具体工作过程，可以参考前述方法实施例中的对应过程，作用和效果也相同，在此不再赘述。
41.本技术的说明书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本技术的实施例例如能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
42.在本技术所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
43.作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
44.另外，在本技术各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
45.集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本技术各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(英文全称：read
‑
only memory，英文缩写：rom)、随机存取存储器(英文全称：random access memory，英文缩写：ram)、磁碟或者光盘等各种可以存储程序代码的介质。
46.以上所述，以上实施例仅用以说明本技术的技术方案，而非对其限制；尽管参照前述实施例对本技术进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本技术各实施例技术方案的精神和范围。