CN114489610A - 一种页面可视化动态组件配置方法及系统 - Google Patents

Abstract

本发明公开了一种页面可视化动态组件配置方法及系统，包括：预先构建基础组件、业务组件及页面组件；对所述基础组件、业务组件及页面组件进行拆分得到相应的组成结构，并生成对应的JSON数据；根据JSON数据将对应的组件拖拽至界面编辑区域，按照业务逻辑参考组件开发文档定义的相关事件、方法、属性要求来完成相应的配置；对完成组件配置流程的组件，开始进行相关调试工作。实现一键发布，节省审核时间，提高运营效率，同时实现代码组件化，样式可配置，数据可动态绑定，功能可随时扩展，提高研发人员效率，支持自主配置页面的内容样式和交互方式。

Description

一种页面可视化动态组件配置方法及系统

技术领域

本发明涉及计算机web前端技术领域，特别涉及一种页面可视化动态组件配置方法及系统。

背景技术

随着计算机技术的不断发展，人们通过终端实现网络运营。想要实现更好的运营效果，运营人员往往会在页面样式及业务实现方式上进行频繁且大规模的修改调整。但是小程序是搭建在某些应用程序框架内的，需要受到应用程序平台方的审核与监管；而诸如安卓、IOS端的应用程序如新增了业务功能往往也需要到对应的应用平台进行发布提审，因此在上线前都要等待漫长的审核时间，导致运营效率低，另外，在研发人员对页面样式及业务实现方式进行修改时，需要从重新设计代码、样式等，费时费力。

发明内容

本发明旨在至少一定程度上解决上述技术中的技术问题之一。为此，本发明的第一个目的在于提出一种页面可视化动态组件配置方法，实现一键发布，节省审核时间，提高运营效率，同时实现代码组件化，样式可配置，数据可动态绑定，功能可随时扩展，提高研发人员效率，支持自主配置页面的内容样式和交互方式。

本发明的第二个目的在于提出一种页面可视化动态组件配置系统。

为达到上述目的，本发明第一方面实施例提出了一种页面可视化动态组件配置方法，包括：

预先构建基础组件、业务组件及页面组件；

对所述基础组件、业务组件及页面组件进行拆分得到相应的组成结构，并生成对应的JSON数据；

根据JSON数据将对应的组件拖拽至界面编辑区域，按照业务逻辑参考组件开发文档定义的相关事件、方法、属性要求来完成相应的配置；

对完成组件配置流程的组件，开始进行相关调试工作。

根据本发明的一些实施例，所述预先构建基础组件、业务组件及页面组件，包括：

获取页面元素数据，根据所述页面元素数据生成基础组件；

获取业务营销数据，根据所述业务营销数据生成业务组件；

获取页面空间数据，根据所述页面空间数据生成页面组件。

根据本发明的一些实施例，所述基础组件包括图片、文字、图表、按钮、线条、时间中的至少一种；所述业务组件包括营销组件；所述页面组件包括通用页面、定开页面。

根据本发明的一些实施例，通过前端页面及渲染组件实现对JSON数据的解析。

根据本发明的一些实施例，所述组成结构包括后端接口和业务实现端的配置。

根据本发明的一些实施例，所述相应的配置包括根据所述后端接口的类型配置所述后端接口的资源。

根据本发明的一些实施例，在根据JSON数据将对应的组件拖拽至界面编辑区域后，还包括：

获取拖拽至界面编辑区域的组件类型，根据组件类型查询预设组件类型-顺序表，确定第一顺序标签、第二顺序标签及第三顺序标签；

将第一顺序标签对应的组件生成第一分页；将第二顺序标签对应的组件生成第二分页；将第三顺序标签对应的组件生成第三分页；

在界面编辑区域显示第一分页时，获取第二分页的第一特征信息并生成第一镜像，获取第三分页的第二特征信息并生成第二镜像，并将所述第一镜像及所述第二镜像显示于第一分页上；

响应于页面配置请求，获取目标页面的页面配置数据，并生成第三镜像显示于第一分页上。

根据本发明的一些实施例，还包括：

在完成相关调试工作后，响应于接收到的用户终端发送的页面请求；

对所述页面请求进行整理，生成任务列表；

获取所述用户终端对应的目标页面及对目标页面的访问数据；

对所述访问数据进行解析，得到解析字段，根据解析字段建立访问模型；

根据所述访问模型确定所述用户终端对应页面请求的任务属性；

根据所述任务属性确定优先级顺序，并对任务列表进行更新，得到修正任务列表；

基于预设数量个推送强度等级，对修正任务列表进行分配，得到若干个子修正任务列表，对子修正任务列表根据对应的推送强度等级来执行。

根据本发明的一些实施例，所述解析字段包括用于分析的维度字段、用于对维度做描述的信息字段和用于统计分析的摘要字段。

为达到上述目的，本发明第二方面实施例提出了一种页面可视化动态组件配置系统，包括：

构建模块，用于预先构建基础组件、业务组件及页面组件；

组件处理模块，用于对所述基础组件、业务组件及页面组件进行拆分得到相应的组成结构，并生成对应的JSON数据；

组件配置模块，用于根据JSON数据将对应的组件拖拽至界面编辑区域，按照业务逻辑参考组件开发文档定义的相关事件、方法、属性要求来完成相应的配置；

组件调试模块，用于对完成组件配置流程的组件，开始进行相关调试工作。

本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在所写的说明书以及附图中所特别指出的结构来实现和获得。

下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：

图1是根据本发明一个实施例的一种页面可视化动态组件配置方法的流程图；

图2是根据本发明一个实施例的一种页面可视化动态组件配置系统的框图；

图3是根据本发明一个实施例与现有技术的对比示意图；

图4是根据本发明一个实施例的各个组件的配置页面与管理系统后台关于业务数据进行交互的架构示意图；

图5是根据本发明一个实施例的组件化部署时的装修页面效果示意图。

具体实施方式

以下结合附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。

如图1-5所示，本发明第一方面实施例提出了一种页面可视化动态组件配置方法，包括步骤S1-S4：

S1、预先构建基础组件、业务组件及页面组件；

S2、对所述基础组件、业务组件及页面组件进行拆分得到相应的组成结构，并生成对应的JSON数据；

S3、根据JSON数据将对应的组件拖拽至界面编辑区域，按照业务逻辑参考组件开发文档定义的相关事件、方法、属性要求来完成相应的配置；

S4、对完成组件配置流程的组件，开始进行相关调试工作。

上述技术方案的工作原理：根据Template组件，分为不同的Header，Left，Menu，Content，Right子组件，各子组件与父组件实现数据共享，父组件集中更新的机制。Contnet组件与Right组件又按实际装修组件进行了拆分。同时所有装修数据最终将会生成一份JSON数据，后端只做JSON数据的存储工作，具体JSON数据的数组及解析完全由前端页面及渲染组件完成。开发新组件或修改组件功能时可以做到不依赖后端开发人员的参与，由前端独立完成。装修效果预览区域也是组件化开发，非IFRAME框架引用，可以做到实时装修实时预览。此外Menu组件，可以拖拽组件实现拖动排序功能，部分组件内容可以通过拖拽完成对于元素位置的精准编辑，大大减少了操作的上手难度。

上述技术方案的有益效果：实现一键发布，节省审核时间，提高运营效率，同时实现代码组件化，样式可配置，数据可动态绑定，功能可随时扩展，提高研发人员效率，支持自主配置页面的内容样式和交互方式。可解决页面代码开发对普通人群门槛高上手难，需要学习专业技术知识的问题，用户不需要大量的开发和设计知识，不用编写代码，只需要有自己的想法即可进行移动端程序页面的设计，通过多种基础、营销、页面组件来搭建页面结构，设置每个组件的文字、显示、效果等属性，可制作出属于自己独一无二的页面风格。

在配置过程中，包含组件列表、组件顺序调整、图层调整，以及组件属性配置功能几大部分。支持实时预览，加载真实数据，做到了真正的所见即所得。通过基础组件配置、营销组件配置和页面组件配置三个部分来实现页面可视化动态组件配置。

根据本发明的一些实施例，所述预先构建基础组件、业务组件及页面组件，包括：

获取页面元素数据，根据所述页面元素数据生成基础组件；

获取业务营销数据，根据所述业务营销数据生成业务组件；

获取页面空间数据，根据所述页面空间数据生成页面组件。

根据本发明的一些实施例，所述基础组件包括图片、文字、图表、按钮、线条、时间中的至少一种；所述业务组件包括营销组件；所述页面组件包括通用页面、定开页面。定开页面为定制页面，适用于特殊场景。

根据本发明的一些实施例，通过前端页面及渲染组件实现对JSON数据的解析。

根据本发明的一些实施例，所述组成结构包括后端接口和业务实现端的配置。

根据本发明的一些实施例，所述相应的配置包括根据所述后端接口的类型配置所述后端接口的资源。

在一实施例中，将日常常用的页面元素，业务营销数据(对应功能)，以及页面空间组合封装成可配置的组件；获取一个组件，其类型可以为基础组件、营销组件或页面组件；对基础组件，营销组件或页面组件进行拆分得到相应的组成结构；每个组件都会生成一份JSON数据，后端只做JSON数据的存储工作，具体JSON数据的数组及解析完全由前端页面及渲染组件完成；将组件拖拽至界面编辑区域，通过按照业务逻辑参考组件开发文档定义的相关事件、方法、属性等要求来完成相应的配置；对完成组件配置流程的组件，开始进行相关调试工作。

在一实施例中，还包括：

在调试工作结束时，得到配置页面，将配置页面纵向平均分割，得到第一页面及第二页面，所述第一页面与所述第二页面的大小一致；

获取第一页面中的第一元素信息及所述第二页面中的第二元素信息；

根据所述第一元素信息及所述第二元素信息，计算第一页面与所述第二页面的差异值，并判断是否大于预设差异值；

在确定所述差异值大于预设差值时，发出调整指令。

计算第一页面与所述第二页面的差异值Z，包括：

其中，∑X1为对第一页面X1中所有的元素求和，∑X2为对第二页面X2中的所有的元素求和，∑X1²为将第一页面X1的所有的元素平方后求和，∑X2²为将第二页面X2的所有的元素平方后求和；n1为第一页面X1中的元素数量；n2为第二页面X2中的元素数量。

上述技术方案的工作原理及有益效果：在调试工作结束时，得到配置页面，将配置页面纵向平均分割，得到第一页面及第二页面，所述第一页面与所述第二页面的大小一致；获取第一页面中的第一元素信息及所述第二页面中的第二元素信息；根据所述第一元素信息及所述第二元素信息，计算第一页面与所述第二页面的差异值，并判断是否大于预设差异值；在确定所述差异值大于预设差值时，发出调整指令。便于保证第一页面与第二页面的和谐性，避免第一页面与第二页面差异过大，提高了配置页面的和谐性，保证页面样式及业务的统一。基于上述公式，准确计算出第一页面与所述第二页面的差异值，提高了判断与预设差异值大小的准确性。

根据本发明的一些实施例，在根据JSON数据将对应的组件拖拽至界面编辑区域后，还包括：

获取拖拽至界面编辑区域的组件类型，根据组件类型查询预设组件类型-顺序表，确定第一顺序标签、第二顺序标签及第三顺序标签；

将第一顺序标签对应的组件生成第一分页；将第二顺序标签对应的组件生成第二分页；将第三顺序标签对应的组件生成第三分页；

在界面编辑区域显示第一分页时，获取第二分页的第一特征信息并生成第一镜像，获取第三分页的第二特征信息并生成第二镜像，并将所述第一镜像及所述第二镜像显示于第一分页上；

响应于页面配置请求，获取目标页面的页面配置数据，并生成第三镜像显示于第一分页上。

上述技术方案的工作原理：获取拖拽至界面编辑区域的组件类型，根据组件类型查询预设组件类型-顺序表，确定第一顺序标签、第二顺序标签及第三顺序标签；将第一顺序标签对应的组件生成第一分页；将第二顺序标签对应的组件生成第二分页；将第三顺序标签对应的组件生成第三分页；在界面编辑区域显示第一分页时，获取第二分页的第一特征信息并生成第一镜像，获取第三分页的第二特征信息并生成第二镜像，并将所述第一镜像及所述第二镜像显示于第一分页上；响应于页面配置请求，获取目标页面的页面配置数据，并生成第三镜像显示于第一分页上。

上述技术方案的有益效果：实现在根据JSON数据将对应的组件拖拽至界面编辑区域后，将第一分页作为主分页，同时将第二分页中的第一镜像及第三分页中的第二镜像及根据页面配置数据生成的第三镜像显示于第一分页上，提高了分页查看，编辑及定位的效率，同时便于后续进行配置时，提高配置速率。另外基于第一镜像、第二镜像、及第三镜像于第一分页中，在第二分页对应的组件、第三分页对应的组件或页面配置数据发生数据更新时，及时获取更新数据，并对镜像进行更新，镜像实现于对应的组件的信息保持一致。

根据本发明的一些实施例，还包括：

在完成相关调试工作后，响应于接收到的用户终端发送的页面请求；

对所述页面请求进行整理，生成任务列表；

获取所述用户终端对应的目标页面及对目标页面的访问数据；

对所述访问数据进行解析，得到解析字段，根据解析字段建立访问模型；

根据所述访问模型确定所述用户终端对应页面请求的任务属性；

根据所述任务属性确定优先级顺序，并对任务列表进行更新，得到修正任务列表；

基于预设数量个推送强度等级，对修正任务列表进行分配，得到若干个子修正任务列表，对子修正任务列表根据对应的推送强度等级来执行。

根据本发明的一些实施例，所述解析字段包括用于分析的维度字段、用于对维度做描述的信息字段和用于统计分析的摘要字段。

上述技术方案的工作原理：在完成相关调试工作后，响应于接收到的用户终端发送的页面请求；对所述页面请求进行整理，生成任务列表；获取所述用户终端对应的目标页面及对目标页面的访问数据；对所述访问数据进行解析，得到解析字段，根据解析字段建立访问模型；根据所述访问模型确定所述用户终端对应页面请求的任务属性；根据所述任务属性确定优先级顺序，并对任务列表进行更新，得到修正任务列表；基于预设数量个推送强度等级，对修正任务列表进行分配，得到若干个子修正任务列表，对子修正任务列表根据对应的推送强度等级来执行。

上述技术方案的有益效果：建立任务列表，将任务列表中用户终端对页面请求对应的目标页面的访问数据进行获取及分析，建立访问模型，并确定对应页面请求的任务属性，根据所述任务属性确定优先级顺序，并对任务列表进行更新，得到修正任务列表；基于预设数量个推送强度等级，对修正任务列表进行分配，得到若干个子修正任务列表，对子修正任务列表根据对应的推送强度等级来执行。提高了对任务列表的执行效率及执行效果，实现了根据不同任务属性的子修正任务列表执行不同的推送强度，提高了对任务的执行效率，提高了控制精度及用户体验。

在一实施例中，根据解析字段建立访问模型，包括：

对用于统计分析的摘要字段进行建模前的计算任务；

根据对维度做描述的信息字段进行建模前的描述任务，并生成描述脚本，设计目标程序；

在建模时，对用于分析的维度字段进行解析，得到建模维度，基于交叉索引技术进行建模，得到访问模型。

上述技术方案的有益效果：提高了建立访问模型的速率及准确性，提高对访问数据的利用率，实现访问数据的综合分析，便于得到更准确的控制。

如图2所示，本发明第二方面实施例提出了一种页面可视化动态组件配置系统，包括：

构建模块，用于预先构建基础组件、业务组件及页面组件；

组件处理模块，用于对所述基础组件、业务组件及页面组件进行拆分得到相应的组成结构，并生成对应的JSON数据；

组件配置模块，用于根据JSON数据将对应的组件拖拽至界面编辑区域，按照业务逻辑参考组件开发文档定义的相关事件、方法、属性要求来完成相应的配置；

组件调试模块，用于对完成组件配置流程的组件，开始进行相关调试工作。

上述技术方案的工作原理：将日常常用的页面元素，业务营销功能，以及页面空间组合封装成可配置的组件；获取一个组件，其类型可以为基础组件、业务组件或页面组件；对所述基础组件、业务组件或页面组件进行拆分得到对应组件的组成结构，其组成结构包含后端接口和业务实现端的配置；每个组件都会生成一份JSON数据，后端只做JSON数据的存储工作，具体JSON数据的数组及解析完全由前端页面及渲染组件完成，实现定义组件。用于按照业务逻辑参考组件开发文档定义的相关事件、方法、属性等要求来完成所述接口的类型配置所述接口的资源，实现组件配置。将已经完成编辑定义的组件进行发布，开始相关调试，实现组件调试。

上述技术方案的有益效果：实现一键发布，节省审核时间，提高运营效率，同时实现代码组件化，样式可配置，数据可动态绑定，功能可随时扩展，提高研发人员效率，支持自主配置页面的内容样式和交互方式。可解决页面代码开发对普通人群门槛高上手难，需要学习专业技术知识的问题，用户不需要大量的开发和设计知识，不用编写代码，只需要有自己的想法即可进行移动端程序页面的设计，通过多种基础、营销、页面组件来搭建页面结构，设置每个组件的文字、显示、效果等属性，可制作出属于自己独一无二的页面风格。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (10)

1.一种页面可视化动态组件配置方法，其特征在于，包括：

预先构建基础组件、业务组件及页面组件；

对所述基础组件、业务组件及页面组件进行拆分得到相应的组成结构，并生成对应的JSON数据；

根据JSON数据将对应的组件拖拽至界面编辑区域，按照业务逻辑参考组件开发文档定义的相关事件、方法、属性要求来完成相应的配置；

对完成组件配置流程的组件，开始进行相关调试工作。

2.如权利要求1所述的页面可视化动态组件配置方法，其特征在于，所述预先构建基础组件、业务组件及页面组件，包括：

获取页面元素数据，根据所述页面元素数据生成基础组件；

获取业务营销数据，根据所述业务营销数据生成业务组件；

获取页面空间数据，根据所述页面空间数据生成页面组件。

3.如权利要求2所述的页面可视化动态组件配置方法，其特征在于，所述基础组件包括图片、文字、图表、按钮、线条、时间中的至少一种；所述业务组件包括营销组件；所述页面组件包括通用页面、定开页面。

4.如权利要求1所述的页面可视化动态组件配置方法，其特征在于，通过前端页面及渲染组件实现对JSON数据的解析。

5.如权利要求1所述的页面可视化动态组件配置方法，其特征在于，所述组成结构包括后端接口和业务实现端的配置。

6.如权利要求5所述的页面可视化动态组件配置方法，其特征在于，所述相应的配置包括根据所述后端接口的类型配置所述后端接口的资源。

7.如权利要求1所述的页面可视化动态组件配置方法，其特征在于，在根据JSON数据将对应的组件拖拽至界面编辑区域后，还包括：

获取拖拽至界面编辑区域的组件类型，根据组件类型查询预设组件类型-顺序表，确定第一顺序标签、第二顺序标签及第三顺序标签；

将第一顺序标签对应的组件生成第一分页；将第二顺序标签对应的组件生成第二分页；将第三顺序标签对应的组件生成第三分页；

在界面编辑区域显示第一分页时，获取第二分页的第一特征信息并生成第一镜像，获取第三分页的第二特征信息并生成第二镜像，并将所述第一镜像及所述第二镜像显示于第一分页上；

响应于页面配置请求，获取目标页面的页面配置数据，并生成第三镜像显示于第一分页上。

8.如权利要求1所述的页面可视化动态组件配置方法，其特征在于，还包括：

在完成相关调试工作后，响应于接收到的用户终端发送的页面请求；

对所述页面请求进行整理，生成任务列表；

获取所述用户终端对应的目标页面及对目标页面的访问数据；

对所述访问数据进行解析，得到解析字段，根据解析字段建立访问模型；

根据所述访问模型确定所述用户终端对应页面请求的任务属性；

根据所述任务属性确定优先级顺序，并对任务列表进行更新，得到修正任务列表；

基于预设数量个推送强度等级，对修正任务列表进行分配，得到若干个子修正任务列表，对子修正任务列表根据对应的推送强度等级来执行。

9.如权利要求8所述的页面可视化动态组件配置方法，其特征在于，所述解析字段包括用于分析的维度字段、用于对维度做描述的信息字段和用于统计分析的摘要字段。

10.一种页面可视化动态组件配置系统，其特征在于，包括：

构建模块，用于预先构建基础组件、业务组件及页面组件；

组件处理模块，用于对所述基础组件、业务组件及页面组件进行拆分得到相应的组成结构，并生成对应的JSON数据；

组件配置模块，用于根据JSON数据将对应的组件拖拽至界面编辑区域，按照业务逻辑参考组件开发文档定义的相关事件、方法、属性要求来完成相应的配置；

组件调试模块，用于对完成组件配置流程的组件，开始进行相关调试工作。

Images