CN112905168B - 基于区块的可视化前端页面生成方法及装置 - Google Patents

Abstract

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

Description

基于区块的可视化前端页面生成方法及装置

技术领域

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

背景技术

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

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

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

第二方面，本发明提供一种基于区块的可视化前端页面生成装置，该装置包括：

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

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

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

一实施例中，所述页面生成单元具体用于利用iframe方法，在框架页面中内嵌并组装所述多个页面区块，以生成所述可视化前端页面。

一实施例中，所述指令接收单元包括：

监听器设置单元，用于在所述框架页面中设置window监听器；

指令监听单元，用于根据所述window监听器监听所述创建页面指令。

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

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

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

第三方面，本发明提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时实现基于区块的可视化前端页面生成方法的步骤。

第四方面，本发明提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现基于区块的可视化前端页面生成方法的步骤。

从上述描述可知，本发明实施例提供一种基于区块的可视化前端页面生成方法及装置，首先实时监听浏览器消息，以接受创建页面指令；接着，响应于接收到的创建页面指令；按照占位符格式生成符合预定规则的页面区块；最后按照预定规则组装多个页面区块，以生成可视化前端页面。本发明使用户可以快速方便的进行页面的搭建。由于是基于区块粒度，页面的布局和区块的具体实现是相对固定的。通过配置与区块结合，避免传统基于组件的可视化拼搭带来布局混乱，生成代码二次开发困难的问题，有效提升前端可视化拼搭的效率和效果。

附图说明

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

图1为现有技术中组件、区块、页面关系示意图；

图2为本发明实施例中基于区块的可视化前端页面生成方法的流程示意图；

图3为本发明实施例中步骤200的流程示意图；

图4为本发明实施例中步骤100的流程示意图；

图5为本发明具体应用实例中的基于区块的可视化前端页面生成装置的方块图；

图6为本发明具体应用实例中的标准区块物料集1的方块图；

图7为本发明具体应用实例中的页面区块的方块图；

图8为本发明具体应用实例中的拼搭管理单元的方块图；

图9为本发明具体应用实例中的拼搭预览单元的方块图；

图10为本发明的实施例中基于区块的可视化前端页面生成装置的结构示意图；

图11为本发明的实施例中指令接收单元的结构示意图；

图12为本发明的实施例中的电子设备的结构示意图。

具体实施方式

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

本发明的实施例提供一种基于区块的可视化前端页面生成方法的具体实施方式，参见图2，其具体包括如下内容：

步骤100：实时监听浏览器消息，以接受创建页面指令。

具体地，可利用浏览器监听机制，实时监听客户所发送的创建页面指令。可以理解的是，无论是前端还是移动端，用户在浏览网页或者APP时，通常会在屏幕上产生很多交互操作，例如点击、选择、滚动屏幕、键盘输入等待，并且网页或APP也会根据不同的操作进行响应变化。这种基于事件的处理方式，本质上是一种消息传递机制，称之为事件监听机制。

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

现有技术中，前端可视化在线拼搭页面生成采用了基础组件复用的思想，总体颗粒度较细，其仅仅在理论上可以完成任意页面的在线拼搭设计，但基于基础组件的可视化设计需要处理大量的基础组件在页面中的位置定位信息参数，以及过多组件的在代码中的命名采用随机命名的方式，可读性较差。所以往往采用在线设计完成后直接部署上线的方式，或提供一份描述文件，而无法提供设计完成后的页面源码下载。即便提供下载，也往往可读性很差，难以在此基础上做二次开发。为此，可以将每个页面区块(区块)的可配置部分变成特定格式的占位符，作为生成前端代码的基础模板。

格式占位符(％)是在C/C++语言中格式输入函数，如scanf、printf等函数中使用。其意义就是起到格式占位的意思，表示在该位置有输入或者输出。格式占位符(％)可以以下字母配合使用用来表示某些特定的输入输出:

％a,％A读入一个浮点值(仅C99有效)；

％c读入一个字符；

％d读入十进制整数；

％i读入十进制，八进制，十六进制整数；

％o读入八进制整数；

％x,％X读入十六进制整数；

％s读入一个字符串，遇空格、制表符或换行符结束；

％f,％F,％e,％E,％g,％G用来输入实数，可以用小数形式或指数形式输入；

％p读入一个指针；

％u读入一个无符号十进制整数；

％n至此已读入值的等价字符数；

％[]扫描字符集合；

％％读％符号；

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

具体地，可以对页面区块进行标准化设计，以使其可以快速搭建标准页面，并下载为可二次开发的代码，从而提升前端开发人员的开发效能。通过抽象区块的概念，所有的区块均为横向布局，占满所有的宽度。在可视化前端页面拼搭过程中，选择需要的区块即可，所有区块均为自上而下排列布局。从而避免了可视化拼搭过程中产生的组件位置信息参数的问题

从上述描述可知，本发明实施例提供一种基于区块的可视化前端页面生成方法，首先实时监听浏览器消息，以接受创建页面指令；接着，响应于接收到的创建页面指令；按照占位符格式生成符合预定规则的页面区块；最后按照预定规则组装多个页面区块，以生成可视化前端页面。本发明使用户可以快速方便的进行页面的搭建。由于是基于区块粒度，页面的布局和区块的具体实现是相对固定的。通过配置与区块结合，避免传统基于组件的可视化拼搭带来布局混乱，生成代码二次开发困难的问题，有效提升前端可视化拼搭的效率和效果。

一实施例中，参见图3，步骤200进一步包括：

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

具体地，通过iframe的方式，在框架页面(index.vue)中内嵌拼搭展示可视化前端页面(composePage.vue)。可以理解的是，iframe是HTML标签，作用是文档中的文档，或者浮动的框架(FRAME)。iframe标签规定一个内联框架(即行内框架)。被用来在当前HTML文档中嵌入另一个文档iframe会创建包含另外一个文档的内联框架(即行内框架)。

一实施例中，参见图4，步骤100进一步包括：

步骤101：在所述框架页面中设置window监听器；

步骤102：根据所述window监听器监听所述创建页面指令。

在步骤101以及步骤102中，在拼搭可视化前端页面过程中，在created生命周期时，新增配置监听器，接着在框架页面中配置消息发送，最后在框架页面中配置消息接受函数，处理拼搭展示页面返回的消息。

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

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

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

另一方面，由于不同的页面区块有其自身的业务含义，所以在特定页面区块内可放置的基础组件也是确定的。例如按钮区块中可以放置多个按钮，而不会放入输入框；表格区块中可以设置列内容，而不能放入按钮。所以通过提供多种页面区块，在协助用户合理的设计页面的同时也避免基础组件混合编排带来的布局和位置信息混乱的问题。

在不同的页面区块提供特定的基础组件的增减，通过配置项的方式暴露出来，用户通过配置的方式实现基础组件的动态变化，而非任意的增减。从而确保所有的可视化拼搭是按照一定规则进行的，而非随意拼搭。为最终用户下载高可读行的可二次开发的前端代码提供了保证。例如表格页面区块中，仅能增加表格字段、设置列类型、确认是否显示分页器，而不能将一个按钮放入到表格中。

为进一步地说明本方案，本发明提供基于区块的可视化前端页面生成装置的具体应用实例，以此来进一步阐述基于区块的可视化前端页面生成方法。

通过该装置可以实现在页面上以可视化的方式编辑标准化的前端区块，快速搭建标准页面，并下载为可二次开发的代码，从而提升前端开发人员的开发效能。

参见图5，在具体应用实例中，基于区块的可视化前端页面生成装置包括标准区块物料集1、拼搭管理单元2、拼搭预览单元3、消息监听单元4。标准区块物料集1是经过设计的标准的区块物料，注册到生成装置后，由拼单管理单元2进行拼单，拼单预览单元3进行预览展示。拼搭管理单元2与拼搭预览单元3通过向消息监听单元4注册监听消息的方式实现交互。其中：

标准区块物料集1：主要由具有特定标准的具体的区块的实现组成，通过注册到可视化页面生成装置后，在装置中进行拼搭和配置。

拼搭管理单元2：主要完成拼搭的配置操作，包括在拼搭预览单元中添加存量区块，删除已添加的区块，展示已添加区块的可配置属性，并提供修改功能。在拼搭管理单元配置后会发送浏览器信息。

拼搭预览单元3：监听浏览器消息，根据拼搭管理单元发出的指令创建页面代码及对应的配置文件，动态生成页面并展示。

消息监听单元4：利用浏览器监听机制，实现拼搭管理单元2和拼搭预览单元3的消息传递，实现单元之间的交互。

参见图6，标准区块物料集1根据实际业务场景，分区主要操作区块、辅助操作区块、详情区块、弹窗区块、表单区块、页头区块、查询区块、表格区块等。可根据实际使用需要进行扩充。

参见图7，标准区块物料集中页面区块11包含具体区块模板111、区块配置112以及可直接使用的引用区块113。每个区块的实现固定的页面展示内容及效果，并提供对应的可配置参数实现对当前区块的属性和内容进行调整。其中：

区块模板111将每个区块的可配置部分变成特定格式的占位符，作为拼搭预览单元3生成前端代码的基础模板。

区块配置112是每个区块具体的配置参数，有固定的格式，由拼搭管理单元2生成。

引用区块113是实际生成的可在代码中直接使用的具体区块。用户可再获取后查看详细实现代码，并根据自己的实际需求直接修改的可二次开发的代码片段。

参见图8，拼搭管理单元2包含区块添加单元21，区块编辑单元22。拼搭管理单元2向消息监听单元4增加监听后，通过区块添加单元21和区块编辑单元22向消息监听单元4发送对应的消息，其中：

区块添加单元21用于显示目前已经注册的区块信息，选中确认后可向消息监听单元4发送添加区块的消息，并上送对应的区块编号信息。

区块编辑单元22用于对已添加的区块进行配置。区块编辑单元22激活后，向拼搭预览单元3发送编辑消息，并接受到拼搭预览单元上送的选中区块信息后，展示该区块的可编辑配置内容，完成配置后向消息监听单元4发送区块编辑信息以及更新的区块信息。

参见图9，拼搭预览单元3包含配置生成单元31和页面构造单元32。拼搭预览单元3向消息监听单元4增加监听后，接收到区块新增、编辑、删除消息后触发配置生成单元31生成新的配置，并传递给页面构造单元32重新生成页面以及对应的页面代码，其中

配置生成单元31用于接收消息监听单元4传递来的新增、修改、删除消息，并进行对应的处理，生成新的页面配置。

页面构造单元32用于根据配置生成单元31生成的配置，解析配置并生成页面代码并在拼搭预览单元3中实时展示页面效果。当接收到删除消息时，选中需要删除的区块会向消息监听单元4发送区块删除消息。

用户可视化设计页面时，编辑页面与拼搭页面展示之间通信过程如下：页面分为区块展示、拼搭页面展示两部分，两部分需要进行通讯。拼搭展示部分接收到新增、修改、删除的指令后续动态修改展示内容，实现页面的实时渲染。

通过在iframe的方式，框架页面(index.vue)中内嵌拼搭展示页面(composePage.vue)。本方案中采用观察者模式，在页面初始化时，在拼搭页面中增加window监听器，在框架页面中配置消息发送函数向拼搭页面传送消息。具体包括以下步骤：

S1：拼搭展示页面中，在created生命周期时，新增配置监听器。

S2:在框架页面中配置消息发送。

S3:在框架页面中配置消息接受函数，处理拼搭展示页面返回的消息。

需要说明的是，拼搭页面动态渲染及代码生成下载处理过程中，页面需要根据用户指定动态渲染。目前通用的做法是通过动态组件接收配置参数来实现页面的动态渲染，但本方案中需要提供高可读性的页面源码生成与下载，若单纯使用动态组件的方式则无法生成页面源码。本具体应用实例解决方法：通过Vue.extend()方法，使用Vue构造器，临时生成一个包含组件选项的对象。在获取到用户指定参数后，通过该构造器，临时生成一个完整的组件源码，再将该组件注册到页面中，实现页面动态渲染，同时生成的源码也就可以用于用户下载后二次开发。

从上述描述可知，本发明具体应用实例所提供一种基于区块的可视化前端页面生成方法，为解决前端可视化拼搭布局无法统一，基础组件粒度拼搭工作量较高，且生成代码不利于二次开发的问题，本发明提出通过建设标准化的区块，实现基于区块粒度的可视化拼搭，有效降低用户可视化拼搭的工作量，通过简单的2-3个区块完成前端页面的开发，同时也可实现拼搭生成的代码标准化，便于二次开发，从而提升前端可视化搭建的效果与效能。

基于同一发明构思，本申请实施例还提供了一种基于区块的可视化前端页面生成装置，可以用于实现上述实施例所描述的方法，如下面的实施例。由于基于区块的可视化前端页面生成装置解决问题的原理与基于区块的可视化前端页面生成方法相似，因此基于区块的可视化前端页面生成装置的实施可以参见基于区块的可视化前端页面生成方法实施，重复之处不再赘述。以下所使用的，术语“单元”或者“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的系统较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

本发明的实施例提供一种能够实现基于区块的可视化前端页面生成方法的基于区块的可视化前端页面生成装置的具体实施方式，参见图10，基于区块的可视化前端页面生成装置具体包括如下内容：

指令接收单元10，用于实时监听浏览器消息，以接受创建页面指令；

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

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

一实施例中，所述页面生成单元20具体用于利用iframe方法，在框架页面中内嵌并组装所述多个页面区块，以生成所述可视化前端页面。

一实施例中，参见图11，所述指令接收单元10包括：

监听器设置单元101，用于在所述框架页面中设置window监听器；

指令监听单元102，用于根据所述window监听器监听所述创建页面指令。

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

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

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

从上述描述可知，本发明实施例提供一种基于区块的可视化前端页面生成装置，首先实时监听浏览器消息，以接受创建页面指令；接着，响应于接收到的创建页面指令；按照占位符格式生成符合预定规则的页面区块；最后按照预定规则组装多个页面区块，以生成可视化前端页面。本发明使用户可以快速方便的进行页面的搭建。由于是基于区块粒度，页面的布局和区块的具体实现是相对固定的。通过配置与区块结合，避免传统基于组件的可视化拼搭带来布局混乱，生成代码二次开发困难的问题，有效提升前端可视化拼搭的效率和效果。

本申请的实施例还提供能够实现上述实施例中的基于区块的可视化前端页面生成方法中全部步骤的一种电子设备的具体实施方式，参见图12，电子设备具体包括如下内容：

处理器(processor)1201、存储器(memory)1202、通信接口(CommunicationsInterface)1203和总线1204；

其中，处理器1201、存储器1202、通信接口1203通过总线1204完成相互间的通信；通信接口1203用于实现服务器端设备以及客户端设备等相关设备之间的信息传输；

处理器1201用于调用存储器1202中的计算机程序，处理器执行计算机程序时实现上述实施例中的基于区块的可视化前端页面生成方法中的全部步骤，例如，处理器执行计算机程序时实现下述步骤：

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

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

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

本申请的实施例还提供能够实现上述实施例中的基于区块的可视化前端页面生成方法中全部步骤的一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述实施例中的基于区块的可视化前端页面生成方法的全部步骤，例如，处理器执行计算机程序时实现下述步骤：

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

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

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

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

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

虽然本申请提供了如实施例或流程图的方法操作步骤，但基于常规或者无创造性的劳动可以包括更多或者更少的操作步骤。实施例中列举的步骤顺序仅仅为众多步骤执行顺序中的一种方式，不代表唯一的执行顺序。在实际中的装置或客户端产品执行时，可以按照实施例或者附图所示的方法顺序执行或者并行执行(例如并行处理器或者多线程处理的环境)。

为了描述的方便，描述以上装置时以功能分为各种模块分别描述。当然，在实施本说明书实施例时可以把各模块的功能在同一个或多个软件和/或硬件中实现，也可以将实现同一功能的模块由多个子模块或子单元的组合实现等。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

本领域技术人员也知道，除了以纯计算机可读程序代码方式实现控制器以外，完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件，而对其内部包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

本说明书实施例可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本说明书实施例，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本说明书实施例的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

以上所述仅为本说明书实施例的实施例而已，并不用于限制本说明书实施例。对于本领域技术人员来说，本说明书实施例可以有各种更改和变化。凡在本说明书实施例的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本说明书实施例的权利要求范围之内。

Claims (10)

1.一种基于区块的可视化前端页面生成方法，其特征在于，包括：

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

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

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

在框架页面中配置消息接受函数，处理拼搭展示页面返回的消息；

所述在框架页面中配置消息接受函数，处理拼搭展示页面返回的消息，包括：

通过Vue.extend()组件，使用Vue构造器，临时生成一个包含组件选项的对象；在获取到用户指定参数后，通过该构造器，临时生成一个完整的组件源码，再将该组件注册到页面中，以实现页面动态渲染。

2.如权利要求1所述的基于区块的可视化前端页面生成方法，其特征在于，所述按照所述预定规则组装所述多个页面区块，以生成可视化前端页面包括：

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

3.如权利要求2所述的基于区块的可视化前端页面生成方法，其特征在于，所述实时监听浏览器消息，以接受创建页面指令包括：

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

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

4.如权利要求1所述的基于区块的可视化前端页面生成方法，其特征在于，所述预定规则包括：

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

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

5.一种基于区块的可视化前端页面生成装置，其特征在于，包括：

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

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

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

消息处理模块，用于在框架页面中配置消息接受函数，处理拼搭展示页面返回的消息；

所述在框架页面中配置消息接受函数，处理拼搭展示页面返回的消息，包括：

通过Vue.extend()组件，使用Vue构造器，临时生成一个包含组件选项的对象；在获取到用户指定参数后，通过该构造器，临时生成一个完整的组件源码，再将该组件注册到页面中，以实现页面动态渲染。

6.如权利要求5所述的基于区块的可视化前端页面生成装置，其特征在于，所述页面生成单元具体用于利用iframe方法，在框架页面中内嵌并组装所述多个页面区块，以生成所述可视化前端页面。

7.如权利要求6所述的基于区块的可视化前端页面生成装置，其特征在于，所述指令接收单元包括：

监听器设置单元，用于在所述框架页面中设置window监听器；

指令监听单元，用于根据所述window监听器监听所述创建页面指令。

8.如权利要求5所述的基于区块的可视化前端页面生成装置，其特征在于，所述预定规则包括：

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

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

9.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1至4任一项所述基于区块的可视化前端页面生成方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1至4任一项所述基于区块的可视化前端页面生成方法的步骤。