页面组件构建方法、装置、页面生成设备及可读存储介质与流程

本申请涉及网页开发技术领域，具体而言，涉及一种页面组件构建方法、装置、页面生成设备及可读存储介质。

背景技术：

随着互联网技术的不断发展，网络服务已逐渐成为人们日常生活中不可缺少的一部分，其中网络服务通常需要通过网页开发来实现，而对网页开发而言，如何快速地构建出合适的页面组件边是网页开发过程中的一个极为重要的实现因素。

目前，市面上通常采用可视化厂商提供的可视化产品在网页系统中嵌套配置出对应页面中的组件，或引用web前端可视化开源脚本库进行组件开发，以在页面中构建出对应的组件。其中，在前一种方式中，通常因浏览器同源策略规定而存在嵌套web页面间通信困难的问题；在后一种方式中，需要网页开发者人工地根据需求对组件的属性及应用进行不断摸索，并进行代码调整，从而使得组件的构建效率不高，进而导致整体的网页开发搭建效率不高。

技术实现要素：

为了克服现有技术中的上述不足，本申请的目的在于提供一种页面组件构建方法、装置、页面生成设备及可读存储介质，其能够快速地构建出合适的页面组件，并避免出现嵌套web页面间通信困难的问题，提高网页开发搭建效率。

就方法而言，本申请实施例提供一种页面组件构建方法，所述方法应用于包括页面生成设备、组件配置服务器及组件脚本服务器的网页开发系统，所述方法包括：

所述页面生成设备向所述组件配置服务器发送用于获取待构建组件的配置信息的配置信息获取请求；

所述组件配置服务器根据所述配置信息获取请求包括的组件种类信息及组件特征信息得到对应的目标配置信息，并将所述目标配置信息发送给所述页面生成设备；

所述页面生成设备向所述组件脚本服务器发送用于获取所述待构建组件所对应的依赖包脚本的脚本资源获取请求；

所述组件脚本服务器根据所述脚本资源获取请求包括的组件种类信息获取对应的目标组件依赖包，并将所述目标组件依赖包发送给所述页面生成设备；

所述页面生成设备根据所述目标配置信息、所述目标组件依赖包及与所述待构建组件对应的业务数据，在当前页面环境中渲染生成与所述待构建组件对应的页面组件。

就方法而言，本申请实施例还提供一种页面组件构建方法，所述方法应用于网页开发系统包括的页面生成设备，其中所述系统还包括组件配置服务器及组件脚本服务器，所述方法包括：

向所述组件配置服务器发送用于获取待构建组件的配置信息的配置信息获取请求，使所述组件配置服务器反馈对应的目标配置信息，其中所述配置信息获取请求包括所述待构建组件对应的组件种类信息及组件特征信息；

向所述组件脚本服务器发送用于获取所述待构建组件所对应的依赖包脚本的脚本资源获取请求，使所述组件脚本服务器反馈对应的目标组件依赖包，其中所述脚本资源获取请求包括所述待构建组件对应的组件种类信息；

根据所述目标配置信息、所述目标组件依赖包及与所述待构建组件对应的业务数据，在当前页面环境中渲染生成与所述待构建组件对应的页面组件。

就装置而言，本申请实施例提供一种页面组件构建装置，所述装置应用于网页开发系统包括的页面生成设备，其中所述系统还包括组件配置服务器及组件脚本服务器，所述装置包括：

配置获取模块，用于向所述组件配置服务器发送用于获取待构建组件的配置信息的配置信息获取请求，使所述组件配置服务器反馈对应的目标配置信息，其中所述配置信息获取请求包括所述待构建组件对应的组件种类信息及组件特征信息；

脚本获取模块，用于向所述组件脚本服务器发送用于获取所述待构建组件所对应的依赖包脚本的脚本资源获取请求，使所述组件脚本服务器反馈对应的目标组件依赖包，其中所述脚本资源获取请求包括所述待构建组件对应的组件种类信息；

组件生成模块，用于根据所述目标配置信息、所述目标组件依赖包及与所述待构建组件对应的业务数据，在当前页面环境中渲染生成与所述待构建组件对应的页面组件。

就设备而言，本申请实施例提供一种页面生成设备，所述设备应用于包括组件配置服务器及组件脚本服务器的网页开发系统，所述页面生成设备包括处理器及存储有计算机指令的非易失性存储器，所述计算机指令被所述处理器执行时，所述页面生成设备执行上述的页面组件构建方法。

就存储介质而言，本申请实施例提供一种可读存储介质，所述可读存储介质包括计算机程序，所述计算机程序运行时控制所述可读存储介质所在页面生成设备执行上述的页面组件构建方法。

相对于现有技术而言，本申请具有以下有益效果：

本申请通过页面生成设备向组件配置服务器发送与待构建组件对应的配置信息获取请求，并向组件脚本服务器发送与该待构建组件对应的脚本资源获取请求，以从所述组件配置服务器获取到对应的目标配置信息，从所述组件脚本服务器获取到对应的目标组件依赖包，从而在所述页面生成设备当前的页面环境下，基于与该待构建组件对应的目标配置信息、目标组件依赖包及业务数据快速地渲染生成对应的页面组件，进而确保生成的页面组件均属于在所述页面生成设备处的本地化组件，避免出现嵌套web页面间通信困难的问题，提高网页开发搭建效率。

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

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对本申请保护范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本申请实施例提供的网页开发系统的组成示意图；

图2为本申请实施例提供的页面生成设备的方框示意图；

图3为本申请实施例提供的页面组件构建方法的第一种流程示意图；

图4为本申请实施例提供的页面组件构建方法的第二种流程示意图；

图5为本申请实施例提供的页面组件构建装置的方框示意图。

图标：10-网页开发系统；11-页面生成设备；12-组件配置服务器；13-组件脚本服务器；111-存储器；112-处理器；113-通信单元；200-页面组件构建装置；210-配置获取模块；220-脚本获取模块；230-组件生成模块。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

下面结合附图，对本申请的一些实施方式作详细说明。在不冲突的情况下，下述的实施例及实施例中的特征可以相互组合。

请参照图1，图1是本申请实施例提供的网页开发系统10的组成示意图。在本申请实施例中，所述网页开发系统10可用于进行网页开发及网页搭建，其中所述网页开发系统10包括页面生成设备11、组件配置服务器12及组件脚本服务器13。

在本实施例中，所述组件配置服务器12上运行有web可视化开发平台，所述组件配置服务器12可通过所述web可视化开发平台创建组件，并得到与创建的组件相对应的配置信息，其中所述配置信息用于表示对应组件在网络环境下所具有的展示配置情况。

在本实施例中，所述组件脚本服务器13与所述组件配置服务器12通信连接，并存储与该组件配置服务器12所涉及到的组件种类相对应的网页web前端依赖包，其中每个组件种类所对应的web前端依赖包用于表示对应组件种类的组件在网络环境下所表现出的依赖关系的脚本代码。在本实施例的一种实施方式中，所述组件脚本服务器13与所述组件配置服务器12集成在一起。

在本实施例中，所述页面生成设备11与所述组件配置服务器12及所述组件脚本服务器13通信连接，以从所述组件配置服务器12处获取待构建组件的配置信息，并从所述组件脚本服务器13处获取组件种类与待构建组件的组件种类相同的web前端依赖包，从而在自身当前的页面环境下基于与该待构建组件对应的目标配置信息、目标组件依赖包及业务数据快速地渲染生成对应的页面组件，进而确保生成的页面组件均属于在所述页面生成设备11处的本地化组件，避免出现嵌套web页面间通信困难的问题，提高网页开发搭建效率。其中，所述业务数据用于表示网页开发人员通过所述页面生成设备11赋予给待构建组件的组件业务属性。

可选地，请参照图2，图2是本申请实施例提供的页面生成设备11的方框示意图。在本申请实施例中，所述页面生成设备11包括页面组件构建装置200、存储器111、处理器112及通信单元113。所述存储器111、所述处理器112及所述通信单元113各个元件相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，所述存储器111、所述处理器112及所述通信单元113这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。其中，所述页面生成设备11可以是，但不限于，个人电脑(personalcomputer，pc)、平板电脑、个人数字助理(personaldigitalassistant，pda)、移动上网设备(mobileinternetdevice，mid)等。

在本实施例中，所述存储器111为非易失性存储器，存储器111用于存储计算机指令或计算机程序，所述处理器112在接收到执行指令后，可相应地执行所述计算机指令或所述计算机程序。其中，所述处理器112可以是一种具有信号的处理能力的集成电路芯片。所述处理器112可以是通用处理器，包括中央处理器(centralprocessingunit，cpu)、图形处理器(graphicsprocessingunit，gpu)、网络处理器(networkprocessor，np)等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等，可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。

在本实施例中，所述通信单元113用于通过网络建立所述页面生成设备11与其他外部设备之间的通信连接，并通过所述网络收发数据。例如，所述页面生成设备11通过所述通信单元113与所述组件配置服务器12及所述组件脚本服务器13通信连接。

在本实施例中，所述页面组件构建装置200包括至少一个能够以软件或固件的形式存储于所述存储器111中或固化在所述页面生成设备11的操作系统中的软件功能模块。所述处理器112可用于执行所述存储器111存储的可执行模块，例如所述页面组件构建装置200所包括的软件功能模块及计算机程序等。所述页面生成设备11可通过所述页面组件构建装置200快速生成在所述页面生成设备11处属于本地化组件的页面组件，从而避免出现嵌套web页面间通信困难的问题，提高网页开发搭建效率。

可以理解的是，图2所示的框图仅为页面生成设备11的一种结构组成示意图，所述页面生成设备11还可包括比图2中所示更多或者更少的组件，或者具有与图2所示不同的配置。图2中所示的各组件可以采用硬件、软件或其组合实现。

请参照图3，图3是本申请实施例提供的页面组件构建方法的第一种流程示意图。在本申请实施例中，图3所示的页面组件构建方法应用于上述网页开发系统10，下面对图3所示的页面组件构建方法的具体流程和步骤进行详细阐述。

步骤s310，页面生成设备11向组件配置服务器12发送用于获取待构建组件的配置信息的配置信息获取请求。

在本实施例中，所述配置信息获取请求包括有与所述待构建组件对应的组件种类信息及组件特征信息，其中所述组件特征信息用于表示网页开发人员针对待构建组件的组件形状要求。

步骤s320，所述组件配置服务器12根据所述配置信息获取请求包括的组件种类信息及组件特征信息得到对应的目标配置信息，并将所述目标配置信息发送给所述页面生成设备11。

在本实施例中，所述组件配置服务器12根据所述配置信息获取请求包括的组件种类信息及组件特征信息得到对应的目标配置信息，包括：

在存储的多个标准化组件中选取与所述组件种类信息对应的标准化组件；

按照所述组件特征信息对选取到的所述标准化组件的组件属性进行调整；

对调整后的所述标准化组件进行组件解耦，并以解耦得到的组件配置信息作为所述目标配置信息。

其中，所述组件配置服务器12中存储的每个标准化组件对应一个组件种类。所述组件配置服务器12通过所述组件特征信息对与所述组件种类信息对应的标准化组件进行组件属性调整，并对完成调整的所述标准化组件进行组件解耦，从而将解耦得到的与该标准化组件对应的组件配置信息作为与所述配置信息获取请求对应的目标配置信息。

在本实施例的一种实施方式中，所述组件配置服务器12在得到与配置信息获取请求对应的目标配置信息后，可向所述页面生成设备11提供一包括有多个待构建组件的组件配置信息的列表，以使网页开发人员通过所述页面生成设备11在所述列表中选取需要的目标配置信息，从而使该组件配置服务器12将被选取的所述目标配置信息发送给所述页面生成设备11。

步骤s330，所述页面生成设备11向组件脚本服务器13发送用于获取所述待构建组件所对应的依赖包脚本的脚本资源获取请求。

在本实施例中，所述脚本资源获取请求包括有与所述待构建组件对应的组件种类信息。所述页面生成设备11可在向所述组件配置服务器12发送配置信息获取请求的同时，向所述组件脚本服务器13发送脚本资源获取请求。

步骤s340，所述组件脚本服务器13根据所述脚本资源获取请求包括的组件种类信息获取对应的目标组件依赖包，并将所述目标组件依赖包发送给所述页面生成设备11。

在本实施例中，所述组件脚本服务器13根据所述脚本资源获取请求包括的组件种类信息获取对应的目标组件依赖包，包括：

在存储的各个组件种类所对应的web前端依赖包中，查找与所述组件种类信息对应的web前端依赖包，并以查找到的web前端依赖包作为所述目标组件依赖包。

其中，所述组件脚本服务器13在获取到与所述脚本资源获取请求对应的目标组件依赖包后，会直接将该目标组件依赖包反馈给所述页面生成设备11。

步骤s350，所述页面生成设备11根据所述目标配置信息、所述目标组件依赖包及与所述待构建组件对应的业务数据，在当前页面环境中渲染生成与所述待构建组件对应的页面组件。

在本实施例中，所述页面生成设备11根据所述目标配置信息、所述目标组件依赖包及与所述待构建组件对应的业务数据，在当前页面环境中渲染生成与所述待构建组件对应的页面组件，包括：

在当前页面环境中创建与所述待构建组件的组件种类信息对应的标准化组件，并将所述业务数据加载到所述标准化组件上；

以所述目标配置信息及所述目标组件依赖包对加载完所述业务数据的所述标准化组件进行本地渲染，并以渲染得到的组件作为与所述待构建组件对应的页面组件。

其中，所述页面生成设备11可采用组件初始化函数对被创建的标准化组件进行本地渲染，以使基于所述目标配置信息、所述目标组件依赖包及所述业务数据完成渲染操作的标准化组件属于在所述页面生成设备11处的本地化组件，从而避免出现嵌套web页面间通信困难的问题，提高网页开发搭建效率。

可选地，请参照图4，图4是本申请实施例提供的页面组件构建方法的第二种流程示意图。在本申请实施例中，图4所示的页面组件构建方法应用于上述页面生成设备11，下面对图4所示的页面组件构建方法的具体流程和步骤进行详细阐述。

步骤s410，向组件配置服务器12发送用于获取待构建组件的配置信息的配置信息获取请求，使所述组件配置服务器12反馈对应的目标配置信息。

在本实施例中，所述配置信息获取请求包括所述待构建组件对应的组件种类信息及组件特征信息。

步骤s420，向组件脚本服务器13发送用于获取所述待构建组件所对应的依赖包脚本的脚本资源获取请求，使所述组件脚本服务器13反馈对应的目标组件依赖包。

在本实施例中，所述脚本资源获取请求包括所述待构建组件对应的组件种类信息。

步骤s430，根据所述目标配置信息、所述目标组件依赖包及与所述待构建组件对应的业务数据，在当前页面环境中渲染生成与所述待构建组件对应的页面组件。

在本实施例中，所述根据所述目标配置信息、所述目标组件依赖包及与所述待构建组件对应的业务数据，在当前页面环境中渲染生成与所述待构建组件对应的页面组件，包括：

在当前页面环境中创建与所述待构建组件的组件种类信息对应的标准化组件，并将所述业务数据加载到所述标准化组件上；

以所述目标配置信息及所述目标组件依赖包对加载完所述业务数据的所述标准化组件进行本地渲染，并以渲染得到的组件作为与所述待构建组件对应的页面组件。

请参照图5，图5是本申请实施例提供的页面组件构建装置200的方框示意图。在本申请实施例中，所述页面组件构建装置200包括配置获取模块210、脚本获取模块220及组件生成模块230。

所述配置获取模块210，用于向组件配置服务器12发送用于获取待构建组件的配置信息的配置信息获取请求，使所述组件配置服务器12反馈对应的目标配置信息，其中所述配置信息获取请求包括所述待构建组件对应的组件种类信息及组件特征信息。

所述脚本获取模块220，用于向组件脚本服务器13发送用于获取所述待构建组件所对应的依赖包脚本的脚本资源获取请求，使所述组件脚本服务器13反馈对应的目标组件依赖包，其中所述脚本资源获取请求包括所述待构建组件对应的组件种类信息。

所述组件生成模块230，用于根据所述目标配置信息、所述目标组件依赖包及与所述待构建组件对应的业务数据，在当前页面环境中渲染生成与所述待构建组件对应的页面组件。

其中，所述组件生成模块230根据所述目标配置信息、所述目标组件依赖包及与所述待构建组件对应的业务数据，在当前页面环境中渲染生成与所述待构建组件对应的页面组件的方式，包括：

在当前页面环境中创建与所述待构建组件的组件种类信息对应的标准化组件，并将所述业务数据加载到所述标准化组件上；

以所述目标配置信息及所述目标组件依赖包对加载完所述业务数据的所述标准化组件进行本地渲染，并以渲染得到的组件作为与所述待构建组件对应的页面组件。

本申请实施例还提供一种可读存储介质，所述可读存储介质存储有计算机程序，所述计算机程序运行时控制所述可读存储介质所在页面生成设备11执行上述的页面组件构建方法。其中，所述可读存储介质可以是页面生成设备11中(比如，个人计算机、服务器等)能够存取数据的任何可用介质，或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，dvd)或者半导体介质(例如，固态硬盘(solidstatedisk，ssd))等各种可以存储程序代码的介质。

综上所述，在本申请实施例提供的页面组件构建方法、装置、页面生成设备及可读存储介质中，本申请通过页面生成设备向组件配置服务器发送与待构建组件对应的配置信息获取请求，并向组件脚本服务器发送与该待构建组件对应的脚本资源获取请求，以从所述组件配置服务器获取到对应的目标配置信息，从所述组件脚本服务器获取到对应的目标组件依赖包，从而在所述页面生成设备当前的页面环境下，基于与该待构建组件对应的目标配置信息、目标组件依赖包及业务数据快速地渲染生成对应的页面组件，进而确保生成的页面组件均属于在所述页面生成设备处的本地化组件，避免出现嵌套web页面间通信困难的问题，提高网页开发搭建效率。

以上所述，仅为本申请的各种实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，所作的可轻易想到的修改变化或等同替换，均应涵盖在本申请的保护范围之内。