[发明专利]一种通用WEB页面布局生成装置及方法

说明书

本发明公开了一种通用WEB页面布局生成装置及方法，所述装置包括：前端处理模块，用于设计所要生成的页面所使用到的基础组件，根据前后端预先定义的数据格式实现对应的方案树解析器，于接收到页面访问请求时，从后端处理模块获取由所述页面的布局方案及其各个组件内容构成的方案树，利用所述方案解析器解析所述方案树，将所述方案树中对应的组件解析为HTML，插入DOM树中，并根据解析结果将各组件渲染生成所述页面；后端处理模块，用于设计包括所述页面的布局方案以及各个组件内容的方案树，并于接收到前端处理模块发送的方案树获取请求时，将所述方案树传送至所述前端处理模块。

技术领域

本发明涉及WEB页面生成技术领域，特别是涉及一种通用WEB页面布局生成装置及方法。

背景技术

目前，Web前端页面主要有如下两种生成方式：1、与后端混合使用模板引擎进行服务端渲染；2、与后端分离使用JavaScript浏览器渲染，而第二种方式的前后端分离作为近年来的新兴技术，以效率高、性能好、速度快著称。

虽然对于一些企业门户网站以及文章系统，大部分页面排版都类似，并且可以通过组合基础元素的方式来完成大部分页面的开发工作，但是，目前前后端分离的技术还是避免不了在前端层面去完成组合工作，从而仍存在前后端逻辑分离的情况，而这种前后端逻辑分离的情况往往造成页面的开发效率较低。

发明内容

为克服上述现有技术存在的不足，本发明之目的在于提供一种通用WEB页面布局生成装置及方法，以将前端的控制逻辑转移到后端，解决前后端逻辑分离的痛点，提高WEB页面的开发效率以及组件的复用性。

为达上述目的，本发明提供一种通用WEB页面布局生成装置，包括：

前端处理模块，用于设计所要生成的页面所使用到的基础组件，根据前后端预先定义的数据格式实现对应的方案树解析器，于接收到页面访问请求时，从后端处理模块获取由所述页面的布局方案及其各个组件内容构成的方案树，并利用所述方案解析器解析所述方案树，将所述方案树中对应的组件解析为HTML，插入DOM树中，并根据解析结果将各组件渲染生成所述页面；

后端处理模块，用于设计包括所述页面的布局方案以及各个组件内容的方案树，并于接收到前端处理模块发送的方案树获取请求时，将所述方案树传送至所述前端处理模块。

优选地，所述前端处理模块包括：

基础组件设计单元，用于设计所要生成的WEB页面所使用到的基础组件；

方案解析器设计单元，用于根据前后端预先定义的数据格式实现相应的方案树解析器；

方案树获取单元，用于根据接收到的页面访问请求完成前端路由事件注册，并于监听到路由变化时，向所述后端处理模块发送方案树获取请求以获取该路由对应的方案树；

方案树解析处理单元，用于利用所述方案树解析器解析所述方案树，将所述方案树中对应的组件解析为HTML，插入DOM树中，并根据解析结果将各组件渲染生成所述WEB页面。

优选地，所述基础组件设计单元通过将所述WEB页面设计图中的公共元素由简单到复杂进行拆分，隔离成独立的基础组件并进行组合，获得所述WEB页面所使用到的所有组件。

优选地，所述基础组件包括但不限于布局容器、导航条、表单、按钮。

优选地，所述基础组件间的关系可以有组合以及继承。

优选地，所述方案树获取单元首先根据该页面访问请求得到一个骨架屏和初始的加载代码，通过所述初始加载代码完成前端路由事件的注册，所述方案树获取单元监听前端路由变化，当监听到路由变化时，请求所述后端处理模块以获取该路由对应的方案树。