CN109766096A - 前端组件元素生成系统、方法、计算机设备及存储介质 - Google Patents
前端组件元素生成系统、方法、计算机设备及存储介质 Download PDFInfo
- Publication number
- CN109766096A CN109766096A CN201811536541.0A CN201811536541A CN109766096A CN 109766096 A CN109766096 A CN 109766096A CN 201811536541 A CN201811536541 A CN 201811536541A CN 109766096 A CN109766096 A CN 109766096A
- Authority
- CN
- China
- Prior art keywords
- end assemblies
- area
- option
- assemblies element
- drag operation
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 230000000712 assembly Effects 0.000 title claims abstract description 267
- 238000000429 assembly Methods 0.000 title claims abstract description 267
- 238000000034 method Methods 0.000 title claims abstract description 222
- 238000003860 storage Methods 0.000 title claims abstract description 19
- 230000006399 behavior Effects 0.000 claims description 50
- 238000012544 monitoring process Methods 0.000 claims description 38
- 230000006870 function Effects 0.000 claims description 31
- 238000004590 computer program Methods 0.000 claims description 15
- 238000011161 development Methods 0.000 abstract description 8
- 238000012423 maintenance Methods 0.000 abstract description 4
- 238000010586 diagram Methods 0.000 description 7
- 230000008034 disappearance Effects 0.000 description 4
- 238000004519 manufacturing process Methods 0.000 description 4
- 241001269238 Data Species 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000004364 calculation method Methods 0.000 description 1
- 238000009826 distribution Methods 0.000 description 1
- 238000005538 encapsulation Methods 0.000 description 1
- 230000002708 enhancing effect Effects 0.000 description 1
- 238000002360 preparation method Methods 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 238000012827 research and development Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 239000004575 stone Substances 0.000 description 1
- 230000001360 synchronised effect Effects 0.000 description 1
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
本申请公开了一种前端组件元素生成系统、方法、计算机设备及存储介质，开发规范比较统一，有利于后续维护。其中，前端组件元素生成系统包括：编程界面，包含前端组件区、前端页面区和前端工具区；第一拖曳器用于当第一拖曳监测器监测到用户针对前端组件元素的释放鼠标行为操作，结束前端组件元素的拖拽操作；放置器用于当第一拖曳器结束前端组件元素的拖拽操作时的第一鼠标位置放置前端组件元素；第一生成器用于在前端工具区生成前端组件元素对应的组件方法选项区；第二拖曳器用于当第二拖曳监测器监测到用户针对预设方法选项的释放鼠标行为操作，结束预设方法选项的拖拽操作；第一封装器用于将预设方法选项对应的功能封装至前端组件元素。
Description
技术领域
本申请涉及研发辅助工具领域，尤其涉及一种前端组件元素生成系统、方法、计算机设备及存储介质。
背景技术
可以理解，整个互联网是由无数网页组合而成的，而网页的本质就是超文本标记语言(HTML)。可以说，HTML正是互联网的基石。随着时代的发展，尤其是HTML5的正式发布后，互联网技术的更新迭代变得更加迅速。而用户对互联网的需求也越来越多，越来越多没有互联网开发基础的用户也需要制作特定的前端页面。然而，传统的万维网(WEB)前端页面开发模式需要掌握一定前端开发技能，例如html、层叠样式表(cascading style sheets，css)、直译式脚本语言(javascript)等相关技术)，开发工程师并且要花费大量的时间撰写前端代码，才能进行前端页面的开发和制作，并且存在开发规范不统一导致难以维护的问题。
发明内容
本申请提供一种前端组件元素生成系统、方法、计算机设备及存储介质，可以使得开发规范比较统一，有利于后续维护。
一种前端组件元素生成系统，包括：
编程界面，包含前端组件区、前端页面区和前端工具区，其中，所述前端组件区中包含有前端组件元素；
第一拖曳监测器，用于对设置在前端组件区中的前端组件元素进行拖拽操作行的监测；
第一拖曳器，用于当所述第一拖曳监测器监测到用户针对所述前端组件元素的释放鼠标行为操作，结束所述前端组件元素的拖拽操作；
放置器，用于当所述第一拖曳器结束所述前端组件元素的拖拽操作时的第一鼠标位置处于所述前端页面区中，在所述第一鼠标位置放置所述前端组件元素；
第一生成器，用于当所述放置器在所述前端页面区放置所述前端组件元素时，在所述前端工具区生成所述前端组件元素对应的组件方法选项区，所述组件方法选项区有所述前端组件元素对应的预设方法选项；
第二拖曳监测器，用于对设置在所述组件方法选项区的预设方法选项进行拖曳操作行为的监测；
第二拖曳器，用于当第二拖曳监测器监测到用户针对所述预设方法选项的释放鼠标行为操作，结束所述预设方法选项的拖拽操作；
第一封装器，用于当所述第二拖曳器结束所述预设方法选项的拖曳操作时的第二鼠标位置处于所述前端组件元素中，将所述预设方法选项对应的功能封装至所述前端组件元素。
一种前端组件元素生成方法，应用于前端组件元素生成系统中，所述前端组件元素生成系统包含编程界面，所述编程界面包含前端组件区、前端页面区和前端工具区，其中，所述组件中包含有前端组件元素，包括：
对设置在前端组件区中的前端组件元素进行拖拽操作行为的监测；
当监测到用户针对所述前端组件元素的释放鼠标行为操作，结束所述前端组件元素的拖拽操作；
当结束所述前端组件元素的拖拽操作时的第一鼠标位置处于所述前端页面区中，在所述第一鼠标位置放置所述前端组件元素；
当在所述前端页面区放置所述前端组件元素时，在所述前端工具区生成所述前端组件元素对应的组件方法选项区，所述组件方法选项区有所述前端组件元素对应的方法选项；
对设置在所述组件方法选项区的方法选项进行拖曳操作行为的监测；
当监测到用户针对所述方法选项的释放鼠标行为操作，结束所述方法选项的拖拽操作；
当结束所述方法选项的拖曳操作时的第二鼠标位置处于所述前端组件元素中，将所述方法选项对应的功能封装至所述前端组件元素。
一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述前端组件元素生成方法的步骤。一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述前端组件元素生成方法的步骤。
上述前端组件元素生成系统、方法、计算机设备及存储介质所实现的方案中，与传统的技术方案相比，开发工程师不需要花费大量的时间撰写前端代码，就能进行前端页面的开发和制作，并且都是基于前端组件元素进行开发，开发规范比较统一，有利于后续维护。
附图说明
为了更清楚地说明本申请实施例的技术方案，下面将对本申请实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1是本申请中前端组件元素生成系统一个实施例结构示意图；
图2是本申请中前端组件元素生成系统另一实施例结构示意图；
图3是本申请中前端组件元素生成系统另一实施例结构示意图；
图4是本申请中前端组件元素生成系统另一实施例结构示意图；
图5是本申请中前端组件元素生成方法一个实施例流程示意图；
图6是本申请中前端组件元素生成方法另一实施例流程示意图；
图7是本申请计算机设备的一个实施例结构示意图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
如图1所示，本申请提供了一种前端组件元素生成系统，该前端组件元素生成系统包括：
编程界面10，包含前端组件区101、前端页面区102和前端工具区103，其中，前端组件区101中包含有前端组件元素；
在一些实施例中，前端组件区101中的前端组件元素包括但不局限于：载入组件、过场动画组件、按钮组件、列表组件。
可以理解，在各种应用程序(app)里面见到的前端页面中，比如loading(加载中)画面、过场动画、按钮、列表等比较常用的页面展示，在本申请中称为前端组件元素，也可以理解为前端页面都是通过各种各样的小的前端组件元素组合在一起构成的。通过一个个小组件相互拼接，生成一个大的组件来自定义需要使用的前端页面，至于需要组合成这么样的前端页面，可由用户拖拽操作行为进行选择。
第一拖曳监测器20，用于对设置在前端组件区101中的前端组件元素进行拖拽操作行的监测；
在本申请中提供的前端组件元素生成系统中，包括用于对设置在前端组件区101中的前端组件元素进行拖拽操作行的监测第一拖曳监测器20，以监测用户是否有拖延前端组件元素的行为。
第一拖曳器30，用于当第一拖曳监测器20监测到用户针对前端组件元素的释放鼠标行为操作，结束前端组件元素的拖拽操作；
放置器40，用于当第一拖曳器30结束前端组件元素的拖拽操作时的第一鼠标位置处于前端页面区102中，在第一鼠标位置放置前端组件元素；也即，此时用户已经选择了某个前端组件元素，并放置于前端页面区102第一鼠标位置处。
第一生成器50，用于当放置器40在前端页面区102放置前端组件元素时，在前端工具区103生成前端组件元素对应的组件方法选项区，组件方法选项区有前端组件元素对应的预设方法选项；
为了便于理解，这里以前端组件元素为按钮举例进行说明，可以理解按钮是一个前端组件元素，该按钮可以被用户点击，但是点击之后有什么反应，可以通过给前端组件元素生成系统出的行为进行选择，本申请将针对于按钮对应的行为成为按钮对应的预设方法选项，例如，按钮对应的预设方法选项包括但不局限于：选择了点击按钮播放一段动画；或者点击按钮跳转下一个页面；或者点击一下按钮消失等等，简单点来说，上述预设方法选项为具备实现某种功能的模块，而实现上述某种功能可由相应的代码所实现，这里不展开描述。上述预设方法选项可以在前端组件元素生成系统的前端工具区103中提供给予用户选择，也即当放置器40在前端页面区102放置前端组件元素时，在前端工具区103生成前端组件元素对应的组件方法选项区，在组件方法选项区让用户进行选择所需要的预设方法选项。
第二拖曳监测器60，用于对设置在组件方法选项区的预设方法选项进行拖曳操作行为的监测；也即，当放置器40在前端页面区102放置前端组件元素时，在前端工具区103生成前端组件元素对应的组件方法选项区，此时，第二拖曳监测器60可以对设置在组件方法选项区的预设方法选项进行拖曳操作行为的监测，以监测用户是否拖曳组件方法选项区中的预设方法选项。
第二拖曳器70，当监测到用户针对预设方法选项的释放鼠标行为操作，结束预设方法选项的拖拽操作；
第一封装器80，用于当第二拖曳器70结束预设方法选项的拖曳操作时的第二鼠标位置处于前端组件元素中，将预设方法选项对应的功能封装至前端组件元素。
还是拿前端组件元素为按钮举例，如前述按钮对应的预设方法选项，包括但不局限于：选择了点击按钮播放一段动画；或者点击按钮跳转下一个页面；或者点击一下按钮消失等等，那么当第二拖曳器70结束按钮的“选择了点击按钮播放一段动画”这一预设方法选项的拖曳操作时的第二鼠标位置处于前端组件元素中，说明用户将“选择了点击按钮播放一段动画”这一预设方法选项拖曳如了按钮这个前端组件元素中，此时，可以将“选择了点击按钮播放一段动画”这一预设方法选项对应的功能，也即选择了点击按钮播放一段动画封装至按钮组件中，此时，点击该按钮可实现播放一段动画，需要说明的是，上述例子在这里只是举例说明，并不对本申请构成限定。可以看出，在本申请提供的前端组件元素生成系统中，开发工程师不需要花费大量的时间撰写前端代码，就能进行前端页面的开发和制作，并且都是基于前端组件元素进行开发，开发规范比较统一，有利于后续维护。
在一些实施例中，如图2所示，前端组件元素生成系统还包括：
第二生成器90，用于当放置器40在前端页面区102放置前端组件元素时，在前端工具区103生成前端组件元素对应的代码编辑区；
第三生成器100，用于在组件方法选项区，生成代码编辑区中的代码对应的编辑方法选项；
第三拖曳监测器110，用于对生成在组件方法选项区的编辑方法选项进行拖曳操作行为的监测；
第三拖曳器120，用于当第三拖曳监测器110监测到用户针对编辑方法选项的释放鼠标行为操作，结束编辑方法选项的拖拽操作；
第二封装器130，用于当第三拖曳器120结束编辑方法选项的拖曳操作时的第三鼠标位置处于前端组件元素中，将编辑方法选项对应的功能封装至前端组件元素。
可以理解，上述实施例与前述不同的地方在于，预设方法选项是预先设置的一些功能，还是拿按钮举例，按钮对应的预设方法选项，包括但不局限于：选择了点击按钮播放一段动画；或者点击按钮跳转下一个页面；或者点击一下按钮消失等等，但是上述预设方法选项有可能不满足用户对于按钮这个组件所需要实现的功能，因此，在本申请中，当放置器40在前端页面区102放置前端组件元素时，说明用户选择了该前端组件元素，此时在前端工具区103生成前端组件元素对应的代码编辑区，在该前端组件元素对应的代码编辑区中，用户可以编写出所需要的前端组件元素对应的功能，也即编辑方法选项，简单来说，用户除了采用预设的预设方法选项的功能外，还可以自定义出所需要的功能，提高了方案的可扩展性和应用场景。
在一些实施例中，如图3所示，前端组件元素生成系统还包括：
第四生成器100，用于当放置器40在前端页面区102放置前端组件元素时，在前端工具区103生成前端组件元素对应的属性设置区，属性设置区包含有前端组件元素对应的属性设置选项。比如一个按钮是一个前端组件元素，它具有的属性有长，宽，颜色，阴影，圆角等等一系列属性；再比如一个列表是一个前端组件元素，它具有的属性有列表是横向排列还是纵向排列，列表的长宽，列表是否只能展示十条数据还是更多数据，是否支持下拉刷新加载更多列表数据等等属性。在本申请中，当放置器40在前端页面区102放置前端组件元素时，说明用户选择了该前端组件元素，此时在前端工具区103生成前端组件元素对应的属性设置区，属性设置区包含有前端组件元素对应的属性设置选项，例如按钮是一个前端组件元素，生成按钮对应的属性设置区，可以对按钮进行设置的属性设置选项有长，宽，颜色，阴影，圆角等等一系列属性设置选项，通过修改上述属性的参数，得到修改按钮的目的，以供用户选择所需的按钮的属性，例如所需要的按钮的长，宽，颜色等等。
在一些实施例中，如图4所示，另外，编程界面10还包括消息区104，前端组件元素生成系统还包括消息弹出器150，消息弹出器150用于：
用于当第一拖曳器30结束前端组件元素的拖拽操作时的第一鼠标位置未处于前端页面区102中，则在消息区104弹出包含有预设组件拖曳失败消息的提示框；也即，当用户操作不当，未将前端组件元素拖曳至前端页面区102中时，会拖曳失败，并在消息区104弹出包含有预设组件拖曳失败消息的提示框，以达到提醒用户的前端组件元素拖曳失败的目的。
当第二拖曳器70结束预设方法选项的拖曳操作时的第二鼠标位置未处于前端组件元素中，则在消息区弹出预设方法选项拖曳失败消息的提示框；也即，当用户操作不当，未将预设方法选项拖曳至前端组件元素时，会拖曳失败，并在消息区弹出包含有预设方法选项拖曳失败消息的提示框，以达到提醒用户的预设方法选项拖曳失败的目的。
当第三拖曳器120结束编辑方法选项的拖曳操作时的第三鼠标位置未处于前端组件元素中，则在消息区弹出编辑方法选项拖曳失败消息的提示框。也即，当用户操作不当，未将编辑方法选项拖曳至前端组件元素时，会拖曳失败，并在消息区弹出包含编辑方法选项拖曳失败消息的提示框，以达到提醒用户的编辑方法选项拖曳失败的目的。
另外，前端组件元素生成系统的每个前端组件元素对应的组件方法选项区中，预设有预设方法选项区以及编辑方法选项区；其中，预设方法选项区设置有预设方法选项，编辑方法选项区预设有自定义的编辑方法选项。例如，按钮有按钮对应的按钮组件方法选项区，该按钮组件方法选项区包括有按钮对应的方法选项区和编辑方法选项区，列表有按钮对应的列表组件方法选项区，该列表组件方法选项区包括有列表对应的方法选项区和编辑方法选项区。在具体应用中，当前端页面区中被拖曳了多个前端组件元素时，只有某个前端组件元素被用户通过鼠标选中了，才会展示该某个前端组件元素对应的预设方法选项区以及编辑方法选项区。
其次，本申请还提供了一种前端组件元素生成方法，应用于前端组件元素生成系统中，前端组件元素生成系统包含编程界面，编程界面包含前端组件区、前端页面区和前端工具区，其中，组件中包含有前端组件元素，如图5所示，该前端组件元素生成方法包括如下步骤：
S10：对设置在前端组件区中的前端组件元素进行拖拽操作行为的监测；
在一些实施例中，前端组件区101中的前端组件元素包括但不局限于：载入组件、过场动画组件、按钮组件、列表组件。
可以理解，在各种应用程序(app)里面见到的前端页面中，比如loading(加载中)画面、过场动画、按钮、列表等比较常用的页面展示，在本申请中称为前端组件元素，也可以理解为前端页面都是通过各种各样的小的前端组件元素组合在一起构成的。通过一个个小组件相互拼接，生成一个大的组件来自定义需要使用的前端页面，至于需要组合成这么样的前端页面，可由用户拖拽操作行为进行选择，本申请中，可对设置在前端组件区中的前端组件元素进行拖拽操作行为的监测，以监测用户是否有拖延前端组件元素的行为。
S20：当监测到用户针对前端组件元素的释放鼠标行为操作，结束前端组件元素的拖拽操作；
如前述，可对设置在前端组件区中的前端组件元素进行拖拽操作行为的监测，当监测到用户针对前端组件元素的释放鼠标行为操作，结束前端组件元素的拖拽操作。
S30：当结束前端组件元素的拖拽操作时的第一鼠标位置处于前端页面区中，在第一鼠标位置放置前端组件元素；
S40：当在前端页面区放置前端组件元素时，在前端工具区生成前端组件元素对应的组件方法选项区，组件方法选项区有前端组件元素对应的方法选项；
为了便于理解，这里以前端组件元素为按钮举例进行说明，可以理解按钮是一个前端组件元素，该按钮可以被用户点击，但是点击之后有什么反应，可以通过给前端组件元素生成系统出的行为进行选择，本申请将针对于按钮对应的行为成为按钮对应的预设方法选项，例如，按钮对应的预设方法选项包括但不局限于：选择了点击按钮播放一段动画；或者点击按钮跳转下一个页面；或者点击一下按钮消失等等，简单点来说，上述预设方法选项为具备实现某种功能的模块，而实现上述某种功能可由相应的代码所实现，这里不展开描述。上述预设方法选项可以在前端组件元素生成系统的前端工具区中提供给予用户选择，也即在前端页面区102放置前端组件元素时，在前端工具区生成前端组件元素对应的组件方法选项区，以通过组件方法选项区让用户进行选择所需要的预设方法选项。
S50：对设置在组件方法选项区的方法选项进行拖曳操作行为的监测；
当在前端页面区放置前端组件元素时，在前端工具区生成前端组件元素对应的组件方法选项区，此时，可以对设置在组件方法选项区的预设方法选项进行拖曳操作行为的监测，以监测用户是否拖曳组件方法选项区中的预设方法选项。
S60：当监测到用户针对方法选项的释放鼠标行为操作，结束方法选项的拖拽操作；
S70：当结束方法选项的拖曳操作时的第二鼠标位置处于前端组件元素中，将方法选项对应的功能封装至前端组件元素。
还是拿前端组件元素为按钮举例，如前述按钮对应的预设方法选项，包括但不局限于：选择了点击按钮播放一段动画；或者点击按钮跳转下一个页面；或者点击一下按钮消失等等，那么当第二拖曳器70结束按钮的“选择了点击按钮播放一段动画”这一预设方法选项的拖曳操作时的第二鼠标位置处于前端组件元素中，说明用户将“选择了点击按钮播放一段动画”这一预设方法选项拖曳如了按钮这个前端组件元素中，此时，此时，可以将“选择了点击按钮播放一段动画”这一预设方法选项对应的功能，也即选择了点击按钮播放一段动画封装至按钮组件中，此时，点击该按钮可实现播放一段动画，需要说明的是，上述例子在这里只是举例说明，并不对本申请构成限定。可以看出，在本申请提供的前端组件元素生成系统中，开发工程师不需要花费大量的时间撰写前端代码，利用各个前端组件元素进行组件拼接，以通过前端组件元素实现前端组件元素所所拼接后的前端页面的逻辑，从而进行前端页面的开发和制作，并且由于基于前端组件元素进行开发，开发规范也比较统一，有利于后续维护。
在一些实施例中，如图6所示，本申请提供的前端组件元素生成方法，还包括如下步骤：
S80：当在前端页面区放置前端组件元素时，在前端工具区生成前端组件元素对应的代码编辑区；
S90：在组件方法选项区，生成代码编辑区中的代码对应的编辑方法选项；
S100：对生成在组件方法选项区的编辑方法选项进行拖曳操作行为的监测；
S110：当监测到用户针对编辑方法选项的释放鼠标行为操作，结束编辑方法选项的拖拽操作；
S120：当结束编辑方法选项的拖曳操作时的第三鼠标位置处于前端组件元素中，将编辑方法选项对应的功能封装至前端组件元素。
可以理解，上述实施例与前述不同的地方在于，预设方法选项是预先设置的一些功能，还是拿按钮举例，按钮对应的预设方法选项，包括但不局限于：选择了点击按钮播放一段动画；或者点击按钮跳转下一个页面；或者点击一下按钮消失等等，但是上述预设方法选项有可能不满足用户对于按钮这个组件所需要实现的功能，因此，在本申请中，当在前端页面区放置前端组件元素时，说明用户选择了该前端组件元素，此时在前端工具区生成前端组件元素对应的代码编辑区，在该前端组件元素对应的代码编辑区中，用户可以编写出所需要的前端组件元素对应的功能，也即编辑方法选项，简单来说，用户除了采用预设的预设方法选项的功能外，还可以自定义出所需要的功能，提高了方案的可扩展性和应用场景。
另外，在一些实施例中，本申请提供的前端组件元素生成方法还包括如下步骤：
当放置器在前端页面区放置前端组件元素时，在前端工具区生成前端组件元素对应的属性设置区，属性设置区包含有前端组件元素对应的属性设置选项。
另外，在一些实施例中，编程界面还包括消息区，当第一拖曳器结束前端组件元素的拖拽操作时的第一鼠标位置未处于前端页面区中，则在消息区弹出包含有预设组件拖曳失败消息的提示框；
当结束预设方法选项的拖曳操作时的第二鼠标位置未处于前端组件元素中，则在消息区弹出预设方法选项拖曳失败消息的提示框；
当结束编辑方法选项的拖曳操作时的第三鼠标位置未处于前端组件元素中，则在消息区弹出编辑方法选项拖曳失败消息的提示框。
也就是说，本申请还提供了一种对应于前端组件元素生成系统的前端组件元素生成方法，主要利用组件进行前端页面的编程，提高了编程人员的编程效率，以及便利性。
关于前端组件元素生成方法的具体限定可以参见上文中对于前端组件元素生成系统各个模块对应的限定，在此不再赘述。上述前端组件元素生成系统中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图7所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机程序被处理器执行时以实现一种前端组件元素生成方法。
在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现一种前端组件元素生成方法，该前端组件元素生成方法应用于所述前端组件元素生成系统中，前端组件元素生成系统包含编程界面，所述编程界面包含前端组件区、前端页面区和前端工具区，其中，所述组件中包含有前端组件元素，计算机程序被处理器执行时具体可实现如下步骤：
对设置在前端组件区中的前端组件元素进行拖拽操作行为的监测；
当监测到用户针对所述前端组件元素的释放鼠标行为操作，结束所述前端组件元素的拖拽操作；
当结束所述前端组件元素的拖拽操作时的第一鼠标位置处于所述前端页面区中，在所述第一鼠标位置放置所述前端组件元素；
当在所述前端页面区放置所述前端组件元素时，在所述前端工具区生成所述前端组件元素对应的组件方法选项区，所述组件方法选项区有所述前端组件元素对应的方法选项；
对设置在所述组件方法选项区的方法选项进行拖曳操作行为的监测；
当监测到用户针对所述方法选项的释放鼠标行为操作，结束所述方法选项的拖拽操作；
当结束所述方法选项的拖曳操作时的第二鼠标位置处于所述前端组件元素中，将所述方法选项对应的功能封装至所述前端组件元素。
在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现一种前端组件元素生成方法，该前端组件元素生成方法应用于所述前端组件元素生成系统中，前端组件元素生成系统包含编程界面，所述编程界面包含前端组件区、前端页面区和前端工具区，其中，所述组件中包含有前端组件元素，计算机程序被处理器执行时具体可实现如下步骤：
对设置在前端组件区中的前端组件元素进行拖拽操作行为的监测；
当监测到用户针对所述前端组件元素的释放鼠标行为操作，结束所述前端组件元素的拖拽操作；
当结束所述前端组件元素的拖拽操作时的第一鼠标位置处于所述前端页面区中，在所述第一鼠标位置放置所述前端组件元素；
当在所述前端页面区放置所述前端组件元素时，在所述前端工具区生成所述前端组件元素对应的组件方法选项区，所述组件方法选项区有所述前端组件元素对应的方法选项；
对设置在所述组件方法选项区的方法选项进行拖曳操作行为的监测；
当监测到用户针对所述方法选项的释放鼠标行为操作，结束所述方法选项的拖拽操作；
当结束所述方法选项的拖曳操作时的第二鼠标位置处于所述前端组件元素中，将所述方法选项对应的功能封装至所述前端组件元素。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。
所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。
以上所述实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围，均应包含在本申请的保护范围之内。
Claims (10)
1.一种前端组件元素生成系统，其特征在于，包括：
编程界面，包含前端组件区、前端页面区和前端工具区，其中，所述前端组件区中包含有前端组件元素；
第一拖曳监测器，用于对设置在前端组件区中的前端组件元素进行拖拽操作行的监测；
第一拖曳器，用于当所述第一拖曳监测器监测到用户针对所述前端组件元素的释放鼠标行为操作，结束所述前端组件元素的拖拽操作；
放置器，用于当所述第一拖曳器结束所述前端组件元素的拖拽操作时的第一鼠标位置处于所述前端页面区中，在所述第一鼠标位置放置所述前端组件元素；
第一生成器，用于当所述放置器在所述前端页面区放置所述前端组件元素时，在所述前端工具区生成所述前端组件元素对应的组件方法选项区，所述组件方法选项区有所述前端组件元素对应的预设方法选项；
第二拖曳监测器，用于对设置在所述组件方法选项区的预设方法选项进行拖曳操作行为的监测；
第二拖曳器，用于当第二拖曳监测器监测到用户针对所述预设方法选项的释放鼠标行为操作，结束所述预设方法选项的拖拽操作；
第一封装器，用于当所述第二拖曳器结束所述预设方法选项的拖曳操作时的第二鼠标位置处于所述前端组件元素中，将所述预设方法选项对应的功能封装至所述前端组件元素。
2.如权利要求1所述的前端组件元素生成系统，其特征在于，所述前端组件元素生成系统还包括：
第二生成器，用于当所述放置器在所述前端页面区放置所述前端组件元素时，在所述前端工具区生成所述前端组件元素对应的代码编辑区；
第三生成器，用于在所述组件方法选项区，生成所述代码编辑区中的代码对应的编辑方法选项；
第三拖曳监测器，用于对生成在所述组件方法选项区的编辑方法选项进行拖曳操作行为的监测；
第三拖曳器，用于当所述第三拖曳监测器监测到用户针对所述编辑方法选项的释放鼠标行为操作，结束所述编辑方法选项的拖拽操作；
第二封装器，用于当第三拖曳器结束所述编辑方法选项的拖曳操作时的第三鼠标位置处于所述前端组件元素中，将所述编辑方法选项对应的功能封装至所述前端组件元素。
3.如权利要求2所述的前端组件元素生成系统，其特征在于，所述前端组件元素生成系统还包括：
第四生成器，用于当所述放置器在所述前端页面区放置所述前端组件元素时，在所述前端工具区生成所述前端组件元素对应的属性设置区，所述属性设置区包含有所述前端组件元素对应的属性设置选项。
4.如权利要求3所述的前端组件元素生成系统，其特征在于，所述编程界面还包括消息区，所述前端组件元素生成系统还包括消息弹出器，所述消息弹出器用于：
用于当所述第一拖曳器结束所述前端组件元素的拖拽操作时的第一鼠标位置未处于所述前端页面区中，则在所述消息区弹出包含有预设组件拖曳失败消息的提示框；
当所述第二拖曳器结束所述预设方法选项的拖曳操作时的第二鼠标位置未处于所述前端组件元素中，则在所述消息区弹出预设方法选项拖曳失败消息的提示框；
当所述第三拖曳器结束所述编辑方法选项的拖曳操作时的第三鼠标位置未处于所述前端组件元素中，则在所述消息区弹出编辑方法选项拖曳失败消息的提示框。
5.如权利要求4所述的前端组件元素生成系统，其特征在于，所述前端组件元素生成系统的每个前端组件元素对应的组件方法选项区中，预设有预设方法选项区以及编辑方法选项区；
其中，所述预设方法选项区设置有所述预设方法选项，所述编辑方法选项区预设有自定义的所述编辑方法选项。
6.如权利要求1所述的前端组件元素生成系统，其特征在于，所述前端组件区中的前端组件元素包括但不局限于：载入组件、过场动画组件、按钮组件、列表组件。
7.一种前端组件元素生成方法，应用于前端组件元素生成系统中，所述前端组件元素生成系统包含编程界面，所述编程界面包含前端组件区、前端页面区和前端工具区，其中，所述组件中包含有前端组件元素，其特征在于，包括：
对设置在前端组件区中的前端组件元素进行拖拽操作行为的监测；
当监测到用户针对所述前端组件元素的释放鼠标行为操作，结束所述前端组件元素的拖拽操作；
当结束所述前端组件元素的拖拽操作时的第一鼠标位置处于所述前端页面区中，在所述第一鼠标位置放置所述前端组件元素；
当在所述前端页面区放置所述前端组件元素时，在所述前端工具区生成所述前端组件元素对应的组件方法选项区，所述组件方法选项区有所述前端组件元素对应的方法选项；
对设置在所述组件方法选项区的方法选项进行拖曳操作行为的监测；
当监测到用户针对所述方法选项的释放鼠标行为操作，结束所述方法选项的拖拽操作；
当结束所述方法选项的拖曳操作时的第二鼠标位置处于所述前端组件元素中，将所述方法选项对应的功能封装至所述前端组件元素。
8.如权利要求7所述的前端组件元素生成方法，其特征在于，所述方法还包括：
当在所述前端页面区放置所述前端组件元素时，在所述前端工具区生成所述前端组件元素对应的代码编辑区；
在所述组件方法选项区，生成所述代码编辑区中的代码对应的编辑方法选项；
对生成在所述组件方法选项区的编辑方法选项进行拖曳操作行为的监测；
当监测到用户针对所述编辑方法选项的释放鼠标行为操作，结束所述编辑方法选项的拖拽操作；
当结束所述编辑方法选项的拖曳操作时的第三鼠标位置处于所述前端组件元素中，将所述编辑方法选项对应的功能封装至所述前端组件元素。
9.一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求7或8所述的方法的步骤。
10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求7或8所述的方法步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811536541.0A CN109766096A (zh) | 2018-12-15 | 2018-12-15 | 前端组件元素生成系统、方法、计算机设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811536541.0A CN109766096A (zh) | 2018-12-15 | 2018-12-15 | 前端组件元素生成系统、方法、计算机设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109766096A true CN109766096A (zh) | 2019-05-17 |
Family
ID=66451865
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811536541.0A Pending CN109766096A (zh) | 2018-12-15 | 2018-12-15 | 前端组件元素生成系统、方法、计算机设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109766096A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115268733A (zh) * | 2022-07-29 | 2022-11-01 | 京东方科技集团股份有限公司 | H5页面交互和编辑的方法与设备、计算机可读介质 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102270125A (zh) * | 2010-06-04 | 2011-12-07 | 中兴通讯股份有限公司 | Web应用的开发装置及其开发方法 |
| CN105786846A (zh) * | 2014-12-24 | 2016-07-20 | 常熟市顺网网络技术服务有限公司 | 一种可自定义生成模块的网站平台组件 |
| CN105786505A (zh) * | 2016-02-26 | 2016-07-20 | 上海全成通信技术有限公司 | 一种基于json的复杂web页面组件自定义方法及装置 |
| CN107798084A (zh) * | 2017-10-17 | 2018-03-13 | 广东广业开元科技有限公司 | 一种web前端页面的可视化编辑生成系统及装置 |
-
2018
- 2018-12-15 CN CN201811536541.0A patent/CN109766096A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102270125A (zh) * | 2010-06-04 | 2011-12-07 | 中兴通讯股份有限公司 | Web应用的开发装置及其开发方法 |
| CN105786846A (zh) * | 2014-12-24 | 2016-07-20 | 常熟市顺网网络技术服务有限公司 | 一种可自定义生成模块的网站平台组件 |
| CN105786505A (zh) * | 2016-02-26 | 2016-07-20 | 上海全成通信技术有限公司 | 一种基于json的复杂web页面组件自定义方法及装置 |
| CN107798084A (zh) * | 2017-10-17 | 2018-03-13 | 广东广业开元科技有限公司 | 一种web前端页面的可视化编辑生成系统及装置 |
Non-Patent Citations (1)
| Title |
|---|
| 安浪科技: "Bootstrap在线布局教程", 《HTTPS://V.QQ.COM/X/PAGE/M0300Q8T042.HTML》 * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115268733A (zh) * | 2022-07-29 | 2022-11-01 | 京东方科技集团股份有限公司 | H5页面交互和编辑的方法与设备、计算机可读介质 |
| WO2024022063A1 (zh) * | 2022-07-29 | 2024-02-01 | 京东方科技集团股份有限公司 | H5页面交互和编辑的方法与设备、计算机可读介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10382386B2 (en) | Functional webpage testing tool | |
| JP2012508934A5 (zh) | ||
| WO2015048601A1 (en) | Context aware user interface parts | |
| CN104679488A (zh) | 一种流程定制开发平台及流程定制开发方法 | |
| CN104536744A (zh) | 一种自动化构建与部署代码的方法及服务器 | |
| CN105068815A (zh) | 页面编辑器交互装置和方法 | |
| US20210256474A1 (en) | Computer implemented methods and systems for project management | |
| US20170192877A1 (en) | Mobile application development and deployment | |
| US20080028328A1 (en) | System and method to dynamically change object data patterns | |
| JP5362736B2 (ja) | 論理構造デザイン・サーフェス | |
| US20100050153A1 (en) | Method and system of editing workflow logic and screens with a gui tool | |
| Kessin | Programming HTML5 applications: building powerful cross-platform environments in JavaScript | |
| CN105808226A (zh) | 实验工作流的生成方法及系统 | |
| CN109960491A (zh) | 应用程序生成方法、生成装置、电子设备及存储介质 | |
| CN109766096A (zh) | 前端组件元素生成系统、方法、计算机设备及存储介质 | |
| JP7259949B2 (ja) | テストスクリプト生成装置、テストスクリプト生成方法及びプログラム | |
| CN111538500A (zh) | 一种可视化修改菜单的方法和系统 | |
| CN104166551A (zh) | 一种应用接口开发方法和开发装置 | |
| US8510651B1 (en) | Page editing and trial of network site | |
| CN117215556A (zh) | 模块化的页面快速构建方法、系统、设备及介质 | |
| CN112507268A (zh) | 一种网页图片热区配置方法、装置、设备及可读存储介质 | |
| US20130174013A1 (en) | Wiki monitoring and updating | |
| US20130227525A1 (en) | Delivery of Changesets by Environment | |
| CN103853747A (zh) | 一种声源网页的控制方法和装置 | |
| CN113485746B (zh) | 应用程序接口文档的生成方法及装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190517 |
|
| RJ01 | Rejection of invention patent application after publication |