[发明专利]基于区块的可视化前端页面生成方法及装置

说明书

本发明属于涉及金融领域，本发明提供了一种基于区块的可视化前端页面生成方法及装置，基于区块的可视化前端页面生成方法包括：实时监听浏览器消息，以接受创建页面指令；响应于接收到的所述创建页面指令；按照占位符格式生成符合预定规则的页面区块；按照所述预定规则组装多个页面区块，以生成可视化前端页面。本发明所提供的基于区块的可视化前端页面生成方法及装置，可以实现基于区块粒度的可视化拼搭，有效降低用户可视化拼搭的工作量，仅需要简单的几个区块完成前端页面的开发，另一方面，也可实现拼搭生成的代码标准化，便于二次开发，从而提升前端可视化搭建的效果与效能。

技术领域

本申请涉及金融领域，具体涉及一种基于区块的可视化前端页面生成方法及装置。

背景技术

在前端开发领域，业界通过不断丰富基础组件，并向上建立物料体系。根据抽象粒度的不同分为组件、区块、页面。基于同一的物料体系，为设计和开发在视觉、交互效果上的统一提供保证。其中基础组件是前端原子组件，通过依赖包的方式引入，通过暴露组件对应的配置，而不允许用户直接修改组件自身的逻辑代码。

区块(页面区块)是由多个基础组件组合而成的，有特定适用场景和业务含义的代码片段模板，暴露了区块对应的可配置选项。用户可通过配置实现相应的功能。由于是开放的代码片段，用户可直接查看区块的具体实现代码，根据实际业务需求修改相应的逻辑，从而兼顾区块代码的稳定性和灵活性。

页面是由多个区块组成的具体特定使用场景和业务含义的代码。无可配置选项，是产品页面的最终态。用户可查看页面的具体实现代码，如需求变更等情况，需直接修改对应的具体代码。组件、区块、页面关系如图1所示。

目前业界基础组件主要集中几家大型互联网公司开源组件，如element-ui，ant-design等，页面模板大型互联网推出的开源相对较少，主要集中在开源社区github中个人贡献的demo工程如vue-admin等。而在区块层面目前建设相对较少，并逐步发展。在可视化页面搭建方面，基于基础组件的可视化拼搭较为普遍，主要集中在表单拼搭上。实现通过可视化的方式将基础组件快速完成表单页面的开发。但该种方式虽然灵活度高，但对于标准页面的搭建布局难以保持统一，拼搭工作量较高，且生成的代码不利于二次开发与维护。故业界多通过拼搭后直接部署使用，不支持二次开发的方式规避，从而使可视化搭建适用场景较为受限。

发明内容

本发明属于金融领域，本发明所提供的基于区块的可视化前端页面生成方法及装置，可以实现基于区块粒度的可视化拼搭，有效降低用户可视化拼搭的工作量，仅需要简单的几个区块完成前端页面的开发，另一方面，也可实现拼搭生成的代码标准化，便于二次开发，从而提升前端可视化搭建的效果与效能。

为解决上述技术问题，本发明提供以下技术方案：

实时监听浏览器消息，以接受创建页面指令；

响应于接收到的所述创建页面指令；按照占位符格式生成符合预定规则的页面区块；

按照所述预定规则组装多个页面区块，以生成可视化前端页面。

一实施例中，所述按照所述预定规则组装所述多个页面区块，以生成可视化前端页面包括：

利用iframe方法，在框架页面中内嵌并组装所述多个页面区块，以生成所述可视化前端页面。

一实施例中，所述实时监听浏览器消息，以接受创建页面指令包括：

在所述框架页面中设置window监听器；

根据所述window监听器监听所述创建页面指令。

一实施例中，所述预定规则包括：

所述页面区块为横向布局，且占满所述可视化前端页面的宽度；

多个页面区块在所述可视化前端页面范围中自上而下排列。