CN115495068A - Vue页面生成方法及装置 - Google Patents

Abstract

本发明提供了一种VUE页面生成方法及装置，应用于服务器，服务器中存储有模板库和VUE组件库，模板库中包括多种页面模板，每种页面模板通过VUE组件库中的多种VUE组件拖拽生成；包括：根据页面配置需求，从模板库中提取页面配置需求对应的页面模板；基于页面配置需求，针对页面模板中的VUE组件进行拖拽调整，以对页面修改；将页面修改的结果确定为页面配置需求对应的目标VUE页面。所使用的VUE组件可以直接生成相应的代码，页面开发人员无需专业学习前端VUE知识，仅按照页面配置需求对应的UI展示对VUE组件可视化拖拽，就能快速生成VUE页面及代码，提高用户体验，降低开发的学习成本，缩短开发周期。

Description

VUE页面生成方法及装置

技术领域

本发明涉及页面处理技术领域，尤其涉及一种VUE页面生成方法及装置。

背景技术

随着技术的逐渐发展，前后端分离、前端框架的更新迭代，为了提供更好用户体验越来越多系统将前端页面由传统的JSP、HTML向angular和vue和react转换。传统jsp系统模式下，前端人员仅需将静态页面做出即可，页面动态数据渲染、调接口、业务逻辑编写后台开发人员均可完成，但随着前台技术的迭代，学习成本逐渐增加，部分开发团队中的后台开发人员已经不能再兼职开发前端页面，后端开发同事无法独自完成静态页面的动态渲染。同一个前端同事需负责多个需求，导致出现任务阻塞等问题，越来越多的团队需招聘大量的前端专职开发人员也造成了团队人员成本的增加。

近年来，低代码/无代码开发热潮又一次袭来，业界对“降本、增效、提质”的声音越来越强。低代码开发模式通常为组件化配置，如VUE为组件化配置之一，但组件化配置技术较为新颖，现有技术针对VUE组件的兼容性较差，对VUE支持不足，产品仅能生成html代码，无法转换为VUE代码，且，现有低代码开发模式通常使用普通html组件，而该组件拖拽位置不灵活，无法灵活生成所需的页面，基于上述技术缺陷，现有技术仍需前端专职开发人员进行页面开发，开发工作量大，无法快速得到所需页面。

发明内容

有鉴于此，本发明的目的在于提供一种VUE页面生成方法及装置，能够简便快捷地生成所需页面。

第一方面，本发明实施例提供了一种VUE页面生成方法，该方法应用于服务器，服务器中存储有模板库和VUE组件库，VUE组件库包括拖拽组件，以及与拖拽组件封装的多种VUE组件，模板库中包括多种页面模板，每种页面模板通过VUE组件库中的多种VUE组件拖拽生成；方法包括：获取预设的页面配置需求；根据页面配置需求，从模板库中提取页面配置需求对应的页面模板；基于页面配置需求，针对页面模板中的VUE组件进行拖拽调整，以对页面修改；将页面修改的结果确定为页面配置需求对应的目标VUE页面。

结合第一方面，本发明实施例提供了第一方面的第一种可能的实施方式，其中，页面配置需求包括VUE组件需求和页面布局需求；基于页面配置需求，针对页面模板中的VUE组件进行拖拽调整，以对页面修改的步骤，包括：针对页面配置需求中的VUE组件需求和页面模板中的VUE组件，从VUE组件库中获取目标VUE组件；其中，目标VUE组件包括未在页面模板中展示的VUE组件；将目标VUE组件载入页面模板中，并根据页面布局需求，拖拽目标VUE组件的位置，以对页面模板的页面布局进行调整。

结合第一方面，本发明实施例提供了第一方面的第二种可能的实施方式，其中，页面布局需求包括预设的适配比例；根据页面布局需求，拖拽目标VUE组件的位置，以对页面模板的页面布局进行调整的步骤之后，方法还包括：预览调整后的页面布局，判断页面布局是否满足页面布局需求中的适配比例；如果是，将页面布局确定为目标VUE页面对应的页面布局。

结合第一方面，本发明实施例提供了第一方面的第三种可能的实施方式，其中，页面模板中包括页面关键字和页面展示结果，页面展示结果与页面模板的VUE组件对应；根据页面配置需求，从模板库中提取页面配置需求对应的页面模板的步骤，包括：获取页面模板的页面关键字和页面展示结果；判断页面关键字是否满足页面配置需求对应的关键字，且，页面展示结果中的VUE组件是否满足页面配置需求对应的VUE组件需求；如果是，将当前页面模板确定为页面配置需求对应的页面模板。

结合第一方面，本发明实施例提供了第一方面的第四种可能的实施方式，其中，将页面修改的结果确定为页面配置需求对应的目标VUE页面的步骤之后，方法还包括：基于页面修改结果中的VUE组件生成目标VUE页面的页面代码。

结合第一方面，本发明实施例提供了第一方面的第五种可能的实施方式，其中，上述方法还包括：对页面代码进行报文加密。

结合第一方面，本发明实施例提供了第一方面的第六种可能的实施方式，其中，服务器中还存储有页面克隆库，页面克隆库中包括模板库中的多个页面模板，页面克隆库用于减少页面模板对应的查找时间；方法还包括：记录页面模板的提取次数，将提取次数满足预设提取阈值的页面模板存储至页面克隆库中。

结合第一方面，本发明实施例提供了第一方面的第七种可能的实施方式，其中，根据页面配置需求，从模板库中提取页面配置需求对应的页面模板的步骤之后，方法还包括：判断模板库中是否包括与页面配置需求对应的页面模板；如果否，根据页面配置需求，从VUE组件库中提取页面配置需求对应的VUE组件，配置页面配置需求对应的VUE页面。

结合第一方面，本发明实施例提供了第一方面的第八种可能的实施方式，其中，VUE组件库中包括基础组件集合和更新组件集合；基础组件集合中包括elementUI组件库、vant组件库、vuedraggable可拖拽组件、原生javascript；更新组件集合中包括基础组件集合中的VUE组件对应的更新组件。

第二方面，本发明实施例还提供一种VUE页面生成装置，该装置应用于服务器，服务器中存储有模板库和VUE组件库，VUE组件库包括拖拽组件，以及与拖拽组件封装的多种VUE组件，模板库中包括多种页面模板，每种页面模板通过VUE组件库中的多种VUE组件拖拽生成；装置包括：需求获取模块，用于获取预设的页面配置需求；页面提取模块，用于根据页面配置需求，从模板库中提取页面配置需求对应的页面模板；修改模块，用于基于页面配置需求，针对页面模板中的VUE组件进行拖拽调整，以对页面修改；输出模块，用于将页面修改的结果确定为页面配置需求对应的目标VUE页面。

本发明实施例带来了以下有益效果：本发明提供的一种VUE页面生成方法及装置，配置有模板库，可以根据页面配置需求对匹配的页面模板中的VUE组件进行拖拽调整，调整VUE组件后，页面模板也会配合修改，此时能够快速得到所需的页面。VUE组件从VUE组件库中确定，VUE组件库中包括拖拽组件，页面中的VUE组件均与拖拽组件封装，故，页面可以由能够灵活拖拽的VUE组件生成，VUE组件适应性高。VUE组件对应于低代码开发模式，以开发人员通过页面配置需求对VUE组件拖拽，进而可视化配置且自动生成VUE页面，能够快速且灵活地得到所需页面。VUE组件可以直接生成相应的代码，页面开发人员无需专业学习前端VUE知识，仅需按照页面配置需求对应的UI展示结果对VUE组件进行可视化拖拽，就能快速生成VUE页面代码，在前端技术升级提高用户体验的同时，降低开发的学习成本，缩短开发周期，解决开发成本，满足统一的开发规范，更快的响应业务需求，还节约开发的人力成本，具有较大发挥潜力。

本发明的其他特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点在说明书以及附图中所特别指出的结构来实现和获得。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种VUE页面生成方法的流程图；

图2为本发明实施例提供的另一种VUE页面生成方法的流程图；

图3为本发明实施例提供的一种VUE页面生成装置的结构示意图；

图4为本发明实施例提供的另一种VUE页面生成装置的结构示意图；

图5为本发明实施例提供的一种电子设备的结构图。

具体实施方式

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

随着技术的逐渐发展，前后端分离、前端框架的更新迭代，为了提供更好用户体验，越来越多系统将前端页面由传统的JSP(JavaServer Pages，中文名为java服务器页面)、HTML(Hyper Text Markup Language，中文名为超文本标记语言)向angular和vue和react转换。Angular是AngularJS的重写，AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发，Vue是一套用于构建用户界面的渐进式框架，React是用于构建用户界面的JavaScript库。传统jsp系统模式下，前端人员仅需将静态页面做出即可，页面动态数据渲染、调接口、业务逻辑编写后台开发人员均可完成，但随着前台技术的迭代，学习成本逐渐增加，部分开发团队中的后台开发人员已经不能再兼职开发前端页面，后端开发同事无法独自完成静态页面的动态渲染。同一个前端同事需负责多个需求，导致出现任务阻塞等问题，越来越多的团队需招聘大量的前端专职开发人员也造成了团队人员成本的增加。

基于上述问题，低代码或无代码开发热潮又一次袭来，业界对降本、增效、提质的声音越来越强。国外有西门子Mendix，微软PowerPlatform等大厂的相关低代码产品，国内有阿里的易搭，Ivx，腾讯的微搭等低代码产品，或者如开源的鲁班等低代码产品和平台有数十种以上。但是现有技术中的低代码开发模式通常为组件化配置，如VUE为组件化配置之一，但组件化配置技术较为新颖，现有技术针对VUE组件的兼容性较差，对VUE支持不足，产品仅能生成html代码，无法转换为VUE代码，且，现有低代码开发模式通常使用普通html组件，而普通html组件拖拽位置不灵活，无法灵活生成所需的页面，因此，现有技术仍需前端专职开发人员进行页面开发，开发工作量大，无法快速且灵活地得到所需页面。

基于此，本发明实施例提供的一种VUE页面生成方法及装置，能够灵活、简便且快捷地生成所需页面。

为便于对本实施例进行理解，首先对本发明实施例所公开的一种VUE页面生成方法进行详细介绍，该方法应用于服务器，服务器中存储有模板库和VUE组件库，VUE组件库包括拖拽组件，以及与拖拽组件封装的多种VUE组件，模板库中包括多种页面模板，每种页面模板通过VUE组件库中的多种VUE组件拖拽生成；图1示出了本发明实施例提供的一种VUE页面生成方法的流程图，如图1所示的一种VUE页面生成方法的流程图，该方法包括以下步骤：

步骤S102，获取预设的页面配置需求。

步骤S104，根据页面配置需求，从模板库中提取页面配置需求对应的页面模板。

步骤S106，基于页面配置需求，针对页面模板中的VUE组件进行拖拽调整，以对页面修改。

步骤S108，将页面修改的结果确定为页面配置需求对应的目标VUE页面。

在具体实现时，用户可以根据其需求生成相应的页面，而所需的页面中包括不同的VUE组件，不同的VUE组件所生成的页面也是不同的。通常使用到的程序的页面配置的基础框架封装大都一致，如后台管理系统、公众号、小程序等，这些程序的一些常用功能都是重复性的，为了节省重复开发成本，以及便于维护，本发明实施例对于项目框架和常用功能做成一个或一些模板，这些模板包括可以使用的基础的VUE组件，用户可以选择勾选需要的功能之后下载下来，再根据需求进行编辑就可以快速生成所需要的工程。

具体的，本发明实施例配置了模板库，该模板库中包含各种页面模板，用户可以从模板库中提取所需的页面模板，再针对页面模板中的VUE组件进行拖拽调整就可以快速得到当前页面配置需求对应的页面。

本发明实施例提供的一种VUE页面生成方法，配置有VUE组件库，VUE组件库包括拖拽组件及与拖拽组件封装的多种VUE组件，VUE组件可灵活拖拽；VUE组件对应于低代码开发模式，以开发人员通过页面配置需求对VUE组件拖拽，进而可视化配置且自动生成VUE页面，能够快速且灵活地得到所需页面。VUE组件对应有相应的代码，页面开发人员无需专业学习前端VUE知识，仅需按照页面配置需求对应的UI展示结果对VUE组件进行可视化拖拽，就能快速生成VUE页面代码，在前端技术升级提高用户体验的同时，降低开发的学习成本，简化开发人员编码工作量，以避免现有后端同事需等待前端进行静态页面开发后才能进行具体业务逻辑的开发和联调等工作，实现前后端人员也可进行静态VUE页面开发的效果，缩短开发周期，更快的响应业务需求，为业务运营模式提供高效的技术支撑，提高团队整理开发效率，还节约开发的人力成本，解决开发成本。

且，本发明实施例配置有模板库，可以根据页面配置需求选择模板库的页面模板，并对该页面模板中的VUE组件进行拖拽调整，调整VUE组件后，该页面模板也会配合修改，此时能够快速得到所需的页面。进一步地，页面由拖拽的VUE组件生成，VUE组件来自于包括多种VUE组件的VUE组件库，该VUE组件库中的VUE组件多样，以使页面配置的选择多样。

进一步的，在图1的基础上，本发明实施例还提供了另一种VUE页面生成方法，图2示出了另一种VUE页面生成方法的流程图，如图2所示的另一种VUE页面生成方法，该方法包括以下步骤：

步骤S202，获取预设的页面配置需求。

步骤S204，获取页面模板的页面关键字和页面展示结果。

步骤S206，判断页面关键字是否满足页面配置需求对应的关键字，且，页面展示结果中的VUE组件是否满足页面配置需求对应的VUE组件需求。

步骤S208，如果是，将当前页面模板确定为页面配置需求对应的页面模板。

在具体实现时，本发明实施例在配置端进行页面配置，该配置端包括鉴权管理功能，且采用oauth做鉴权管理，oauth的英文全称是Open Authorization，它是一种开放授权协议，允许第三方应用程序使用资源所有者的凭据获得对资源有限访问权限。当配置所需页面时，配置端会校验当前配置页面的用户是否有访问权限或操作权限，只有用户有权限进行操作时，才可以进行页面配置操作。其中，涉及的权限细化至接口级别，确保系统的安全性。

在具体实现时，模板库和VUE组件库均是系统管理员配置的，系统管理员需登录管理员账号，若未登录跳转登录页面，已登录用户选择组件配置或模板管理模块，并由鉴权管理模块校验管理员的权限。在生成VUE页面时，是由开发人员执行操作的，此时，开发人员也需登录开发人员账号，并由鉴权管理模块校验开发人员的权限，若上述管理员通过鉴权管理模块确定具备操作权限，用户可通过组件配置，更新或修改VUE拖拽组件库，或通过模板管理，为通用的页面模板进行维护，若开发人员通过鉴权管理模块确定具备操作权限，用户可以通过组件拖拽模板完成VUE低代码开发，用户可优先通过模板库或已开发过的历史页面模板选择相似模板或页面进行克隆，在克隆的页面基础进行定制化修改，以实现快速开发的效果。

在确定开发人员有权限生成页面时，开发人员可以先从模板库中查找类似的页面模板或者克隆页面，当模板库中存在页面模板或克隆页面时，开发人员则可以直接拖拽VUE组件，调整页面中的布局样式，以得到所需的页面。

其中，模板库中包括的各种页面模板均对应有页面关键字和页面展示结果，该页面关键字可以是页面模板的标题，通过不同的VUE组件生成的页面对应的页面展示结果也不同。故，在从模板库中确定页面模板时，可以针对页面模板的页面关键字是否与页面配置需求的关键字匹配，并根据页面展示结果确定当前页面模板中的VUE组件是否满足VUE组件需求，从而确定该页面模板是否为可选的模板。若上述条件均匹配，则可以针对该页面模板直接进行编辑，快速确定所需的页面。

进一步的，服务器中还存储有页面克隆库，针对提取重复性较高的页面，用户可对之前做过的页面进行克隆，克隆后可继续进行编辑修改，节省重复建设的时间。其中，页面克隆库中包括模板库中的多个页面模板；当从模板库中提取到页面模板后，本发明实施例还会记录页面模板的提取次数，而当提取次数满足一定的提取阈值后，会将该页面模板存储至页面克隆库中，该页面克隆库用于减少查找页面模板对应的时间。为了打通团队壁垒，本发明实施例还定期分析各页面模板的克隆次数，将克隆次数较多的页面提供到页面克隆库，各团队开发人员均可进行克隆下载。

进一步的，模板库中可能没有与页面配置需求对应的页面模板，此时，可以根据页面配置需求，直接从VUE组件库中提取页面配置需求对应的VUE组件，再通过下述步骤配置页面配置需求对应的VUE页面。

步骤S210，针对页面配置需求中的VUE组件需求和页面模板中的VUE组件，从VUE组件库中获取目标VUE组件。

步骤S212，将目标VUE组件载入页面模板中，并根据页面布局需求，拖拽目标VUE组件的位置，以对页面模板的页面布局进行调整。

具体的，所选择的页面模板中的VUE组件可能并非全部所需VUE组件，故，还可以在确定该页面模板中包括哪些VUE组件后，再从配置的VUE组件库中获取页面模板中没有的目标VUE组件，以将该目标VUE组件加载至当前页面模板中，再执行后续操作生成页面配置需求对应的页面。

在具体实现时，VUE组件库中包括基础组件集合和更新组件集合；基础组件集合中包括elementUI组件库、vant组件库、vuedraggable可拖拽组件、原生javascript，VUE组件库对elementUI组件库、vant组件库、vuedraggable可拖拽组件、原生js等进行二次封装，其中，上述vuedraggable可拖拽组件与VUE组件库中的每个VUE组件封装后，可以使VUE组件库中的VUE组件均能够实现拖拽，实现兼容现有主流VUE组件库所有组件动态拖拽，用户可根据需求将组件、背景图等进行拖拽到指定位置并进行定制化样式调整，实现低代码页面开发。

进一步地，基础组件集合中的相应的VUE组件对应的代码段可以使用vue格式编写，或者可以使用html格式编写，编写后的代码段使用标签形式与相应的VUE组件进行关联，当根据页面配置需求在页面中拖拽或使用任意VUE组件后，可以根据该VUE组件的标识确定具体的代码段，在后续生成页面代码时，可以直接根据VUE组件的位置得到页面中相应位置的代码内容。

更新组件集合中包括基础组件集合中的VUE组件对应的更新组件。具体的，VUE组件更新迭代较快，为确保产品的可用性和用户体验，通过组件配置管理，对组件进行更新维护，对于elementUI组件库和vant组件库新增的组件，以及自研组件，通过组件配置维护进VUE组件库变成可拖拽组件，实现组件库的动态更新。

此外，页面模板中可能包括当前页面配置需求不需要的VUE组件，此时，将不需要的VUE组件进行删除即可。

进一步的，页面配置需求除包括VUE组件需求外，还包括页面布局需求，将目标VUE组件加载至页面模板中后，可以根据页面布局需求拖拽目标VUE组件和页面模板中原有的VUE组件的位置，以使各个VUE组件位于页面模板中满足上述页面布局需求，进而得到所需的页面。

进一步的，当针对VUE组件的位置修改完成后，对部分VUE组件的默认样式也可进行定制化调整。

步骤S214，预览调整后的页面布局，判断页面布局是否满足页面布局需求中的适配比例。

步骤S216，如果是，将页面布局确定为目标VUE页面对应的页面布局。

配置端还包括预览按钮，当通过拖拽VUE组件调整相应VUE组件位于页面模板中的位置，或修改VUE组件后，可以预览调整后的页面布局，以确定当前页面布局是否满足适配比例，其中，所确定的页面可能在PC端使用或在手机端使用，此时，可以点击预览按钮，配置端系统自动将拖拽后的页面按照用户选择的适配比例进行部署适配，并将实际运行效果展示给开发人员，以确保拖拽后的页面符合UI设计标准，提升开发效率。

步骤S218，将页面修改的结果确定为页面配置需求对应的目标VUE页面。

步骤S220，基于页面修改结果中的VUE组件生成目标VUE页面的页面代码。

当页面布局满足适配比例时，可以将当前页面的修改结果确定为页面配置需求对应的目标VUE页面，此时可以基于目标VUE页面中的VUE组件直接生成目标VUE页面的页面代码，并对VUE代码进行下载，以供后端人员使用。

进一步的，配置端还包括加密功能，在生成页面代码后，还对页面代码进行报文加密，以降低xss等恶意代码注入风险，提升系统安全性。

本发明实施例提供的另一种VUE页面生成方法，包括可拖拽调整的VUE组件、VUE组件对应的组件库、模板库和页面克隆库，基于模板库和页面克隆库，本发明实施例可以根据页面配置需求，通过拖拽VUE组件或修改页面中的VUE组件就能快速得到所需的页面，业务响应及处理快速且便捷。本发明实施例可以根据页面配置需求在VUE组件库中选择相应的VUE组件，并根据页面布局拖拽VUE组件的位置，以快速生成所需的VUE页面代码，生成的VUE代码具有统一的规范标注，满足统一的开发规范，便于对前端开发规范的统一和后续的维护，整体方案具有较大发挥潜力。

此外，本发明实施例还包括鉴权管理功能和加密功能，保证了数据的安全，且能够防止XXS漏洞等问题。VUE组件库中配置有基础组件和更新组件，将elementUI组件库、vant组件库、vuedraggable、原生js等进行二次封装为统一的前端js组件，包含了各种形式的VUE组件，适配性高，并通过对上述VUE组件进行订制化开发改造，解决各技术栈缺陷和不足，页面代码生成的方式简便可行且有效。

进一步，在上述实施例的基础上，本发明实施例还提供了一种VUE页面生成装置，该装置应用于服务器，服务器中存储有模板库和VUE组件库，VUE组件库包括拖拽组件，以及与拖拽组件封装的多种VUE组件，模板库中包括多种页面模板，每种页面模板通过VUE组件库中的多种VUE组件拖拽生成。图3示出了一种VUE页面生成装置的结构示意图，如图3所示的一种VUE页面生成装置的结构示意图，该装置包括：

需求获取模块301，用于获取预设的页面配置需求。

页面提取模块302，用于根据页面配置需求，从模板库中提取页面配置需求对应的页面模板。

修改模块303，用于基于页面配置需求，针对页面模板中的VUE组件进行拖拽调整，以对页面修改。

输出模块304，用于将页面修改的结果确定为页面配置需求对应的目标VUE页面。

本发明实施例提供的一种VUE页面生成装置，与上述实施例提供的一种VUE页面生成方法具有相同的技术特征，所以也能解决相同的技术问题，达到相同的技术效果。

进一步的，基于图3提供的一种VUE页面生成装置的结构示意图，本发明实施例还提供另一种VUE页面生成装置，如图4所示的另一种VUE页面生成装置的结构示意图，该装置中，修改模块303，还用于针对页面配置需求中的VUE组件需求和页面模板中的VUE组件，从VUE组件库中获取目标VUE组件；其中，目标VUE组件包括未在页面模板中展示的VUE组件；将目标VUE组件载入页面模板中，并根据页面布局需求，拖拽目标VUE组件的位置，以对页面模板的页面布局进行调整。

上述修改模块303，还用于预览调整后的页面布局，判断页面布局是否满足页面布局需求中的适配比例；如果是，将页面布局确定为目标VUE页面对应的页面布局。

上述页面提取模块302，还用于获取页面模板的页面关键字和页面展示结果；判断页面关键字是否满足页面配置需求对应的关键字，且，页面展示结果中的VUE组件是否满足页面配置需求对应的VUE组件需求；如果是，将当前页面模板确定为页面配置需求对应的页面模板。

该装置还包括代码生成模块305，用于基于页面修改结果中的VUE组件生成目标VUE页面的页面代码。

该装置还包括加密模块306，用于对页面代码进行报文加密。

该装置还包括记录模块307，用于记录页面模板的提取次数，将提取次数满足预设提取阈值的页面模板存储至页面克隆库中。

该装置还包括页面配置模块308，用于判断模板库中是否包括与页面配置需求对应的页面模板；如果否，根据页面配置需求，从VUE组件库中提取页面配置需求对应的VUE组件，配置页面配置需求对应的VUE页面。

本发明实施例还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述图1至图2任一所示的方法的步骤。

本发明实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，计算机程序被处理器运行时执行图1至图2任一所示的方法的步骤。

本发明实施例还提供了一种电子设备的结构示意图，如图5所示，为该电子设备的结构示意图，其中，该电子设备包括处理器51和存储器50，该存储器50存储有能够被该处理器51执行的计算机可执行指令，该处理器51执行该计算机可执行指令以实现上述图1至图2任一所示的方法。

在图5示出的实施方式中，该电子设备还包括总线52和通信接口53，其中，处理器51、通信接口53和存储器50通过总线52连接。

其中，存储器50可能包含高速随机存取存储器(RAM，Random Access Memory)，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。通过至少一个通信接口53(可以是有线或者无线)实现该系统网元与至少一个其他网元之间的通信连接，可以使用互联网，广域网，本地网，城域网等。总线52可以是ISA(Industry StandardArchitecture，工业标准体系结构)总线、PCI(Peripheral Component Interconnect，外设部件互连标准)总线或EISA(Extended Industry Standard Architecture，扩展工业标准结构)总线等。总线52可以分为地址总线、数据总线、控制总线等。为便于表示，图5中仅用一个双向箭头表示，但并不表示仅有一根总线或一种类型的总线。

处理器51可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器51中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器51可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(Digital SignalProcessor，简称DSP)、专用集成电路(Application Specific Integrated Circuit，简称ASIC)、现场可编程门阵列(Field-Programmable Gate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本申请实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器，处理器51读取存储器中的信息，结合其硬件完成前述图1至图2任一所示的方法。

本发明实施例所提供的一种VUE页面生成方法及装置的计算机程序产品，包括存储了程序代码的计算机可读存储介质，所述程序代码包括的指令可用于执行前面方法实施例中所述的方法，具体实现可参见方法实施例，在此不再赘述。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。另外，在本发明实施例的描述中，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，电子设备，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

在本发明的描述中，需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。

最后应说明的是：以上实施例，仅为本发明的具体实施方式，用以说明本发明的技术方案，而非对其限制，本发明的保护范围并不局限于此，尽管参照前述实施例对本发明进行了详细的说明，本领域技术人员应当理解：任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。

Claims (10)

1.一种VUE页面生成方法，其特征在于，所述方法应用于服务器，所述服务器中存储有模板库和VUE组件库，所述VUE组件库包括拖拽组件，以及与拖拽组件封装的多种VUE组件，所述模板库中包括多种页面模板，每种所述页面模板通过所述VUE组件库中的多种VUE组件拖拽生成；所述方法包括：

获取预设的页面配置需求；

根据所述页面配置需求，从所述模板库中提取所述页面配置需求对应的页面模板；

基于所述页面配置需求，针对所述页面模板中的VUE组件进行拖拽调整，以对页面修改；

将所述页面修改的结果确定为所述页面配置需求对应的目标VUE页面。

2.根据权利要求1所述的方法，其特征在于，所述页面配置需求包括VUE组件需求和页面布局需求；

所述基于所述页面配置需求，针对所述页面模板中的VUE组件进行拖拽调整，以对页面修改的步骤，包括：

针对所述页面配置需求中的VUE组件需求和所述页面模板中的VUE组件，从所述VUE组件库中获取目标VUE组件；其中，所述目标VUE组件包括未在所述页面模板中展示的VUE组件；

将所述目标VUE组件载入所述页面模板中，并根据所述页面布局需求，拖拽所述目标VUE组件的位置，以对所述页面模板的页面布局进行调整。

3.根据权利要求2所述的方法，其特征在于，所述页面布局需求包括预设的适配比例；

所述根据所述页面布局需求，拖拽所述目标VUE组件的位置，以对所述页面模板的页面布局进行调整的步骤之后，所述方法还包括：

预览调整后的页面布局，判断所述页面布局是否满足所述页面布局需求中的适配比例；

如果是，将所述页面布局确定为目标VUE页面对应的页面布局。

4.根据权利要求1所述的方法，其特征在于，所述页面模板中包括页面关键字和页面展示结果，所述页面展示结果与所述页面模板的VUE组件对应；

所述根据所述页面配置需求，从所述模板库中提取所述页面配置需求对应的页面模板的步骤，包括：

获取所述页面模板的页面关键字和页面展示结果；

判断所述页面关键字是否满足所述页面配置需求对应的关键字，且，所述页面展示结果中的VUE组件是否满足所述页面配置需求对应的VUE组件需求；

如果是，将当前页面模板确定为所述页面配置需求对应的页面模板。

5.根据权利要求1所述的方法，其特征在于，所述将所述页面修改的结果确定为所述页面配置需求对应的目标VUE页面的步骤之后，所述方法还包括：

基于所述页面修改结果中的VUE组件生成所述目标VUE页面的页面代码。

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

对所述页面代码进行报文加密。

7.根据权利要求1所述的方法，其特征在于，所述服务器中还存储有页面克隆库，所述页面克隆库中包括所述模板库中的多个页面模板，所述页面克隆库用于减少所述页面模板对应的查找时间；所述方法还包括：

记录所述页面模板的提取次数，将所述提取次数满足预设提取阈值的页面模板存储至所述页面克隆库中。

8.根据权利要求1所述的方法，其特征在于，所述根据所述页面配置需求，从所述模板库中提取所述页面配置需求对应的页面模板的步骤之后，所述方法还包括：

判断所述模板库中是否包括与所述页面配置需求对应的页面模板；

如果否，根据所述页面配置需求，从所述VUE组件库中提取所述页面配置需求对应的VUE组件，配置所述页面配置需求对应的VUE页面。

9.根据权利要求1所述的方法，其特征在于，所述VUE组件库中包括基础组件集合和更新组件集合；所述基础组件集合中包括elementUI组件库、vant组件库、vuedraggable可拖拽组件、原生javascript；所述更新组件集合中包括所述基础组件集合中的VUE组件对应的更新组件。

10.一种VUE页面生成装置，其特征在于，所述装置应用于服务器，所述服务器中存储有模板库和VUE组件库，所述VUE组件库包括拖拽组件，以及与拖拽组件封装的多种VUE组件，所述模板库中包括多种页面模板，每种所述页面模板通过所述VUE组件库中的多种VUE组件拖拽生成；所述装置包括：

需求获取模块，用于获取预设的页面配置需求；

页面提取模块，用于根据所述页面配置需求，从所述模板库中提取所述页面配置需求对应的页面模板；

修改模块，用于基于所述页面配置需求，针对所述页面模板中的VUE组件进行拖拽调整，以对页面修改；

输出模块，用于将所述页面修改的结果确定为所述页面配置需求对应的目标VUE页面。

Images