WEB构建系统、生成方法、装置、电子设备及存储介质

技术领域

本申请实施例涉及软件技术领域，尤其涉及WEB构建系统、生成方法、装置、电子设备及存储介质。

背景技术

在当前的web开发中，组件模板的使用非常广泛，因为它不仅便利数据的渲染，而且统一有序美观。在电商平台展示的商品框也是使用了组件模板生成；不过不同的项目需求，对组件模板的要求也不一样，一般组件模板使用相对简单，都是固定好宽高，规划好具体样式即可。这样的规则方式太单调，不适用于复杂的自定义需求的项目。而想要做好自定义的组件模板相对难度比较高，自定义不仅是提供多种的样式调节，还要提供整体放大放小，模板中某个控件样式放大，对其他控件样式有影响等等。这些功能是紧密关联的，需要考虑计算的因素较多，架构搭建不合理很容易出现功能冲突BUG问题。

发明内容

本申请实施例提供一种WEB构建系统、生成方法、装置、电子设备及存储介质，能够提高WEB组件模板架构的设计适应性，减少架构搭建时的手动操作。

在第一方面，本申请实施例提供了一种WEB组件模板架构的构建系统，包括：组件模板结构模块、组件样式定义模块、组件对象分解模块和组件渲染模块；

所述组件模板结构模块记录所有组件控件、组件框和架构框，所述组件控件用于组成所述WEB组件模板架构，所述组件框用于对应每个所述组件控件的隐藏边框，所述架构框对应于所述WEB组件模板架构的边框；所述组件边框适应于对应组件控件的大小变化，并将所述大小变化传递到所述架构框；

所述组件样式定义模块用于记录每个所述组件控件和架构框的显示属性，以及每个所述显示属性对应的样式定义，所述显示属性包括事件类型，所述样式定义和事件类型组成显示数据；

所述组件对象分解模块，用于将所述WEB组件模板架构的数据层级分解为四级，四级数据层级从上到下分别对应于所述WEB组件模板架构的层级数据、所述架构框的层级数据、组件框的层级数据和组件控件的层级数据，其中每级所述数据层级的层级数据包括该级的数据标识、对应的显示数据以及对应下一层的数据标识；

所述组件渲染模块，用于根据所述数据层级从上到下逐层渲染，以完成所述WEB组件模板架构的显示。

进一步地，所述构建系统，还包括编辑器；

所述编辑器，用于接收用户指令，以对所述WEB组件模板架构当前的显示数据进行更新。

在第二方面，本申请实施例提供了一种WEB组件模板架构的生成方法，基于第一方面任一所述的构建系统实现，包括：

响应于架构新建指令，新建架构框，并生成所述WEB组件模板架构的层级数据以及所述架构框的层级数据，所述架构新建指令用于新建WEB组件模板架构；

响应于组件控件选择指令，在所述架构框内新建组件框，在所述组件框内新建组件控件，并对应生成所述组件框和组件控件的层级数据；

响应于架构生成指令，建立所述WEB组件模板架构、架构框、组件框和组件控件的层级关系，并记录对应层级的层级数据；

基于所述层级关系从上到下逐层渲染对应的层级数据，以完成所述WEB组件模板架构的显示。

进一步地，所述生成方法，还包括：

响应于组件控件调整指令，更新所述组件控件调整指令指定的组件控件的大小，并将所述组件控件对应的调整参数反馈到该组件控件对应的组件框，以使所述组件框适应于所述组件控件的大小进行调整；

将所述组件框对应的调整参数反馈到所述架构框和其他组件框，以使所述架构框进行对应的大小调整，其他组件框进行对应的显示位置调整。

进一步地，所述生成方法，还包括：

按时序记录每次所述组件控件选择指令和所述组件控件调整指令的生成过程，以回溯所述WEB组件模板架构的调整过程。

进一步地，所述组件框定义有填充属性，所述组件框通过所述填充属性获取和反馈所述组件框对应的调整参数。

进一步地，所述组件控件的类型包括文字、图片、功能按钮、拖动条和字体图标。

在第三方面，本申请实施例提供了一种WEB组件模板架构的生成装置，基于第一方面任一所述的构建系统实现，包括：

初始构建单元，用于响应于架构新建指令，新建架构框，并生成所述WEB组件模板架构的层级数据以及所述架构框的层级数据，所述架构新建指令用于新建WEB组件模板架构；

组件选择单元，用于响应于组件控件选择指令，在所述架构框内新建组件框，在所述组件框内新建组件控件，并对应生成所述组件框和组件控件的层级数据；

层级生成单元，用于响应于架构生成指令，建立所述WEB组件模板架构、架构框、组件框和组件控件的层级关系，并记录对应层级的层级数据；

渲染显示单元，用于基于所述层级关系从上到下逐层渲染对应的层级数据，以完成所述WEB组件模板架构的显示。

进一步地，所述生成装置，还包括：

组件调整单元，用于响应于组件控件调整指令，更新所述组件控件调整指令指定的组件控件的大小，并将所述组件控件对应的调整参数反馈到该组件控件对应的组件框，以使所述组件框适应于所述组件控件的大小进行调整；

整体调整单元，用于将所述组件框对应的调整参数反馈到所述架构框和其他组件框，以使所述架构框进行对应的大小调整，其他组件框进行对应的显示位置调整。

进一步地，所述生成装置，还包括：

过程记录单元，用于按时序记录每次所述组件控件选择指令和所述组件控件调整指令的生成过程，以回溯所述WEB组件模板架构的调整过程。

进一步地，所述组件框定义有填充属性，所述组件框通过所述填充属性获取和反馈所述组件框对应的调整参数。

进一步地，所述组件控件的类型包括文字、图片、功能按钮、拖动条和字体图标。

在第四方面，本申请实施例提供了一种电子设备，包括：

存储器以及一个或多个处理器；

所述存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如第二方面所述的生成方法。

在第五方面，本申请实施例提供了一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行如第二方面所述的生成方法。

本申请实施例针对WEB组件模板架构设置组件模板结构模块、组件样式定义模块、组件对象分解模块和组件渲染模块，实现对WEB组件模板架构中各个组件控件基于显示层级的架构，并基于显示层级的架构实现对显示调整相关参数的传递，通过组件控件外周的隐藏边框获取组件控件的变化参数，将变化参数反馈到其它组件控件的隐藏边框以及整个组件控件的隐藏边框，从而实现WEB组件模板架构显示的自适应调整，有效减少了WEB组件模板架构搭建过程中自定义和微调的时间。

附图说明

图1是本申请实施例一提供的一种WEB组件模板架构的构建系统的架构示意图；

图2是本申请实施例二提供的一种WEB组件模板架构的生成方法的流程图；

图3和图4是本申请实施例二中的组件控件调整的变化示意图；

图5是本申请实施例三提供的一种WEB组件模板架构的生成装置的结构示意图；

图6是本申请实施例四提供的一种电子设备的结构示意图。

具体实施方式

为了使本申请的目的、技术方案和优点更加清楚，下面结合附图对本申请具体实施例作进一步的详细描述。可以理解的是，此处所描述的具体实施例仅仅用于解释本申请，而非对本申请的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本申请相关的部分而非全部内容。在更加详细地讨论示例性实施例之前应当提到的是，一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将各项操作(或步骤)描述成顺序的处理，但是其中的许多操作可以被并行地、并发地或者同时实施。此外，各项操作的顺序可以被重新安排。当其操作完成时所述处理可以被终止，但是还可以具有未包括在附图中的附加步骤。所述处理可以对应于方法、函数、规程、子例程、子程序等等。

实施例一：

请参考图1，其是本申请实施例一提供的一种WEB组件模板架构的构建系统的架构示意图，如图所示，该WEB组件模板架构的构建系统包括：组件模板结构模块110、组件样式定义模块120、组件对象分解模块130和组件渲染模块140；

所述组件模板结构模块110记录所有组件控件、组件框和架构框，所述组件控件用于组成所述WEB组件模板架构，所述组件框用于对应每个所述组件控件的隐藏边框，所述架构框对应于所述WEB组件模板架构的边框；所述组件边框适应于对应组件控件的大小变化，并将所述大小变化传递到所述架构框；

所述组件样式定义模块120用于记录每个所述组件控件和架构框的显示属性，以及每个所述显示属性对应的样式定义，所述显示属性包括事件类型，所述样式定义和事件类型组成显示数据；

所述组件对象分解模块130，用于将所述WEB组件模板架构的数据层级分解为四级，四级数据层级从上到下分别对应于所述WEB组件模板架构的层级数据、所述架构框的层级数据、组件框的层级数据和组件控件的层级数据，其中每级所述数据层级的层级数据包括该级的数据标识、对应的显示数据以及对应下一层的数据标识；

所述组件渲染模块140，用于根据所述数据层级从上到下逐层渲染，以完成所述WEB组件模板架构的显示。

在本方案中，组件控件是指实现WEB组件模板架构的基本设计目标的显示元素，其一般对应显示有特定的信息，组件控件的类型多样，可以有文字、图片、ICON图标、功能按钮、拖动条等。组件边框与组件控件一一对应设置，组件监控设置于组件边框内部，并精确控制组件边框与组件控件的相对位置关系，从显示效果上，该边框为隐藏边框，本身并不具备视觉显示效果，并且隐藏边框没有具体的尺寸大小，而只有最小宽高的限定，当然，对应也没有其它显示线条类型、粗细、颜色等可视化的限定，隐藏边框仅用于获取其内部的组件控件的显示参数，并将自身的显示范围调整到与组件控件的显示范围相适应，该显示参数还需要用于WEB组件模板架构中其它显示元素的对应调整。架构框指整个WEB组件模板架构的边框，用于包括该WEB组件模板架构的所有显示元素。

具体到组件边框的实现上，其具有padding(填充)属性，基于该属性，组件边框的宽高由其内部的组件控件决定，即组件边框可以视为由其内部的组件控件撑开，组件控件通过position:relative属性进行相对定位，通过这种相对定位方式，可以使得某个组件控件改变大小时，不影响其它组件控件的显示，相较于现有的组件模板的改变方式，变化灵活，能有效减少WEB组件模板架构搭建过程中自定义和微调的时间。

组件样式定义模块主要针对WEB组件模板架构的各个显示元素中的视觉呈现效果进行进行分解定义。例如架构框对应的具体显示属性包括大小(宽高)、形状、阴影、背景等。组件控件对应的具体显示属性包括大小(宽高)、背景图、边框、字体等。

组件对象分解模块主要将WEB组件模板架构的建立过程中确定的模板进行分层级处理，基于既定的层级规则和已经设置好的组件控件，确认各个层级，再由组件渲染模块完成最终页面的渲染显示。

在具体的底层实现上，不同类别的组件控件通过对应分类的类名进行区分，通过类名以及该类名对应的事件定义，可以清晰确认组件控件的目标显示方式以及控制响应机制。

进一步地，所述构建系统，还包括编辑器；

所述编辑器，用于接收用户指令，以对所述WEB组件模板架构当前的显示数据进行更新。

编辑器用于接收用户指令，进行显示参数的修改，尤其是组件控件的显示参数的修改。具体可以是通过点击组件外框对应的近似区域，也可以是点击组件控件完成选择，然后进行修改。

在本方案中，用将WEB组件模板架构进行组件分解的思路，进行组件拆分以及组件层级间显示参数的传递。对于单个显示元素本身，有相对独立的样式设计。但是在具体基于该架构进行WEB模板的设计时，构建系统中保存的数据存在关联的交互。例如整个WEB组件模板架构本身可以有整体属性的定义，例如模板名称、模板类型和模板ID。在WEB组件模板架构的显示效果的定义上，可以使用style做属性名，对应保存构架框的显示属性。对于预先定义组件控件，可以呈现基本功能和样式，提供给用户操作和查看，并在选中的具体组件控件中进行对应的显示属性的修改，以获得预想的视觉效果。

实施例二：

图2给出了本申请实施例一提供的一种WEB组件模板架构的生成方法的流程图，本实施例中提供的WEB组件模板架构的生成方法可以由电子设备执行，该电子设备可以通过软件和/或硬件的方式实现。

下述以电子设备为执行WEB组件模板架构的生成方法的主体为例，进行描述。参照图2，该WEB组件模板架构的生成方法具体包括：

步骤S210：响应于架构新建指令，新建架构框，并生成所述WEB组件模板架构的层级数据以及所述架构框的层级数据，所述架构新建指令用于新建WEB组件模板架构。

步骤S220：响应于组件控件选择指令，在所述架构框内新建组件框，在所述组件框内新建组件控件，并对应生成所述组件框和组件控件的层级数据。

在具体实现一个WEB组件模板架构的过程中，其中组件控件的类型包括文字、图片、功能按钮、拖动条和字体图标中的一个或多个。

步骤S230：响应于架构生成指令，建立所述WEB组件模板架构、架构框、组件框和组件控件的层级关系，并记录对应层级的层级数据。

步骤S240：基于所述层级关系从上到下逐层渲染对应的层级数据，以完成所述WEB组件模板架构的显示。

在已有层级数据的基础上，从上到下进行WEB组件模板架构的渲染，即先渲染架构框，然后渲染组件框，最后渲染组件控件。

在上述实施例的基础上，所述生成方法，还包括：

步骤S250：响应于组件控件调整指令，更新所述组件控件调整指令指定的组件控件的大小，并将所述组件控件对应的调整参数反馈到该组件控件对应的组件框，以使所述组件框适应于所述组件控件的大小进行调整。

具体而言，所述组件框定义有填充属性，所述组件框通过所述填充属性获取和反馈所述组件框对应的调整参数。

步骤S260：将所述组件框对应的调整参数反馈到所述架构框和其他组件框，以使所述架构框进行对应的大小调整，其他组件框进行对应的显示位置调整。

在某个组件控件的大小调整之后，其调整参数会反馈到对应的组件框，各个组件框之间基于预设的显示规则，对应进行显示位置调整，同时对架构框的大小进行调整，从而可以有效减少WEB组件模板架构搭建过程中自定义和微调的时间。例如图3，其中所有的组件控件13均显示于架构框11，组件控件13外围显示组件框12，当发生如图4中所示的组件控件13的调整时，对应的组件框12基于填充属性进行对应调整，各个组件框12之间会发生调整参数的反馈，进而根据设定规则改变组件框12所约束的位置，即将组件控件13的显示位置进行对应调整。如果组件控件13的调整会导致架构框11的变化，架构框11也将对应调整。

在上述实施例的基础上，所述生成方法，还包括：

步骤S270：按时序记录每次所述组件控件选择指令和所述组件控件调整指令的生成过程，以回溯所述WEB组件模板架构的调整过程。

按时序记录各个指令的生成过程，可以回溯调整过程中的每个状态，当然，也可以在回溯之后前进查看后续生成的状态，以供用户对比查看保留最佳的显示效果。

上述，针对WEB组件模板架构设置组件模板结构模块、组件样式定义模块、组件对象分解模块和组件渲染模块，实现对WEB组件模板架构中各个组件控件基于显示层级的架构，并基于显示层级的架构实现对显示调整相关参数的传递，通过组件控件外周的隐藏边框获取组件控件的变化参数，将变化参数反馈到其它组件控件的隐藏边框以及整个组件控件的隐藏边框，从而实现WEB组件模板架构显示的自适应调整，有效减少了WEB组件模板架构搭建过程中自定义和微调的时间。

实施例三：

在上述实施例的基础上，图5为本申请实施例三提供的一种WEB组件模板架构的生成装置的结构示意图。参考图5，本实施例提供的一种WEB组件模板架构的生成装置具体包括：初始构建单元310、组件选择单元320、层级生成单元330和渲染显示单元340。

初始构建单元310，用于响应于架构新建指令，新建架构框，并生成所述WEB组件模板架构的层级数据以及所述架构框的层级数据，所述架构新建指令用于新建WEB组件模板架构；

组件选择单元320，用于响应于组件控件选择指令，在所述架构框内新建组件框，在所述组件框内新建组件控件，并对应生成所述组件框和组件控件的层级数据；

层级生成单元330，用于响应于架构生成指令，建立所述WEB组件模板架构、架构框、组件框和组件控件的层级关系，并记录对应层级的层级数据；

渲染显示单元340，用于基于所述层级关系从上到下逐层渲染对应的层级数据，以完成所述WEB组件模板架构的显示。

进一步地，所述生成装置，还包括：

组件调整单元，用于响应于组件控件调整指令，更新所述组件控件调整指令指定的组件控件的大小，并将所述组件控件对应的调整参数反馈到该组件控件对应的组件框，以使所述组件框适应于所述组件控件的大小进行调整；

整体调整单元，用于将所述组件框对应的调整参数反馈到所述架构框和其他组件框，以使所述架构框进行对应的大小调整，其他组件框进行对应的显示位置调整。

进一步地，所述生成装置，还包括：

过程记录单元，用于按时序记录每次所述组件控件选择指令和所述组件控件调整指令的生成过程，以回溯所述WEB组件模板架构的调整过程。

进一步地，所述组件框定义有填充属性，所述组件框通过所述填充属性获取和反馈所述组件框对应的调整参数。

进一步地，所述组件控件的类型包括文字、图片、功能按钮、拖动条和字体图标。

上述，针对WEB组件模板架构设置组件模板结构模块、组件样式定义模块、组件对象分解模块和组件渲染模块，实现对WEB组件模板架构中各个组件控件基于显示层级的架构，并基于显示层级的架构实现对显示调整相关参数的传递，通过组件控件外周的隐藏边框获取组件控件的变化参数，将变化参数反馈到其它组件控件的隐藏边框以及整个组件控件的隐藏边框，从而实现WEB组件模板架构显示的自适应调整，有效减少了WEB组件模板架构搭建过程中自定义和微调的时间。

本申请实施例二提供的WEB组件模板架构的生成装置可以用于执行上述实施例二提供的生成方法，具备相应的功能和有益效果。

实施例四：

本申请实施例四提供了一种电子设备，参照图6，该电子设备包括：该终端设备包括处理器410、存储器420、输入装置430、输出装置440以及通信装置450；终端设备中处理器410的数量可以是一个或多个，图6中以一个处理器410为例；终端设备中的处理器410、存储器420、输入装置430、输出装置440以及通信装置450可以通过总线或其他方式连接，图6中以通过总线连接为例。

存储器420作为一种计算机可读存储介质，可用于存储软件程序、计算机可执行程序以及模块，如本发明实施例中的WEB组件模板架构的生成方法对应的程序指令/模块(例如，WEB组件模板架构的生成装置中的初始构建单元310、组件选择单元320、层级生成单元330和渲染显示单元340)。处理器410通过运行存储在存储器420中的软件程序、指令以及模块，从而执行终端设备的各种功能应用以及数据处理，即实现上述的WEB组件模板架构的生成方法。

存储器420可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据终端设备的使用所创建的数据等。此外，存储器420可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中，存储器420可进一步包括相对于处理器410远程设置的存储器，这些远程存储器可以通过网络连接至终端设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

输入装置430可用于接收输入的数字或字符信息，以及产生与终端设备的用户设置以及功能控制有关的键信号输入。输出装置440可包括显示屏等显示设备。

上述提供的电子设备可用于执行上述实施例二提供的生成方法，具备相应的功能和有益效果。

实施例五：

本申请实施例还提供一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行一种WEB组件模板架构的生成方法，该生成方法包括：响应于架构新建指令，新建架构框，并生成所述WEB组件模板架构的层级数据以及所述架构框的层级数据，所述架构新建指令用于新建WEB组件模板架构；响应于组件控件选择指令，在所述架构框内新建组件框，在所述组件框内新建组件控件，并对应生成所述组件框和组件控件的层级数据；响应于架构生成指令，建立所述WEB组件模板架构、架构框、组件框和组件控件的层级关系，并记录对应层级的层级数据；基于所述层级关系从上到下逐层渲染对应的层级数据，以完成所述WEB组件模板架构的显示。

存储介质——任何的各种类型的存储器设备或存储设备。术语“存储介质”旨在包括：安装介质，例如CD-ROM、软盘或磁带装置；计算机系统存储器或随机存取存储器，诸如DRAM、DDR RAM、SRAM、EDO RAM，兰巴斯(Rambus)RAM等；非易失性存储器，诸如闪存、磁介质(例如硬盘或光存储)；寄存器或其它相似类型的存储器元件等。存储介质可以还包括其它类型的存储器或其组合。另外，存储介质可以位于程序在其中被执行的第一计算机系统中，或者可以位于不同的第二计算机系统中，第二计算机系统通过网络(诸如因特网)连接到第一计算机系统。第二计算机系统可以提供程序指令给第一计算机用于执行。术语“存储介质”可以包括驻留在不同位置中(例如在通过网络连接的不同计算机系统中)的两个或更多存储介质。存储介质可以存储可由一个或多个处理器执行的程序指令(例如具体实现为计算机程序)。

当然，本申请实施例所提供的一种包含计算机可执行指令的存储介质，其计算机可执行指令不限于如上所述的WEB组件模板架构的生成方法，还可以执行本申请任意实施例所提供的WEB组件模板架构的生成方法中的相关操作。

上述实施例中提供的WEB组件模板架构的生成装置、存储介质及电子设备可执行本申请任意实施例所提供的WEB组件模板架构的生成方法，未在上述实施例中详尽描述的技术细节，可参见本申请任意实施例所提供的WEB组件模板架构的生成方法。

上述仅为本申请的较佳实施例及所运用的技术原理。本申请不限于这里所述的特定实施例，对本领域技术人员来说能够进行的各种明显变化、重新调整及替代均不会脱离本申请的保护范围。因此，虽然通过以上实施例对本申请进行了较为详细的说明，但是本申请不仅仅限于以上实施例，在不脱离本申请构思的情况下，还可以包括更多其他等效实施例，而本申请的范围由权利要求的范围决定。