CN116339715A - 前端页面构建方法和装置、电子设备及存储介质 - Google Patents

Abstract

本申请实施例提供了一种前端页面构建方法、装置、电子设备及存储介质，属于前端页面设计领域。该方法包括：获取页面新建请求，根据页面新建请求在预设的空白页面上进行页面配置，得到初始页面，再获取页面组件信息，再根据页面组件信息中的组件配置信息对预设的候选组件数据表进行筛选，得到目标组件数据表，将选定组件数据表中的字段信息添加至预先配置的组件列信息，得到目标组件列信息，将目标组件列信息、页面组件信息和初始页面的初始页面信息进行合并，得到目标页面信息，根据目标页面信息进行页面渲染，得到目标页面。本申请实施例通过简单配置即可完成前端页面的构建，以便于根据不同页面需求构建页面，降低前端页面内容的重复度。

Description

前端页面构建方法和装置、电子设备及存储介质

技术领域

本申请涉及前端页面构建领域，尤其涉及一种前端页面构建方法和装置、电子设备及存储介质。

背景技术

目前，为了应对逐步扩大的软件需求，软件研发企业或部门使用传统开发页面存在工作内容类似的问题，通过开发人员根据不同平台需求构建前端页面。但是开发人员主要通过操作代码以建立前端页面，并根据不同平台需求独立构建前端页面，不仅对开发人员有较高的技术要求，还增加了开发人员的工作量。因此，如何通过简单配置即可完成前端页面的构建，成为亟待解决的技术问题。

发明内容

本申请实施例的主要目的在于提出一种前端页面构建方法和装置、电子设备及存储介质，旨在实现简单配置完成前端页面的构建，以便于根据不同平台需求构建独立前端页面，以减少前端页面开发内容的重复度。。

为实现上述目的，本申请实施例的第一方面提出了一种前端页面构建方法，所述方法包括：

获取页面新建请求；其中，所述页面新建请求包括：页面配置信息和页面布局信息；

根据所述页面配置信息和所述页面布局信息在预设的空白页面上进行页面配置，得到初始页面；

获取页面组件信息；其中，所述页面组件信息包括：组件配置信息、组件基本属性信息和组件配置工具信息；

根据所述组件配置信息对预设的候选组件数据表进行筛选，得到目标组件数据表；

将所述选定组件数据表中的字段信息添加至预先配置的组件列信息，得到目标组件列信息；

将所述目标组件列信息、所述组件基本属性信息、所述组件配置工具信息和所述初始页面的初始页面信息进行合并，得到目标页面信息；

根据所述目标页面信息进行页面渲染，得到目标页面。

根据本发明的一些实施例，所述根据所述页面配置信息和所述页面布局信息在预设的空白页面上进行页面配置，得到初始页面，包括：

根据所述页面配置信息从预设的页面配置部件中筛选出目标页面配置部件；

根据所述页面布局信息将所述目标页面配置部件设置于所述空白页面上，得到所述初始页面。

根据本发明的一些实施例，所述组件配置信息包括：组件初选信息、组件过滤条件和表格关联信息，所述根据所述组件配置信息选择预设的候选数据表，确定目标数据表，包括：

根据所述组件初选信息从预设的候选数据表中筛选出初步数据表；

根据所述组件过滤条件对所述初步数据表的表格内容进行过滤处理，得到选定组件数据表；

根据所述表格关联信息将所述选定组件数据表进行关联处理，得到所述目标数据表。

根据本发明的一些实施例，所述将所述目标组件列信息、所述组件基本属性信息、所述组件配置工具信息和所述初始页面的初始页面信息进行合并，得到目标页面信息，包括：

根据所述组件基本属性信息从预设的候选组件中筛选出目标组件；

根据所述组件配置工具信息从预设的配置工具栏的候选按钮中筛选出目标按钮；

根据所述目标组件列信息将所述目标组件、所述目标按钮加载于所述初始页面信息对应的所述初始页面上，得到目标页面。

根据本发明的一些实施例，所述组件基本属性信息包括：组件名称信息、组件功能信息和组件关联信息，所述根据所述组件基本属性信息从预设的候选组件中筛选出目标组件，包括：

根据所述组件名称信息和所述组件功能信息从预设的候选组件中筛选出选定组件；

根据所述组件关联信息将所述选定组件进行关联处理，得到所述目标组件信息。

根据本发明的一些实施例，所述根据所述目标组件列信息将所述目标组件、所述目标按钮加载于所述初始页面信息对应的所述初始页面上，得到目标页面，还包括：

从所述预设的页面配置数据库中提取出参考页面配置信息；

根据所述参考页面配置信息对所述目标页面配置信息进行校验处理，得到页面校验结果；

若所述页面校验结果表征为校验合格，将所述目标页面配置信息存入所述页面配置数据库。

根据本发明的一些实施例，在所述若所述页面校验结果表征为校验合格，将所述目标页面配置信息存入所述页面配置数据库之后，所述方法还包括：

获取页面调用请求；

根据所述页面调用请求从所述页面配置数据库中提取出选定页面配置信息；

通过预设的渲染引擎加载所述选定页面配置信息，以渲染出选定页面，并将所述选定页面进行预览。

为实现上述目的，本申请实施例的第二方面提出了一种风扇控制装置，所述装置包括：

获取请求模块，用于获取页面新建请求；其中，所述页面新建请求包括：页面配置信息和页面布局信息；

页面配置模块，用于根据所述页面配置信息和所述页面布局信息在预设的空白页面上进行页面配置，得到初始页面；

组件信息获取模块，用于获取页面组件信息；其中，所述页面组件信息包括：组件配置信息、组件基本属性信息和组件配置工具信息；

数据表选择模块，用于根据所述组件配置信息对预设的候选组件数据表进行筛选，得到目标组件数据表；

列信息获取模块，用于将所述选定组件数据表中的字段信息添加至预先配置的组件列信息，得到目标组件列信息；

信息合并模块，用于将所述目标组件列信息、所述组件基本属性信息、所述组件配置工具信息和所述初始页面的初始页面信息进行合并，得到目标页面信息；

页面渲染模块，用于根据所述目标页面信息进行页面渲染，得到目标页面。

为实现上述目的，本申请实施例的第三方面提出了一种电子设备，所述电子设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现上述第一方面所述的方法。

为实现上述目的，本申请实施例的第四方面提出了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述第一方面所述的方法。

本申请提出的一种前端页面构建方法和装置、电子设备及存储介质,其通过根据用户发起页面新建请求和页面组件信息自动在空白页面上进行页面配置、组件配置以确定目标页面信息，再根据目标页面信息渲染以构建目标页面。因此，本申请通过对页面组件信息的简单配置，得到页面组件的配置信息再结合组件列信息和初始页面的配置信息得到目标页面信息，最后通过渲染得到目标页面，以便于根据不同平台需求构建对应的目标页面，且目标页面构建操作简易，不仅能够解决前端页面开发内容重复度高，且不同平台的开发适配度低下的问题，还能够降低开发人员的工作量和技术要求。

附图说明

图1是本申请实施例提供的前端页面构建方法的流程图；

图2是图1中的步骤S102的流程图；

图3是图1中的步骤S104的流程图；

图4是图1中的步骤S106的流程图；

图5是图4中的步骤S401的流程图；

图6是本申请另一实施例提供的设备测试方法的流程图；

图7是本申请另一实施例提供的设备测试方法的流程图；

图8是本申请实施例提供的前端页面构建装置的结构示意图；

图9是本申请实施例提供的电子设备的硬件结构示意图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。

需要说明的是，虽然在装置示意图中进行了功能模块划分，在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于装置中的模块划分，或流程图中的顺序执行所示出或描述的步骤。说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。

除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本申请实施例的目的，不是旨在限制本申请。

随着企业数字化转行逐步深入，企业对的数字化产品的需求也在逐步扩大；为应对逐步扩大的软件需求，软件研发企业或部门使用传统开发页面开发模式会存在工作内容类似，工作量大的问题，多个相同功能只有个别的信息不同，从整体风格，整体框架，整体结构都是一样。这样情况会存在开发人员在做着无效的开发。若通过开发人员根据不同平台需求构建前端页面。但是开发人员主要通过操作代码以建立前端页面，并根据不同平台需求独立构建前端页面，不仅对开发人员有较高的技术要求，还增加了开发人员的工作量。因此，如何通过简单配置即可完成前端页面的构建，成为亟待解决的技术问题。

基于此，本申请实施例提供了一种前端页面构建方法和装置、电子设备及存储介质，旨在通过简单配置来完成前端页面的构建，以根据不同平台需求快速构建出对应的前端页面，从而解决前端页面开发内容重复度高，且不同平台的开发适配度低下的问题，还降低了开发人员的工作量。

本申请实施例提供的前端页面构建方法和装置、电子设备及存储介质，具体通过如下实施例进行说明，首先描述本申请实施例中的前端页面构建方法。

本申请实施例提供的前端页面构建方法，涉及前端页面设计领域。本申请实施例提供的前端页面构建方法可应用于终端中，也可应用于服务器端中，还可以是运行于终端或服务器端中的软件。在一些实施例中，终端可以是智能手机、平板电脑、笔记本电脑、台式计算机等；服务器端可以配置成独立的物理服务器，也可以配置成多个物理服务器构成的服务器集群或者分布式***，还可以配置成提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN以及大数据和人工智能平台等基础云计算服务的云服务器；软件可以是实现前端页面构建方法的应用等，但并不局限于以上形式。

本申请可用于众多通用或专用的计算机***环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器***、基于微处理器的***、置顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何***或设备的分布式计算环境等等。本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

参照图1，根据本申请实施例第一方面实施例提供的前端页面构建方法，前端页面构建方法可以包括但不限于包括步骤S101至步骤S107。

步骤S101，获取页面新建请求，其中，页面新建请求包括：页面配置信息和页面布局信息

步骤S102，根据页面配置信息和页面布局信息在预设的空白页面上进行页面配置，得到初始页面；

步骤S103，获取页面组件信息，其中，页面组件信息包括：组件配置信息、组件基本属性信息和组件配置工具信息；

步骤S104，根据组件配置信息对预设的候选组件数据表进行筛选，得到目标组件数据表；

步骤S105，将选定组件数据表中的字段信息添加至预先配置的组件列信息，得到目标组件列信息；

步骤S106，将目标组件列信息、组件基本属性信息、组件配置工具信息和初始页面的初始页面信息进行合并，得到目标页面信息；

步骤S107，根据目标页面信息进行页面渲染，得到目标页面。

本申请实施例所示意的步骤S101至步骤S107，通过获取页面新建请求，根据页面新建请求在预设的空白页面上进行页面配置得到初始页面。然后获取组件配置信息、组件基本属性信息和组件配置工具信息，再根据组件配置信息从预设的候选组件数据表筛选出目标组件数据表，以确定组件配置信息对应的目标组件数据表，再将选定组件数据表中的字段信息添加至预先配置的组件列信息得到目标组件列信息。最后将目标组件列信息、组件基本属性信息、组件配置工具信息和初始页面的初始页面信息进行合并得到目标页面信息，根据目标页面信息进行页面渲染，得到目标页面。因此，本申请通过简单配置即可完成前端页面的构建，以便于根据不同页面需求构建页面，降低前端页面内容的重复度。

在一些实施例的步骤S101中，前端页面构建方法运行于前端页面构建***上，当用户在前端页面构建***的界面上进入***菜单，在***菜单的页面配置区域中勾选配置参数后，再在***菜单的页面布局区域构建对应的页面布局参数后点击“页面新建”按键以生成页面新建请求。因此，通过获取页面新建请求以确定需要构建的前端页面的页面配置信息和页面布局信息。其中，用户也可直接在***菜单上的空白页面自动拖拽页面区域框，且页面区域框为预先配置好页面布局参数的区域，所以根据用户拖拽的页面区域框生成页面配置信息和页面布局信息。

在一些实施例中，请参阅图2，步骤S102可以包括但不限于包括步骤S201至步骤S202：

步骤S201，根据页面配置信息从预设的页面配置部件中筛选出目标页面配置部件；

步骤S202，根据页面布局信息将目标页面配置部件设置于空白页面上，得到初始页面。

在一些实施例的步骤S201中，页面配置信息包括：页面类型和页面归属信息，则根据页面类型确定新建页面的页面类型，再根据页面归属信息设置页面归属。

例如，若页面类型包括以下任意一种：标准型、分散分布型、集中分布型，页面归属信息包括以下任意一种：桌面端、平台端。若页面配置信息的内容是(标准型，桌面端)，则根据页面类型确定新建页面的页面类型为标准，再根据页面归属信息设置页面归属为桌面端。因此，通过页面配置信息确定需要构建前端页面的页面类型和页面归属。

在一些实施例的步骤S202中，页面布局信息包括：页面布局方式和布局参数，根据页面布局方式设置目标页面配置部件的摆放区域/页面位置，再根据布局参数设置目标页面配置部件的显示参数。其中，显示参数包括显示颜色、显示形状、显示大小。

本申请实施例所示意的步骤S201至步骤S202，通过用户自动确定页面配置生成页面配置信息，选择页面布局后生成页面布局信息，然后后台自动根据页面配置信息来确定新建页面的页面类型和页面归属，再根据页面布局信息完成了新建页面的布局设置得到初始界面。因此，用户仅需要在平台上选择页面布局相关信息即可新建页面，使得页面新建操作简易，减少了用户新建初始页面所需的工作量。

构建初始页面后，在一些实施例的步骤S103中，当用户在***菜单上点击添加组件请求后，跳转至添加页面组件信息窗口，用户可以通过填写组件基本属性信息、勾选功能部件、添加过滤条件等方式来生成页面组件信息。

请参阅图3，在一些实施例中，步骤S104可以包括但不限于包括步骤S301至步骤S304：

步骤S301，根据组件初选信息从预设的候选数据表中筛选出初步数据表；

步骤S302，根据组件过滤条件对初步数据表的表格内容进行过滤处理，得到选定组件数据表；

步骤S303，根据表格关联信息将选定组件数据表进行关联处理，得到目标数据表。

在一些实施例的步骤S301中，根据组件初选信息从预设的候选数据表中筛选出初步数据表。其中，初步数据表包括至少2张数据表，且包含主数据表和子数据表。

在一些实施例的步骤S302中，组件过滤条件包括：目标数据表表名和过滤条件，根据目标数据表表名可以确定初步数据表中对应表名的数据表，再根据过滤条件对该表名的数据表进行过滤处理，去除冗杂数据，以提高***运行效率。

在一些实施例的步骤S303中，表格关联信息包括：链接方式信息、选定数据表表名、选定数据表别名和链接字段，根据链接方式信息确定此表与选定数据表的链接方式，再根据选定数据表表名、选定数据表别名和链接字段将两表进行关联，从而得到目标数据表。因此，用户可以通过简单的配置即可以完成数据表之间的连接，使得目标数据表构建简易。

需要说明的是，用户通过可视化界面即可对上述组件初选信息、组件过滤条件以及表格关联信息进行增加、删除、修改、查阅。

本申请实施例所示意的步骤S301至步骤S303，根据组件初选信息、组件过滤条件、表格关联信息选择出目标数据表，简化了用户对数据库进行操作的流程，用户通过简单的配置即可完成对目标数据表的配置。

在一些实施例的步骤S105中，前端页面构建***将选定组件数据表中的字段信息添加至预先配置的组件列信息后，用户在***菜单点击“列信息窗口”跳转至列信息窗口，用户可以在列信息窗口对组件列信息进行修改，得到目标组件列信息。

请参阅图4，在一些实施例中，步骤S106可以包括但不限于包括步骤S401至步骤S403：

步骤S401，根据组件基本属性信息从预设的候选组件中筛选出目标组件；

步骤S402，根据组件配置工具信息从预设的配置工具栏的候选按钮中筛选出目标按钮；

步骤S403，根据目标组件列信息将目标组件、目标按钮加载于初始页面信息对应的初始页面上，得到目标页面。

在一些实施例的步骤S401中，预设的候选组件上设有候选组件标签信息，根据组件基本属性信息从候选组件标签信息中查找出对应的候选组件标签信息作为目标组件标签信息，再将目标组件标签信息对应的候选组件作为目标组件。

在一些实施例的步骤S402中，组件配置工具信息包括：组件按钮名称、组件按钮归属信息、组件按钮样式信息，采用的组件按钮名称与目标组件按钮功能一致以便于对目标组件按钮进行管理，根据组件按钮归属信息确定目标组件按钮的布局位置，再根据组件按钮样式信息对目标按钮样式进行筛选，得到目标按钮。

在一些实施例的步骤S403中，根据目标组件列信息确定组件基本属性信息和组件配置工具信息的具体字段数据，再根据具体字段数据筛选出目标组件和目标按钮，最后将目标组件、目标按钮加载于初始页面信息对应的初始页面上，得到目标页面。

本申请实施例所示意的步骤S401至步骤S403，根据组件基本属性信息和组件配置工具信息完成对目标组件和目标按钮的筛选，结合上组件列信息以及初始页面信息完成了目标页面的构建，因此用户可以通过简单配置便完成前端页面的构建工作。

请参阅图5，在一些实施例中，组件基本属性信息包括：组件名称信息、组件功能信息和组件关联信息，步骤S401可以包括但不限于包括步骤S501至步骤S502：

步骤S501，根据组件名称信息和组件功能信息从预设的候选组件中筛选出选定组件；

步骤S502，根据组件关联信息将选定组件进行关联处理，得到目标组件信息。

在一些实施例的步骤S501中，组件名称信息包括：组件名称、数据表号，组件功能信息包括：显示区域、组件类型、分页行数、组件代码。其中，组件代码可以是事件的定义代码，用于进行业务功能的处理。

需要说明的是，用户可以在组件信息窗口对组件功能信息进行修改，如：修改组件的显示区域、修改组件类型、修改分页行数、修改与组件连接的数据表号，在用户修改完组件信息后点击“保存”按钮，前端页面构建***会对组件进行相应的信息修改后，得到选定组件。

在一些实施例的步骤S502中，组件关联信息包括：数据类型、组件关联条件，组件关联条件依托于组件的列信息，用户可以通过添加、修改和删除列信息来修改组件之间的关联。因此，通过数据类型、组件关联条件将选定组件进行关联，对于同一数据类型的选定组件关联，再根据组件关联条件确定关联的选定组件。例如，若组件关联条件为组件1执行后弹出组件2，那么组件1和组件2进行关联。

请参阅图6，在一些实施例，在步骤S403之后，前端页面构建方法还包括但不限于包括步骤S601至步骤S603：

步骤S601，从预设的页面配置数据库中提取出参考页面配置信息；

步骤S602，根据参考页面配置信息对目标页面配置信息进行校验处理，得到页面校验结果；

步骤S603，若页面校验结果表征为校验合格，将目标页面配置信息存入页面配置数据库。

在一些实施例的步骤S601中，页面配置数据库存储多个页面配置信息，且每构建目标页面后，都将目标页面的页面配置信息存入页面配置数据库。因此，将页面配置数据库中所有的页面配置信息提取出作为参考页面配置信息，以通过参考页面配置信息作为目标页面配置信息是否相同的判断参考。

在一些实施例的步骤S602和步骤S603中，通过参考页面配置信息对目标页面配置信息进行正确性验证，如：数据类型、组件类型、组件代码等内容，若类型不匹配或不存在，以及组件代码存在语法错误等问题，均属于校验不合格，再对目标页面配置信息中部分数据进行唯一性验证，如：组件名称、列信息名称、按钮名称等，在进行数据库遍历比对后，若存在相同名称则页面校验结果表征为不合格。若页面校验合格，则保存目标页面配置信息数据以便存储数据以用于页面调用。

本申请实施例所示意的步骤S601至步骤S603，通过预设的页面配置数据库对目标页面配置信息进行校验，以将校验合格的目标页面配置信息存入页面配置数据库，以保证页面配置数据库中的页面配置信息的正确性与部分数据的唯一性。

请参阅图7，在一些实施例中，在步骤S603之后，前端页面构建方法还包括但不限于包括步骤S701至步骤S703：

步骤S701，获取页面调用请求；

步骤S702，根据页面调用请求从页面配置数据库中提取出选定页面配置信息；

步骤S703，通过预设的渲染引擎加载选定页面配置信息，以渲染出选定页面，并将选定页面进行预览。

在一些实施例的步骤S701中，获取页面调用请求，其中，页面调用请求是预览按钮的点击触发事件。

在一些实施例的步骤S702中，页面调用请求包括：选定页面序号和预览事件，根据选定页面序号从页面配置数据库中提取出选定页面配置信息，再根据预览事件对选定页面配置信息执行预览事件。

在一些实施例的步骤S703中，预设的渲染引擎通过加载选定页面配置信息，根据选定页面配置信息自动组装页面、组件、工具栏，最终渲染出选定页面为H5页面，且H5页面默认为跨平台页面，将选定页面进行预览。

本申请实施例所示意的步骤S701至步骤S703，通过页面调用和预设的渲染引擎对选定页面进行渲染后，让用户能够跨平台预览到选定页面的页面内容。

请参阅图8，本申请实施例还提供一种前端页面构建装置，可以实现上述前端页面构建方法，该装置包括：

获取请求模块801，用于获取页面新建请求；其中，页面新建请求包括：页面配置信息和页面布局信息；

页面配置模块802，用于根据页面配置信息和页面布局信息在预设的空白页面上进行页面配置，得到初始页面；

组件信息获取模块803，用于获取页面组件信息；其中，页面组件信息包括：组件配置信息和组件基本属性信息和组件配置工具信息；

数据表选择模块804，用于根据组件配置信息对预设的候选组件数据表进行筛选，得到目标组件数据表；

列信息获取模块805，用于将选定组件数据表中的字段信息添加至预先配置的组件列信息，得到目标组件列信息；

信息合并模块806，用于将目标组件列信息、组件基本属性信息、组件配置工具信息和初始页面的初始页面信息进行合并，得到目标页面信息；

页面渲染模块807，用于根据目标页面信息进行页面渲染，得到目标页面。

该前端页面构建装置的具体实施方式与上述前端页面构建方法的具体实施例基本相同，在此不再赘述。

本申请实施例还提供了一种电子设备，电子设备包括存储器和处理器，存储器存储有计算机程序，处理器执行计算机程序时实现上述前端页面构建方法。该电子设备可以为包括平板电脑、车载电脑等任意智能终端。

请参阅图9，图9示意了另一实施例的电子设备的硬件结构，电子设备包括：

处理器901，可以采用通用的CPU(CentralProcessingUnit，中央处理器)、微处理器、应用专用集成电路(ApplicationSpecificIntegratedCircuit，ASIC)、或者一个或多个集成电路等方式实现，用于执行相关程序，以实现本申请实施例所提供的技术方案；

存储器902，可以采用只读存储器(ReadOnlyMemory，ROM)、静态存储设备、动态存储设备或者随机存取存储器(RandomAccessMemory，RAM)等形式实现。存储器902可以存储操作***和其他应用程序，在通过软件或者固件来实现本说明书实施例所提供的技术方案时，相关的程序代码保存在存储器902中，并由处理器901来调用执行本申请实施例的前端页面构建方法；

输入/输出接口903，用于实现信息输入及输出；

通信接口904，用于实现本设备与其他设备的通信交互，可以通过有线方式(例如USB、网线等)实现通信，也可以通过无线方式(例如移动网络、WIFI、蓝牙等)实现通信；

总线905，在设备的各个组件(例如处理器901、存储器902、输入/输出接口903和通信接口904)之间传输信息；

其中处理器901、存储器902、输入/输出接口903和通信接口904通过总线905实现彼此之间在设备内部的通信连接。

本申请实施例还提供了一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，该计算机程序被处理器执行时实现上述前端页面构建方法。

存储器作为一种非暂态计算机可读存储介质，可用于存储非暂态软件程序以及非暂态性计算机可执行程序。此外，存储器可以包括高速随机存取存储器，还可以包括非暂态存储器，例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施方式中，存储器可选包括相对于处理器远程设置的存储器，这些远程存储器可以通过网络连接至该处理器。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

本申请实施例提供的前端页面构建方法、装置、电子设备及存储介质，其通过对页面组件信息的简单配置，得到页面组件的配置信息再结合组件列信息和初始页面的配置信息从而得到了目标页面信息，最后通过渲染得到目标页面，能够解决前端页面开发内容重复度高，且不同平台的开发适配度低下的问题。

本申请实施例描述的实施例是为了更加清楚的说明本申请实施例的技术方案，并不构成对于本申请实施例提供的技术方案的限定，本领域技术人员可知，随着技术的演变和新应用场景的出现，本申请实施例提供的技术方案对于类似的技术问题，同样适用。

本领域技术人员可以理解的是，图中示出的技术方案并不构成对本申请实施例的限定，可以包括比图示更多或更少的步骤，或者组合某些步骤，或者不同的步骤。

以上所描述的装置实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、***、设备中的功能模块/单元可以被实施为软件、固件、硬件及其适当的组合。

本申请的说明书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、***、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

应当理解，在本申请中，“至少一个(项)”是指一个或者多个，“多个”是指两个或两个以上。“和/或”，用于描述关联对象的关联关系，表示可以存在三种关系，例如，“A和/或B”可以表示：只存在A，只存在B以及同时存在A和B三种情况，其中A，B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。“以下至少一项(个)”或其类似表达，是指这些项中的任意组合，包括单项(个)或复数项(个)的任意组合。例如，a，b或c中的至少一项(个)，可以表示：a，b，c，“a和b”，“a和c”，“b和c”，或“a和b和c”，其中a，b，c可以是单个，也可以是多个。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，上述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个***，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

上述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

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

以上参照附图说明了本申请实施例的优选实施例，并非因此局限本申请实施例的权利范围。本领域技术人员不脱离本申请实施例的范围和实质内所作的任何修改、等同替换和改进，均应在本申请实施例的权利范围之内。

Claims (10)

1.一种前端页面构建方法，其特征在于，所述方法包括：

获取页面新建请求；其中，所述页面新建请求包括：页面配置信息和页面布局信息；

根据所述页面配置信息和所述页面布局信息在预设的空白页面上进行页面配置，得到初始页面；

获取页面组件信息；其中，所述页面组件信息包括：组件配置信息、组件基本属性信息和组件配置工具信息；

根据所述组件配置信息对预设的候选组件数据表进行筛选，得到目标组件数据表；

将所述选定组件数据表中的字段信息添加至预先配置的组件列信息，得到目标组件列信息；

将所述目标组件列信息、所述组件基本属性信息、所述组件配置工具信息和所述初始页面的初始页面信息进行合并，得到目标页面信息；

根据所述目标页面信息进行页面渲染，得到目标页面。

2.根据权利要求1所述的方法，其特征在于，所述根据所述页面配置信息和所述页面布局信息在预设的空白页面上进行页面配置，得到初始页面，包括：

根据所述页面配置信息从预设的页面配置部件中筛选出目标页面配置部件；

根据所述页面布局信息将所述目标页面配置部件设置于所述空白页面上，得到所述初始页面。

3.根据权利要求1所述的方法，其特征在于，所述组件配置信息包括：组件初选信息、组件过滤条件和表格关联信息，所述根据所述组件配置信息选择预设的候选数据表，确定目标数据表，包括：

根据所述组件初选信息从预设的候选数据表中筛选出初步数据表；

根据所述组件过滤条件对所述初步数据表的表格内容进行过滤处理，得到选定组件数据表；

根据所述表格关联信息将所述选定组件数据表进行关联处理，得到所述目标数据表。

4.根据权利要求1所述的方法，其特征在于，所述将所述目标组件列信息、所述组件基本属性信息、所述组件配置工具信息和所述初始页面的初始页面信息进行合并，得到目标页面信息，包括：

根据所述组件基本属性信息从预设的候选组件中筛选出目标组件；

根据所述组件配置工具信息从预设的配置工具栏的候选按钮中筛选出目标按钮；

根据所述目标组件列信息将所述目标组件、所述目标按钮加载于所述初始页面信息对应的所述初始页面上，得到目标页面。

5.根据权利要求4所述的方法，其特征在于，所述组件基本属性信息包括：组件名称信息、组件功能信息和组件关联信息，所述根据所述组件基本属性信息从预设的候选组件中筛选出目标组件，包括：

根据所述组件名称信息和所述组件功能信息从预设的候选组件中筛选出选定组件；

根据所述组件关联信息将所述选定组件进行关联处理，得到所述目标组件信息。

6.根据权利要求4所述的方法，其特征在于，所述根据所述目标组件列信息将所述目标组件、所述目标按钮加载于所述初始页面信息对应的所述初始页面上，得到目标页面，还包括：

从所述预设的页面配置数据库中提取出参考页面配置信息；

根据所述参考页面配置信息对所述目标页面配置信息进行校验处理，得到页面校验结果；

若所述页面校验结果表征为校验合格，将所述目标页面配置信息存入所述页面配置数据库。

7.根据权利要求6所述的方法，其特征在于，在所述若所述页面校验结果表征为校验合格，将所述目标页面配置信息存入所述页面配置数据库之后，所述方法还包括：

获取页面调用请求；

根据所述页面调用请求从所述页面配置数据库中提取出选定页面配置信息；

通过预设的渲染引擎加载所述选定页面配置信息，以渲染出选定页面，并将所述选定页面进行预览。

8.一种前端页面构建装置，其特征在于，所述装置包括：

获取请求模块，用于获取页面新建请求；其中，所述页面新建请求包括：页面配置信息和页面布局信息；

页面配置模块，用于根据所述页面配置信息和所述页面布局信息在预设的空白页面上进行页面配置，得到初始页面；

组件信息获取模块，用于获取页面组件信息；其中，所述页面组件信息包括：组件配置信息、组件基本属性信息和组件配置工具信息；

数据表选择模块，用于根据所述组件配置信息对预设的候选组件数据表进行筛选，得到目标组件数据表；

列信息获取模块，用于将所述选定组件数据表中的字段信息添加至预先配置的组件列信息，得到目标组件列信息；

信息合并模块，用于将所述目标组件列信息、所述组件基本属性信息、所述组件配置工具信息和所述初始页面的初始页面信息进行合并，得到目标页面信息；

页面渲染模块，用于根据所述目标页面信息进行页面渲染，得到目标页面。

9.一种电子设备，其特征在于，所述电子设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现权利要求1至7任一项所述的前端页面构建方法。

10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的前端页面构建方法。

Images