CN108491205A - 一种基于组件树的前端网页开发方法及系统 - Google Patents

Abstract

本发明公开了一种基于组件树的前端网页开发方法，包括：在通用组件库中选取构成目标前端网页的各个采用预设的代码编辑方法生成的目标组件；将所述各个目标组件拖拽到组件树面板，依据所述各个目标组件中对应的通用组件插槽接口对所述各个目标组件进行连接，构成第一目标组件树；依据所述各个目标组件对应的通用组件样式接口对所述第一组件树中的目标组件的样式进行编辑，得到目标组件树；依据所述目标组件树，对所述目标前端网页进行开发。上述的开发方法，所述采用预设的代码编辑方法生成的目标组件包含通用组件插槽接口和通用组件样式接口，具有通用性，避免了现有的前端网页的组件化开发过程中的组件树不具备通用性的问题。

Description

一种基于组件树的前端网页开发方法及系统

技术领域

本发明涉及Web前端技术领域，尤其涉及一种基于组件树的前端网页开发方法及系统。

背景技术

随着Web前端技术迅速发展，Web前端网页的开发从MVC框架后端模板开发，发展成前端组件化开发，网站的业务逻辑也得以实现前后端分离。在组件化开发潮流下，为了便于Web前端网页的前期开发，采用基于特定框架或库的可视化布局和组件平台，运行于Web前端，采用拖拽组件树的方式，对该Web前端页面进行开发。

发明人对现有的基于组件树的Web前端网页的开发过程进行研究发现，组件树的编写需要符合特定框架或库的要求，现有的平台都是面向既定的前端框架或库，如Bootstrap、Vue、React，其对应的组件也需要遵循相应的编写规范和要求，导致了现有的Web前端网页的组件化开发过程中的组件树不具备通用性的问题。

发明内容

有鉴于此，本发明提供了一种基于组件树的前端网页开发方法，用以解决现有技术中平台都是面向既定的前端框架或库，如Bootstrap、Vue、React，其对应的组件也需要遵循相应的编写规范和要求，导致了现有的Web前端网页的组件化开发过程中的组件树不具备通用性的问题。具体方案如下：

一种基于组件树的前端网页开发方法，包括：

在通用组件库中选取构成目标前端网页的各个采用预设的代码编辑方法生成的目标组件；

将所述各个目标组件拖拽到组件树面板，依据所述各个目标组件中对应的通用组件插槽接口对所述各个目标组件进行连接，构成第一目标组件树；

依据所述各个目标组件对应的通用组件样式接口对所述第一组件树中的目标组件的样式进行编辑，得到目标组件树；

依据所述目标组件树，对所述目标前端网页进行开发。

上述的方法，可选的，采用预设的编辑方法生成的目标组件的过程包括：

针对任意一个组件，解析所述组件中的接口格式数据；

获取所述接口格式数据中的插槽数据列表和样式变量对象列表；

依据所述插槽数据列表和所述样式变量对象列表，为所述组件编写对应的通用组件插槽接口和通用组件样式接口，得到目标组件。

上述的方法，可选的，依据所述各个目标组件对应的通用组件样式接口对所述第一组件树中的目标组件样式进行编辑包括：

在所述通用组件样式接口中查找所述各个目标组件对应的样式变量列表，为每一个目标组件在所述目标前端网页上生成一个样式变量编辑表单；

通过用户与所述样式变量编辑表单中元素的交互，对所述各个目标组件的样式变量的取值进行编辑。

上述的方法，可选的，还包括：

对所述目标前端网页分配页面名称和页面密码口令；

依据所述页面名称和所述页面密码口令对所述目标前端网页的目标组件树进行创建、编辑和保存。

上述的方法，可选的，还包括：

若所述通用组件库中的通用组件不能满足所述目标组件树的开发要求时，将满足开发要求的外部组件转换成与所述各个目标组件格式相同的第一通用组件，依据所述第一通用组件，对所述目标组件树进行开发。

一种基于组件树的前端网页开发系统，包括：

选取模块，用于在通用组件库中选取构成目标前端网页的各个采用预设的代码编辑方法生成的目标组件；

连接模块，用于将所述各个目标组件拖拽到组件树面板，依据所述各个目标组件中对应的通用组件插槽接口对所述各个目标组件进行连接，构成第一目标组件树；

编辑模块，用于依据所述各个目标组件对应的通用组件样式接口对所述第一组件树中的目标组件的样式进行编辑，得到目标组件树；

开发模块，用于依据所述目标组件树，对所述目标前端网页进行开发。

上述的系统，可选的，所述选取模块包括：

解析单元，用于针对任意一个组件，解析所述组件中的接口格式数据；

获取单元，用于获取所述接口格式数据中的插槽数据列表和样式变量对象列表；

编写单元，用于依据所述插槽数据列表和所述样式变量对象列表，为所述组件编写对应的通用组件插槽接口和通用组件样式接口，得到目标组件。

上述的系统，可选的，所述编辑模块包括：

查找单元，用于在所述通用组件样式接口中查找所述各个目标组件对应的样式变量列表，为每一个目标组件在所述目标前端网页上生成一个样式变量编辑表单；

编辑单元，用于通过用户与所述样式变量编辑表单中元素的交互，对所述各个目标组件的样式变量的取值进行编辑。

上述的系统，可选的，还包括：

分配模块，用于对所述目标前端网页分配页面名称和页面密码口令；

处理模块，用于依据所述页面名称和所述页面密码口令对所述目标前端网页的目标组件树进行创建、编辑和保存。

上述的系统，可选的，还包括：

转换模块，用于若所述通用组件库中的通用组件不能满足所述目标组件树的开发要求时，将满足开发要求的外部组件转换成与所述各个目标组件格式相同的第一通用组件，依据所述第一通用组件，对所述目标组件树进行开发。

与现有技术相比，本发明包括以下优点：

本发明公开了一种基于组件树的前端网页开发方法，包括：在通用组件库中选取构成目标前端网页的各个采用预设的代码编辑方法生成的目标组件；将所述各个目标组件拖拽到组件树面板，依据所述各个目标组件中对应的通用组件插槽接口对所述各个目标组件进行连接，构成第一目标组件树；依据所述各个目标组件对应的通用组件样式接口对所述第一组件树中的目标组件的样式进行编辑，得到目标组件树；依据所述目标组件树，对所述目标前端网页进行开发。上述的开发方法，所述采用预设的代码编辑方法生成的目标组件包含通用组件插槽接口和通用组件样式接口，具有通用性，避免了现有的前端网页的组件化开发过程中的组件树不具备通用性的问题。

附图说明

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

图1为本发明实施例公开的一种基于组件树的前端网页开发方法流程图；

图2为本发明实施例公开的一种基于组件树的前端网页开发方法又一方法流程图；

图3为本发明实施例公开的一种基于组件树的前端网页开发方法又一方法流程图；

图4为本发明实施例公开的一种基于组件树的前端网页开发方法示意图；

图5为本发明实施例公开的一种基于组件树的前端网页开发系统结构框图。

具体实施方式

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

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

本发明提供了一种基于组件树的前端网页开发方法，所述开发方法应用在Web前端网页的开发过程中，所述Web前端网页的开发是通过对组件树的开发来实现的。所述开发方法可以应用在开发平台或者终端中，所述开发平台或者终端可以实现原生HTML/CSS和SASS编写组件接口，目的是在所述Web前端网页静态开发阶段快速生成可用的组件树和页面，免受前端框架和库的技术选型带来的影响，所述开发方法的执行主体可以为开发平台或者终端中的处理器或者控制器。所述开发方法的执行流程如图1所示，包括步骤：

S101、在通用组件库中选取构成目标前端网页的各个采用预设的代码编辑方法生成的目标组件；

本发明实施例中，所述目标前端网页为当前正在开发的前端网页，组成所述目标前端网页需要多个组件，在所述通用组件库中选取构成所述目标前端网页的各个采用预设的代码编辑方法生成的目标组件。

S102、将所述各个目标组件拖拽到组件树面板，依据所述各个目标组件中对应的通用组件插槽接口对所述各个目标组件进行连接，构成第一目标组件树；

本发明实施例中，将所述各个目标组件拖拽到组件树面板，其中，优选的，所述各个目标组件采HTML、CSS和SASS代码进行编写，每一个目标组件包含多个通用组件插槽接口，将每一个目标组件通过对应的通用组件插槽接口通过并列或者嵌套的方式与其它的目标组件进行连接，构成了所述第一目标组件树。

S103、依据所述各个目标组件对应的通用组件样式接口对所述第一组件树中的目标组件的样式进行编辑，得到目标组件树；

本发明实施例中，每一个目标组件都包含通用组件样式接口，将所述第一组件树中的各个目标组件的通用组件样式接口，对其的样式进行修改，其中修改的样式可以为字体颜色或者图片尺寸等等。

S104、依据所述目标组件树，对所述目标前端网页进行开发。

本发明实施例中，通过调整所述目标组件树，实现对所述目标前端网页的开发。

本发明实施例中，所述通用组件库内置了不同类型的通用组件，包括布局类型、组合类型等，所述通用组件库包含有多种布局、组合和元素。布局类型更偏向于样式布局，组件本身没有实质内容；元素类型更偏向于细粒度的单个或几个元素，拥有预设的一组常见样式；组合类型是布局和元素的结合和折中，兼具布局样式和常用元素样式。

布局类型的通用组件，如：一侧固定尺寸、剩余自适应的布局，网格布局，圣杯布局，流式布局。组合类型的通用组件，如：带有提示和按钮的输入框、左侧图片、右侧标题配副标题的信息条目等等。元素类型的通用组件，如：搜索按钮、下拉选项等等。

本发明公开了一种基于组件树的前端网页开发方法，包括：在通用组件库中选取构成目标前端网页的各个采用预设的代码编辑方法生成的目标组件；将所述各个目标组件拖拽到组件树面板，依据所述各个目标组件中对应的通用组件插槽接口对所述各个目标组件进行连接，构成第一目标组件树；依据所述各个目标组件对应的通用组件样式接口对所述第一组件树中的目标组件的样式进行编辑，得到目标组件树；依据所述目标组件树，对所述目标前端网页进行开发。上述的开发方法，所述采用预设的代码编辑方法生成的目标组件包含通用组件插槽接口和通用组件样式接口，具有通用性，避免了现有的前端网页的组件化开发过程中的组件树不具备通用性的问题。

本发明实施例中，所述开发方法应用在浏览器端，用户从组件库面板浏览和选择组件，然后使用鼠标将所选组件拖拽至组件树面板。所述组件库面板列出所有通用组件；组件树面板展示用户构造的组件结构，通用组件的嵌套和排列可构成组件树，通过调整组件树实现前端网页的开发。

组件库面板中，每一个个通用组件包含唯一名称，鼠标悬停可显示所述通用组件的源码缩略片段，每一个通用组件可被鼠标拖拽至组件树的指定位置，可以是组件树中已有组件的前后，或某个通用组件插槽位置，或组件树的根位置。在通用组件被拖入组件树后，组件完成了实例化，成为组件树中的一个节点，组件树内部，组件也可以拖动，可以右键菜单选择删除或拷贝、剪切、粘贴。其中，组件树的维护，实际上是基于组件中间数据，所以符合通用组件接口格式。

若组件树在组件节点变更和样式改变后，重新编译并通知预览模块更新，以此实现实时渲染和预览。

组件树在发生节点变更后，会重新编译得到HTML和CSS代码。组件树重新编译的过程如下：

1)组件树可视化编辑模块将组件树的数据发至服务端，告知服务端将组件的中间数据编译为HTML/CSS代码；

2)服务端接收组件树中间数据，编译为完整的HTML/CSS代码，返回给组件树可视化编辑模块。

组件树可以体现组件的结构和位置关系，而每个组件的样式是在样式接口的基础上，使用前端双向绑定技术，将变量对象和表单元素绑定，使用户输入实时更新组件的样式接口变量值。

组件的样式接口提供了可配置的变量，变量的值决定了引用该变量的元素样式属性。双向绑定把数据的变化转为视图的更新，同时用户在视图层的交互输入也造成数据实时变更。在检测到组件的样式数据发生变更后，组件树重新编译，将HTML和CSS代码发送给预览模块，预览模块随之更新预览页面。

本发明实施例中，采用预设的编辑方法生成的目标组件的过程的方法流程如图2所示，包括步骤：

S201、针对任意一个组件，解析所述组件中的接口格式数据；

本发明实施例中，所述组件以HTML/CSS/SASS代码编写，实例化后的所述目标组件最终变成被浏览器直接解析的HTML/CSS代码。中间过程是所述目标组件的解析和编译，解析过程是将所述组件源码转为中间数据。

中间数据是所述组件的接口格式数据。其中，一个组件的接口格式数据，包含通用组件名、插槽数据列表、HTML代码、SASS变量对象、SASS规则代码。SASS变量对象是从组件SASS代码中解析的SASS变量名和变量值构成的一张变量对象列表，SASS规则代码则是SASS代码中除去变量声明部分的主体代码。

S202、获取所述接口格式数据中的插槽数据列表和样式变量对象列表；

本发明实施例中，在所述接口格式数据中查找所述插槽数据列表和所述样式变量对象列表。其中，插槽数据是一个列表，包含组件内部每个插槽的数据，而每个插槽的数据包含插槽名、插槽标签HTML、插槽位置的子组件(接口格式数据)列表；所述样式变量对象列表包含变量名和变量值。

S203、依据所述插槽数据列表和所述样式变量对象列表，为所述组件编写对应的通用组件插槽接口和通用组件样式接口，得到目标组件。

本发明实施例中，通用组件是将组件的结构和样式严格分离，各自通过通用语言代码定义接口和变量。组件结构体现为HTML代码，组件样式体现为CSS/SASS代码。基于接口设计，本发明实现了从组件代码到接口格式数据的解析过程，和从接口格式数据到组件前端HTML/CSS代码的编译过程。

其中，所述组件的结构使用HTML代码表达。HTML是Web标准语言，也是前端开发终端—浏览器端接收的页面代码。本发明中在所述组件的HTML中依据所述插槽数据列表定义slot标签，表示组件内部的一处插槽；slot标签的内部文本则表示该插槽的名称标识。一个组件可以包含多个插槽，每个插槽代表组件的一个特殊位置，用于在嵌套子组件的时候提供容器和占位。当通过插槽组合父子组件时，插槽所占的slot标签将被替换为相应的一个或多个子组件。

其中，所述组件的样式使用CSS/SASS代码表达。CSS是Web标准语言，SASS是最流行的CSS预处理器之一，为了令所述组件的样式具备可配置性，本发明支持在组件的SASS代码头部声明变量，其中，变量依据所述变量对象列表获得，变量可用于组件内部各元素样式属性值的插值，经SASS处理器编译后，组件的CSS代码便是经过变量配置的样式。通过SASS变量的特性，通用组件可以对外暴露其内部声明的变量，在样式上实现了可配置。

本发明实施例中，依据所述各个目标组件对应的通用组件样式接口对所述第一组件树中存在关联关系的目标组件样式进行编辑的方法流程如图3所示，包括步骤：

S301、在所述通用组件样式接口中查找所述各个目标组件对应的样式变量列表，为每一个目标组件在所述目标前端网页上生成一个样式变量编辑表单；

本发明实施例中，目标组件与样式变量对象列表存在对应关系，任意选取一个样式变量列表，依据该样式变量列表在所述目标前端网页为与该样式变量列表对应的目标组件生成一个样式变量编辑表单，实现将所述目标组件中的将变量对象和表单元素绑定。

S302、通过用户与所述样式变量编辑表单中元素的交互，对所述各个目标组件的样式变量的取值进行编辑。

本发明实施例中，通过对所述变量编辑表单中对应元素的修改，实时更新该目标组件中对应变量的变量值。

本发明实施例中，还包括：对所述目标前端网页分配页面名称和页面密码口令；依据所述页面名称和所述页面密码口令对所述目标前端网页的目标组件树进行创建、编辑和保存。

其中，所述目标前端网页的开发过程对应唯一的页面名称，用户输入页面名称和页面密码口令，经证模块向服务端进行验证，当验证通过时，得以登录系统、打开所述目标前端网页开发项目对应的目标组件树，对所述目标组件树进行编辑，当编辑结束时，编辑过程进行保存。

当所述目标前端网页开发项目加载时，项目认证模块将服务端返回的项目数据交接给项目数据管理模块，项目数据包含所述目标前端网页开发项目的基本信息、组件树、全局样式表等数据，由前端不同的模块进行载入、展示。

项目数据存储于文档型数据库中。项目数据以所述目标组件树为重心，由于组件数据良好的序列化特性和编解码方式，项目数据可以完好地进行格式化存储，其中，文档型数据库适合存储扩展性强的格式化和半格式化数据。

本发明实施例中，所述开发方法还可以实现项目的资源文件管理，在资源文件面板，用户通过拖拽的方式上传与项目相关的资源文件，同时也能浏览已上传的文件列表和文件缩略信息；在编辑组件样式时，遇到url性质的样式属性，用户可将图片等资源从资源面板拖入组件样式编辑面板，成为样式属性值。

其中，对于正在编辑的前端网页开发项目，本方案支持用户维护一个全局样式表，应用于正在编辑的组件树的页面，所述全局样式表数据作为项目数据的一部分。全局样式表的编辑方式为：用户点击页面预览模块面板的样式表编辑按钮，打开已加载项目全局样式表的编辑界面，进行文本编辑；编辑保存后，在页面预览面板实时生效。

本发明实施例中，所述开发方法基于的Web前端可视化开发平台或者终端的执行示意图如图4所示：

其中，组件库模块、组件样式编辑器和组件可视化编辑模块三者共同作用，实现所述基于组件树的前端网页的开发方法。

与上述的一种基于组件树的前端网页开发方法相对应的，本发明还提供了一种基于组件树的前端网页开发系统，所述开发系统的结构如图5所示，包括：

选取模块401，连接模块402，编辑模块403和开发模块404。

其中，

所述选取模块401，用于在通用组件库中选取构成目标前端网页的各个采用预设的代码编辑方法生成的目标组件；

所述连接模块402，用于将所述各个目标组件拖拽到组件树面板，依据所述各个目标组件中对应的通用组件插槽接口对所述各个目标组件进行连接，构成第一目标组件树；

所述编辑模块403，用于依据所述各个目标组件对应的通用组件样式接口对所述第一组件树中的目标组件的样式进行编辑，得到目标组件树；

所述开发模块404，用于依据所述目标组件树，对所述目标前端网页进行开发。

本发明公开了一种基于组件树的前端网页开发系统，包括：在通用组件库中选取构成目标前端网页的各个采用预设的代码编辑方法生成的目标组件；将所述各个目标组件拖拽到组件树面板，依据所述各个目标组件中对应的通用组件插槽接口对所述各个目标组件进行连接，构成第一目标组件树；依据所述各个目标组件对应的通用组件样式接口对所述第一组件树中的目标组件的样式进行编辑，得到目标组件树；依据所述目标组件树，对所述目标前端网页进行开发。上述的开发系统，所述采用预设的代码编辑方法生成的目标组件包含通用组件插槽接口和通用组件样式接口，具有通用性，避免了现有的前端网页的组件化开发过程中的组件树不具备通用性的问题。

本发明实施例中，所述选取模块401包括：

解析单元405，获取单元406和编写单元407。

其中，

所述解析单元405，用于针对任意一个组件，解析所述组件中的接口格式数据；

所述获取单元406，用于获取所述接口格式数据中的插槽数据列表和样式变量对象列表；

所述编写单元407，用于依据所述插槽数据列表和所述样式变量对象列表，为所述组件编写对应的通用组件插槽接口和通用组件样式接口，得到目标组件。

本发明实施例中，所述编辑模块403包括：

查找单元408和编辑单元409。

其中，

所述查找单元408，用于在所述通用组件样式接口中查找所述各个目标组件对应的样式变量列表，为每一个目标组件在所述目标前端网页上生成一个样式变量编辑表单；

所述编辑单元409，用于通过用户与所述样式变量编辑表单中元素的交互，对所述各个目标组件的样式变量的取值进行编辑。

本发明实施例中，所述开发系统还包括：分配模块410和处理模块411

其中，

所述分配模块410，用于对所述目标前端网页分配页面名称和页面密码口令；

所述处理模块411，用于依据所述页面名称和所述页面密码口令对所述目标前端网页的目标组件树进行创建、编辑和保存。

本发明实施例中，所述开发系统还包括：转换模块412。

其中，

所述转换模块412，用于若所述通用组件库中的通用组件不能满足所述目标组件树的开发要求时，将满足开发要求的外部组件转换成与所述各个目标组件格式相同的第一通用组件，依据所述第一通用组件，对所述目标组件树进行开发。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

最后，还需要说明的是，在本发明中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

对所公开的实施例的上述说明，使本领域技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (10)

1.一种基于组件树的前端网页开发方法，其特征在于，包括：

在通用组件库中选取构成目标前端网页的各个采用预设的代码编辑方法生成的目标组件；

将所述各个目标组件拖拽到组件树面板，依据所述各个目标组件中对应的通用组件插槽接口对所述各个目标组件进行连接，构成第一目标组件树；

依据所述各个目标组件对应的通用组件样式接口对所述第一组件树中的目标组件的样式进行编辑，得到目标组件树；

依据所述目标组件树，对所述目标前端网页进行开发。

2.根据权利要求1所述的方法，其特征在于，采用预设的编辑方法生成的目标组件的过程包括：

针对任意一个组件，解析所述组件中的接口格式数据；

获取所述接口格式数据中的插槽数据列表和样式变量对象列表；

依据所述插槽数据列表和所述样式变量对象列表，为所述组件编写对应的通用组件插槽接口和通用组件样式接口，得到目标组件。

3.根据权利要求2所述的方法，其特征在于，依据所述各个目标组件对应的通用组件样式接口对所述第一组件树中的目标组件样式进行编辑包括：

在所述通用组件样式接口中查找所述各个目标组件对应的样式变量列表，为每一个目标组件在所述目标前端网页上生成一个样式变量编辑表单；

通过用户与所述样式变量编辑表单中元素的交互，对所述各个目标组件的样式变量的取值进行编辑。

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

对所述目标前端网页分配页面名称和页面密码口令；

依据所述页面名称和所述页面密码口令对所述目标前端网页的目标组件树进行创建、编辑和保存。

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

若所述通用组件库中的通用组件不能满足所述目标组件树的开发要求时，将满足开发要求的外部组件转换成与所述各个目标组件格式相同的第一通用组件，依据所述第一通用组件，对所述目标组件树进行开发。

6.一种基于组件树的前端网页开发系统，其特征在于，包括：

选取模块，用于在通用组件库中选取构成目标前端网页的各个采用预设的代码编辑方法生成的目标组件；

连接模块，用于将所述各个目标组件拖拽到组件树面板，依据所述各个目标组件中对应的通用组件插槽接口对所述各个目标组件进行连接，构成第一目标组件树；

编辑模块，用于依据所述各个目标组件对应的通用组件样式接口对所述第一组件树中的目标组件的样式进行编辑，得到目标组件树；

开发模块，用于依据所述目标组件树，对所述目标前端网页进行开发。

7.根据权利要求6所述的系统，其特征在于，所述选取模块包括：

解析单元，用于针对任意一个组件，解析所述组件中的接口格式数据；

获取单元，用于获取所述接口格式数据中的插槽数据列表和样式变量对象列表；

编写单元，用于依据所述插槽数据列表和所述样式变量对象列表，为所述组件编写对应的通用组件插槽接口和通用组件样式接口，得到目标组件。

8.根据权利要求7所述的系统，其特征在于，所述编辑模块包括：

查找单元，用于在所述通用组件样式接口中查找所述各个目标组件对应的样式变量列表，为每一个目标组件在所述目标前端网页上生成一个样式变量编辑表单；

编辑单元，用于通过用户与所述样式变量编辑表单中元素的交互，对所述各个目标组件的样式变量的取值进行编辑。

9.根据权利要求6所述的系统，其特征在于，还包括：

分配模块，用于对所述目标前端网页分配页面名称和页面密码口令；

处理模块，用于依据所述页面名称和所述页面密码口令对所述目标前端网页的目标组件树进行创建、编辑和保存。

10.根据权利要求6所述的系统，其特征在于，还包括：

转换模块，用于若所述通用组件库中的通用组件不能满足所述目标组件树的开发要求时，将满足开发要求的外部组件转换成与所述各个目标组件格式相同的第一通用组件，依据所述第一通用组件，对所述目标组件树进行开发。