CN114416067A - 可视化搭建系统及方法 - Google Patents

Abstract

本申请实施例提供一种可视化搭建系统包括：组件管理模块，用于对功能组件与应用系统或者对所述功能组件之间进行代码解耦；页面管理模块，与所述组件管理模块连接，用于基于经过所述代码解耦的所述功能组件组建相应的目标页面；以及应用管理模块，与所述页面管理模块连接，用于基于所述目标页面组建相应的应用，以搭建应用系统或者更新所述应用系统。通过该可视化搭建系统可以通过组件市场实现组件与系统、组件与组件之间代码解耦，当某个组件功能迭代之后可独立进行发布，对其他组件和系统无任何影响，后期系统功能稳定完善之后，只需拓展迭代组件即可，避免所有代码耦合在一起进行发布带来的影响。

Description

可视化搭建系统及方法

技术领域

本申请涉及系统搭建技术领域，尤其涉及一种可视化搭建系统及方法。

背景技术

随着业务的不断发展，业务应用系统的需求日益倍增，需求开发排期长，产品运营研发之间沟通成本高，大量需求模块功能重复，传统靠人工编写代码的开发方式导致研发工作零碎，无法跟上需求增长速度。

发明内容

本申请实施例提供一种可视化搭建系统及方法，通过该可视化搭建系统进行系统搭建或者系统组件功能更新时，可以通过对功能组件与应用系统或者对所述功能组件之间进行代码解耦。当某个组件功能迭代之后可独立进行发布，对其他组件和系统无任何影响，后期系统功能稳定完善之后，只需拓展迭代组件即可，避免所有代码耦合在一起进行发布带来的影响。

第一方面，本申请实施例提供一种可视化搭建系统，包括：组件管理模块，用于对功能组件与应用系统或者对所述功能组件之间进行代码解耦；页面管理模块，与所述组件管理模块连接，用于基于经过所述代码解耦的所述功能组件组建相应的目标页面；以及应用管理模块，与所述页面管理模块连接，用于基于所述目标页面组建相应的应用，以搭建应用系统或者更新所述应用系统。

进一步地，所述组件管理模块还用于提供API接口，并通过所述API接口接收对所述功能组件功能迭代数据或者接收新的所述功能组件。

进一步地，所述功能组件包括以下一者或多者：表格组件、表单组件、图表组件以及文本组件。

进一步地，所述应用管理模块还用于对所述目标页面中的所述功能组件进行接口字段映射管理，通过映射规则主动匹配应用系统的接口。

进一步地，所述页面管理模块还用于基于所述目标页面中的所述功能组件的功能属性监听用户在目标页面的操作，若判断为监听事件被触发，则执行相应操作。

第二方面，本申请实施例还提供一种可视化搭建方法，包括：对功能组件与应用系统或者对所述功能组件之间进行代码解耦；基于经过所述代码解耦的所述功能组件组建相应的目标页面；以及基于所述目标页面组建相应的应用，以搭建应用系统或者更新所述应用系统。

进一步地，基于经过所述代码解耦的所述功能组件组建相应的目标页面之前，还包括：

提供API接口，并通过所述API接口接收对所述功能组件功能迭代数据或者接收新的所述功能组件。

进一步地，基于所述目标页面组建相应的应用之前，还包括：对所述目标页面中的所述功能组件进行接口字段映射管理，通过映射规则主动匹配应用系统的接口。

进一步地，基于所述目标页面组建相应的应用之前，还包括：基于所述目标页面中的所述功能组件的功能属性监听用户在目标页面的操作，若判断为监听事件被触发，则执行相应操作。

第三方面，本申请实施例还提供一种可视化搭建处理装置，所述装置包括：处理器和存储器，所述存储器用于存储至少一条指令，所述指令由所述处理器加载并执行时以实现第二方面提供的可视化搭建方法。在一种实施方式中，该可视化搭建处理装置可以为一种芯片或芯片模组。

通过上述技术方案，通过该可视化搭建系统可以通过组件市场实现组件与系统、组件与组件之间代码解耦，当某个组件功能迭代之后可独立进行发布，对其他组件和系统无任何影响，后期系统功能稳定完善之后，只需拓展迭代组件即可，避免所有代码耦合在一起进行发布带来的影响。

附图说明

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

图1为本申请一个实施例提供的可视化搭建系统的系统架势示意图；

图2为本申请再一个实施例提供的接口字段映射的流程示意图；

图3为本申请一个实施例提供的统一登录权限管理的流程示意图

图4为本申请再一个实施例提供的页面组件之间通信的流程示意图；

图5为本申请再一个实施例提供的可视化搭建处理装置的结构示意图。

具体实施方式

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

可视化搭建系统的核心功能是使用拖拽功能将已经定制开发完成的页面组件拖拽至画布中，通过组件配置在画布上对其进行排版布局及操作逻辑组合，最终生成有指定逻辑的页面展示给用户，帮助用户完成指定任务并且达到预期结果的一个操作过程。

关于业务应用系统的可视化搭建、配置以及升级的场景中，存在以下几个方面的缺陷：

一个方面，一些业务应用系统中的组件与系统本身代码耦合性强，当某个组件或系统本身功能有变动需要修改代码时，都需重新发布代码至生产环境，频繁发布版本对系统本身及已接入系统的业务应用系统都会产生潜在风险。

另一方面，一些业务应用系统中，应用业务接口有严格固定的数据格式，适合接入新的业务应用系统，要求新应用按照指定数据格式提供业务接口，对已存在的业务系统想迁移接入可视化搭建系统，当其数据格式与其指定的格式不匹配时，则无法做系统迁移。

再一方面，各组件代码存储于系统工程中，跟随可视化搭建系统代码做版本控制，其接入的业务应用系统调用的都是最新版本的组件，一旦某个组件存在潜在缺陷时，则会影响所有已接入的业务应用系统，影响范围较大。

为克服上述技术问题，本申请实施例提供一种可视化搭建系统，通过该可视化搭建系统可以通过组件市场实现组件与系统、组件与组件之间代码解耦，当某个组件功能迭代之后可独立进行发布，对其他组件和系统无任何影响，后期系统功能稳定完善之后，只需拓展迭代组件即可，避免所有代码耦合在一起进行发布带来的影响。其中，将组件发布至其他服务器，与可视化系统代码分离解耦，其接入的业务应用系统异步调用组件进行渲染，避免随着组件数量增长使系统工程代码越来越臃肿庞大，解决后期维护成本增高等问题。

进一步地，通过该可视化搭建系统还可以对接入应用增加接口字段映射管理，通过映射规则主动匹配应用系统接口，解决业务系统的后端接口存在多个服务，每个服务数据格式不同，以及已存在的老系统想迁移接入时数据格式不匹配的问题，提高应用系统接入的灵活性。

进一步地，通过该可视化搭建系统还可以将已布的组件在组件市场进行版本管理，已接入的业务应用系统使用指定版本的组件，在组件迭代发布之后，业务应用系统已引用的组件版本不变，如想使用该组件其他版本，可选择组件版本信息，经测试无误后上线使用，解决组件升级对所有已接入应用系统产生影响。

图1为本申请一个实施例提供的可视化搭建系统的系统架势示意图，如图1所示，为实现用户能够统一登录该可视化搭建系统，并对登录用户进行权限管理，该可视化搭建系统本身的数据服务由node server提供，接入可视化搭建系统内的业务应用系统服务由java server提供，通过node server做数据透传与前端页面进行数据行为交互。其中，node为运行在服务端的JavaScript基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。进而，可视化搭建系统通过node server与公司内部的统一登录系统、权限管理系统打通，方便系统与员工信息、权限信息之间数据关联交互。

为满足用户对可视化搭建系统中组件多样化的使用需求，可以建立组件市场，并通过组件市场提供的开放API接口，对组件市场已有的组件进行功能迭代或者添加新的组件，另一方面，也可以创建应用接入部门的业务需求。提供组件应用市场功能，对外开放组件 API，公司内部各业务线研发人员都可以开发新的组件，也可以对应用市场已存在的组件继续进行功能迭代或拷贝成副本进行二次开发，不论是新组件还是已有的组件，最终都需要提交至组件应用市场，由可视化系统的研发测试人员审核测试通过之后方可使用。

可视化搭建系统在应用管理中，业务部门可创建新应用和对已有应用进行管理，单个应用功能如下：

管理：进入当前应用管理后台，对当前应用版本进行管理、页面管理，分配用户权限，配置接口字段映射等信息。

查看：进入当前应用前台，按已编排好的页面逻辑操作达到预期结果。

编辑：编辑当前应用信息，如应用名称、编码等信息。

下线：下线当前应用前台所有页面，当应用下线后，其前台页面则无法浏览。

回滚：当前应用功能生产环境存在缺陷，可快速回滚至上个版本。

进一步地，如图1(可视化拖拽系统栏)所示，每个应用是由多个页面组成，并且每个页面由多个组件构成，因此，在每次新增或者修改页面时，可以先创建版本并说明版本目的，变更完成之后发布此版本进行测试，验证后发布至生产环境。

如图1所示，可以通过新建/编辑页面进行页面设计(参见图1页面设计栏)，页面设计由左中右三栏组成，左栏是功能组件，按功能分类从组件市场拉取相关组件，用户拖拽组件至中间栏的画布中对页面进行组合布局，当选中画布中某个组件时，右栏显示当前组件的配置信息。

在组件配置时，具体包括以下操作：

1、组件数据：用户可对当前组件配置生产/测试环境的接口，通过接口字段映射规则将数据转换成组件需要的字段格式，在画布中实时渲染展示，所见即所得。具体地，对接入的业务应用系统提供数据接口字段映射功能，建立一种或多种接口映射规则，对所有组件的数据接口指定一种默认映射规则进行数据结构转换，亦可对某个组件指定映射规则，其规则覆盖默认映射规则。图2为本申请再一个实施例提供的接口字段映射的流程示意图，如图2所示，以Java接口为例进行接口字段映射处理的说明，其中a＝123，a表示 java接口返回的字段名称，123表示字段a的值，其中通过Node service透传数据，应用页面根据接收到的数据确定其中的组件是否配置映射规则，若未配置映射规则，则基于全局应用映射规则(即b＝a，将字段名称a转换成字段名称b，即组件中需要使用b字段进行渲染，但原接口返回的a字段时不满足渲染条件，就需要将字段名称a映射成b)，进而在渲染组件元素b＝123(即，字段a的值等123时，通过映射规则将字段名称a改成 b，所以现在字段b的值等于123)。其中，若确定组件已配置映射规则，则基于单个组件映射规则(即，c＝a)，进而渲染组件元素(c＝123)。

2、组件配置：配置当前组件风格样式，如字体大小、颜色等信息，指定组件使用版本等内容，若配置权限id内容，则在页面渲染时与权限系统下发的权限集合进行匹配，一旦匹配上则进行权限管理。

图3为本申请一个实施例提供的统一登录权限管理的流程示意图，如图3所示，对接公司内部的统一登录系统和权限管理系，统一入口登录，针对不同角色人员进行权限分配，方便系统数据与员工信息的系统交互，避免重复功能开发，也符合内部合规审计等问题。

图4为本申请一个实施例提供的页面组件之间通信的流程示意图，如图4所示，页面中的组件可以根据其功能属性在内部代码中监听用户在目标页面的操作，例如用户在配置的自定义事件名称，如表格组件可以监听异步加载数据事件、表单组件可以监听获取当前表单所有字段内容事件等，一旦监听事件被触发，则执行相应的操作；触发事件则是通过当前组件去触发自己的监听事件或者由其他组件去触发自己的监听事件来达到相应的操作结果。进而可以获取到表格数据，进一步地，在得到表格数据后进行表格组件渲染流程。举例来说，表格组件可以监听异步加载数据事件，如监听事件触发，则可以自动获取表格护具；若按钮组件的监听事件被触发，则可以执行单击或双击表格数据等操作。

搭建页面发布完成之后，可进入应用前台查看，应用前台主要功能分为左侧菜单栏，左侧菜单在应用管理后台的页面管理中创建生成，菜单名称与页面一一对应，点击菜单时根据页面右侧配置从组件市场拉取指定版本组件渲染并展示内容，其内容与页面设计时画布模块中的内容布局展示相同，根据之前在画布中组件配置预设的业务逻辑操作，达到预期结果。

本申请再一个实施例还提供一种可视化搭建方法，该方法包括以下步骤：

步骤101：对功能组件与应用系统或者对所述功能组件之间进行代码解耦。

步骤102：基于经过所述代码解耦的所述功能组件组建相应的目标页面。

步骤103：基于所述目标页面组建相应的应用，以搭建应用系统或者更新所述应用系统。

在一种实施方式中，在步骤102之前还可以提供API接口，并通过所述API接口接收对所述功能组件功能迭代数据或者接收新的所述功能组件。

在一种实施方式中，在步骤103之前还可以对所述目标页面中的所述功能组件进行接口字段映射管理，通过映射规则主动匹配应用系统的接口。

在一种实施方式中，在步骤103之前还可以对所述目标页面中的所述功能组件进行版本管理，基于所述应用系统中已接入的所述功能组件的版本信息为所述应用系统匹配相同版本信息的其他功能组件。

具体实时操作可以与本申请实施例提供的可视化搭建系统的描述相同或类似，在此不再赘述。

图5为本申请一个实施例提供的可视化搭建处理装置结构示意图，如图5所示，该装置可以包括处理器51和存储器52，所述存储器52用于存储至少一条指令，所述指令由所述处理器51加载并执行时以实现图4所示实施例提供的可视化搭建方法。

在一种实施方式中，如图5所示实施例提供的可视化搭建处理装置可以为一种芯片或芯片模组。

本申请实施例还提供一种电子设备，该设备可以包括图5所示实施例提供的可视化搭建处理装置，以通过该电子设备提供一种本申请任一实施例提供的可视化搭建系统。

需要说明的是，本申请实施例中所涉及的终端可以包括但不限于个人计算机(Personal Computer，PC)、个人数字助理(Personal Digital Assistant，PDA)、无线手持设备、平板电脑(Tablet Computer)、手机、MP3播放器、MP4播放器等。

可以理解的是，所述应用可以是安装在终端上的应用程序(nativeApp)，或者还可以是终端上的浏览器的一个网页程序(webApp)，本申请实施例对此不进行限定。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能单元的形式实现。

上述以软件功能单元的形式实现的集成的单元，可以存储在一个计算机可读取存储介质中。上述软件功能单元存储在一个存储介质中，包括若干指令用以使得一台计算机装置 (可以是个人计算机，服务器，或者网络装置等)或处理器(Processor)执行本申请各个实施例所述方法的部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅为本申请的较佳实施例而已，并不用以限制本申请，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。

最后应说明的是：以上各实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述各实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。

Claims (10)

1.一种可视化搭建系统，其特征在于，所述系统包括：

组件管理模块，用于对功能组件与应用系统或者对所述功能组件之间进行代码解耦；

页面管理模块，与所述组件管理模块连接，用于基于经过所述代码解耦的所述功能组件组建相应的目标页面；以及

应用管理模块，与所述页面管理模块连接，用于基于所述目标页面组建相应的应用，以搭建应用系统或者更新所述应用系统。

2.根据权利要求1所述的系统，其特征在于，所述组件管理模块还用于提供API接口，并通过所述API接口接收对所述功能组件功能迭代数据或者接收新的所述功能组件。

3.根据权利要求1所述的系统，其特征在于，所述功能组件包括以下一者或多者：表格组件、表单组件、图表组件以及文本组件。

4.根据权利要求1所述的系统，所述应用管理模块还用于对所述目标页面中的所述功能组件进行接口字段映射管理，通过映射规则主动匹配应用系统的接口。

5.根据权利要求1所述的系统，所述页面管理模块还用于基于所述目标页面中的所述功能组件的功能属性监听用户在目标页面的操作，，若判断为监听事件被触发，则执行相应操作。

6.一种可视化搭建方法，其特征在于，所述方法包括：

对功能组件与应用系统或者对所述功能组件之间进行代码解耦；

基于经过所述代码解耦的所述功能组件组建相应的目标页面；以及

基于所述目标页面组建相应的应用，以搭建应用系统或者更新所述应用系统。

7.根据权利要求6所述的方法，其特征在于，基于经过所述代码解耦的所述功能组件组建相应的目标页面之前，还包括：

提供API接口，并通过所述API接口接收对所述功能组件功能迭代数据或者接收新的所述功能组件。

8.根据权利要求6所述的方法，其特征在于，基于所述目标页面组建相应的应用之前，还包括：

对所述目标页面中的所述功能组件进行接口字段映射管理，通过映射规则主动匹配应用系统的接口。

9.根据权利要求6所述的方法，其特征在于，基于所述目标页面组建相应的应用之前，还包括：

基于所述目标页面中的所述功能组件的功能属性监听用户在目标页面的操作，若判断为监听事件被触发，则执行相应操作。

10.一种可视化搭建处理装置，其特征在于，所述装置包括：

处理器和存储器，所述存储器用于存储至少一条指令，所述指令由所述处理器加载并执行时以实现如权利要求6-8中任意一项所述的可视化搭建方法。

Images