CN111124375A - 一种自主前端设计与展示的系统 - Google Patents

Abstract

本发明公开了一种自主前端设计与展示的系统包括：组建管理模块、数据源管理模块、母版管理模块、模板管理模块、页面管理模块和终端管理模块；组件管理模块用于管理组件；数据源管理模块用于创建和管理数据源；母版管理模块用于配置母版，包括创建可视化的母版页面区域，并在母版页面区域内添加组件，对组件配置数据源，完成母版配置；还用于母版的二次配置；模板管理模块用于使用母版进行创建模板，或自定义创建模板；页面管理模块用于配置页面；终端管理模块，用于进行终端注册；还用于将配置完成的页面发布到已注册的终端。通过多个模块的协同工作，实现自由注册自定义组件、设计和开发页面母版和模板、按需配置发布策略。

Description

一种自主前端设计与展示的系统

技术领域

本发明涉及可视化页面生成领域，尤其涉及一种自主前端设计与展示的系统。

背景技术

随着行业竞争的不断加大，对于相关企业来说，如何提高项目交付效率、降低项目开发成本,保障用户体验，成为其亟待解决的问题。

传统的前端设计和展示界面开发存在以下几方面的痛点：

首先，传统的前端设计一般是借助外部设计工具进行，设计完成后，再通过技术人员按照设计原型编码开发，将设计稿转化为真实的系统界面，设计与开发无法集中于一体；

其次，传统的前端展示界面开发由于开发环境、开发语言等限制，多以编写代码为主，无法做到通过简单的拖拽、配置即可实现所需效果，尤其是自定义组件更无法通过拖拽来配置使用，虽然开发方式多样但不够灵活；

最后，传统的前端展示界面开发是基于项目维度进行管理，一般采用定制开发的模式，很难做到跨项目共享自定义组件、界面开发成果，整体代码复用度很低。

发明内容

本发明实施例的目的是针对现有技术的不足，旨在解决现有技术无法满足前端展示界面的设计编码集中化、组件共享、模板化及快速复用、自由拖拽灵活配置等传统前端界面设计、开发与展示问题。

为了实现上述目的，本发明实施例公开了一种自主前端设计与展示的系统，包括：组建管理模块、数据源管理模块、母版管理模块、模板管理模块、页面管理模块和终端管理模块。

其中各模块协同作用。组件管理模块用于管理组件；组件包括自定义组件；自定义组件根据系统的组件开发规范创建。数据源管理模块用于创建和管理数据源。母版管理模块用于配置母版，包括创建可视化的母版页面区域，并在母版页面区域内添加组件，对组件配置数据源，完成母版配置；还用于对完成配置的母版进行存储以及发布；其中，配置母版还包括对已存储的母版进行二次配置，并通过存储二次配置的配置方案更新原有母版，同时使使用原有母版为基础进行配置的页面中，在二次配置中调整的组件和数据源更新为二次配置的配置方案。模板管理模块用于配置模板，包括使用完成配置的母版进行创建，或自定义创建可视化的模板页面区域，并在模板页面区域内添加和/或调整组件，对组件配置数据源，完成模板配置；还用于对完成配置的模板进行存储以及发布。页面管理模块用于配置页面，包括使用完成配置的母版或模板进行创建，或自定义创建可视化的页面区域，并在页面区域内添加和/或调整组件，对组件配置数据源，完成页面配置；还用于对完成配置的页面进行存储；还用于对已发布的页面进行更新。终端管理模块，用于进行终端注册；还用于将配置完成的页面发布到已注册的终端。

一个实例中，组件管理模块还用于定义组件名称、组件类别、组件版本号等信息；上传自定义组件的源文件及其对应的使用手册；声明自定义组件的初始化函数。

一个实例中，数据源管理模块还用于选择数据源类别；定义数据源名称和信息，对数据源进行连通性测试和数据预览，测试成功后进行保存。

一个实例中，母版管理模块还用于对配置中的母版进行实时预览和保存；模板管理模块还用于对配置中的模板进行实时预览和保存；页面管理模块还用于对配置中的页面可以进行实时预览和保存。

一个实例中，使用原有母版为基础进行配置的页面包括：使用原有母版进行页面配置生成的页面，以及使用基于原有母版创建的模板进行页面配置生成的页面。

一个实例中，对已发布的页面进行更新为对已发布的页面进行二次配置，并通过存储二次配置的配置方案更新原有页面；更新包括升级更新、回退更新和指定版本更新。

一个实例中，终端注册为建立终端队列，并对终端进行管理；终端队列中包含至少一个终端，至少一个终端具有终端名称、使用位置、IP地址和MAC地址；终端管理模块为至少一个终端分配登录系统的用户名和密码，并录入到对应的终端中。

一个实例中，终端管理模块还用于选择配置完成的页面以及用于展示页面的已注册终端，页面通过协议与已注册终端建立心跳连接，设置生效策略。

进一步的一个实例中，终端管理模块还用于进行灰度发布；在选择配置完成的页面以及用于展示页面的已注册终端之后，选择已注册终端中至少一个终端作为灰度发布的终端，在终端上预览页面的展示效果后，再执行生效策略。

本发明实施例的优点在于：面向技术人员提供一个集设计、开发、测试、发布于一体的平台，自由注册自定义组件、设计和开发页面模板、按需配置发布策略，可以快速创建页面、设计页面、开发页面，兼容多种数据接口和数据格式，提供了良好的基础能力封装，有效的提升前端设计与开发效率，降低编码工作量，具有较高的灵活性和复用性。

附图说明

图1是本发明实施例的一种自主前端设计与展示的系统框图；

图2是本发明实施例的一种自主前端设计与展示的方法流程框图。

具体实施方式

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

图1为本发明实施例的一种自主前端设计与展示的系统框图，如图1所示，该系统，包括：组建管理模块、数据源管理模块、母版管理模块、模板管理模块、页面管理模块、终端管理模块、权限管理模块和逻辑处理引擎。通过多个模块的协同工作，用户可以实现自由注册自定义组件、设计和开发页面模板、按需配置发布策略，快速的创建页面、设计页面、发布页面。

组件管理模块用于管理组件。其中，组件包括自定义组件和系统组件。系统组件为系统的自由组件。自定义组件根据系统的组件开发规范，由用户进行创建。

一个实例中，用户在组件管理模块中自行创建自定义组件。首先需要定义组件名称、组件类别和组件版本号等信息，然后上传该自定义组件的源文件以及对应的使用手册，生命该自定义组件的初始化函数，最终完成自定义组件在组件管理模块中的创建。

数据源管理模块用于创建和管理数据源。与组件的创建和管理类似，用户可以通过数据源管理模块创建新的数据源类型。

一个实例中，用户首先定义数据源类别，然后填写数据源名称和各类信息，完成之后，对该数据源进行连通性测试和数据预览，测试成功后保存即生成了自定义的数据源。其中，数据源类别包括HTTP Restful接口、Excel文件、CSV文件、Oracle数据库、MySql数据库、Kafka等多种数据接口方式。

对于上述多种数据源类别，由于采用不同的接口方式，可能返回诸如XML、JSON、集合等多种数据结果集格式。系统可以提供通用的数据结果集转换器，通过该转换器将数据结果集转换为统一的JSON格式。通过数据结果集转换器的设置，用户可以在组件内定义所需数据格式和数据处理逻辑，只需在内部调用该转换器即可适配多种数据接口及数据结果集。

母版管理模块用于配置、储存和发布母版。

用户通过创建可视化的母版页面区域，并在母版页面区域内添加组件，对组件配置数据源，完成母版配置。

一个实例中，用户首先定义被创建母版的名称和版本号，进一步确定母版页面区域的背景图片、背景颜色、标题文字、标题大小、标题颜色等属性。页面区域可以根据用户需要自主设计和自定义分割。页面区域中可以添加、拖拽、加载系统组件和/或自定义组件，进而对组件进行属性和数据源的配置，定义组件的排列顺序。进一步地，页面区域还支持复制粘贴已加载组件。在这一配置过程中，用户可以实时预览和保存该创建中的母版。

对于完成配置的母版，用户对其进行存储以及发布。需要说明，发布的生效策略，用户可以根据需要自行设置，例如设置该母版立即生效或定时生效。

对于已经存储以及已经发布的母版，用户还可以进行二次配置，即对已有母版进行调整，修改。通过存储二次配置的配置方案，可以更新原有母版，使使用原有母版为基础进行配置的页面，在二次配置中调整的组件和数据源更新为二次配置的配置方案。

例如，母版管理模块中存在一个母版M1，该母版M1中有一个配置好的组件C1，该组件C1被配置了CSV格式的数据源，且组件C1为80像素*40像素的矩形。利用母版M1作为基础，配置了页面P1以及页面P2。但在页面P1的配置过程中，用户对组件C1进行调整，修改了该组件C1的数据源，并且将该组件C1的大小调整为60像素*30像素。同样的在页面P2中，用户虽然使用了母版M1但是直接删除了其中的组件C1。此时，如果用户对母版M1进行二次配置。将母版M1中的组件C1的配置为Excel格式的数据源，并且将该组件C1的大小调整为40像素*40像素。则当母版M1的二次配置生效时，页面P1中的组件C1的数据源也将变更为Excel格式，并且其大小会变为40像素*40像素。页面P2则会直接在对应于母版M1中组件C1的位置直接生成组件C1，且该组件C1的数据源格式为Excel，大小为40像素*40像素。

一个实例中，使用原有母版为基础进行配置的页面包括了使用原有母版进行页面配置生成的页面，以及使用基于原有母版创建的模板进行页面配置生成的页面。即只要是在创建模板或者创建页面时，使用了某一母版，该母版从新配置后的配置方案将实现在使用了这一母版的模板或页面上。

同样的，母版的二次配置也可以根据用户的使用需要设置对应的生效策略，可以立即生效也可以定时生效。

模板管理模块用于配置、储存和发布模板。

一方面，用户通过创建可视化的模板页面区域，并在模板页面区域内添加组件，对组件配置数据源，完成模板配置。另一方面，用户可以便捷的通过已经完成配置的母版创建模板，通过修改已存储的母版中的至少一个属性，重新定义这些属性，实现基于母版的模板创建过程。

一个实例中，用户首先定义被创建模板的名称和版本号，进一步确定模板页面区域的背景图片、背景颜色、标题文字、标题大小、标题颜色等属性。页面区域可以根据用户需要自主设计和自定义分割。页面区域中可以添加、拖拽、加载系统组件和/或自定义组件，进而对组件进行属性和数据源的配置，定义组件的排列顺序。进一步地，页面区域还支持复制粘贴已加载组件。在这一配置过程中，用户可以实时预览和保存该创建中的模板。

对于完成配置的模板，用户对其进行存储以及发布。需要说明，发布的生效策略，用户可以根据需要自行设置，例如设置该模板立即生效或定时生效。用户可以通过模板的复用实现页面的快速生成。

页面管理模块用于页面创建、配置以及更新页面。

用户通过页面管理模块选择母版或模板创建基础页面，根据需要，用户可以调整基础页面的布局、使用的组件及其数据源信息，得到展示页面，定义页面名称和版本号，配置完成后进行页面预览和保存。其中，基础页面包括背景、标题、布局、基本的组件和数据等信息。

一个实例中，配置中的页面为可视化的页面区域，页面区域中可以添加、拖拽、加载系统组件和/或自定义组件，进而对组件进行属性和数据源的配置，定义组件的排列顺序，支持复制粘贴已加载组件。用户可以对配置中的页面进行实时预览和保存。

一个实例中，用户通过页面管理模块对已发布的页面进行页面更新，相当于对已发布的页面进行重新配置，重新配置完成后进行页面预览和保存。

其中，页面更新包括升级更新、回退更新和指定版本更新。

终端管理模块，用于进行终端注册和页面发布。

具体地，建立终端队列对终端进行管理。终端队列中包含至少一个终端，录入终端的多个终端信息，终端信息包括终端的名称、使用位置、IP地址、MAC地址等信息。终端管理模块为终端分配登录系统的用户名和密码，并录入到对应的终端中完成终端注册。

具体地，用户通过终端管理模块对页面进行发布。页面发布的步骤包括：选择页面以及用于展示该页面的终端的终端信息；设置生效策略。

进一步具体地，页面发布支持N to N发布，即根据生效策略同时将N个页面发布到N个终端上。

进一步具体地，页面发布的过程中，还可以包括灰度发布环节。在选择配置好的页面以及用于展示该页面的终端的终端信息之后，通过选择展示该页面的终端中至少一个终端作为灰度发布的终端，在该终端上确定页面的展示效果后再执行该次页面发布的生效策略。

进一步具体地，生效策略包括立即生效和定时生效。

一个实例中，页面发布生效后，页面通过通信协议与终端建立心跳连接；通信协议包括基于TCP的WebSocket全双工通信协议，或其他类型的通信协议。进一步地，采用WebSocket技术实现页面远程推送更新、版本迭代。首先在页面初次发布到展示终端时，系统后台会自动建立WebSocket长连接并建立断开重连机制，然后所有的终端页面控制动作将通过该WebSocket连接来实现。

具体地，用户通过终端管理模块对已发布页面进行更新。页面更新的步骤包括：选择与已发布页面连接的终端；在页面管理模块对该页面进行重新配置，设置生效策略。

权限管理模块：通过系统资源点管理、部门管理、角色管理和用户管理，实现系统访问和使用权限管控。系统后台会自动记录用户的登录日志和操作日志，通过日志管理功能提供日志数据查询和展示。

逻辑处理引擎：通过数据可视化引擎、规则引擎、OLAP引擎等逻辑处理引擎，将数据库里存储的各类组件、数据源、母版、模板的配置信息和逻辑关系进行分析处理，实现展示数据的加载和渲染。

本发明实施例提供的自主前端设计与展示的系统，实现了集设计、开发、测试、发布于一体，用户自由注册自定义组件、设计和开发页面模板、按需配置发布策略，可以快速创建页面、设计页面、开发页面，兼容多种数据接口和数据格式，提供了良好的基础能力封装，有效的提升前端设计与开发效率，降低编码工作量，具有较高的灵活性和复用性。

用户首次使用本发明实施例的自主前端设计于展示系统时，将按照如图2所示的步骤完成页面发布。

步骤S111：注册组件

用户在组件管理模块中自行创建自定义组件。首先定义组件名称、组件类别和组件版本号等信息，然后上传该自定义组件的源文件以及对应的使用手册，生命该自定义组件的初始化函数，最终完成自定义组件在组件管理模块中的创建。

步骤S112：添加数据源

用户通过数据源管理模块创建数据源。选择数据源类别；填写数据源名称和各类信息，对数据源进行连通性测试和数据预览，测试成功后进行保存。

步骤S121：创建母版

用户通过母版管理模块创建母版，定义被创建母版的名称、版本号、背景图片、背景颜色、标题文字、标题大小、标题颜色等属性。母版具有可视化的页面区域，页面区域可以根据用户需要自主设计和自定义分割。页面区域中可以添加、拖拽、加载系统组件和/或自定义组件，进而对组件进行属性和数据源的配置，定义组件的排列顺序，支持复制粘贴已加载组件。用户可以对母版进行实时预览和保存。

步骤S122：创建模板

用户通过模板管理模块创建模板，定义被创建模板的名称、版本号、背景图片、背景颜色、标题文字、标题大小、标题颜色等属性。模板具有可视化的页面区域，页面区域可以根据用户需要自主设计和自定义分割。页面区域中可以添加、拖拽、加载系统组件和/或自定义组件，进而对组件进行属性和数据源的配置，定义组件的排列顺序，支持复制粘贴已加载组件。用户可以对模板进行实时预览和保存。

如果系统中已经具备了用户需要的组件，则不需要执行步骤S111，只需要在步骤S112中添加用户需要的数据源后，利用组件和数据源创建母版或者模板；同样的，如果系统中已经具备了用户需要的数据源，则不需要执行步骤S112，只需要在步骤S111中添加用户需要的组件后，利用组件和数据源创建母版或者模板。

如果用户需要使用的组件和数据源全部具备，用户可以选择使用这些组件和数据源建立母版，然后调用该母版进行展示页面的配置，即在步骤S121创建母版之后直接衔接步骤S130配置页面。同样的，如果用户需要使用的组件和数据源全部具备，用户可以选择使用这些组件和数据源建立模板，然后调用该模板进行展示页面的配置，即在步骤S122创建模板之后直接衔接步骤S130配置页面。

但需要说明的是，本系统中引入了母版的概念，是为了可以对页面进行批量修改和生效。因此，如果用户在后续的页面更新或调整过程中，需要进行批量的操作，需要提前规划好页面的分组，使需要进行批量修改的页面使用同一母版进行配置，以实现后续页面更新的批量化处理。

步骤S130：配置页面

用户通过页面管理模块选择母版或模板创建基础页面，用户根据需要调整基础页面的布局、使用的组件及其数据源信息，得到展示页面，定义页面名称和版本号，配置完成后进行页面预览和保存。

步骤S140：添加展示终端

用户在终端列表中录入终端的多个终端信息，包括终端的名称、使用位置、IP地址、MAC地址等信息。终端管理模块为终端分配登录系统的用户名和密码，并录入到对应的终端中完成终端注册。

步骤S150：页面发布

选择页面以及展示该页面的终端的终端信息；设置生效策略。

在执行步骤S150时，还可以在确定页面以及展示该页面的终端的终端信息后先执行步骤S151，再设置生效策略。

步骤S151：灰度发布

在选择配置好的页面以及展示该页面的终端的终端信息之后，通过选择展示该页面的终端中至少一个终端作为灰度发布的终端，在该终端上确定页面的展示效果后再执行该次页面发布的生效策略。

当用户非首次使用本申请的自主前端设计于展示系统时，如需进行自主前端设计，则执行响应的步骤S111、S112、S121和S122中的一个或多个后执行步骤S130～S150。如不进行自主前端设计，则直接执行步骤S130～S150。

当用户仅对已发布的页面进行版本更新时，则仅执行步骤S160。

步骤S160：页面版本控制

选择与已发布页面连接的终端；在页面管理模块对该页面进行重新配置，设置生效策略。

本发明实施例提供的一种自主前端设计与展示的系统，实现了集设计、开发、测试、发布于一体，用户自由注册自定义组件、设计和开发页面模板、按需配置发布策略，可以快速创建页面、设计页面、开发页面，兼容多种数据接口和数据格式，提供了良好的基础能力封装，有效的提升前端设计与开发效率，降低编码工作量，具有较高的灵活性和复用性。

以上的具体实施方式，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上仅为本发明的具体实施方式而已，并不用于限定本发明的保护范围，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种自主前端设计与展示的系统，其特征在于，包括：组建管理模块、数据源管理模块、母版管理模块、模板管理模块、页面管理模块和终端管理模块；其中，

组件管理模块用于管理组件；所述组件包括自定义组件；所述自定义组件根据系统的组件开发规范创建；

数据源管理模块用于创建和管理数据源；

母版管理模块，用于配置母版，包括创建可视化的母版页面区域，并在所述母版页面区域内添加所述组件，对所述组件配置所述数据源，完成母版配置；还用于对完成配置的母版进行存储以及发布；

模板管理模块，用于配置模板，包括使用所述完成配置的母版进行创建，或自定义创建可视化的模板页面区域，并在所述模板页面区域内添加和/或调整所述组件，对所述组件配置所述数据源，完成模板配置；还用于对完成配置的模板进行存储以及发布；

页面管理模块，用于配置页面，包括使用所述完成配置的母版或模板进行创建，或自定义创建可视化的页面区域，并在所述页面区域内添加和/或调整所述组件，对所述组件配置所述数据源，完成页面配置；还用于对完成配置的页面进行存储；还用于对已发布的页面进行更新；

终端管理模块，用于进行终端注册；还用于将所述配置完成的页面发布到已注册的终端。

2.根据权利要求1所述的系统，其特征在于，所述组件管理模块还用于定义组件名称、组件类别、组件版本号等信息；上传自定义组件的源文件及其对应的使用手册；声明自定义组件的初始化函数。

3.根据权利要求1所述的系统，其特征在于，所述数据源管理模块还用于选择数据源类别；定义数据源名称和信息，对数据源进行连通性测试和数据预览，测试成功后进行保存。

4.根据权利要求1所述的系统，其特征在于，所述母版管理模块还用于对配置中的母版进行实时预览和保存；所述模板管理模块还用于对配置中的模板进行实时预览和保存；所述页面管理模块还用于对配置中的页面可以进行实时预览和保存。

5.根据权利要求1所述的系统，其特征在于，所述母版管理模块还用于对已存储的母版进行二次配置，并通过存储二次配置的配置方案更新原有母版，同时使使用所述原有母版为基础进行配置的页面中，在所述二次配置中调整的组件和数据源更新为所述二次配置的配置方案。

6.根据权利要求1所述的系统，其特征在于，所述使用所述原有母版为基础进行配置的页面包括：使用所述原有母版进行页面配置生成的页面，以及使用基于所述原有母版创建的模板进行页面配置生成的页面。

7.根据权利要求1所述的系统，其特征在于，所述对已发布的页面进行更新为对已发布的页面进行二次配置，并通过存储二次配置的配置方案更新原有页面；所述更新包括升级更新、回退更新和指定版本更新。

8.根据权利要求1所述的系统，其特征在于，所述终端注册为建立终端队列，并对终端进行管理；终端队列中包含至少一个终端，所述至少一个终端具有终端名称、使用位置、IP地址和MAC地址；终端管理模块为所述至少一个终端分配登录系统的用户名和密码，并录入到对应的终端中。

9.根据权利要求1所述的系统，其特征在于，所述终端管理模块还用于选择配置完成的页面以及用于展示所述页面的已注册终端，所述页面通过协议与所述已注册终端建立心跳连接；设置生效策略。

10.根据权利要求9所述的系统，其特征在于，所述终端管理模块还用于进行灰度发布；在所述选择配置完成的页面以及用于展示所述页面的已注册终端之后，选择所述已注册终端中至少一个终端作为灰度发布的终端，在所述终端上预览所述页面的展示效果后，再执行生效策略。

Images