CN116431124A - 一种基于web前端的模型管理方法及装置 - Google Patents

Abstract

本发明公开了一种针对WEB前端的模型管理方法及装置，所述方法应用于客户端；一具体实施方式包括：首先获取用户的业务需求，生成模型管理界面；其中，所述模型管理界面至少包括：控件区域以及画布编辑区域；所述控件区域至少包括一个控件；然后对所述控件区域内控件移动轨迹进行监控，得到监控结果；之后基于所述监控结果，在所述画布编辑区域创建与所述控件对应的目标模型；最后对所述目标模型执行与所述业务需求对应的运行操作，生成模型结果。由此，能够基于业务需求对模型进行可视化配置，并且在实际应用中不要求操作者拥有前端知识，也能够通过拖拽方式实现制作一套标准的前端页面，提高了用户体验性。

Description

一种基于WEB前端的模型管理方法及装置

技术领域

本发明属于计算机技术领域，尤其涉及一种基于WEB前端的模型管理方法及装置。

背景技术

随着办公自动化和电子商务的飞速发展，企业对信息***的依赖性越来越高，WEB前端担当着重要的角色。对于企业或行业应用来说，经常会利用WEB前端的***进行模型管理或数据处理等操作；然而用户在使用WEB前端进行模型管理或数据处理时，通常需要用户具备对应的编码基础知识。

对于不懂编码技术的运营岗来说，使用WEB前端进行模型管理或数据处理就显得尤为困难。为此，提供一种操作简单的可视化工具的应用就显得尤为重要。

发明内容

针对现有技术存在的上述问题，本发明实施例提供了一种基于WEB前端的模型管理方法及装置，能够基于业务需求对模型进行可视化配置，进而提高了用户的体验性。

根据本发明实施例第一方面提供一种针对WEB前端的模型管理方法，所述方法应用于客户端；包括：获取用户的业务需求，生成模型管理界面；其中，所述模型管理界面至少包括：控件区域以及画布编辑区域；所述控件区域至少包括一个控件；对所述控件区域内控件移动轨迹进行监控，得到监控结果；基于所述监控结果，在所述画布编辑区域创建与所述控件对应的目标模型；对所述目标模型执行与所述业务需求对应的运行操作，生成模型结果。

可选的，所述对所述控件区域内控件移动轨迹进行监控，得到监控结果，包括：基于所述控件区域内控件的拉取操作，创建与所述控件对应的临时层；基于所述控件的释放操作，监控所述临时层是否位于所述画布编辑区域，得到监控结果。

可选的，所述基于所述监控结果，在所述画布编辑区域创建与所述控件对应的目标模型，包括：根据监控结果，判断所述控件的移动终点是否位于所述画布编辑区域；若判断结果表征所述控件的移动终点位于所述画布编辑区域，则检测所述画布编辑区域是否存在局部控件；若检测结果表征所述画布编辑区域存在所述局部控件，则根据所述布局控件，在对应的画布编辑区域生成与所述控件对应的目标模型；若检测结果表征所述画布编辑区域不存在所述局部控件，则根据所述控件移动终点的位置信息，在对应的画布编辑区域生成与所述控件对应的目标模型。

可选的，所述基于所述监控结果，在所述画布编辑区域创建与所述控件对应的目标模型，还包括：若判断结果表征所述控件移动终点不位于所述画布编辑区域，则取消此次操作，并清除所述控件对应的临时层。

可选的，所述在对应的画布编辑区域生成与所述控件对应的目标模型，包括：获取与所述控件对应的页面信息及数据信息；其中，所述数据信息用于指示与所述控件相关的数据表；将与所述控件对应的页面信息及数据信息记录在所述临时层；通过所述临时层将所述控件对应的页面信息及数据信息渲染成与所述控件对应的目标模型。

可选的，所述数据信息通过如下方法得到，具体包括：基于用户针对控件的监控请求，创建与所述控件对应的内存表；其中，所述内存表用于存储针对所述控件的操作数据；基于用户对所述控件的操作触发，更新所述内存表中的操作数据，得到更新后操作数据；对所述更新后操作数据进行检测；若检测结果表征所述更新后操作数据满足预设条件，则将所述更新后操作数据确定为所述控件对应的数据信息。

可选的，所述模型管理界面还包括：工具操作区域；所述工具操作区域至少包括预览选项；所述的方法还包括：基于所述工具操作区域中所述预览选项的触发，创建浮动于WEB前端网页上的展示层；从所述画布编辑区域中获取所有目标模型对应的页面信息及数据信息；针对任一所述目标模型：通过展现层将所述目标模型对应的页面信息及数据信息进行重新渲染并展示。

可选的，所述对所述目标模型执行与所述业务需求对应的运行操作，生成模型结果，包括：获取与所述业务需求对应的业务数据；基于所述业务数据配置所述目标模型；对所述目标模型执行与所述业务需求对应的运行操作，生成模型结果。

根据本发明实施例第二方面，还提供一种针对WEB前端的模型管理装置，所述装置应用于客户端；包括：获取模块，用于获取用户的业务需求，生成模型管理界面；其中，所述模型管理界面至少包括：控件区域以及画布编辑区域；所述控件区域至少包括一个控件；监控模块，用于对所述控件区域内控件移动轨迹进行监控，得到监控结果；创建模块，用于基于所述监控结果，在所述画布编辑区域创建与所述控件对应的目标模型；运行模块，用于对所述目标模型执行与所述业务需求对应的运行操作，生成模型结果。

根据本发明实施例第三方面，还提供一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现如第一方面所述的方法。

本发明实施例提供一种针对WEB前端的模型管理方法及装置，所述方法应用于客户端；一具体实施方式包括：首先获取用户的业务需求，生成模型管理界面；其中，所述模型管理界面至少包括：控件区域以及画布编辑区域；所述控件区域至少包括一个控件；然后对所述控件区域内控件移动轨迹进行监控，得到监控结果；之后基于所述监控结果，在所述画布编辑区域创建与所述控件对应的目标模型；最后对所述目标模型执行与所述业务需求对应的运行操作，生成模型结果。由此，能够基于业务需求对模型进行可视化配置，并且在实际应用中不要求操作者拥有前端知识，也能够通过拖拽方式实现制作一套标准的前端页面，提高了用户体验性。

附图说明

后文将参照附图以示例性而非限制性的方式详细描述本发明的一些具体实施例。附图中相同的附图标记标示了相同或类似的部件或部分。本领域技术人员应该理解，这些附图未必是按比例绘制的。附图中：

图1为本发明一实施例提供的针对WEB前端的模型管理方法的流程示意图；

图2为本发明另一实施例提供的针对WEB前端的模型管理方法的流程示意图；

图3为本发明应用实施例提供的决策树模块的结构示意图；

图4为本发明应用实施例提供的决策表模块的结构示意图；

图5为本发明应用实施例提供的规则集模块的结构示意图；

图6为本发明一实施例提供的针对WEB前端的模型管理装置的结构示意图。

具体实施方式

为使本发明的目的、特征、优点能够更加的明显和易懂，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而非全部实施例。基于本发明中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

如图1所示，为本发明一实施例提供的针对WEB前端的模型管理方法的流程示意图。

一种针对WEB前端的模型管理方法，所述方法应用于客户端；至少包括如下步骤：

S101，获取用户的业务需求，生成模型管理界面；其中，模型管理界面至少包括：控件区域以及画布编辑区域；控件区域至少包括一个控件；

S102，对控件区域内控件移动轨迹进行监控，得到监控结果；

S103，基于监控结果，在画布编辑区域创建与控件对应的目标模型；

S104，对目标模型执行与业务需求对应的运行操作，生成模型结果。

在S101中，WEB前端的模型管理界面是基于Vue.js开发，通过使用Vue.js组件来编写模型管理界面，模型管理界面中左侧设为控件区域，右侧设为画布编辑区域，顶部设为工具操作区域。

对于模型管理界面中每个模块，其各司其职。例如：工具操作区域主要是常用工具的集中摆放位置，所述常用工具包括但不限于有编辑模式、预览效果、保存编辑、清空代码、撤销等操作；控件区域主要是摆放控件的操作按钮，也是拖拽交互的开始点；画布编辑区域则是核心的操作区域，负责代码可视化渲染及代码存储等功能。

用户可以通过不同的模型，制作一个统一规范的自定义模型，具体分为四类。

一、布局控件

用于分割画布编辑区域，使用flex栅格进行布局设置；

二、基础控件

主要包含标题、段落、链接、path、以及svg相关的属性；

三、交互控件

主要包含提示弹窗、控件连线、控件子元素展开；

四、数据流控件

主要包含决策树、决策表、规则集展示。

在S102中，所述对所述控件区域内控件移动轨迹进行监控，得到监控结果；包括：基于所述控件区域内控件的拉取操作，创建与所述控件对应的临时层；基于所述控件的释放操作，监控所述临时层是否位于所述画布编辑区域，得到监控结果。

例如：不同的模型管理***会渲染不同的层级页面，在画布编辑区域内建立基本元素的按钮列表，并给控件区域中所有的按钮元素绑定拖拽监听行为，当在控件区域的按钮元素被用户进行拖拽操作时，即在控件区域的按钮元素被鼠标点击，并且点击后不释放鼠标操作的同时进行拖动，就新建一个相对应的浮动于网页上层的临时层。也就是说，当监听到按钮元素被进行拖拽操作时，就新建一个与被拖拽的按钮元素相对应的临时层。

本实施例通过扩充插件的方式，让编辑内容以及样式变得更广泛，可以自由组合出任意的需求页面；通过页面源码渲染浮动临时层的方式可以让用户在拖拽控件的时候，清晰知道操作正对哪一个多媒体插件进行操作，增强操作的精确性。

在S103中，所述基于所述监控结果，在所述画布编辑区域创建与所述控件对应的目标模型，包括：根据监控结果，判断所述控件的移动终点是否位于所述画布编辑区域；若判断结果表征所述控件的移动终点位于所述画布编辑区域，则检测所述画布编辑区域是否存在局部控件；若检测结果表征所述画布编辑区域存在所述局部控件，则根据所述布局控件，在对应的画布编辑区域生成与所述控件对应的目标模型；若检测结果表征所述画布编辑区域不存在所述局部控件，则根据所述控件移动终点的位置信息，在对应的画布编辑区域生成与所述控件对应的目标模型。

例如：监听拖动行为，当监听到释放鼠标行为操作时，当前鼠标位置不处于合法的画布编辑区域，那么则取消此次操作，并清除临时层；若释放时，则当前鼠标位置处于合法的画布编辑区域，那么则判断画布编辑区域中是否存有布局控件，以及判断临时层所存储的自定义控件。

对于所述根据判断结果，执行对应的处理这一步骤，其具体包括以下步骤：当画布编辑区中没有存有布局控件，则在控件移动终点所对应的画布编辑区中渲染与控件对应的目标模型；当画布编辑区中存有布局控件，则在与局部控件对应的画布编辑区域生成与控件对应的目标模型。

需要说明的是，对于渲染这一行为，其主要处理两个事情：

1、获取临时层中所存储的控件代码，并将临时层中所存储的控件代码按照统一的规范格式，在画布编辑区中添加、渲染，然后初始化该控件所对应的目标模型。

2、记录本次操作行为，并将操作数据存储到本地缓存或者上传到远程服务器，用于恢复操作以及重新渲染编辑好的目标模型。

优选地，所述在对应的画布编辑区域生成与所述控件对应的目标模型，包括：获取与所述控件对应的页面信息及数据信息；其中，所述数据信息用于指示与所述控件相关的数据表；将与所述控件对应的页面信息及数据信息记录在所述临时层；通过所述临时层将所述控件对应的页面信息及数据信息渲染成与所述控件对应的目标模型。

例如：对于上述的临时层，其存储了被拖拽的按钮元素所对应的控件的页面信息及数据信息，临时层则可根据控件的页面信息及数据信息及时在网页上渲染出对应的控件插件效果，而且临时层是跟随用户的鼠标移动轨迹进行移动，这样能够及时将鼠标拖拽轨迹展现给用户，同时记录当前鼠标位置给接下来释放鼠标行为操作做判断。当临时层处于合法的画布编辑区域以及监听到用户的释放鼠标行为操作时，则根据临时层中所存储的内容，按照预设的规范，在画布编辑区域生成与被拖拽的按钮元素对应的控件的代码，并实时渲染在画布编辑区域上。也就是说，当监听到用户的释放鼠标行为操作时，根据当前鼠标位置，即当前鼠标的坐标位置，执行相对应的处理这一步骤，其具体包括:当前鼠标位置处于合法的画布编辑区域时，则在画布编辑区域生成与被拖拽的按钮元素对应的控件的代码，并实时渲染在画布编辑区域上，生成与控件对应的目标模型；反之，则取消此次操作，并清除临时层。

更优选地，所述获取与所述控件对应的数据信息，包括：基于用户针对控件的监控请求，创建与所述控件对应的内存表；其中，所述内存表用于存储针对所述控件的操作数据；基于用户对所述控件的操作触发，更新所述内存表中的操作数据，得到更新后操作数据；对所述更新后操作数据进行检测；若检测结果表征所述更新后操作数据满足预设条件，则将所述更新后操作数据确定为所述控件对应的数据信息。

例如：决策表主要是给用户提供集合的模型计算方式，通过可视化的方式来便捷输入模型。在用户操作区域，使用鼠标右键，***对鼠标行为进行监控，弹出菜单元素后，***会在内部创建一个内存表，当用户按下鼠标左键或滑动轨迹，会对鼠标滑动行为进行监控，更新内存表，执行新建模型子元素的指令，同时向下追加一列内存表数据。模型管理***会对内存表中的数据结构进行检测，如符合要求，则更新模型并同步通知用户。不符合则清空上一次鼠标操作数据。

用户可根据鼠标右键，下拉菜单进行数据操作，在鼠标指向当前行指定最佳若干列的数据，当检测到控件进入画布编辑区域时，创建画布编辑区域临时层并判断控件内部数据结构是否符合要求，然后执行对应的画布展示操作。

在S104中，获取与所述业务需求对应的业务数据；基于所述业务数据配置所述目标模型；对所述目标模型执行与所述业务需求对应的运行操作，生成模型结果。

例如：用户可通过链接数据库的方式，直接将数据导入过来，***能自动识别用户配置的数据源。通过逻辑拿到所需要的数据源，将数据源进行整合后进入模型管理***进行计算，计算完成为用户导出模型结果。

本发明实施例采用模型管理***已定义的各种多媒体元素操作控件，通过拖拽的操作方式或源码编辑的方式对web前端多媒体元素进行编辑，实现UI、代码统一规范的管理，便利了用户的自定义编辑操作；并且在实际应用中不要求操作者拥有前端知识，也能通过拖拽方式实现制作一套标准的前端页面，提高了用户的体验性。

如图2所示，为本发明另一实施例提供的针对WEB前端的模型管理方法的流程示意图。

一种针对WEB前端的模型管理方法，所述方法应用于客户端；至少包括如下步骤：

S201，获取用户的业务需求，生成模型管理界面；其中，模型管理界面至少包括：控件区域、画布编辑区域以及工具操作区域；控件区域至少包括一个控件；工具操作区域至少包括预览选项；

S202，对控件区域内控件移动轨迹进行监控，得到监控结果；

S203，基于监控结果，在画布编辑区域创建与控件对应的目标模型；

S204，基于工具操作区域中预览选项的触发，创建浮动于WEB前端网页上的展示层；

S205，从画布编辑区域中获取所有目标模型对应的页面信息及数据信息；

S206，针对任一目标模型：通过展现层将目标模型对应的页面信息及数据信息进行重新渲染并展示；

S207，对目标模型执行与业务需求对应的运行操作，生成模型结果。

例如，每次一数据拖动控件都会被监控，并判断是否成功，成功则存储操作至本地缓存，无需担心数据丢失的问题，当编辑完成后，点击工具操作区域的预览按钮，此时则会新建一个浮动于网页上层的展示层，将画布编辑区域中的所有代码及数据重新渲染，并展现给用户看。展示层的具体效果就是用户将编辑好的web前端网页具体应用到其它地方的效果。并且，用户可以通过操作工具操作区域的应用按钮，从而将编辑好的页面所对应的具体的代码直接复制到计算机的剪贴板上，这样用户便可以直接通过iframe应用或者直接在html上应用到具体成品。

本实施例不仅针对布局的应用，还能细化到具体html的各种多媒体元素的混合编排使用，操作灵活性高，并且能达到用户自由自定义web前端页面的编辑制作，满足不同用户的需求，适用性强，能利于web前端页面编辑设计技术的推广及普及应用。而且本实施例开放式控件自定义的方法，可以由用户自定义保存并应用更多类型的控件，不局限默认提供的控件，操作灵活性强。

下面结合具体应用对本申请上述方法进行详细说明。

一种针对WEB前端的模型管理方法，所述方法应用于客户端；具体包括如下步骤：

获取用户的业务需求，生成模型管理界面；其中，所述模型管理界面至少包括：控件区域、画布编辑区域以及工具操作区域；所述控件区域至少包括一个控件；所述工具操作区域至少包括预览选项。

基于所述控件区域内控件的拉取操作，创建与所述控件对应的临时层；基于所述控件的释放操作，监控所述临时层是否位于所述画布编辑区域，得到监控结果。根据监控结果，判断所述控件的移动终点是否位于所述画布编辑区域；若判断结果表征所述控件移动终点不位于所述画布编辑区域，则取消此次操作，并清除所述控件对应的临时层；若判断结果表征所述控件的移动终点位于所述画布编辑区域，则检测所述画布编辑区域是否存在局部控件；若检测结果表征所述画布编辑区域存在所述局部控件，则根据所述布局控件，则获取与所述控件对应的页面信息及数据信息；将与所述控件对应的页面信息及数据信息记录在所述临时层；通过所述临时层将所述控件对应的页面信息及数据信息渲染成与所述控件对应的目标模型；若检测结果表征所述画布编辑区域不存在所述局部控件，则根据所述控件移动终点的位置信息，则获取与所述控件对应的页面信息及数据信息；将与所述控件对应的页面信息及数据信息记录在所述临时层；通过所述临时层将所述控件对应的页面信息及数据信息渲染成与所述控件对应的目标模型。

基于所述工具操作区域中所述预览选项的触发，创建浮动于WEB前端网页上的展示层；从所述画布编辑区域中获取所有目标模型对应的页面信息及数据信息；针对任一所述目标模型：通过展现层将所述目标模型对应的页面信息及数据信息进行重新渲染并展示；

获取与所述业务需求对应的业务数据；基于所述业务数据配置所述目标模型；对所述目标模型执行与所述业务需求对应的运行操作，生成模型结果。

上述数据信息通过如下方法得到，具体包括：基于用户针对控件的监控请求，创建与所述控件对应的内存表；其中是，所述内存表用于存储针对所述控件的操作数据；基于用户对所述控件的操作触发，更新所述内存表中的操作数据，得到更新后操作数据；对所述更新后操作数据进行检测；若检测结果表征所述更新后操作数据满足预设条件，则将所述更新后操作数据确定为所述控件对应的数据信息。

需要说明的是，在未生成目标模型时，所述数据信息主要是控件对应的原始数据信息。目标模型对应的数据信息除了包括原始数据信息，还包括对目标模型配置的业务数据。

例如：模型管理***包括决策树模块、决策表模块和规则集模块。

如图3所示，为本发明应用实施例提供的决策树模块的结构示意图；如图4所示，为本发明应用实施例提供的决策表模块的结构示意图；如图5所示，为本发明应用实施例提供的规则集模块的结构示意图。

决策树模块中用户可根据业务定制相关的控件，定制完成后，***会监听控件区域的控件。当监听到按钮元素被拖拽操作时，新建与被拖拽的按钮元素相对应的临时层；当监听到释放鼠标行为操作时，则根据当前鼠标位置，执行相对应的处理；其中，记录鼠标移动轨迹，并存储被拖动控件所对应的控件的页面信息及数据信息；根据控件的页面信息及数据信息，渲染出对应的业务流效果。当释放鼠标行为操作时，会根据当前鼠标的位置执行对应的处理逻辑。步骤如下：当监听到释放鼠标行为操作时，判断当前鼠标位置是否处于合法的画布编辑区域中，若是，则按照预设的规范，在画布编辑区域生成与被拖拽的按钮元素相对应的控件代码，并渲染在画布编辑区域上，以及自动构建出对应的目标模型；反之，则取消操作，并清除临时层。

决策表模块主要是给用户提供集合的模型计算方式，通过可视化的方式来便捷输入模型。在用户操作区域，使用鼠标右键，***对鼠标行为进行监控，弹出菜单元素后，***会在内部创建一个内存表，当用户按下鼠标左键或滑动轨迹，会对鼠标滑动行为进行监控，更新内存表，执行新建模型子元素的指令，同时向下追加一列内存表数据。模型管理***会对内存表中的数据结构进行检测，如符合要求，则更新模型并同步通知用户。不符合则清空上一次鼠标操作数据。用户可根据鼠标右键，下拉菜单进行数据操作，在鼠标指向当前行指定最佳若干列的数据，当检测到控件进入画布区域时，创建临时层并判断控件内部数据结构是否符合要求，然后在画布编辑区域执行对应的展示操作。

规则集模块用于多条模型规则的并、串联，通过源数据进行不同是模型计算得出结果。用户对单条规则可进行操作，鼠标左键添加下一条规则，***会对用户点击操作进行监控，捕获操作轨迹，通过WEB事件操作DOM的逻辑，把模型底层的并联逻辑进行整合。所述操作行为监听控制器还用于根据被拖拽的按钮元素所对应的控件的id号，获取对应的控件的页面信息及数据信息，并将获取得到的多媒体控件的页面信息及数据信息复制至临时层中；其中，一个控件对应唯一一个id号。所述临时层为一个浮动于网页上层的临时层。所述控件的类型包括有布局控件、基本控件、交互组件及拓展组用户可根据工具操作区对画布区进行保存操作，将画布编辑区中的所有代码存储到本地存储或远程服务中，远程服务器只存在控件节点数据，用户设置数据则存储在本地，***通过本地数据进行运算，最终对用户数据模型结果，可对进行保存导出已经存放远程服务器内。

本发明实施例模型管理***通过可视化驱动的方式实现对数据的解析及图形的配置，包括数据配置模型和可视化配置模型；其中可视化模型细分为：决策树、决策表、规则集。所述数据配置模型接收原始数据并对原始数据进行处理，解析出数据各维度的元数据结构，给用户不同层次的最终结果；所述的模型数据源作为输入，选择相应的可视化图形，完成配置项后最终输出可视化结果。用于解决不同决策模型的需求，能根据用户需求定制不同的***的模型平台。

如图6所示，为本发明一实施例提供的针对WEB前端的模型管理装置的结构示意图。

一种针对WEB前端的模型管理装置，所述装置600应用于客户端；包括：第一获取模块601，用于获取用户的业务需求，生成模型管理界面；其中，所述模型管理界面至少包括：控件区域以及画布编辑区域；所述控件区域至少包括一个控件；监控模块602，用于对所述控件区域内控件移动轨迹进行监控，得到监控结果；第一创建模块603，用于基于所述监控结果，在所述画布编辑区域创建与所述控件对应的目标模型；运行模块604，用于对所述目标模型执行与所述业务需求对应的运行操作，生成模型结果。

在可选的实施方式中，监控模块包括：创建单元，用于基于所述控件区域内控件的拉取操作，创建与所述控件对应的临时层；监控单元，用于基于所述控件的释放操作，监控所述临时层是否位于所述画布编辑区域，得到监控结果。

在可选的实施方式中，第一创建模块包括：判断单元，用于根据监控结果，判断所述控件的移动终点是否位于所述画布编辑区域；检测单元，用于若判断结果表征所述控件的移动终点位于所述画布编辑区域，则检测所述画布编辑区域是否存在局部控件；第一生成单元，用于若检测结果表征所述画布编辑区域存在所述局部控件，则根据所述布局控件，在对应的画布编辑区域生成与所述控件对应的目标模型；第二生成单元，用于若检测结果表征所述画布编辑区域不存在所述局部控件，则根据所述控件移动终点的位置信息，在对应的画布编辑区域生成与所述控件对应的目标模型。

在可选的实施方式中，第一创建模块还包括：取消单元，用于若判断结果表征所述控件移动终点不位于所述画布编辑区域，则取消此次操作，并清除所述控件对应的临时层。

在可选的实施方式中，第一生成单元包括：获取子单元，用于获取与所述控件对应的页面信息及数据信息；其中，所述数据信息用于指示与所述控件相关的数据表；记录子单元，用于将与所述控件对应的页面信息及数据信息记录在所述临时层；渲染子单元，用于通过所述临时层将所述控件对应的页面信息及数据信息渲染成与所述控件对应的目标模型。

在可选的实施方式中，所述数据信息通过如下方法得到，具体包括：基于用户针对控件的监控请求，创建与所述控件对应的内存表；其中是，所述内存表用于存储针对所述控件的操作数据；基于用户对所述控件的操作触发，更新所述内存表中的操作数据，得到更新后操作数据；对所述更新后操作数据进行检测；若检测结果表征所述更新后操作数据满足预设条件，则将所述更新后操作数据确定为所述控件对应的数据信息。

在可选的实施方式中，所述模型管理界面还包括：工具操作区域；所述工具操作区域至少包括预览选项；所述装置还包括：第二创建模块，用于基于所述工具操作区域中所述预览选项的触发，创建浮动于WEB前端网页上的展示层；第二获取模块，用于从所述画布编辑区域中获取所有目标模型对应的页面信息及数据信息；展示模块，用于针对任一所述目标模型：通过展现层将所述目标模型对应的页面信息及数据信息进行重新渲染并展示。

在可选的实施方式中，运行模块包括：获取单元，用于获取与所述业务需求对应的业务数据；配置单元，用于基于所述业务数据配置所述目标模型；生成单元，用于对所述目标模型执行与所述业务需求对应的运行操作，生成模型结果。

上述装置可执行本发明另一实施例所提供的针对WEB前端的模型管理方法，具备执行针对WEB前端的模型管理方法相应的功能模块和有益效果。未在本实施例中详尽描述的技术细节，可参见本发明另一实施例所提供的针对WEB前端的模型管理方法。

本发明还提供一种电子设备，包括：处理器；用于存储所述处理器可执行指令的存储器；所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述指令以实现本发明所述的针对WEB前端的模型管理方法。

除了上述方法和设备以外，本申请的实施例还可以是计算机程序产品，其包括计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本说明书上述“示例性方法”部分中描述的根据本申请各种实施例的方法中的步骤。

所述计算机程序产品可以以一种或多种程序设计语言的任意组合来编写用于执行本申请实施例操作的程序代码，所述程序设计语言包括面向对象的程序设计语言，诸如Java、C++等，还包括常规的过程式程序设计语言，诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。

此外，本申请的实施例还可以是计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本说明书上述“示例性方法”部分中描述的根据本申请如下各实施例的方法中的步骤。

所述计算机可读存储介质可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以包括但不限于电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

以上结合具体实施例描述了本申请的基本原理，但是，需要指出的是，在本申请中提及的优点、优势、效果等仅是示例而非限制，不能认为这些优点、优势、效果等是本申请的各个实施例必须具备的。另外，上述公开的具体细节仅是为了示例的作用和便于理解的作用，而非限制，上述细节并不限制本申请为必须采用上述具体的细节来实现。

本申请中涉及的器件、装置、设备、***的方框图仅作为例示性的例子并且不意图要求或暗示必须按照方框图示出的方式进行连接、布置、配置。如本领域技术人员将认识到的，可以按任意方式连接、布置、配置这些器件、装置、设备、***。诸如“包括”、“包含”、“具有”等等的词语是开放性词汇，指“包括但不限于”，且可与其互换使用。这里所使用的词汇“或”和“和”指词汇“和/或”，且可与其互换使用，除非上下文明确指示不是如此。这里所使用的词汇“诸如”指词组“如但不限于”，且可与其互换使用。

还需要指出的是，在本申请的装置、设备和方法中，各部件或各步骤是可以分解和/或重新组合的。这些分解和/或重新组合应视为本申请的等效方案。

提供所公开的方面的以上描述以使本领域的任何技术人员能够做出或者使用本申请。对这些方面的各种修改对于本领域技术人员而言是非常显而易见的，并且在此定义的一般原理可以应用于其他方面而不脱离本申请的范围。因此，本申请不意图被限制到在此示出的方面，而是按照与在此公开的原理和新颖的特征一致的最宽范围。

为了例示和描述的目的已经给出了以上描述。此外，此描述不意图将本申请的实施例限制到在此公开的形式。尽管以上已经讨论了多个示例方面和实施例，但是本领域技术人员将认识到其某些变型、修改、改变、添加和子组合。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或隐含地包括至少一个该特征。在本发明的描述中，“多个”的含义是两个或两个以上，除非另有明确具体的限定。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。

Claims (10)

1.一种针对WEB前端的模型管理方法，其特征在于，所述方法应用于客户端；

获取用户的业务需求，生成模型管理界面；其中，所述模型管理界面至少包括：控件区域以及画布编辑区域；所述控件区域至少包括一个控件；

对所述控件区域内控件移动轨迹进行监控，得到监控结果；

基于所述监控结果，在所述画布编辑区域创建与所述控件对应的目标模型；

对所述目标模型执行与所述业务需求对应的运行操作，生成模型结果。

2.根据权利要求1所述的方法，其特征在于，所述对所述控件区域内控件移动轨迹进行监控，得到监控结果；包括：

基于所述控件区域内控件的拉取操作，创建与所述控件对应的临时层；

基于所述控件的释放操作，监控所述临时层是否位于所述画布编辑区域，得到监控结果。

3.根据权利要求1或2所述的方法，其特征在于，所述基于所述监控结果，在所述画布编辑区域创建与所述控件对应的目标模型，包括：

根据监控结果，判断所述控件的移动终点是否位于所述画布编辑区域；

若判断结果表征所述控件的移动终点位于所述画布编辑区域，则检测所述画布编辑区域是否存在局部控件；

若检测结果表征所述画布编辑区域存在所述局部控件，则根据所述布局控件，在对应的画布编辑区域生成与所述控件对应的目标模型；

若检测结果表征所述画布编辑区域不存在所述局部控件，则根据所述控件移动终点的位置信息，在对应的画布编辑区域生成与所述控件对应的目标模型。

4.根据权利要求3所述的方法，其特征在于，还包括：

若判断结果表征所述控件移动终点不位于所述画布编辑区域，则取消此次操作，并清除所述控件对应的临时层。

5.根据权利要求4所述的方法，其特征在于，所述在对应的画布编辑区域生成与所述控件对应的目标模型，包括：

获取与所述控件对应的页面信息及数据信息；其中，所述数据信息用于指示与所述控件相关的数据表；

将与所述控件对应的页面信息及数据信息记录在所述临时层；

通过所述临时层将所述控件对应的页面信息及数据信息渲染成与所述控件对应的目标模型。

6.根据权利要求5所述的方法，其特征在于，所述数据信息通过如下方法得到，具体包括：

基于用户针对控件的监控请求，创建与所述控件对应的内存表；其中，所述内存表用于存储针对所述控件的操作数据；

基于用户对所述控件的操作触发，更新所述内存表中的操作数据，得到更新后操作数据；

对所述更新后操作数据进行检测；

若检测结果表征所述更新后操作数据满足预设条件，则将所述更新后操作数据确定为所述控件对应的数据信息。

7.根据权利要求1所述的方法，其特征在于，所述模型管理界面还包括：工具操作区域；所述工具操作区域至少包括预览选项；

基于所述工具操作区域中所述预览选项的触发，创建浮动于WEB前端网页上的展示层；

从所述画布编辑区域中获取所有目标模型对应的页面信息及数据信息；

针对任一所述目标模型：通过展现层将所述目标模型对应的页面信息及数据信息进行重新渲染并展示。

8.根据权利要求1所述的方法，其特征在于，所述对所述目标模型执行与所述业务需求对应的运行操作，生成模型结果，包括：

获取与所述业务需求对应的业务数据；

基于所述业务数据配置所述目标模型；

对所述目标模型执行与所述业务需求对应的运行操作，生成模型结果。

9.一种针对WEB前端的模型管理装置，其特征在于，所述装置应用于客户端；

获取模块，用于获取用户的业务需求，生成模型管理界面；其中，所述模型管理界面至少包括：控件区域以及画布编辑区域；所述控件区域至少包括一个控件；

监控模块，用于对所述控件区域内控件移动轨迹进行监控，得到监控结果；

创建模块，用于基于所述监控结果，在所述画布编辑区域创建与所述控件对应的目标模型；

运行模块，用于对所述目标模型执行与所述业务需求对应的运行操作，生成模型结果。

10.一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现如权利要求1-8中任一项所述的方法。

Images