CN113419729B - 基于组件化的前端页面搭建方法、装置、设备及存储介质 - Google Patents

Abstract

本发明涉及研发管理领域，公开了一种基于组件化的前端页面搭建方法、装置、设备及存储介质，用于解决目前在不同框架中组件无法迁移使用的问题。所述方法包括：接收终端发送的页面搭建请求并对页面搭建请求进行解析，得到组件描述规则；根据组件描述规则构建多个候选组件；基于各候选组件创建组件描述文件集并将组件描述文件集发送至数据库；接收终端发送的组件获取指令并根据组件获取指令从组件描述文件集中下载目标组件描述文件；根据目标组件描述文件确定多个目标组件并将各目标组件注册至组件管理器；从组件管理器中调用各目标组件进行页面搭建并根据初始页面的框架类型确定渲染函数，采用渲染函数对各目标组件进行渲染，得到目标页面。

Description

基于组件化的前端页面搭建方法、装置、设备及存储介质

技术领域

本发明涉及研发管理领域，尤其涉及一种基于组件化的前端页面搭建方法、装置、设备及存储介质。

背景技术

随着前端开发的日趋复杂，组件化开发便应运而生，早些年流行的jQuery库就已经有了组件化的思想，当前盛行的前端三大框架，即React、Vue和Angular，都开发实现了各自框架的组件化系统，这些方案都已经被许多厂商广泛地使用和实践，能够很好地服务于实际的业务。

但是仍然存在一些缺陷和不足。三大框架的组件化方案中最大的缺陷是对框架过分依赖，即基于某个框架开发好的组件库，无法便捷地迁移给使用其他框架的系统使用。

发明内容

本发明的主要目的在于解决在不同的前端框架中组件无法迁移使用的问题。

本发明第一方面提供了一种基于组件化的前端页面搭建方法，包括：接收终端发送的页面搭建请求并对所述页面搭建请求进行解析，得到对应的组件描述规则；根据所述组件描述规则构建用于页面搭建的多个候选组件；基于所述多个候选组件创建对应的组件描述文件集，并将所述组件描述文件集发送至预置数据库；接收终端发送的组件获取指令，根据所述组件获取指令从所述预置数据库的所述组件描述文件集中下载对应的目标组件描述文件；根据所述目标组件描述文件确定对应的多个目标组件，并将所述多个目标组件注册至预置初始页面的组件管理器；从所述组件管理器中调用所述多个目标组件进行页面搭建，并根据所述初始页面的框架类型确定对应的渲染函数，采用所述渲染函数对所述多个目标组件进行渲染，得到目标页面。

可选的，在本发明第一方面的第一种实现方式中，在所述接收终端发送的页面搭建请求并对所述页面搭建请求进行解析，得到对应的组件描述规则之后，在所述根据所述组件描述规则构建用于页面搭建的多个候选组件之前，还包括：对所述页面搭建请求进行信息扫描，得到待获取的目标静态资源文件；利用所述目标静态资源文件进行运行环境搭建，并生成对应的初始页面。

可选的，在本发明第一方面的第二种实现方式中，所述根据所述组件描述规则构建用于页面搭建的多个候选组件包括：读取所述组件描述规则，得到结构描述规则、样式描述规则及数据描述规则；根据所述结构描述规则，生成对应的第一JSON格式文件，所述第一JSON格式文件用于定义组件的属性及类型；根据所述样式描述规则，生成对应的第二JSON格式文件，所述第二JSON格式文件用于定义组件的尺寸及形状；根据所述数据描述规则，生成对应的组件基类文件，所述组件基类文件用于实现组件内部逻辑；将所述第一JSON格式文件、第二JSON格式文件及所述组件基类文件拼接为整合文件，并根据所述整合文件生成所述多个候选组件。

可选的，在本发明第一方面的第三种实现方式中，所述基于所述多个候选组件创建对应的组件描述文件集，并将所述组件描述文件集发送至预置数据库包括：读取所述多个候选组件，获取所述多个候选组件的组件信息及组件操作类型信息；基于预设的自动化脚本，将所述组件信息及所述组件操作类型信息添加至预置描述文件，生成多个候选组件描述文件；将所述多个候选组件描述文件合并为组件描述文件集，并将所述组件描述文件集传输至预置数据库中。

可选的，在本发明第一方面的第四种实现方式中，所述接收终端发送的组件获取指令，根据所述组件获取指令从所述预置数据库的所述组件描述文件集中下载对应的目标组件描述文件包括：读取所述组件获取指令的专题需求，得到对应的目标文件标识；基于所述目标文件标识确定与所述专题需求对应的目标组件描述文件的URL地址标签；基于所述URL地址标签从所述预置数据库的所述组件描述文件集中下载所述目标组件描述文件。

可选的，在本发明第一方面的第五种实现方式中，所述根据所述目标组件描述文件确定对应的多个目标组件，并将所述多个目标组件注册至预置初始页面的组件管理器包括：读取所述目标组件描述文件，得到对应的目标组件信息及目标组件操作类型信息；基于所述目标组件信息及所述目标组件操作类型信息，确定对应的多个目标组件；调用初始页面的预置接口对所述多个目标组件进行注册，并将所述多个目标组件导入所述预置初始页面的组件管理器中。

可选的，在本发明第一方面的第六种实现方式中，所述从所述组件管理器中调用所述多个目标组件进行页面搭建，并根据所述初始页面的框架类型确定对应的渲染函数，采用所述渲染函数对所述多个目标组件进行渲染，得到目标页面包括：基于所述初始页面的预设布局文件，调用所述多个目标组件进行页面构建，得到待渲染页面；读取所述初始页面的框架类型，确定与所述框架类型匹配的渲染函数；采用所述渲染函数对所述待渲染页面中的所述多个目标组件进行渲染，得到目标页面。

本发明第二方面提供了一种基于组件化的前端页面搭建装置，包括：接收模块，用于接收终端发送的页面搭建请求并对所述页面搭建请求进行解析，得到对应的组件描述规则；构建模块，用于根据所述组件描述规则构建用于页面搭建的多个候选组件；发送模块，用于基于所述多个候选组件创建对应的组件描述文件集，并将所述组件描述文件集发送至预置数据库；下载模块，用于接收终端发送的组件获取指令，根据所述组件获取指令从所述预置数据库的所述组件描述文件集中下载对应的目标组件描述文件；注册模块，用于根据所述目标组件描述文件确定对应的多个目标组件，并将所述多个目标组件注册至预置初始页面的组件管理器；渲染模块，用于从所述组件管理器中调用所述多个目标组件进行页面搭建，并根据所述初始页面的框架类型确定对应的渲染函数，采用所述渲染函数对所述多个目标组件进行渲染，得到目标页面。

可选的，在本发明第二方面的第一种实现方式中，所述基于组件化的前端页面搭建装置还包括：扫描模块，用于对所述页面搭建请求进行信息扫描，得到待获取的目标静态资源文件；搭建模块，用于利用所述目标静态资源文件进行运行环境搭建，并生成对应的初始页面。

可选的，在本发明第二方面的第二种实现方式中，所述构建模块具体用于：读取所述组件描述规则，得到结构描述规则、样式描述规则及数据描述规则；根据所述结构描述规则，生成对应的第一JSON格式文件，所述第一JSON格式文件用于定义组件的属性及类型；根据所述样式描述规则，生成对应的第二JSON格式文件，所述第二JSON格式文件用于定义组件的尺寸及形状；根据所述数据描述规则，生成对应的组件基类文件，所述组件基类文件用于实现组件内部逻辑；将所述第一JSON格式文件、第二JSON格式文件及所述组件基类文件拼接为整合文件，并根据所述整合文件生成所述多个候选组件。

可选的，在本发明第二方面的第三种实现方式中，所述发送模块具体用于：读取所述多个候选组件，获取所述多个候选组件的组件信息及组件操作类型信息；基于预设的自动化脚本，将所述组件信息及所述组件操作类型信息添加至预置描述文件，生成多个候选组件描述文件；将所述多个候选组件描述文件合并为组件描述文件集，并将所述组件描述文件集传输至预置数据库中。

可选的，在本发明第二方面的第四种实现方式中，所述下载模块具体用于：读取所述组件获取指令的专题需求，得到对应的目标文件标识；基于所述目标文件标识确定与所述专题需求对应的目标组件描述文件的URL地址标签；基于所述URL地址标签从所述预置数据库的所述组件描述文件集中下载所述目标组件描述文件。

可选的，在本发明第二方面的第五种实现方式中，所述注册模块具体用于：读取所述目标组件描述文件，得到对应的目标组件信息及目标组件操作类型信息；基于所述目标组件信息及所述目标组件操作类型信息，确定对应的多个目标组件；调用初始页面的预置接口对所述多个目标组件进行注册，并将所述多个目标组件导入所述预置初始页面的组件管理器中。

可选的，在本发明第二方面的第六种实现方式中，所述渲染模块具体用于：基于所述初始页面的预设布局文件，调用所述多个目标组件进行页面构建，得到待渲染页面；读取所述初始页面的框架类型，确定与所述框架类型匹配的渲染函数；采用所述渲染函数对所述待渲染页面中的所述多个目标组件进行渲染，得到目标页面。

本发明第三方面提供了一种基于组件化的前端页面搭建设备，包括：存储器和至少一个处理器，所述存储器中存储有指令；所述至少一个处理器调用所述存储器中的所述指令，以使得所述基于组件化的前端页面搭建设备执行上述的基于组件化的前端页面搭建方法。

本发明的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述的基于组件化的前端页面搭建方法。

本发明提供的技术方案中，接收模块，用于接收终端发送的页面搭建请求并对所述页面搭建请求进行解析，得到对应的组件描述规则；构建模块，用于根据所述组件描述规则构建用于页面搭建的多个候选组件；发送模块，用于基于所述多个候选组件创建对应的组件描述文件集，并将所述组件描述文件集发送至预置数据库；下载模块，用于接收终端发送的组件获取指令，根据所述组件获取指令从所述预置数据库的所述组件描述文件集中下载对应的目标组件描述文件；注册模块，用于根据所述目标组件描述文件确定对应的多个目标组件，并将所述多个目标组件注册至预置初始页面的组件管理器；渲染模块，用于从所述组件管理器中调用所述多个目标组件进行页面搭建，并根据所述初始页面的框架类型确定对应的渲染函数，采用所述渲染函数对所述多个目标组件进行渲染，得到目标页面。本发明实施例中，通过组件管理器可以实现与不同的前端框架的解耦，也即说明同一套组件可以嵌入在不同的框架中使用，使得组件具备更好的复用能力，解决了在不同的前端框架中组件无法迁移使用的问题。

附图说明

图1为本发明实施例中基于组件化的前端页面搭建方法的一个实施例示意图；

图2为本发明实施例中基于组件化的前端页面搭建方法的另一个实施例示意图；

图3为本发明实施例中基于组件化的前端页面搭建装置的一个实施例示意图；

图4为本发明实施例中基于组件化的前端页面搭建设备的一个实施例示意图。

具体实施方式

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

为便于理解，下面对本发明实施例的具体流程进行描述，请参阅图1，本发明实施例中基于组件化的前端页面搭建方法的一个实施例包括：

101、接收终端发送的页面搭建请求并对所述页面搭建请求进行解析，得到对应的组件描述规则；

可以理解的是，本发明的执行主体可以为基于组件化的前端页面搭建装置，还可以是服务器，具体此处不做限定。本发明实施例以服务器为执行主体为例进行说明。

本实施例中，服务器能够进行前端页面的开发，当接收到用户通过终端发送的进行前端页面开发的页面搭建请求时，可以生成一个无内容的初始页面。一般情况下，该初始页面可以是空白的超文本标记语言(hypertext markup language，HTML)页面。

可选的，在步骤101之后，在步骤102之前，还包括：

服务器对页面搭建请求进行信息扫描，得到待获取的目标静态资源文件；服务器利用目标静态资源文件进行运行环境搭建，并生成对应的初始页面。

具体的，页面搭建请求中包含待获取的目标静态资源文件，服务器在接收到页面搭建请求之后，通过对页面搭建请求进行解析，得到待获取的目标静态资源文件，待获取的目标静态资源文件可以包括图片文件、脚本文件等。在解析得到待获取的目标静态资源文件之后，利用前端框架作为服务代理从服务器中获取目标静态资源文件，并利用目标静态资源文件进行服务运行环境搭建，从而实现前后端协同对该页面搭建请求进行快速响应。降低了后端开发人员对前端静态资源的管理和维护成本，提高了页面搭建请求的响应效率。

102、根据所述组件描述规则构建用于页面搭建的多个候选组件；

具体的，该预置组件描述规则包括结构描述规则、样式描述规则及数据描述规则，结构描述采用数据交换格式(javaScript object notation，JSON)来描述，可以定义组件的属性、类型，样式描述可采用“css in js”方案，即将样式内容描述成一个JSON模块，比如定义一个“style.js”的文件，内部导出一些样式对象，数据描述包括组件的数据定义和处理数据逻辑的部分，需要中定义一个基类，包含生命周期等内容来实现组件内部的逻辑，服务器根据该预置组件描述规则构建多个候选组件。

可选的，步骤102包括：

服务器读取组件描述规则，得到结构描述规则、样式描述规则及数据描述规则；服务器根据结构描述规则，生成对应的第一JSON格式文件，第一JSON格式文件用于定义组件的属性及类型；服务器根据样式描述规则，生成对应的第二JSON格式文件，第二JSON格式文件用于定义组件的尺寸及形状；服务器根据数据描述规则，生成对应的组件基类文件，组件基类文件用于实现组件内部逻辑；服务器将第一JSON格式文件、第二JSON格式文件及组件基类文件拼接为整合文件，并根据整合文件生成多个候选组件。

具体的，服务器根据该组件描述规则，生成对应的第一JSON格式文件、第二JSON格式文件及组件基类文件，服务器根据多种文件，进而生成具有相应功能、样式及数据内容的组件，以便在后续页面搭建的过程进行调用。

103、基于多个候选组件创建对应的组件描述文件集，并将组件描述文件集发送至预置数据库；

具体的，服务器根据所生成的多个候选组件，读取与该多个候选组件对应的应用信息，并根据该应用信息，生成对应的组件描述文件集，每一个组件都可以生成对应的组件描述文件，该组件描述文件集可以包含组件的基本信息，例如可以包括组件的唯一标识、组件的版本号等。

可选的，步骤103包括：

服务器读取多个候选组件，获取多个候选组件的组件信息及组件操作类型信息；服务器基于预设的自动化脚本，将组件信息及组件操作类型信息添加至预置描述文件，生成多个候选组件描述文件；服务器将多个候选组件描述文件合并为组件描述文件集，并将候选组件描述文件传输至预置数据库中。

具体的，该预设描述文件是指用于描述组件文件的信息、组件操作类型及部署目标等相关信息的文件，根据用户配置的部署信息和预设的描述文件结构，可以生成相应的多个候选组件描述文件，并将多个候选组件描述文件拼接为组件描述文件集，本实施例中，根据该自动化脚本，将地址信息、待部署组件文件路径信息及组件部署信息进行处理后作为该预设描述文件的预设字段，读取预存储的描述文件信息；根据预设字段和描述文件信息，生成该描述文件，上述预设字段可以是描述文件中的统一资源定位符(uniformresource locator，URL)字段，即组件网络路径，在终端启用超文本传输协议(HyperTextTransfer Protocol，HTTP)服务后，待部署设备可以远程获取所需的待部署组件文件。将该字段添加至预设描述文件结构中，并读取其它预先存储的描述文件信息，进而生成相应的描述文件，即通过自动化脚本更新描述文件中的内容。

104、接收终端发送的组件获取指令，根据组件获取指令从预置数据库的组件描述文件集中下载对应的目标组件描述文件；

具体的，该组件获取指令与各种不同的页面类型相对应，服务器根据该该组件获取指令确定对应的描述文件标识，该标识用于从该预置数据库的组件描述文件集中获取对应的目标组件描述文件。

105、根据目标组件描述文件确定对应的多个目标组件，并将多个目标组件注册至预置初始页面的组件管理器；

具体的，服务器读取目标组件描述文件，对该目标组件描述文件进行解析，得到对应的目标组件信息及目标组件操作类型信息，目标组件信息包括JSON格式文件及数据文件，进而确定与该目标组件描述文件对应的多个目标组件，然后将该多个目标组件注册到管理器中以便被运行容器引用。可以维护一个匹配对象，以组件名作为索引，将所有加载好的组件全部记录在该匹配对象内，后续统一从这个匹配对象中获取组件进行调用。

106、从组件管理器中调用多个目标组件进行页面搭建，并根据初始页面的框架类型确定对应的渲染函数，采用渲染函数对多个目标组件进行渲染，得到目标页面。

具体的，服务器从组件管理器中调用对应的组件，并按照预定的页面布局进行页面搭建，整个页面也需要被定义成组件，读取页面的结构描述，从管理器中调用对应的组件，然后由该渲染函数进行渲染，转换成文档对象模型(document object model，dom)内容呈现出来，即将组件的渲染函数翻译成浏览器提供的创建、挂载元素等方法的调用，进而得到渲染后的目标页面。

本发明实施例中，服务器接收用户的页面搭建请求，并对该页面搭建请求进行解析，获取目标静态资源文件并对运行环境进行搭建，之后服务器根据预置组件描述该静态资源文件对服务运规则，生成相应的JSON格式文件及组件基类文件，并根据上述多种文件生成候选组件，进而读取与该多个候选组件对应的应用信息，并根据该应用信息，生成对应的组件描述文件集，服务器根据终端发送的组件获取指令确定对应的描述文件标识，该标识用于从该预置数据库的组件描述文件集中获取对应的目标组件描述文件，服务器对该目标组件描述文件进行解析，得到对应的目标组件信息及目标组件操作类型信息，进而确定与该目标组件描述文件对应的多个目标组件，然后将该多个目标组件注册到管理器，最后从组件管理器中调用对应的组件，然后由该渲染函数进行渲染，转换成dom内容呈现出来，得到目标页面，本发明实施例中，通过组件管理器可以实现与不同的前端框架的解耦，也即说明同一套组件可以嵌入在不同的框架中使用，使得组件具备更好的复用能力，解决了在不同的前端框架中组件无法迁移使用的问题。

请参阅图2，本发明实施例中基于组件化的前端页面搭建方法的另一个实施例包括：

201、接收终端发送的页面搭建请求并对所述页面搭建请求进行解析，得到对应的组件描述规则；

202、根据所述组件描述规则构建用于页面搭建的多个候选组件；

203、基于所述多个候选组件创建对应的组件描述文件集，并将所述组件描述文件集发送至预置数据库；

具体的，在本实施例中，步骤201-203的具体实施方式与上述步骤101-103类似，此处不再赘述。

204、接收终端发送的组件获取指令，根据所述组件获取指令从所述预置数据库的所述组件描述文件集中下载对应的目标组件描述文件；

具体的，在本实施例中，步骤204的具体实施方式与上述步骤104类似，此处不再赘述。

可选的，步骤204包括：

服务器读取组件获取指令的专题需求，得到对应的目标文件标识；服务器基于目标文件标识确定与专题需求对应的目标组件描述文件的URL地址标签；服务器基于URL地址标签从预置数据库的组件描述文件集中下载目标组件描述文件。

具体的，统一资源定位符(uniform resource locator，URL)是一个给定的独特资源在该预置数据库中的地址，服务器读取该专题需求后，获得对应的目标文件标识，该目标文件标识包括组件描述文件的URL地址标签信息，在服务器获取到该URL地址标签后，在该预置数据库的组件描述文件集中下载对应的目标组件描述文件。

205、根据目标组件描述文件确定对应的多个目标组件，并将多个目标组件注册至预置初始页面的组件管理器；

具体的，在本实施例中，步骤205的具体实施方式与上述步骤105类似，此处不再赘述。

可选的，步骤205包括：

服务器读取目标组件描述文件，得到对应的目标组件信息及目标组件操作类型信息；服务器基于目标组件信息及目标组件操作类型信息。确定对应的多个目标组件；服务器调用初始页面的预置接口对多个目标组件进行注册，并将多个目标组件导入初始页面的组件管理器中。

具体的，该目标组件信息可以是指用户通过编写组件配置文件生成的信息，该目标组件信息也可以由用户通过人机交互界面配置的信息，该组件信息可以包括组件名称信息、组件版本信息和组件其它信息，服务器根据该目标组件信息及目标组件操作类型信息确定对应的多个目标组件，调用之前生成的初始页面的预置接口，该接口主要用于组件的注册，能够将多个目标组件注册至组件管理器中，以便于后续对该多个目标组件进行调用。

206、基于初始页面的预设布局文件，调用多个目标组件进行页面构建，得到待渲染页面；

具体的，该预设布局文件是包含图像数据和文本数据的文档，页面布局文件包含有文件中每个元素的格式信息，格式信息是指例如字体、字体大小、对齐方式、字间距、页面大小及页边距等信息，服务器根据该预设布局文件中包含的具体信息，确定与该预设布局文件对应的多个目标组件，并基于格式信息中的具体内容，将该多个目标组件组装在页面中，从而得到待渲染页面。

207、读取初始页面的框架类型，确定与框架类型匹配的渲染函数；

具体的，该框架类型是指react前端框架、vue前端框架及angular前端框架等框架类型，服务器读取初始页面对应的框架类型，根据与初始页面对应的框架类型确定对应的渲染函数。

208、采用渲染函数对待渲染页面中的多个目标组件进行渲染，得到目标页面；

具体的，服务器在确定渲染函数之后，首先对相应框架类型的目标组件进行转换，例如有标题组件“class Title extends Component{…}”，如果要在基于vue的前端框架中使用，则渲染函数将组件转换成vue中渲染代码“vue.createelement(h1,{text:‘atitle’})”，如果要在基于react的项目中使用，则渲染器将组件转换成react中渲染代码“react.createElement(h1,{text:‘atitle’})”，并根据转换后的代码对相应的目标组件进行渲染，进而得到经过渲染处理后的目标页面。

本发明实施例中，服务器接收用户的页面搭建请求，并对该页面搭建请求进行解析，获取目标静态资源文件并对运行环境进行搭建，之后服务器根据预置组件描述该静态资源文件对服务运规则，生成相应的JSON格式文件及组件基类文件，并根据上述多种文件生成候选组件，进而读取与该多个候选组件对应的应用信息，并根据该应用信息，生成对应的组件描述文件集，服务器读取专题需求，获取对应的目标文件标识并根据该标识从组件描述文件集中下载对应的目标组件描述文件，根据该目标组件描述文件确定对应的多个目标组件，调用初始页面的预置接口将多个目标组件注册至组件管理器中并确定与该目标组件描述文件对应的多个目标组件，服务器从组件管理器中调用对应的组件，并按照预定的页面布局进行页面搭建，整个页面也需要被定义成组件，读取页面的结构描述，从管理器中调用对应的组件，然后由编译器解析，转换成dom内容并得到目标页面，本发明实施例中，当要调用该组件，可以统一从组件管理器中获取到该组件，实现了一套组件的加载运行逻辑，具体根据初始页面的框架类型匹配对应的渲染函数，从而脱离各种框架对组件的不同的规范，独立于这些框架运行，提升组件的复用率。

上面对本发明实施例中基于组件化的前端页面搭建方法进行了描述，下面对本发明实施例中基于组件化的前端页面搭建装置进行描述，请参阅图3，本发明实施例中基于组件化的前端页面搭建装置的一个实施例包括：

接收模块301，用于接收终端发送的页面搭建请求并对所述页面搭建请求进行解析，得到对应的组件描述规则；

构建模块302，用于根据所述组件描述规则构建用于页面搭建的多个候选组件；

发送模块303，用于基于所述多个候选组件创建对应的组件描述文件集，并将所述组件描述文件集发送至预置数据库；

下载模块304，用于接收终端发送的组件获取指令，根据所述组件获取指令从所述预置数据库的所述组件描述文件集中下载对应的目标组件描述文件；

注册模块305，用于根据所述目标组件描述文件确定对应的多个目标组件，并将所述多个目标组件注册至预置初始页面的组件管理器；

渲染模块306，用于从所述组件管理器中调用所述多个目标组件进行页面搭建，并根据所述初始页面的框架类型确定对应的渲染函数，采用所述渲染函数对所述多个目标组件进行渲染，得到目标页面；

可选的，基于组件化的前端页面搭建装置还包括：扫描模块307，用于对所述页面搭建请求进行信息扫描，得到待获取的目标静态资源文件；搭建模块308，用于利用所述目标静态资源文件进行运行环境搭建，并生成对应的初始页面。

可选的，构建模块302还可以具体用于：读取所述组件描述规则，得到结构描述规则、样式描述规则及数据描述规则；根据所述结构描述规则，生成对应的第一JSON格式文件，所述第一JSON格式文件用于定义组件的属性及类型；根据所述样式描述规则，生成对应的第二JSON格式文件，所述第二JSON格式文件用于定义组件的尺寸及形状；根据所述数据描述规则，生成对应的组件基类文件，所述组件基类文件用于实现组件内部逻辑；将所述第一JSON格式文件、第二JSON格式文件及所述组件基类文件拼接为整合文件，并根据所述整合文件生成所述多个候选组件。

可选的，发送模块303还可以具体用于：读取所述多个候选组件，获取所述多个候选组件的组件信息及组件操作类型信息；基于预设的自动化脚本，将所述组件信息及所述组件操作类型信息添加至预置描述文件，生成多个候选组件描述文件；将所述多个候选组件描述文件合并为组件描述文件集，并将所述组件描述文件集传输至预置数据库中。

可选的，下载模块304还可以具体用于：读取所述组件获取指令的专题需求，得到对应的目标文件标识；基于所述目标文件标识确定与所述专题需求对应的目标组件描述文件的URL地址标签；基于所述URL地址标签从所述预置数据库的所述组件描述文件集中下载所述目标组件描述文件。

可选的，注册模块305还可以具体用于：读取所述目标组件描述文件，得到对应的目标组件信息及目标组件操作类型信息；基于所述目标组件信息及所述目标组件操作类型信息，确定对应的多个目标组件；调用初始页面的预置接口对所述多个目标组件进行注册，并将所述多个目标组件导入所述预置初始页面的组件管理器中。

可选的，渲染模块306还可以具体用于：基于所述初始页面的预设布局文件，调用所述多个目标组件进行页面构建，得到待渲染页面；读取所述初始页面的框架类型，确定与所述框架类型匹配的渲染函数；采用所述渲染函数对所述待渲染页面中的所述多个目标组件进行渲染，得到目标页面。

图4是本发明实施例提供的一种基于组件化的前端页面搭建设备的结构示意图，该基于组件化的前端页面搭建设备400可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(central processing units，CPU)410(例如，一个或一个以上处理器)和存储器420，一个或一个以上存储应用程序433或数据432的存储介质430(例如一个或一个以上海量存储设备)。其中，存储器420和存储介质430可以是短暂存储或持久存储。存储在存储介质430的程序可以包括一个或一个以上模块(图示没标出)，每个模块可以包括对基于组件化的前端页面搭建设备400中的一系列指令操作。更进一步地，处理器410可以设置为与存储介质430通信，在基于组件化的前端页面搭建设备400上执行存储介质430中的一系列指令操作。

基于组件化的前端页面搭建设备400还可以包括一个或一个以上电源440，一个或一个以上有线或无线网络接口450，一个或一个以上输入输出接口460，和/或，一个或一个以上操作系统431，例如Windows Serve，Mac OS X，Unix，Linux，FreeBSD等等。本领域技术人员可以理解，图4示出的基于组件化的前端页面搭建设备结构并不构成对基于组件化的前端页面搭建设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

本发明还提供一种基于组件化的前端页面搭建设备，所述基于组件化的前端页面搭建设备包括存储器和处理器，存储器中存储有计算机可读指令，计算机可读指令被处理器执行时，使得处理器执行上述各实施例中的所述基于组件化的前端页面搭建方法的步骤。

本发明还提供一种计算机可读存储介质，该计算机可读存储介质可以为非易失性计算机可读存储介质，该计算机可读存储介质也可以为易失性计算机可读存储介质，所述计算机可读存储介质中存储有指令，当所述指令在计算机上运行时，使得计算机执行所述基于组件化的前端页面搭建方法的步骤。

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

以上所述，以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种基于组件化的前端页面搭建方法，其特征在于，所述基于组件化的前端页面搭建方法包括：

接收终端发送的页面搭建请求并对所述页面搭建请求进行解析，得到对应的组件描述规则；

根据所述组件描述规则构建用于页面搭建的多个候选组件；

基于所述多个候选组件创建对应的组件描述文件集，并将所述组件描述文件集发送至预置数据库；

接收终端发送的组件获取指令，根据所述组件获取指令从所述预置数据库的所述组件描述文件集中下载对应的目标组件描述文件；

根据所述目标组件描述文件确定对应的多个目标组件，并将所述多个目标组件注册至预置初始页面的组件管理器；

从所述组件管理器中调用所述多个目标组件进行页面搭建，并根据所述初始页面的框架类型确定对应的渲染函数，采用所述渲染函数对所述多个目标组件进行渲染，得到目标页面；

所述根据所述组件描述规则构建用于页面搭建的多个候选组件包括：

读取所述组件描述规则，得到结构描述规则、样式描述规则及数据描述规则；

根据所述结构描述规则，生成对应的第一JSON格式文件，所述第一JSON格式文件用于定义组件的属性及类型；

根据所述样式描述规则，生成对应的第二JSON格式文件，所述第二JSON格式文件用于定义组件的尺寸及形状；

根据所述数据描述规则，生成对应的组件基类文件，所述组件基类文件用于实现组件内部逻辑；

将所述第一JSON格式文件、第二JSON格式文件及所述组件基类文件拼接为整合文件，并根据所述整合文件生成所述多个候选组件。

2.根据权利要求1所述的基于组件化的前端页面搭建方法，其特征在于，在所述接收终端发送的页面搭建请求并对所述页面搭建请求进行解析，得到对应的组件描述规则之后，在所述根据所述组件描述规则构建用于页面搭建的多个候选组件之前，还包括：

对所述页面搭建请求进行信息扫描，得到待获取的目标静态资源文件；

利用所述目标静态资源文件进行运行环境搭建，并生成对应的初始页面。

3.根据权利要求1所述的基于组件化的前端页面搭建方法，其特征在于，所述基于所述多个候选组件创建对应的组件描述文件集，并将所述组件描述文件集发送至预置数据库包括：

读取所述多个候选组件，获取所述多个候选组件的组件信息及组件操作类型信息；

基于预设的自动化脚本，将所述组件信息及所述组件操作类型信息添加至预置描述文件，生成多个候选组件描述文件；

将所述多个候选组件描述文件合并为组件描述文件集，并将所述组件描述文件集传输至预置数据库中。

4.根据权利要求1所述的基于组件化的前端页面搭建方法，其特征在于，所述接收终端发送的组件获取指令，根据所述组件获取指令从所述预置数据库的所述组件描述文件集中下载对应的目标组件描述文件包括：

读取所述组件获取指令的专题需求，得到对应的目标文件标识；

基于所述目标文件标识确定与所述专题需求对应的目标组件描述文件的URL地址标签；

基于所述URL地址标签从所述预置数据库的所述组件描述文件集中下载所述目标组件描述文件。

5.根据权利要求1所述的基于组件化的前端页面搭建方法，其特征在于，所述根据所述目标组件描述文件确定对应的多个目标组件，并将所述多个目标组件注册至预置初始页面的组件管理器包括：

读取所述目标组件描述文件，得到对应的目标组件信息及目标组件操作类型信息；

基于所述目标组件信息及所述目标组件操作类型信息，确定对应的多个目标组件；

调用初始页面的预置接口对所述多个目标组件进行注册，并将所述多个目标组件导入所述预置初始页面的组件管理器中。

6.根据权利要求1-5中任一项所述的基于组件化的前端页面搭建方法，其特征在于，所述从所述组件管理器中调用所述多个目标组件进行页面搭建，并根据所述初始页面的框架类型确定对应的渲染函数，采用所述渲染函数对所述多个目标组件进行渲染，得到目标页面包括：

基于所述初始页面的预设布局文件，调用所述多个目标组件进行页面构建，得到待渲染页面；

读取所述初始页面的框架类型，确定与所述框架类型匹配的渲染函数；

采用所述渲染函数对所述待渲染页面中的所述多个目标组件进行渲染，得到目标页面。

7.一种基于组件化的前端页面搭建装置，其特征在于，所述基于组件化的前端页面搭建装置包括：

接收模块，用于接收终端发送的页面搭建请求并对所述页面搭建请求进行解析，得到对应的组件描述规则；

构建模块，用于根据所述组件描述规则构建用于页面搭建的多个候选组件；

发送模块，用于基于所述多个候选组件创建对应的组件描述文件集，并将所述组件描述文件集发送至预置数据库；

下载模块，用于接收终端发送的组件获取指令，根据所述组件获取指令从所述预置数据库的所述组件描述文件集中下载对应的目标组件描述文件；

注册模块，用于根据所述目标组件描述文件确定对应的多个目标组件，并将所述多个目标组件注册至预置初始页面的组件管理器；

渲染模块，用于从所述组件管理器中调用所述多个目标组件进行页面搭建，并根据所述初始页面的框架类型确定对应的渲染函数，采用所述渲染函数对所述多个目标组件进行渲染，得到目标页面；

所述构建模块具体用于：

读取所述组件描述规则，得到结构描述规则、样式描述规则及数据描述规则；

根据所述结构描述规则，生成对应的第一JSON格式文件，所述第一JSON格式文件用于定义组件的属性及类型；

根据所述样式描述规则，生成对应的第二JSON格式文件，所述第二JSON格式文件用于定义组件的尺寸及形状；

根据所述数据描述规则，生成对应的组件基类文件，所述组件基类文件用于实现组件内部逻辑；

将所述第一JSON格式文件、第二JSON格式文件及所述组件基类文件拼接为整合文件，并根据所述整合文件生成所述多个候选组件。

8.根据权利要求7所述的基于组件化的前端页面搭建装置，其特征在于，所述基于组件化的前端页面搭建装置还包括：

扫描模块，用于对所述页面搭建请求进行信息扫描，得到待获取的目标静态资源文件；

搭建模块，用于利用所述目标静态资源文件进行运行环境搭建，并生成对应的初始页面。

9.一种基于组件化的前端页面搭建设备，其特征在于，所述基于组件化的前端页面搭建设备包括：存储器和至少一个处理器，所述存储器中存储有指令；

所述至少一个处理器调用所述存储器中的所述指令，以使得所述基于组件化的前端页面搭建设备执行如权利要求1-6中任意一项所述的基于组件化的前端页面搭建方法。

10.一种计算机可读存储介质，所述计算机可读存储介质上存储有指令，其特征在于，所述指令被处理器执行时实现如权利要求1-6中任一项所述基于组件化的前端页面搭建方法。