实现全连接平台个性化首页面板可视化配置处理的方法、系统、装置、处理器及存储介质

摘要

本发明涉及一种实现全连接平台个性化首页面板可视化配置处理的方法，包括通过已开发的接口，接入全连接标准框架，直接发布至全连接首页使用；通过Lodash HTML Template标签开发模式，直接在可视化配置工具中进行配置；通过基于全连接标准框架，利用全连接开发技术体系，搭建用于标准开发项目；通过Iframe方式在PC端嵌入使用前端界面，通过Web View方式在APP端嵌入使用前端界面。本发明还涉及相应的系统、装置、处理器及其计算机可读存储介质。采用了本发明的实现全连接平台个性化首页面板可视化配置处理的方法、系统、装置、处理器及其计算机可读存储介质，通过可视化配置工具可以做到实时配置、实时发布，加快了业务交付，实现无代码交付模式。按照全连接平台开发框架标准，从功能开发到测试发布整个流程进行封装，简化使用环节，支持条线、部门、角色进行个性化定制。

说明书

技术领域

本发明涉及计算机应用技术领域，尤其涉及可视化快速开发领域，具体是指一种实现全连接平台个性化首页面板可视化配置处理的方法、系统、装置、处理器及其计算机可读存储介质。

背景技术

传统的开发模式需要经过需求、开发、测试、发布等一系列流程，开发中还需要关注样式、代码规范、测试、发布等环节，通常需要一周才能发布生产使用。现有技术的不同岗位、角色人员需要使用的功能面板各不相同，又无法及时发布使用，功能面板的开发，需要一整套开发测试发布流程，耗时耗力；并且各团队分散开发，无法保证代码质量以及发布效果；无法进行统一的监控处理机制。

发明内容

本发明的目的是克服了上述现有技术的缺点，提供了一种满足灵活性好、扩展性好、适用范围较为广泛的实现全连接平台个性化首页面板可视化配置处理的方法、系统、装置、处理器及其计算机可读存储介质。

为了实现上述目的，本发明的实现全连接平台个性化首页面板可视化配置处理的方法、系统、装置、处理器及其计算机可读存储介质如下：

该实现全连接平台个性化首页面板可视化配置处理的方法，其主要特点是，所述的方法包括以下步骤：

(1)通过已开发的接口，接入全连接标准框架，直接发布至全连接首页使用；

(2)通过Lodash HTML Template标签开发模式，直接在可视化配置工具中进行配置；

(3)通过基于全连接标准框架，利用全连接开发技术体系，搭建用于标准开发项目；

(4)通过Iframe方式在PC端嵌入使用前端界面，通过Web View方式在APP端嵌入使用前端界面。

较佳地，所述的步骤(1)具体包括以下步骤：

(1.1)按照全连接标准框架提供接口；

(1.2)通过微服务方式接入公司服务治理体系进行发布；

(1.3)将微服务注册到全连接注册中心；

(1.4)通过可视化配置工具进行发布使用。

较佳地，所述的步骤(2)具体包括以下步骤：

(2.1)根据Lodash HTML Template标准格式编写HTML及数据绑定代码；

(2.2)通过可视化配置工具进行配置；

(2.3)系统通过标准模式进行解析展示。

较佳地，所述的步骤(3)具体包括以下步骤：

(3.1)开通标准开发项目SVN权限；

(3.2)根据开发项目内置开发说明及标准开发功能面板；

(3.3)编译发布为传统JS文件，进行测试验证；

(3.4)通过可视化配置工具配置使用。

较佳地，所述的步骤(4)具体包括以下步骤：

(4.1)提供系统已经开发的功能地址；

(4.2)按照全连接标准检查样式是否正常加载；

(4.3)通过可视化配置工具进行配置。

较佳地，所述的方法中在可视化配置工具中进行配置，具体包括以下步骤：

(1-1)获取已经开发好的接口，满足全连接接口标准，将微服务接入全连接注册中心；

(1-2)进行基础信息配置；

(1-3)进行数据源及展示模板配置；

(1-4)进行功能面板预览，根据需求进行调整完善。

较佳地，所述的步骤(1-2)具体包括以下步骤：

(1-2.1)选择功能所属系统，输入功能面板标题、选择挂接菜单；

(1-2.2)可选择支持PC端或APP端，也可同时选择，，并分别进行参数设置；

(1-2.3)根据角色和使用范围进行权限配置；

(1-2.4)判断是否为APP图标，如果是，则直接保存；否则，如果为PC或者APP卡片，则进入步骤(1-3)继续配置数据源及展示模板。

较佳地，所述的步骤(1-3)具体包括以下步骤：

(1-3.1)选择数据源为微服务，选择接口对应的微服务名称；

(1-3.2)输入微服务接口信息，点击测试按钮，显示接口入参信息和出参信息；

(1-3.3)添加入参界面，添加入参配置；

(1-3.4)根据功能发布需求，选择对应的展示模板；

(1-3.5)点击预览按钮实时查看展示效果。

该实现全连接平台个性化首页面板可视化配置处理的系统，其主要特点是，所述的系统包括：

全连接首页发布功能模块，用于通过已开发的接口，接入全连接标准框架，直接发布至全连接首页使用；

可视化配置工具配置模块，用于通过Lodash HTML Template标签开发模式，直接在可视化配置工具中进行配置；

标准开发项目搭建模块，用于通过基于全连接标准框架，利用全连接开发技术体系，搭建用于标准开发项目；

前端界面控制模块，用于通过Iframe方式在PC端嵌入使用前端界面，通过WebView方式在APP端嵌入使用前端界面。

该用于实现全连接平台个性化首页面板可视化配置处理的装置，其主要特点是，所述的装置包括：

处理器，被配置成执行计算机可执行指令；

存储器，存储一个或多个计算机可执行指令，所述的计算机可执行指令被所述的处理器执行时，实现上述的实现全连接平台个性化首页面板可视化配置处理的方法的步骤。

该用于实现全连接平台个性化首页面板可视化配置处理的处理器，其主要特点是，所述的处理器被配置成执行计算机可执行指令，所述的计算机可执行指令被所述的处理器执行时，实现上述的实现全连接平台个性化首页面板可视化配置处理的方法的步骤。

该计算机可读存储介质，其主要特点是，其上存储有计算机程序，所述的计算机程序可被处理器执行以实现上述的实现全连接平台个性化首页面板可视化配置处理的方法的各个步骤。

采用了本发明的实现全连接平台个性化首页面板可视化配置处理的方法、系统、装置、处理器及其计算机可读存储介质，通过可视化配置工具可以做到实时配置、实时发布，所见即所得的模式，加快了业务交付，并且可以避免传统开发中的样式不一致、展示方式不统一等问题，实现无代码交付模式。按照全连接平台开发框架标准，从功能开发到测试发布整个流程进行封装，简化使用环节，各租户通过配置，无代码方式发布新功能，与全连接权限体系深度融合，支持条线、部门、角色进行个性化定制。

附图说明

图1为本发明的实现全连接平台个性化首页面板可视化配置处理的方法的开发工具支持的终端及模板示意图。

图2为本发明的实现全连接平台个性化首页面板可视化配置处理的方法的基础信息及权限配置示意图。

图3为本发明的实现全连接平台个性化首页面板可视化配置处理的方法的微服务及数据源配置示意图。

图4为本发明的实现全连接平台个性化首页面板可视化配置处理的方法的展示模配置示意图。

图5为本发明的实现全连接平台个性化首页面板可视化配置处理的方法的预览示意图。

图6为本发明的实现全连接平台个性化首页面板可视化配置处理的方法的其它展示效果示意图。

图7为本发明的实现全连接平台个性化首页面板可视化配置处理的方法的APP展示效果示意图。

图8为本发明的实现全连接平台个性化首页面板可视化配置处理的方法的使用情况统计示意图。

具体实施方式

为了能够更清楚地描述本发明的技术内容，下面结合具体实施例来进行进一步的描述。

本发明的该实现全连接平台个性化首页面板可视化配置处理的方法，其中包括以下步骤：

(1)通过已开发的接口，接入全连接标准框架，直接发布至全连接首页使用；

(1.1)按照全连接标准框架提供接口；

(1.2)通过微服务方式接入公司服务治理体系进行发布；

(1.3)将微服务注册到全连接注册中心；

(1.4)通过可视化配置工具进行发布使用；

(2)通过Lodash HTML Template标签开发模式，直接在可视化配置工具中进行配置；

(2.1)根据Lodash HTML Template标准格式编写HTML及数据绑定代码；

(2.2)通过可视化配置工具进行配置；

(2.3)系统通过标准模式进行解析展示；

(3)通过基于全连接标准框架，利用全连接开发技术体系，搭建用于标准开发项目；

(3.1)开通标准开发项目SVN权限；

(3.2)根据开发项目内置开发说明及标准开发功能面板；

(3.3)编译发布为传统JS文件，进行测试验证；

(3.4)通过可视化配置工具配置使用；

(4)通过Iframe方式在PC端嵌入使用前端界面，通过Web View方式在APP端嵌入使用前端界面；

(4.1)提供系统已经开发的功能地址；

(4.2)按照全连接标准检查样式是否正常加载；

(4.3)通过可视化配置工具进行配置。

作为本发明的优选实施方式，所述的方法中在可视化配置工具中进行配置，具体包括以下步骤：

(1-1)获取已经开发好的接口，满足全连接接口标准，将微服务接入全连接注册中心；

(1-2)进行基础信息配置；

(1-2.1)选择功能所属系统，输入功能面板标题、选择挂接菜单；

(1-2.2)可选择支持PC端或APP端，也可同时选择，，并分别进行参数设置；

(1-2.3)根据角色和使用范围进行权限配置；

(1-2.4)判断是否为APP图标，如果是，则直接保存；否则，如果为PC或者APP

卡片，则进入步骤(1-3)继续配置数据源及展示模板；

(1-3)进行数据源及展示模板配置；

(1-3.1)选择数据源为微服务，选择接口对应的微服务名称；

(1-3.2)输入微服务接口信息，点击测试按钮，显示接口入参信息和出参信息；

(1-3.3)添加入参界面，添加入参配置；

(1-3.4)根据功能发布需求，选择对应的展示模板；

(1-3.5)点击预览按钮实时查看展示效果；

(1-4)进行功能面板预览，根据需求进行调整完善。

本发明的该实现全连接平台个性化首页面板可视化配置处理的系统，其中包括：

全连接首页发布功能模块，用于通过已开发的接口，接入全连接标准框架，直接发布至全连接首页使用；

可视化配置工具配置模块，用于通过Lodash HTML Template标签开发模式，直接在可视化配置工具中进行配置；

标准开发项目搭建模块，用于通过基于全连接标准框架，利用全连接开发技术体系，搭建用于标准开发项目；

前端界面控制模块，用于通过Iframe方式在PC端嵌入使用前端界面，通过WebView方式在APP端嵌入使用前端界面。

作为本发明的优选实施方式，该用于实现全连接平台个性化首页面板可视化配置处理的装置，其中包括：

处理器，被配置成执行计算机可执行指令；

存储器，存储一个或多个计算机可执行指令，所述的计算机可执行指令被所述的处理器执行时，实现上述的实现全连接平台个性化首页面板可视化配置处理的方法的步骤。

作为本发明的优选实施方式，该用于实现全连接平台个性化首页面板可视化配置处理的处理器，其被配置成执行计算机可执行指令，所述的计算机可执行指令被所述的处理器执行时，实现上述的实现全连接平台个性化首页面板可视化配置处理的方法的步骤。

作为本发明的优选实施方式，该计算机可读存储介质，其上存储有计算机程序，所述的计算机程序可被处理器执行以实现上述的实现全连接平台个性化首页面板可视化配置处理的方法的各个步骤。

本发明的具体实施方式中，通过可视化配置工具，可以快速配置发布功能面板，并且提供了配套开发工具、或者通过HTM模板、Iframe、Web View等方式发布时用，非常灵活使易于扩展。

本发明的目的是克服了上述现有开发流程的缺点，基于全连接平台开发框架，结合公司技术体系，采用React、AntD前端框架技术，自主研发了功能面板的可视化配置工具，对首页所有功能面板、APP工作台图标、卡片进行统一配置、统一管理。

工具基于目前流行的React、antd、bizcharts开源技术，React采用虚拟DOM方式渲染页面，提高加快页面渲染效率，antd为前端展示组件集合，bizcharts为图表展示组件集合。作为基础技术，可有效提高开发效率，方便进行快速开发。

本发明以租户模式对外提供服务，支持多终端、多数据源的数据展示配置、跟踪、监控。通过可视化配置工具，降低开发人员门槛，加快需求迭代效率，节约开发成本。

为了实现上述目的，本发明基于常用业务需求，实现功能面板的可视化配置，并且增加功能监控体系，形成应用工具闭环，配置步骤如下：

(1)通过各团队已经开发好的接口，接入全连接标准框架后，可以直接发布到全连接首页使用；

(2)通过Lodash HTML Template标签开发模式，直接在可视化配置工具中进行配置，可方便实现自定义样式、模式展示效果；

(3)通过基于全连接标准框架，利用全连接开发技术体系(React),搭建用于标准开发项目，方便其它系统进行灵活扩展；

(4)对于已经有的前端功能，PC可通过Iframe方式嵌入，APP端可以通过Web View方式嵌入使用；

步骤(1)具体包括以下步骤：

(1.1)所提供接口需要按照全连接标准框架进行提供；

(1.2)通过微服务方式，接入公司服务治理体系进行发布；

(1.3)微服务需要注册到全连接注册中心；

(1.4)通过可视化配置工具进行发布使用。

步骤(2)具体包括以下步骤：

(2.1)根据Lodash HTML Template标准格式编写HTML及数据绑定代码；

(2.2)通过可视化配置工具进行配置；

(2.3)系统通过标准模式进行解析展示。

步骤(3)具体包括以下步骤：

(3.1)需开通标准开发项目SVN权限；

(3.2)根据开发项目内置开发说明及标准进行功能面板的开发；

(3.3)编译发布为传统JS文件，测试验证；

(3.4)通过可视化配置工具配置使用。

步骤(4)具体包括以下步骤：

(4.1)提供系统已经开发好的功能地址；

(4.2)按照全连接标准检查样式、是否正常加载；

(4.3)通过可视化配置工具配置。

整个工具实现了应用工具闭环，包含了配置、发布、预览、监控整个流程，作为一个技术性工具，不仅满足了开发人员的日常使用，而且帮助运维人员对功能使用情况进行有效跟踪、掌握。对功能的后续改进、优化提供数据支撑。本发明收集了各个功能面板的使用情况，通过kafka实时入库。基于日志数据实时提供PC、APP当天的总体、各功能面板的使用情况；以及一个月内总体使用情况趋势图，方便开发、运维人员及时了解、掌握系统运行情况。

为了能够更清楚地描述本发明的技术内容，下面结合具体实施例来进行进一步的描述。

本发明从配置到使用，再到提供数据支持，方便后续跟踪优化，其中包括以下步骤：

(1)获取已经开发好的接口，满足全连接接口标准，微服务已接入全连接注册中心；

(2)基础信息配置；

(2.1)选择功能所属系统(租户，系统提供多租户使用)，输入功能面板标题、选择挂接菜单；

(2.2)选择使用终端，以支持PC、APP同时使用；

(2.3)针对PC端，填写备注，更多跳转地址、宽度建议比例等等；

(2.4)针对APP端，选择是卡片还是图标，如果为图标，则可以直接上传功能图标；配置功能面板使用的APP版本号信息、选择功能分组、条线分组以及更多跳转地址信息；

(2.5)权限配置：可以设置为公开、或者根据角色进行配置，也可以直接指定相关人员使用；

(2.6)权限配置：可根据使用范围进行配置，例如根据机构类型(总部、分公司、子公司)或者直接选择允许哪些部门使用；

配置结束后，点击下一步，如果为APP图标则直接保成功，如果为PC或者APP卡片，则进入下一步骤(3)继续配置数据源及展示模板；

(3)数据源及展示模板配置；

(3.1)以接口配置为例：选择数据源为微服务，选择接口对应的微服务名称，如果所使用的微服务不存在，则通过微服务配置界面添加；

(3.2)输入微服务接口信息，点击测试按钮，如果接口调用正常，则页面直接显示接口入参、出参信息；

(3.3)入参配置：如果接口还需要其它的入参，则可以通过添加入参界面添加，添加完成后可继续点击测试按钮，查看接口调用信息。

(3.4)选择展示形式：分为PC、APP模板配置，根据功能发布需求，选择对应的展示模板，按照界面显示的出参信息，可以配置是否显示、格式、跳转地址、图片显示方式等等一系列信息，如果需要额外的出参信息，可以通过出参添加界面继续添加；

(3.5)配置结束后，点击预览按钮实时查看展示效果；

(4)功能面板预览；

(4.1)点击预览后可以实时展示；

(4.2)根据需求可以返回进行进一步的调整完善。

本发明在实际应用中已经为投行、机构条线提供的线上支持，并发布了相关功能面板以供员工使用，投行目前已经发布了4个功能面板(2个列表、1个web View、1个走马灯)；机构目前已发布11个功能面板(8个JS模板，3个列表)。另外对APP工作台图标的发布已经提供了全方位的支持。

本实施例的具体实现方案可以参见上述实施例中的相关说明，此处不再赘述。

可以理解的是，上述各实施例中相同或相似部分可以相互参考，在一些实施例中未详细说明的内容可以参见其他实施例中相同或相似的内容。

需要说明的是，在本发明的描述中，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。此外，在本发明的描述中，除非另有说明，“多个”的含义是指至少两个。

流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本发明的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本发明的实施例所属技术领域的技术人员所理解。

应当理解，本发明的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行装置执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。

本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。

此外，在本发明各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。

上述提到的存储介质可以是只读存储器，磁盘或光盘等。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

本发明结合目前流行的React、antd、bizcharts技术对前端功能快速开发提供可视化工具支持，以租户模式对外提供服务，支持多终端、多数据源的各种数据展示配置、跟踪、监控。

具体特点如下：

1)采用统一数据结构，支持PC、APP多终端使用。

2)支持以XML接口配置、微服务、restful方式发布的标准接口。

3)支持多种数据源如：Oracle、sqlServer、mongo、mysql、达梦等等，并且支持直接使用存储过程、视图、表进行可视化配置。

4)根据配置信息可自动添加入参、出参信息，简化配置。

5)通过监控跟踪配置功能的使用情况，实现应用工具闭环，方便开发及运维人员实时了解系统运行情况。

同时需要说明的是，工具也可以采用其它方式例如原生JS方式等进行实现，只是需要耗费大量的开发时间，并且对于平台来说难以保持统一风格、难以统一进行监控跟踪，不能及时满足大量业务需求。本发明的基本思想就是在目前主流框架技术的基础上结合业务需求、现有微服务工具进行抽象，按照基本信息、微服务(数据源)接口配置、展示模板配置、预览四个流程进行模块化开发，为系统管理员提供更加方便快捷的功能发布途径。

现有技术中，主要是根据线上编辑SQL语句结合Echarts进行图表绘制以及只用于工作流配置。

而本发明使用应用主流技术，支持场景更丰富(不仅仅局限于图表展示)，使用范围更广，并且支持按照部门、角色、员工等维度权限控制及个性化页面配置。

工具基于目前流行的React、antd、bizcharts开源技术，React采用虚拟DOM方式渲染页面，提高加快页面渲染效率，antd为前端展示组件集合，bizcharts为图表展示组件集合。作为基础技术，可有效提高开发效率，方便进行快速开发。

本发明以租户模式对外提供服务，支持多终端、多数据源的数据展示配置、跟踪、监控。通过可视化配置工具，降低开发人员门槛，加快需求迭代效率，节约开发成本。

采用了本发明的实现全连接平台个性化首页面板可视化配置处理的方法、系统、装置、处理器及其计算机可读存储介质，通过可视化配置工具可以做到实时配置、实时发布，所见即所得的模式，加快了业务交付，并且可以避免传统开发中的样式不一致、展示方式不统一等问题，实现无代码交付模式。按照全连接平台开发框架标准，从功能开发到测试发布整个流程进行封装，简化使用环节，各租户通过配置，无代码方式发布新功能，与全连接权限体系深度融合，支持条线、部门、角色进行个性化定制。

在此说明书中，本发明已参照其特定的实施例作了描述。但是，很显然仍可以作出各种修改和变换而不背离本发明的精神和范围。因此，说明书和附图应被认为是说明性的而非限制性的。