页面生成方法、装置、设备、介质及产品制造方法及图纸

本申请公开了一种页面生成方法、装置、设备、介质及产品。该页面生成方法包括获取并显示备选组件列表，其中，所述备选组件列表中包括多个封装的组件；接收用户针对所述备选组件列表中的第一组件的第一输入，其中，所述第一输入为将所述第一组件拖拽至目标页面的输入；响应于所述第一输入，生成包含所述第一组件的目标页面。根据本申请实施例，可以减轻前端开发人员的工作量，提高开发效率，提高页面中组件的可复用性和可维护性。件的可复用性和可维护性。件的可复用性和可维护性。

【技术实现步骤摘要】
页面生成方法、装置、设备、介质及产品


[0001]本申请属于计算机技术，尤其涉及一种页面生成方法、装置、设备、介质及产品。

技术介绍

[0002]目前，前端开发人员在开发前端页面时，通常需要手动编写页面代码，以实现页面中各个组件的功能。
[0003]但是，同一场景下前端页面中的各个组件功能的代码重复性很高，通过开发人员手动编写页面代码的方式非常繁琐，且编写的都是重复代码，导致前端开发人员工作量较大，降低了开发效率，页面中组件的可复用性低且不易维护。

技术实现思路

[0004]本申请实施例提供一种页面生成方法、装置、设备、介质及产品，能够减轻前端开发人员的工作量，提高开发效率，提高页面中组件的可复用性和可维护性。
[0005]第一方面，本申请实施例提供一种页面生成方法，该方法包括：
[0006]获取并显示备选组件列表，其中，所述备选组件列表中包括多个封装的组件；
[0007]接收用户针对所述备选组件列表中的第一组件的第一输入，其中，所述第一输入为将所述第一组件拖拽至目标页面的输入；
[0008]响应于所述第一输入，生成包含所述第一组件的目标页面。
[0009]第二方面，本申请实施例提供了一种页面生成装置，该装置包括：
[0010]列表获取模块，用于获取并显示备选组件列表，其中，所述备选组件列表中包括多个封装的组件；
[0011]第一接收模块，用于接收用户针对所述备选组件列表中的第一组件的第一输入，其中，所述第一输入为将所述第一组件拖拽至目标页面的输入；
[0012]页面生成模块，用于响应于所述第一输入，生成包含所述第一组件的目标页面。
[0013]第三方面，本申请实施例提供了一种电子设备，该电子设备包括：处理器以及存储有计算机程序指令的存储器；
[0014]处理器执行所述计算机程序指令时实现如第一方面的任一项实施例中所述的页面生成方法的步骤。
[0015]第四方面，本申请实施例提供了一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序指令，计算机程序指令被处理器执行时实现如第一方面的任一项实施例中所述的页面生成方法的步骤。
[0016]第五方面，本申请实施例提供了一种计算机程序产品，计算机程序产品中的指令由电子设备的处理器执行时，使得所述电子设备执行如第一方面的任一项实施例中所述的页面生成方法的步骤。
[0017]本申请实施例中的页面生成方法、装置、设备、介质及产品，通过获取并显示包含多个封装的组件的备选组件列表，并接收用户将备选组件列表中的第一组件拖拽至目标页
面的第一输入，响应于该第一输入，生成包含该第一组件的目标页面，如此，通过设计多个封装的组件，开发人员可以以拖拽的方式将组件拖拽至页面中，从而快速生成前端所需的页面，相较于手动编写页面代码的方式，可以减轻前端开发人员的工作量，提高开发效率，另外，封装的组件可无限重复使用且便于维护，因此可以提高页面中组件的可复用性和可维护性。
附图说明
[0018]为了更清楚地说明本申请实施例的技术方案，下面将对本申请实施例中所需要使用的附图作简单的介绍，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0019]图1是本申请一个实施例提供的页面生成方法的流程示意图；
[0020]图2是本申请一个实施例提供的页面生成装置的结构示意图；
[0021]图3是本申请一个实施例提供的电子设备的结构示意图。
具体实施方式
[0022]下面将详细描述本申请的各个方面的特征和示例性实施例，为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及具体实施例，对本申请进行进一步详细描述。应理解，此处所描述的具体实施例仅意在解释本申请，而不是限定本申请。对于本领域技术人员来说，本申请可以在不需要这些具体细节中的一些细节的情况下实施。下面对实施例的描述仅仅是为了通过示出本申请的示例来提供对本申请更好的理解。
[0023]需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
[0024]本申请技术方案中对数据的获取、存储、使用、处理等均符合国家法律法规的相关规定。
[0025]目前，前端开发人员在开发前端页面时，主要通过手动编写页面代码的方式构建所需的前端页面，而对于同一项目中的页面，各个组件的重复利用率较高，例如在后台管理系统的项目中，由于主要涉及数据管理，因此大部分页面都是涉及增删改查操作的页面。如此，会导致开发人员反复编写相同的代码，工作量较大，降低了开发效率，页面中组件的可复用性低且不易维护。
[0026]为了解决现有技术问题，本申请实施例提供了一种页面生成方法、装置、设备、介质及产品。该页面生成方法可以应用于前端页面开发场景，下面首先对本申请实施例所提供的页面生成方法进行介绍。
[0027]图1是本申请一个实施例提供的页面生成方法的流程示意图。如图1所示，该页面生成方法具体可以包括如下步骤：
[0028]S110、获取并显示备选组件列表，其中，备选组件列表中包括多个封装的组件；
[0029]S120、接收用户针对备选组件列表中的第一组件的第一输入，其中，第一输入为将第一组件拖拽至目标页面的输入；
[0030]S130、响应于第一输入，生成包含第一组件的目标页面。
[0031]由此，通过获取并显示包含多个封装的组件的备选组件列表，并接收用户将备选组件列表中的第一组件拖拽至目标页面的第一输入，响应于该第一输入，生成包含该第一组件的目标页面，如此，通过设计多个封装的组件，开发人员可以以拖拽的方式将组件拖拽至页面中，从而快速生成前端所需的页面，相较于手动编写页面代码的方式，可以减轻前端开发人员的工作量，提高开发效率，另外，封装的组件可无限重复使用且便于维护，因此可以提高页面中组件的可复用性和可维护性。
[0032]下面介绍上述各个步骤的具体实现方式。
[0033]在一些实施方式中，在S110中，本申请实施例可针对各个页面开发场景预先设置多个封装的组件，以供前端开发人员进行页面开发时使用。例如对于数据管理页面的开发场景，预先设置的多个封装的组件具体可以包括input、select、date、checkbox、button等常用的form组件，还可包括重新封装的search、table等业务组件。另外，还可使用一个文本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面生成方法，其特征在于，包括：获取并显示备选组件列表，其中，所述备选组件列表中包括多个封装的组件；接收用户针对所述备选组件列表中的第一组件的第一输入，其中，所述第一输入为将所述第一组件拖拽至目标页面的输入；响应于所述第一输入，生成包含所述第一组件的目标页面。2.根据权利要求1所述的方法，其特征在于，所述生成包含所述第一组件的目标页面，包括：获取所述第一组件对应的第一代码数据；将所述第一代码数据组装至所述目标页面对应的代码数据中，得到目标代码数据；基于所述目标代码数据进行页面渲染处理，得到包含所述第一组件的目标页面。3.根据权利要求1所述的方法，其特征在于，在生成包含所述第一组件的目标页面之后，所述方法还包括：接收用户针对所述第一组件的第二输入，其中，所述第二输入为将所述第一组件从所述目标页面中的第一区域拖拽至第二区域的输入；响应于所述第二输入，确定所述第一组件在所述第一区域中对应的父级组件，以及位于所述第二区域的第二组件；从所述父级组件对应的代码数据中获取与所述第一组件对应的第一代码数据，并将所述第一代码数据组装至所述第二组件对应的代码数据中，得到第二代码数据；基于所述第二代码数据进行页面渲染处理，得到更新后的目标页面。4.根据权利要求3所述的方法，其特征在于，所述确定所述第一组件在所述第一区域中对应的父级组件，以及位于所述第二区域的第二组件，包括：获取所述第一输入对应的拖拽起始事件的事件信息以及释放事件的事件信息；根据所述拖拽起始事件的事件信息，确定所述第一组件在所述第一区域中对应的父级组件；根据所述释放事件的事件信息，确定位于所述第二区域的第二组件。5.根据权利要求1所述的方法，其特征在于，在所述目标页面中还包括与所述第一组件同级且依次排列的至少一个组件...

【专利技术属性】
技术研发人员：周湘闽，
申请(专利权)人：中国建设银行股份有限公司，
类型：发明
国别省市：