前端组件元素生成系统、方法、计算机设备及存储介质技术方案

本申请公开了一种前端组件元素生成系统、方法、计算机设备及存储介质，开发规范比较统一，有利于后续维护。其中，前端组件元素生成系统包括：编程界面，包含前端组件区、前端页面区和前端工具区；第一拖曳器用于当第一拖曳监测器监测到用户针对前端组件元素的释放鼠标行为操作，结束前端组件元素的拖拽操作；放置器用于当第一拖曳器结束前端组件元素的拖拽操作时的第一鼠标位置放置前端组件元素；第一生成器用于在前端工具区生成前端组件元素对应的组件方法选项区；第二拖曳器用于当第二拖曳监测器监测到用户针对预设方法选项的释放鼠标行为操作，结束预设方法选项的拖拽操作；第一封装器用于将预设方法选项对应的功能封装至前端组件元素。

【技术实现步骤摘要】
前端组件元素生成系统、方法、计算机设备及存储介质
本申请涉及研发辅助工具领域，尤其涉及一种前端组件元素生成系统、方法、计算机设备及存储介质。
技术介绍
可以理解，整个互联网是由无数网页组合而成的，而网页的本质就是超文本标记语言(HTML)。可以说，HTML正是互联网的基石。随着时代的发展，尤其是HTML5的正式发布后，互联网技术的更新迭代变得更加迅速。而用户对互联网的需求也越来越多，越来越多没有互联网开发基础的用户也需要制作特定的前端页面。然而，传统的万维网(WEB)前端页面开发模式需要掌握一定前端开发技能，例如html、层叠样式表(cascadingstylesheets，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生成前端组件元素对应的组件方法选项区，组件方法选项区有前端组件元素对应的预设方法选项；为了便于理解，这里以前端组件元素为按钮举例进行说明，可以理解按钮是一个前端组件元素，该按钮可以被用户点击，但是点击之后有什么反应，可以通过给前端组件元素生成系统出的行为进行选择，本申请将针对于按钮对应的行为成为按钮对应的预设方法选项，例如，按钮对应的预设方法选项包括但不局限于：选择了点击按钮播放一段动画；或者点击按钮跳转下一个页面；或者点击一下按钮消失等等，简单点来说，上述预设方法选项为具备实现某种功能的模块，而实现上述某种功能可由相应的代码所实本文档来自技高网...

【技术保护点】
1.一种前端组件元素生成系统，其特征在于，包括：编程界面，包含前端组件区、前端页面区和前端工具区，其中，所述前端组件区中包含有前端组件元素；第一拖曳监测器，用于对设置在前端组件区中的前端组件元素进行拖拽操作行的监测；第一拖曳器，用于当所述第一拖曳监测器监测到用户针对所述前端组件元素的释放鼠标行为操作，结束所述前端组件元素的拖拽操作；放置器，用于当所述第一拖曳器结束所述前端组件元素的拖拽操作时的第一鼠标位置处于所述前端页面区中，在所述第一鼠标位置放置所述前端组件元素；第一生成器，用于当所述放置器在所述前端页面区放置所述前端组件元素时，在所述前端工具区生成所述前端组件元素对应的组件方法选项区，所述组件方法选项区有所述前端组件元素对应的预设方法选项；第二拖曳监测器，用于对设置在所述组件方法选项区的预设方法选项进行拖曳操作行为的监测；第二拖曳器，用于当第二拖曳监测器监测到用户针对所述预设方法选项的释放鼠标行为操作，结束所述预设方法选项的拖拽操作；第一封装器，用于当所述第二拖曳器结束所述预设方法选项的拖曳操作时的第二鼠标位置处于所述前端组件元素中，将所述预设方法选项对应的功能封装至所述前端组件元素。...

【技术特征摘要】
1.一种前端组件元素生成系统，其特征在于，包括：编程界面，包含前端组件区、前端页面区和前端工具区，其中，所述前端组件区中包含有前端组件元素；第一拖曳监测器，用于对设置在前端组件区中的前端组件元素进行拖拽操作行的监测；第一拖曳器，用于当所述第一拖曳监测器监测到用户针对所述前端组件元素的释放鼠标行为操作，结束所述前端组件元素的拖拽操作；放置器，用于当所述第一拖曳器结束所述前端组件元素的拖拽操作时的第一鼠标位置处于所述前端页面区中，在所述第一鼠标位置放置所述前端组件元素；第一生成器，用于当所述放置器在所述前端页面区放置所述前端组件元素时，在所述前端工具区生成所述前端组件元素对应的组件方法选项区，所述组件方法选项区有所述前端组件元素对应的预设方法选项；第二拖曳监测器，用于对设置在所述组件方法选项区的预设方法选项进行拖曳操作行为的监测；第二拖曳器，用于当第二拖曳监测器监测到用户针对所述预设方法选项的释放鼠标行为操作，结束所述预设方法选项的拖拽操作；第一封装器，用于当所述第二拖曳器结束所述预设方法选项的拖曳操作时的第二鼠标位置处于所述前端组件元素中，将所述预设方法选项对应的功能封装至所述前端组件元素。2.如权利要求1所述的前端组件元素生成系统，其特征在于，所述前端组件元素生成系统还包括：第二生成器，用于当所述放置器在所述前端页面区放置所述前端组件元素时，在所述前端工具区生成所述前端组件元素对应的代码编辑区；第三生成器，用于在所述组件方法选项区，生成所述代码编辑区中的代码对应的编辑方法选项；第三拖曳监测器，用于对生成在所述组件方法选项区的编辑方法选项进行拖曳操作行为的监测；第三拖曳器，用于当所述第三拖曳监测器监测到用户针对所述编辑方法选项的释放鼠标行为操作，结束所述编辑方法选项的拖拽操作；第二封装器，用于当第三拖曳器结束所述编辑方法选项的拖曳操作时的第三鼠标位置处于所述前端组件元素中，将所述编辑方法选项对应的功能封装至所述前端组件元素。3.如权利要求2所述的前端组件元素生成系统，其特征在于，所述前端组件元素生成系统还包括：第四生成器，用于当所述放置器在所述前端页面区放置所述前端组件元素时，在所述前端工具区生成所述前端组件元素对应的属性设置区，所述属性设置区包含有所述前端组件元素对应的属性设置选项。4.如权利要求3所述的前端组件元素生成系统，其特征在于，所述编程界面还包括消息区，所述前端组件元素生成系统还包括消息弹出器，所述消息弹出器用于：用于当所述第一拖曳器结束所述前端组件元素的拖拽操作时的第一鼠标位置未处于所述前端页面区中，则在所述消息区弹出包含有预设组件拖曳失败消息的提示框；当所述第二拖曳器结束所述预设方法选项的拖曳操作时的第二鼠标位置未处于所述前端组件元素中...

【专利技术属性】
技术研发人员：奚超明，
申请(专利权)人：深圳壹账通智能科技有限公司，
类型：发明
国别省市：广东,44