本发明涉及web页面生成技术领域，特别是涉及一种通用web页面布局生成装置及方法。
背景技术：
目前，web前端页面主要有如下两种生成方式：1、与后端混合使用模板引擎进行服务端渲染；2、与后端分离使用javascript浏览器渲染，而第二种方式的前后端分离作为近年来的新兴技术，以效率高、性能好、速度快著称。
虽然对于一些企业门户网站以及文章系统，大部分页面排版都类似，并且可以通过组合基础元素的方式来完成大部分页面的开发工作，但是，目前前后端分离的技术还是避免不了在前端层面去完成组合工作，从而仍存在前后端逻辑分离的情况，而这种前后端逻辑分离的情况往往造成页面的开发效率较低。
技术实现要素：
为克服上述现有技术存在的不足，本发明之目的在于提供一种通用web页面布局生成装置及方法，以将前端的控制逻辑转移到后端，解决前后端逻辑分离的痛点，提高web页面的开发效率以及组件的复用性。
为达上述目的，本发明提供一种通用web页面布局生成装置，包括：
前端处理模块，用于设计所要生成的页面所使用到的基础组件，根据前后端预先定义的数据格式实现对应的方案树解析器，于接收到页面访问请求时，从后端处理模块获取由所述页面的布局方案及其各个组件内容构成的方案树，并利用所述方案解析器解析所述方案树，将所述方案树中对应的组件解析为html，插入dom树中，并根据解析结果将各组件渲染生成所述页面；
后端处理模块，用于设计包括所述页面的布局方案以及各个组件内容的方案树，并于接收到前端处理模块发送的方案树获取请求时，将所述方案树传送至所述前端处理模块。
优选地，所述前端处理模块包括：
基础组件设计单元，用于设计所要生成的web页面所使用到的基础组件；
方案解析器设计单元，用于根据前后端预先定义的数据格式实现相应的方案树解析器；
方案树获取单元，用于根据接收到的页面访问请求完成前端路由事件注册，并于监听到路由变化时，向所述后端处理模块发送方案树获取请求以获取该路由对应的方案树；
方案树解析处理单元，用于利用所述方案树解析器解析所述方案树，将所述方案树中对应的组件解析为html，插入dom树中，并根据解析结果将各组件渲染生成所述web页面。
优选地，所述基础组件设计单元通过将所述web页面设计图中的公共元素由简单到复杂进行拆分，隔离成独立的基础组件并进行组合，获得所述web页面所使用到的所有组件。
优选地，所述基础组件包括但不限于布局容器、导航条、表单、按钮。
优选地，所述基础组件间的关系可以有组合以及继承。
优选地，所述方案树获取单元首先根据该页面访问请求得到一个骨架屏和初始的加载代码，通过所述初始加载代码完成前端路由事件的注册，所述方案树获取单元监听前端路由变化，当监听到路由变化时，请求所述后端处理模块以获取该路由对应的方案树。
优选地，所述前端处理模块还包差异比较单元，用于将当前页面的方案树与请求得到的新页面的方案树进行差异比较，得到由当前页面转化为新页面所需要修改的最小部分，并将其作为所要解析的方案树，启动所述方案树解析处理单元。
优选地，所述方案树解析处理单元通过解析该最小更新方案树，生成符合html规范的代码片段，并将所述dom树上的对应分支用其替换，以生成新的web页面。
为达到上述目的，本发明还提供一种通用web页面布局生成方法，包括如下步骤：
步骤s1，利用前端处理模块设计所要生成的页面所使用到的基础组件，利用后端处理模块设计所述页面的布局方案以及各个组件中的内容；
步骤s2，根据前后端预先定义的数据格式实现对应的方案树解析器；
步骤s3，接收页面访问请求，根据接收到的页面访问请求完成前端路由事件注册，并监听前端路由变化，于监听到路由变化时，向所述后端处理模块发送获取方案树请求，请求获取该路由对应的方案树；
步骤s4，后端处理模块于接收到所述前端处理模块发送的获取方案树请求时，将该路由对应的方案树发送至前端处理模块。
步骤s5，解析所述方案树，将所述方案树中对应的组件解析为html，插入dom树中，并根据解析结果将各组件渲染生成所述页面。
优选地，于步骤s5之前，还包括如下步骤：
将当前页面的方案树与请求得到的新页面的方案树进行差异比较，得到由当前页面转化为新页面所需要修改的最小部分，并将其作为所要解析的方案树，然后进入步骤s5。
与现有技术相比，本发明一种通用web页面布局生成装置及方法通过利用前端处理模块设计所要生成的页面所使用到的基础组件，利用后端处理模块设计所述页面的布局方案以及各个组件中的内容，前端处理模块根据后端处理模块返回的数据格式实现对应的方案树解析器，于接收到页面访问请求时，从后端处理模块获取由所述页面的布局方案及其各个组件内容构成的方案树，利用所述方案解析器解析所述方案树，将所述方案树中对应的组件解析为html，插入dom树中，并根据解析结果将各组件渲染生成所述页面，实现了快速开发web应用的目的，本发明通过将前端的控制逻辑转移到后端，前端只需要维护好基础组件的接口以及显示效果，页面的生成方案完全由后端控制，解决了前后端逻辑分离的痛点，提高了web页面的开发效率以及组件的复用性。
附图说明
图1为本发明一种通用web页面布局生成装置的系统架构图；
图2为本发明具体实施例中方案树拓扑关系示意图；
图3为本发明一种通用web页面布局生成方法的步骤流程图；
图4为本发明实施例中新进入页面a时由方案树解析得到的html页面图；
图5为本发明实施例中由页面a跳转到页面b时由方案树解析得到的html页面图；
图6为本发明实施例中页面b拓扑关系展示与从页面a跳转到页面a的最小更新方案树。
具体实施方式
以下通过特定的具体实例并结合附图说明本发明的实施方式，本领域技术人员可由本说明书所揭示的内容轻易地了解本发明的其它优点与功效。本发明亦可通过其它不同的具体实例加以施行或应用，本说明书中的各项细节亦可基于不同观点与应用，在不背离本发明的精神下进行各种修饰与变更。
图1为本发明一种通用web页面布局生成装置的系统架构图。如图1所示，本发明一种通用web页面布局生成装置，包括：
前端处理模块10，用于设计所要生成的web页面所使用到的基础组件，根据预先定义的数据格式实现对应的方案树解析器，并于接收到页面访问请求时，从后端处理模块20获取由所述web页面的布局方案及其各个组件中的内容构成的方案树，根据所述方案解析器解析所述方案树，将所述方案树中对应的组件解析为html，插入dom树中，并根据解析结果将各组件渲染生成所述web页面，在本发明具体实施例中，所述基础组件包括但不限于布局容器、导航条、表单、按钮等组件。
后端处理模块20，用于设计所述web页面的布局方案以及各个组件中的内容，并于接收到前端处理模块10发送的请求以将其传送至前端处理模块10，在本发明中，每个页面的布局方案以及所使用的各组件的内容可以构成一棵方案树，简称方案树。
优选地，前端处理模块10进一步包括：
基础组件设计单元101，用于设计所要生成的web页面所使用到的基础组件。在本发明具体实施例中，基础组件设计单元101通过将web页面设计图中的公共元素由简单到复杂进行拆分，隔离成独立的基础组件并进行组合，获得项目中所使用到的所有组件。在本发明中，组件间的关系可以有组合以及继承。
方案解析器设计单元102，用于根据预先定义的数据格式实现一个方案树解析器。在本发明具体实施例中，前端处理模块10与后端处理模块20之间先要进行数据交互，需要预先商量好要用什么格式来交换数据，即预先定义数据格式，在本发明具体实施例中，前端处理模块10与后端处理模块20之间预先定义的数据格式为json，前端还需要通过方案解析器设计单元102利用该数据格式实现一个方案解析器，该方案解析起的作用是将后端处理模块20返回的方案树“翻译”成具体的html，在本发明具体实施例中，所述方案解析器设计单元102采用javascript来实现方案解析器，并且在用户第一次访问页面时加载。在本发明具体实施例中，所述方案解析器可以看作为一个黑箱，其输入为后端处理模块20返回的方案树，输出为html标记语言。具体地，所述方案树为一个树状的包含组件以及其数据的数据结构，其拓扑结构参考图2所示，本发明中设计方案树解析器的作用是将后端处理模块20返回的方案树解析成基础组件设计单元101中对应的组件或者是html元素，最终得到html标记语言。
方案树获取单元103，用于根据接收到的页面访问请求完成前端路由事件注册，并于路由变化时，向所述后端处理模块20发送方案树获取请求，以获取该路由对应的方案树。
当用户代理访问web页面时，该方案树获取单元103首先根据该页面访问请求得到一个骨架屏和初始的加载代码，初始加载代码由javascript完成，其作用主要为完成前端路由事件的注册，并监听路由变化，当监测到路由变化时，通过ajax的方式请求所述后端处理模块20来获取该路由对应的方案树。
方案树解析处理单元104，用于利用方案树解析器解析方案树，将所述方案树中对应的组件解析为html，插入dom树中，并根据解析结果将各组件渲染生成所述web页面。
在web页面生成过程中，有时候是新打开一个页面，有时候则是由一个页面跳转至另一个页面，对于新打开一个页面时，可直接解析从后端处理模块返回的方案树，而对于从一个页面跳转到另一个页面的情况，由于每个页面中会包含公共的元素，为了加快页面跳转速度，当跳转至新页面的时，对于方案树公共的部分可以忽略不做处理，而只重新生成有差异的部分。优选地，所述前端处理模块10还包括：差异比较单元，用于将当前页面的方案树与请求得到的新页面的方案树进行差异比较，得到由当前页面转化为新页面所需要修改的最小部分(可称之为最小更新方案树)，并将其作为所要解析的方案树，启动所述方案树解析处理单元104。相应地，所述方案树解析处理单元104通过解析该最小更新方案树，生成符合html规范的代码片段，并将dom树上的对应分支用其替换，以生成新的web页面。
在本发明具体实施例中，前后端处理模块接口的交换数据类型可以是json、xml等任意类型，当本发明不以此为限。
以下通过一例子说明前端处理模块的实现，例如，用户访问www.example.com，首先加载一个空的html页面和方案树解析器(js代码)以及其他辅助代码(路由解析，组件等等)。
此时，前端处理模块根据url，解析对应路由，然后请求接口从后端处理模块获取方案树。假设获得如下的方案树：
首先，前端处理模块将请求获取到的方案树和已有的方案树做差，在本实施例中，由于是第一次访问，已有的方案树是空的，因此做差之后得到的还是请求获取到的方案树；然后将方案树送入方案解析器，利用方案解析器解析得到html，再用解析出来的html替换页面上面html，实现整个加载流程。
可见，通过本发明，前端处理模块只需要维护好基础组件的接口以及显示效果，页面的生成方案完全由后端处理模块控制，可极大地提高页面的开发效率以及组件的复用性，而且通过这种方式，可以将前端的控制逻辑转移到后端，可以解决前后端逻辑分离的痛点。
图3为本发明一种通用web页面布局生成方法的步骤流程图，如图3所示，本发明一种通用web页面布局生成方法，包括如下步骤：
步骤s1，利用前端处理模块设计所要生成的web页面所使用到的基础组件，利用后端处理模块设计所述web页面的布局方案以及各个组件中的内容。在本发明具体实施例中，所述前端处理模块通过将web页面设计图中的公共元素由简单到复杂进行拆分，隔离成独立的基础组件并进行组合，获得所述web页面中所使用到的所有组件。在本发明中，所述基础组件包括但不限于布局容器、导航条、表单、按钮等组件，组件间的关系可以有组合以及继承。
步骤s2，根据预先定义的数据格式实现一个方案树解析器，以将后端处理模块返回的方案树解析为对应的基础组件，以及它们之间的层级关系。
在本发明具体实施例中，需要根据预先定义的数据格式，假设为json，实现一个方案树解析器。前端处理模块与后端处理模块之间先要进行数据交互，需要预先商量好要用什么格式来交换数据，即预先定义数据格式，在本发明具体实施例中，前端处理模块与后端处理模块之间预先定义的数据格式为json，于步骤s2中，利用该数据格式实现一个方案解析器，该方案解析器的作用是将后端处理模块返回的方案树“翻译”成具体的html，在本发明具体实施例中，所述方案解析器采用javascript来实现，并且在用户第一次访问页面时加载，所述方案解析器可以看作为一个黑箱，其输入为后端处理模块返回的方案树，输出为html标记语言。具体地，在本发明中，方案树指的是一个树状的包含组件以及其数据的数据结构，本发明步骤s2中设计方案树解析器的作用是将后端处理模块返回的方案树解析成步骤s1中对应的组件或者是html元素，以最终得到html。
步骤s3，接收页面访问请求，根据接收到的页面访问请求完成前端路由事件注册，并监听前端路由变化，于监听到路由变化时，向所述后端处理模块发送获取方案树请求，请求获取该路由对应的方案树。
具体地说，当用户代理访问web页面时产生一页面访问请求，根据该页面访问请求，前端处理模块首先根据该页面访问请求得到一个骨架屏和初始的加载代码，初始加载代码由javascript完成，其作用主要为完成前端路由事件的注册，然后监听路由变化，当监听到路由变化时，通过ajax的方式请求所述后端处理模块以获取该路由对应的方案树。
步骤s4，后端处理模块于接收到所述前端处理模块发送的获取方案树请求时，将该路由对应的方案树发送至前端处理模块。
步骤s5，解析所述方案树，将所述方案树中对应的组件解析为html，插入dom树中，并根据解析结果将各组件渲染生成所述web页面。
在实际的web页面生成过程中，有时候是新打开一个页面，有时候则是由一个页面跳转至另一个页面，对于新打开一个页面时，可直接解析从后端处理模块返回的方案树，而对于从一个页面跳转到另一个页面的情况，由于每个页面中会包含公共的元素，为了加快页面跳转速度，当跳转至新页面的时，对于方案树公共的部分可以忽略不做处理，而只重新生成有差异的部分。优选地，本发明之通用web页面布局生成方法，于步骤s5之前还包括如下步骤：
步骤s4-1，将当前页面的方案树与请求得到的新页面的方案树进行差异比较，得到由当前页面转化为新页面所需要修改的最小部分(可称之为最小更新方案树)，并将其作为所要解析的方案树，然后进入步骤s5。相应地，于步骤s5中，通过解析该最小更新方案树，生成符合html规范的代码片段，并将dom树上的对应分支用其替换，以生成新的web页面。
实施例
在本实施例中，本发明之通用web页面布局生成过程如下：
首先，需要前端处理模块将web页面设计图中的公共元素由简单到复杂进行拆分，隔离成独立的基础组件并进行组合，获得项目中所使用到的所有组件。在本实施例中，大部分页面是靠组合组件完成的，组件间的关系可以有组合以及继承；
然后，前端处理模块根据后端处理模块返回的数据格式，假设为json，实现一个方案树解析器。所述方案树是一个树状的包含组件以及其数据的数据结构，它的拓扑结构可以参考图2，所述方案树解析器的作用则是将后端处理模块返回的方案树解析成上述提到的组件或者是html元素，最终得到html。
当用户代理访问web页面时，首先产生一个页面访问请求，请求到一个骨架屏和初始的加载代码，该初始加载代码由javascript完成，作用是完成前端路由事件的注册，以及路由变化时，通过ajax的方式请求后端处理模块以获取该路由对应的方案树。
当从后端处理模块获取方案树成功后，首先进行差异比较，如果当前为新进入一个页面，那么差异比较之后所得到的最小更新树则为该路由对应的方案树，因此需要完整地解析方案树，所述方案树的解析过程就是一个将约定好的数据结构翻译成html元素的过程。当完成方案树的解析，此时得到一个真正的dom树，也可以叫做是dom节点，将此dom节点替换页面中指定的html元素，则得到了最终的html页面，如图4所示。
当用户代理从一个页面跳转到另一个页面时，其页面生成过程和进入新页面类似，为了可以更清楚的了解整个过程，假设用户代理是从图4的页面a跳转到图5的页面b。当用户代理从a页面的路由过渡到b页面路由时，前端的初始化加载代码中的路由监听事件中会侦测到此事件的发生。因此，就可以在路由变化之后，再次通过ajax去请求页面b的方案树。
首先对b页面方案树与a页面方案树进行差异比较。根据图4和图5，可以看到并不是整个页面都发生了变化，而只是文章组件的内容发生了变化。因此得到的最小更新方案树将包含两个元素：1：文章组件的标题；2：文章组件的内容，如图6所示。
当完成差异比较后，得到最小更新方案树，则可以将最小更新方案树解析为dom，然后替换它所对应的节点，完成这一步骤，页面b的解析过程也最终完成。由图5可以看到，页面b的生成并没有解析整个方案树，而只是替换了其中有变化的部分。
例如，假设此时用户访问www.example.com，并且已经完成了加载、渲染的过程，此时，用户想切换页面，到www.example.com/a这个地址。
和初次加载页面一样，首先，前端解析地址，得到对应路由；然后根据路由请求后端接口，获取该路由对应的方案树；其次将请求获取到的方案树和已有的方案树做差，解析，替换，完成新页面的渲染过程。
从该过程可以看出，除了从后端获取方案树之外，并没有加载别的内容,而前端的代码，都是首次访问页面加载的。
假设此时需要新增一个页面www.example.com/c，前端获取该地址之后，同样只需要解析对应的路由，然后请求后端获取方案树，而对于后端来说，只需要写好www.example.com/c这个地址的路由对应的方案树，并返回至前端即可，而在新增页面这个过程中，并没有修改前端的代码，因此，即使需要更多页面的情况，也不需要前端代码的改动。
综上所述，本发明一种通用web页面布局生成装置及方法通过利用前端处理模块设计所要生成的页面所使用到的基础组件，利用后端处理模块设计所述页面的布局方案以及各个组件中的内容，前端处理模块根据预先定义的数据格式实现对应的方案树解析器，于接收到页面访问请求时，从后端处理模块获取由所述页面的布局方案及其各个组件内容构成的方案树，利用所述方案解析器解析所述方案树，将所述方案树中对应的组件解析为html，插入dom树中，并根据解析结果将各组件渲染生成所述页面，实现了快速开发web应用的目的，本发明通过将前端的控制逻辑转移到后端，前端只需要维护好基础组件的接口以及显示效果，页面的生成方案完全由后端控制，解决了前后端逻辑分离的痛点，提高了web页面的开发效率以及组件的复用性。
上述实施例仅例示性说明本发明的原理及其功效，而非用于限制本发明。任何本领域技术人员均可在不违背本发明的精神及范畴下，对上述实施例进行修饰与改变。因此，本发明的权利保护范围，应如权利要求书所列。
1.一种通用web页面布局生成装置，包括：
前端处理模块，用于设计所要生成的页面所使用到的基础组件，根据前后端预先定义的数据格式实现对应的方案树解析器，于接收到页面访问请求时，从后端处理模块获取由所述页面的布局方案及其各个组件内容构成的方案树，并利用所述方案解析器解析所述方案树，将所述方案树中对应的组件解析为html，插入dom树中，并根据解析结果将各组件渲染生成所述页面；
后端处理模块，用于设计包括所述页面的布局方案以及各个组件内容的方案树，并于接收到前端处理模块发送的方案树获取请求时，将所述方案树传送至所述前端处理模块。
2.如权利要求1所述的一种通用web页面布局生成装置，其特征在于，所述前端处理模块包括：
基础组件设计单元，用于设计所要生成的web页面所使用到的基础组件；
方案解析器设计单元，用于根据前后端预先定义的数据格式实现相应的方案树解析器；
方案树获取单元，用于根据接收到的页面访问请求完成前端路由事件注册，并于监听到路由变化时，向所述后端处理模块发送方案树获取请求以获取该路由对应的方案树；
方案树解析处理单元，用于利用所述方案树解析器解析所述方案树，将所述方案树中对应的组件解析为html，插入dom树中，并根据解析结果将各组件渲染生成所述web页面。
3.如权利要求2所述的一种通用web页面布局生成装置，其特征在于：所述基础组件设计单元通过将所述web页面设计图中的公共元素由简单到复杂进行拆分，隔离成独立的基础组件并进行组合，获得所述web页面所使用到的所有组件。
4.如权利要求2所述的一种通用web页面布局生成装置，其特征在于：所述基础组件包括但不限于布局容器、导航条、表单、按钮。
5.如权利要求2所述的一种通用web页面布局生成装置，其特征在于：所述基础组件间的关系可以有组合以及继承。
6.如权利要求2所述的一种通用web页面布局生成装置，其特征在于，所述方案树获取单元首先根据该页面访问请求得到一个骨架屏和初始的加载代码，通过所述初始加载代码完成前端路由事件的注册，所述方案树获取单元监听前端路由变化，当监听到路由变化时，请求所述后端处理模块以获取该路由对应的方案树。
7.如权利要求2所述的一种通用web页面布局生成装置，其特征在于，所述前端处理模块还包差异比较单元，用于将当前页面的方案树与请求得到的新页面的方案树进行差异比较，得到由当前页面转化为新页面所需要修改的最小部分，并将其作为所要解析的方案树，启动所述方案树解析处理单元。
8.如权利要求7所述的一种通用web页面布局生成装置，其特征在于：所述方案树解析处理单元通过解析该最小更新方案树，生成符合html规范的代码片段，并将所述dom树上的对应分支用其替换，以生成新的web页面。
9.一种通用web页面布局生成方法，包括如下步骤：
步骤s1，利用前端处理模块设计所要生成的页面所使用到的基础组件，利用后端处理模块设计所述页面的布局方案以及各个组件中的内容；
步骤s2，根据前后端预先定义的数据格式实现对应的方案树解析器；
步骤s3，接收页面访问请求，根据接收到的页面访问请求完成前端路由事件注册，并监听前端路由变化，于监听到路由变化时，向所述后端处理模块发送获取方案树请求，请求获取该路由对应的方案树；
步骤s4，后端处理模块于接收到所述前端处理模块发送的获取方案树请求时，将该路由对应的方案树发送至前端处理模块。
步骤s5，解析所述方案树，将所述方案树中对应的组件解析为html，插入dom树中，并根据解析结果将各组件渲染生成所述页面。
10.如权利要求9所述的一种通用web页面布局生成方法，其特征在于，于步骤s5之前，还包括如下步骤：
将当前页面的方案树与请求得到的新页面的方案树进行差异比较，得到由当前页面转化为新页面所需要修改的最小部分，并将其作为所要解析的方案树，然后进入步骤s5。
技术总结