CN110321183B - 一种公共组件ui界面的配置***及方法 - Google Patents

Abstract

本申请提供一种公共组件UI界面的配置***及方法。所述***包括：项目管理模块、配置管理模块；所述项目管理模块用于设置公共组件UI界面的配置项，所述配置项采用多层级的配置方式；所述配置管理模块用于设置所述公共组件UI界面的配置项的取值，根据设置的所述配置项的取值展示所述公共组件UI界面的效果图；所述项目管理模块和所述配置管理模块使用共同的数据库。利用本申请中各个实施例，实现了公共组件UI界面的灵活配置，满足了不同业务方对公共组件的配置需求。

Description

一种公共组件UI界面的配置***及方法

技术领域

本申请属于互联网技术领域，尤其涉及一种公共组件UI界面的配置***及方法。

背景技术

随着互联网技术的不断发展，前端开发为减少维护成本和业务风险，对于通用的业务逻辑会封装成公共组件供不同业务方使用，不同的业务方对公共组件UI界面的配置可能不同。现有技术中，业务方需要在本地维护自己的公共组件UI界面，或者对于公共组件UI界面的定制相对固定，对公共组件UI界面的配置不够灵活，无法满足不同业务方的需求。因此，提供一种能够满足不同业务方对公共组件UI界面的配置需求的技术方案，是亟待解决的技术问题。

发明内容

本申请目的在于提供一种公共组件UI界面的配置***及方法，实现了公共组件UI界面的灵活配置，满足了不同业务方对公共组件的配置需求。

一方面本申请提供了一种公共组件UI界面的配置***，包括：包括：项目管理模块、配置管理模块；

所述项目管理模块用于设置公共组件UI界面的配置项，所述配置项采用多层级的配置方式；

所述配置管理模块用于设置所述公共组件UI界面的配置项的取值，根据设置的所述配置项的取值展示所述公共组件UI界面的效果图；

所述项目管理模块和所述配置管理模块使用共同的数据库。

进一步地，所述***的另一个实施例中，所述配置项包括四个层级，所述配置项的层级从高到低包括：全局、页面组、页面、页面模块，所述全局包括至少一个所述页面组，所述页面组包括至少一个所述页面，所述页面包括至少一个所述页面模块。

进一步地，所述***的另一个实施例中，所述配置项的配置方式为树状配置。

进一步地，所述***的另一个实施例中，所述项目管理模块提供所述配置项的配置界面，所述配置界面中在所述配置项的属性编辑区域通过增加单文件组件增加所述配置项的可配置字段。

进一步地，所述***的另一个实施例中，所述项目管理模块具体用于增加、删除、修改所述公共组件UI界面的配置项。

进一步地，所述***的另一个实施例中，所述项目管理模块还用于增加或删除公共组件。

进一步地，所述***的另一个实施例中，所述根据设置的所述配置项的取值展示所述公共组件UI界面的效果图，包括：

根据所述配置项的取值同步展示所述公共组件UI界面的效果图。

进一步地，所述***的另一个实施例中，所述配置管理模块提供所述配置项的取值设置界面，所述取值设置界面中所述公共组件UI界面的页面展示区域和所述配置项的取值设置区域的数据双向绑定，以实现所述页面展示区域的公共组件UI界面的效果图与所述取值设置区域的数据同步。

进一步地，所述***的另一个实施例中，所述取值设置界面中还包括配置项的导航区域，所述配置项的导航区域、所述页面展示区域的数据双向绑定，以实现所述页面展示区域的公共组件UI界面的效果图与所述导航区域的数据同步。

进一步地，所述***的另一个实施例中，所述取值设置区域通过增加单文件组件设置所述配置项的取值。

进一步地，所述***的另一个实施例中，所述配置管理模块具体用于增加、删除、修改所述公共组件UI界面的配置项的取值。

另一方面，本申请提供了一种公共组件UI界面的配置方法，包括：

组件方利用项目管理模块设置公共组件UI界面的配置项，所述配置项采用多层级的配置方式；

业务方获取所述组件方设置的所述公共组件UI界面的配置项，利用配置管理模块设置所述公共组件UI界面的配置项的取值，并根据所述配置管理模块展示的所述公共组件UI界面的效果图，确定所述公共组件UI界面。

进一步地，所述方法的另一实施例中，所述配置项采用多层级的配置方式，包括：

所述配置项的层级从高到低包括：全局、页面组、页面、页面模块，所述全局包括至少一个所述页面组，所述页面组包括至少一个所述页面，所述页面包括至少一个所述页面模块。

进一步地，所述方法的另一个实施例中，所述组件方利用项目管理模块配置公共组件UI界面的配置项，包括：

所述组件方利用所述项目管理模块增加、删除、修改所述配置项。

进一步地，所述方法的另一个实施例中，所述组件方利用项目管理模块配置公共组件UI界面的配置项，包括：

所述组件方利用所述项目管理模块增加、删除、修改所述配置项。

再一方面，本申请还提供了一种用于公共组件UI界面的配置的电子设备，包括：处理器以及用于存储处理器可执行指令的存储器，所述处理器执行所述指令时实现上述公共组件UI界面的配置方法。

本申请提供的公共组件UI界面的配置***及方法，组件方可以在***内进行公共组件UI界面的配置项的设置，业务方根据组件方设置的公共组件UI界面的配置项，定制公共组件UI界面的配置方案，配置出公共组件的UI界面，并可以在***内进行展示配置效果，以便根据配置效果对公共组件UI界面进行调整和修改。公共组件UI界面的配置项可以采用多层级的配置方式，配置方式灵活并且方便管理。项目管理模块和配置管理模块共用同一个数据库，在同一个***内，可以进行公共组件UI界面的定制和管理，满足可不同业务方对公共组件的配置需求，实现了公共组件UI界面的灵活定制。

附图说明

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

图1是本申请提供的一种公共组件UI界面的配置***一个实施例的结构示意图；

图2是本申请一个实施例中公共组件UI界面的配置***的技术架构示意图；

图3是本申请又一个实施例公共组件UI界面的配置***的结构示意图；

图4是本申请一个实施例中项目管理模块提供的公共组件UI界面配置项的配置界面；

图5是本申请一个实施例中配置管理模块提供的公共组件UI界面配置项的取值设置界面；

图6是本申请一个实施例中公共组件UI界面配置项的取值设置界面模型配置示意图；

图7是本申请提供的一种公共组件UI界面的配置***的实施例的模块结构示意图。

具体实施方式

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

组件是对数据和方法的简单封装，对于一些通用的业务逻辑可以封装成公共组件供不同的业务方使用。例如：登录组件，不同的网站、应用等可能需要不同的登录组件，对于登录组件的UI界面的需求也不同，如：有些业务方的登录组件需要使用账户密码登录，有些业务方的登录组件需要手机验证码登录等。

本申请实施例提供一种公共组件UI(User Interface)界面的配置***，可以实现对公共组件进行自定义配置UI交互界面，不同的业务方可以利用配置***自行定制以及管理公共组件UI界面以及文案展示方案等。

具体地，图1是本申请提供的一种公共组件UI界面的配置***一个实施例的结构示意图，本申请提供的公共组件UI界面的配置***包括：项目管理模块、配置管理模块；

所述项目管理模块用于设置公共组件UI界面的配置项，所述配置项采用多层级的配置方式；

所述配置管理模块用于设置所述公共组件UI界面的配置项的取值，根据设置的所述配置项的取值展示所述公共组件UI界面的效果图；

所述项目管理模块和所述配置管理模块使用共同的数据库。

具体地，如图1所示，本申请一个实施例中提供的公共组件UI界面的配置***可以包括项目管理模块和配置管理模块，项目管理模块可以用于对公共组件UI界面的配置项进行配置。如：登录组件中可以配置登录页、注册页、第三方打通页等配置项，每个配置项还可以设置对应的属性。本申请实施例中配置项可以采用多层级的配置方式，即可以将配置项划分层级，高层级的配置项可以包括一个或多个低层级的配置项。用户可以根据实际需要按照层级设置公共组件UI界面的配置项。如登录组件中的登录页面配置项可以包括：登录标题设置、忘记密码设置、二维码设置、登录提交按钮、登录账号输入框等低一层级的配置项。每一个配置项可以对应设置其属性，如页面名称、页面宽度、页面高度、颜色等。分层级的配置公共组件UI界面的配置项，便于公共组件UI界面的配置项的管理，避免了因配置项过多时，罗列过长，容易出错或遗漏等问题。

项目管理模块可以灵活的配置公共组件UI界面的定制类型，如可以是文本、文本域、颜色、单选、多选、下拉菜单、富文本、CSS(Cascading Stylesheet，层叠样式表)样式等，并具有灵活的可扩展性。

本申请一个实施例中，项目管理模块具体可以用于对公共组件UI界面的配置项进行增加、删除或修改等操作。例如：通过项目管理模块可以在登录组件中增加一个页面配置项或者删除一个页面配置项等。

通过项目管理模块设置好公共组件UI界面的配置项后，可以通过配置管理模块对项目管理模块设置的公共组件UI界面的配置项进行赋值。即用户可以根据实际使用需要，设置项目管理模块中设置的公共组件UI界面的配置项的属性取值，如登录按钮的颜色设置为红色、“忘记密码设置”中可以通过哪些方式找回密码等。配置管理模块还可以根据用户设置的公共组件UI界面的配置项的取值展示出公共组件UI界面的效果图，用户根据展示出的公共组件UI界面的效果图可以直观的看到公共组件UI界面是否满足自己的需求，或哪些地方需要修改等。

本申请一个实施例中，配置管理模块具体用于增加、删除、修改所述公共组件UI界面的配置项的取值。如：可以将登录组件的登录按钮的红色改为蓝色，还可以删除整个公共组件UI界面的配置方案。

此外，本申请一个实施例中项目管理模块和配置管理模块可以共用同一个数据库，图2是本申请一个实施例中公共组件UI界面的配置***的技术架构示意图，如图2所示，本申请实施例中公共组件UI界面的配置***技术上包括：前端UI、展示层、业务层、数据层、数据库、运行环境等。前端UI中可以包括：Html(超文本标记语言)、CSS等计算机语言，前端UI中的Vue.js可以表示JavaScript(一种直译式脚本语言)框架。展示层可以包括模板引擎、交互式网页应用，如：Nunjucks模板引擎和Ajax交互(可以包括发送请求即POST请求，接收请求即GET请求等)等。项目管理模块和配置管理模块可以属于业务层，项目管理模块和业务管理模块可以共同使用同一个数据库，实现数据的同步。数据层可以包括对数据的处理操作，其中Sequelize和HSF(HOOPS Stream Format)可以表示两种数据处理方法，HSF可以理解为一个分布式的服务框架，主要用来传输数据，可以理解为一种传输协议。Idb(intelligent database)和tair可以表示两种数据库。当公共组件的业务逻辑需要更改后，通过项目管理模块在***内更改公共组件的业务逻辑，数据库也会进行相应的更新，配置管理模块中公共组件UI界面的配置项也会进行相应的更改，不需要业务方单独修改公共组件UI界面。业务方只需要维护本身的公共组件UI界面的配置项的取值，不会受到其他业务方对公共组件的业务需求的影响，实现了公共组件的分开维护，统一管理。

图3是本申请又一个实施例公共组件UI界面的配置***的结构示意图，如图3所示，本申请实施例中的公共组件UI界面的配置***还可以包括：项目管理模块、平台管理模块、配置管理模块，各个模块用于执行不同的功能。如图3所示，项目管理模块可以用于配置项目，即设置公共组件UI界面的配置项。项目管理模块设置公共组件UI界面的配置项后，可以将公共组件UI界面的配置项上传至平台管理模块。配置管理模块可以从平台管理模块中获取到项目管理模块设置的公共组件UI界面的配置项，并根据实际需要对配置项进行方案配置。项目管理模块和配置管理模块可以共同拥有平台管理模块的管理权，可以在平台管理模块中对公共组件进行维护和管理。

组件方创建出公共组件的平台，即利用项目管理模块添加一个平台，可以把这个平台的管理权限交给平台方。一个平台下可以有多个业务方，例如：优酷作为一个平台，可能有很多业务用到登录组件，那么每个业务方都可能对登陆组件做各自的定制化。平台方可以创建多个配置方案并交给每个业务方独立管理，或者也可以由业务方在平台管理模块中对登录组件进行定制，并独立管理。

本申请实施例提供的公共组件UI界面的配置***，组件方可以在***内进行公共组件UI界面的配置项的设置，业务方根据组件方设置的公共组件UI界面的配置项，定制公共组件UI界面的配置方案，配置出公共组件的UI界面，并可以在***内进行展示配置效果，以便根据配置效果对公共组件UI界面进行调整和修改。公共组件UI界面的配置项可以采用多层级的配置方式，配置方式灵活并且方便管理。项目管理模块和配置管理模块共用同一个数据库，在同一个***内，可以进行公共组件UI界面的定制和管理，满足可不同业务方对公共组件的配置需求，实现了公共组件UI界面的灵活定制。

在本申请一个实施例中，所述配置项可以包括四个层级，所述配置项的层级从高到低包括：全局、页面组、页面、页面模块，所述全局包括至少一个所述页面组，所述页面组包括至少一个所述页面，所述页面包括至少一个所述页面模块。

项目管理模块中可以对公共组件UI界面的配置项进行分层级，全局可以表示最顶层的配置项，作用于整个组件项目。全局下面可以包括一个或多个页面组，页面组里的配置项作用于组内的所有页面。可以修改页面组的名称，比如登录组件可以分为PC(personalcomputer)页面组和H5(Html5)页面组。页面组里可以包括一个或多个页面，页面里的配置项作用于当前页面。页面在配置页可以实时预览，其展示方式有两种，一种是接入方直接提供预览页面的url(Uniform Resource Locator，统一资源定位符)，一种是由***创建预览页面，接入方配置页面里的html标签以及渲染方法。页面里可以包括一个或多个页面模块，页面模块即页面上的一块内容，如登录页面上的登录按钮，扫码登录等，可以针对某个模块添加专门的配置项。在创建模块的时候会有一个自动生成的唯一标示，创建者可以修改这个标示。***通过这个标示在预览页面上识别这个模块，所以预览页面要在这个模块对应的Html元素上加上一个属性data-custom-mid，属性值就是这个标示。

本申请一个实施例中，采用多层级的方式配置公共组件UI界面的配置项，同时可以对多层级的配置项采用树状配置方式，即按照配置项层级的高低，采用树状形式进行配置管理。

图4是本申请一个实施例中项目管理模块提供的公共组件UI界面配置项的配置界面，如图4所示，图中左侧可以表示配置项的树状导航区，采用树状配置方式，分层级的编辑公共组件UI界面的配置项，实现了公共组件UI界面的灵活编辑，方便了配置项的管理，可以满足复杂的公共组件UI界面的配置需求。

如图4所示，在本申请一个实施例中，项目管理模块提供的配置项的配置界面中，右侧可以表示配置项的属性编辑区域，属性编辑区域里每一个可选配置字段类型都可以是一个单独的Vue单文件组件，增加字段类型只需增加一个Vue单文件组件即可。Vue单文件组件可以实现与数据库的数据双向绑定，实现配置项的配置界面与数据库中的数据一致，实现了公共组件UI界面的配置界面的交互友好，便于公共组件UI界面的配置项的维护和管理。

在本申请一个实施例中，项目管理模块还可以用于增加或删除公共组件。本申请提供的公共组件UI界面的配置***，可以对外提供公共接口，根据需要为不同的用户配置不同的公共组件。如图3所示，项目管理模块可以用于添加项目、删除项目，如：可以在***中增加一个播放组件，同时可以添加一个平台，将播放组件发布到平台中，供业务方自行定制公共组件UI界面。

本申请一个实施例中，所述根据设置的所述配置项的取值展示所述公共组件UI界面的效果图，可以包括：根据所述配置项的取值同步展示所述公共组件UI界面的效果图。

业务方可以利用配置管理模块在组件方设置的公共组件UI界面的配置项的基础上，根据需要设置各个配置项的取值，即定义公共组件UI界面的配置方案，配置管理模块可以根据业务方定制的配置方案，同步展示公共组件UI界面的效果图。例如：若业务方定制的登录组件的登录按钮为红色，则配置管理模块可以同步的将登录组件中的登录按钮显示为红色，方便用户根据实际展示的效果，判断当前的配置方案是否满足自己的业务需求。当然，根据实际使用情况，公共组件UI界面的效果图的展示可以是实时展示，也可以延时预设时间后展示，效果图和配置项的取值设置区域可以在同一个页面或窗口，也可以在不同的页面或窗口，本申请实施例不作具体限定。

图5是本申请一个实施例中配置管理模块提供的公共组件UI界面配置项的取值设置界面，如图5所示，配置管理模块提供的配置项的取值设置界面中，可以包括公共组件UI界面的页面展示区域和配置项的取值设置区域。如图5所示，取值设置界面中的中间部分可以表示页面展示区域，右侧可以表示取值设置区域，页面展示区域和取值设置区域的数据双向绑定，以实现页面展示区域的公共组件UI界面的效果图与取值设置区域的数据同步。即在取值设置区域设置公共组件UI界面的配置项的取值时，页面展示区域中对应的位置处可以展示相应的效果，如：若在取值设置区域将登录组件的登录按钮的颜色设置为红色，则页面展示区域中登录组件的UI界面中的登录按钮的颜色相应的变为红色。具体可以利用MVVM(Model-View-ViewModel)开发模式实现页面展示区域和取值设置区域的数据双向绑定，当然根据实际使用需要还可以采用其他方式实现页面展示区域和取值设置区域的数据双向绑定，例如：采用MVP(Model-View-Prensent)或者MVC(Model-View-Controller)开发模式等，本申请实施例不作具体限定。

如图5所示，本申请实施例中取值设置界面还可以包括配置项的导航区域，图5中左侧可以表示配置项的导航区域，可以将配置项的导航区域与页面展示区域的数据双向绑定，以实现页面展示区域的公共组件UI界面的效果图与导航区域的数据同步。实际使用时，可以将配置项的导航区域、页面展示区域、配置项的取值设置区域的数据均进行绑定，实现导航区域、页面展示区域、取值设置区域的数据同步。具体实现取值界面中三个区域的数据同步的方法可以采用MVVM、MVP、或者MVC的开发模式等，本申请实施例不作具体限定。

例如：在配置项的导航区域可以包括公共组件UI界面的页面组对应的配置项，如：登录页、注册页等，可以在导航区域对公共组件UI界面进行分组管理，可以通过下拉菜单选择分组。右侧是配置项的取值设置区域也可以称为配置面板，最多可以分四级面板：全局，页面组，页面，页面模块。图5中右侧顶部前4个图标可以表示四级面板，从左至右可以分别表示全局、页面组、页面、页面模块，右上角的图标可以折叠配置面板，可以通过取值设置区域顶部的图标实现面板的自由切换。中间区域为页面展示区域，鼠标mouseover可以有可定制化模块的感应，点击页面展示区域的配置项的感应区，右侧取值设置区域会出现该感应区域的可定制项。

例如：若选择左侧导航区域的“登录页”，则中间页面显示区域显示登录页对应的UI界面，右侧取值设置区域的顶部对应的选择第二个图标，表示当前对登录页这个页面组进行配置。若鼠标在页面展示区域中点击登录页界面中的“忘记密码设置”处，则右侧取值设置区域的顶部对应的选择第三个图标，并且右侧取值设置区域可以显示“忘记密码设置”对应的可定制项，用户可以在右侧取值设置区域进行公共组件UI界面的定制。

上述实施例中的mouseover是一种计算机语言，在每一个匹配元素的mouseover事件中绑定一个处理函数。mouseout事件会在鼠标指针移动到指定的对象上时发生，如：一个按钮，在这个按钮上定义了一个事件，当鼠标放在这个按钮上，则响应这个事件。

本申请实施例实现了公共组件UI界面的配置方案的界面的数据同步，方便用户编辑、定制公共组件UI界面，直观的看到不同配置方案对应的公共组件UI界面的不同展示效果，所见即所得，提高了用户体验。

在本申请一个实施例中，所述取值设置区域通过增加单文件组件设置所述配置项的取值。配置面板里即取值设置区域的每个自定义配置项都是一个Vue单文件组件的实例，他们均采用双向绑定的方式来保证配置面板自身UI和数据之间的一致性，方便公共组件UI界面配置数据的管理。

图6是本申请一个实施例中公共组件UI界面配置项的取值设置界面模型配置示意图，如图6所示，本申请实施例不但在技术上采取数据双向绑定的MVVM模式，而且在页面设计上也采用类MVVM的模式来展现交互效果。从技术上讲，配置面板里的每个自定义配置项都是一个Vue单文件组件的实例，他们均采用双向绑定的方式来保证配置面板自身UI和数据之间的一致性。从设计上讲，配置面板本身又作为整个交互设计的ViewModel层，与页面展示区域及View层形成一种类似MVVM的模型，来保证所见即所得的可视化交互效果。实现了交互友好，所见即所得的技术效果。

本申请一个实施例中，还提供了一种公共组件UI界面的配置方法，可以利用上述实施例中提供的公共组件UI界面的配置***，实现公共组件UI界面的配置，具体可以包括：

组件方利用项目管理模块设置公共组件UI界面的配置项，所述配置项采用多层级的配置方式；

业务方获取所述组件方设置的所述公共组件UI界面的配置项，利用配置管理模块设置所述公共组件UI界面的配置项的取值，并根据所述配置管理模块展示的所述公共组件UI界面的效果图，确定所述公共组件UI界面。

组件方可以利用项目管理模块增加新的项目，即添加新的公共组件，利用项目管理模块设置公共组件UI界面的配置项。可以将添加的公共组件在***内发布，也可将添加的公共组件发布至平台管理模块。业务方可以通过***或者平台管理模块获取到组件方设置的公共组件UI界面的配置项，并可以利用配置管理模块设置公共组件UI界面的配置项的取值，即配置公共组件UI界面的配置方案。配置管理模块根据业务方设置的公共组件UI界面的配置方案，展示公共组件UI界面的效果图，业务方根据展示出的效果图对公共组件UI界面的配置方案进行调整，确定出最终的公共组件UI界面。

组件方在对公共组件UI界面的配置项进行定制时，可以采用多层级的配置方式，如采用树状配置方式，配置项的层级可以分为：全局、页面组、页面、页面模块，具体可以参考上述实施例的介绍，此处不再赘述。

组件方可以利用所述项目管理模块增加、删除、修改配置项，例如删除登录组件中的注册页。还可以利用项目管理模块增加或删除公共组件，利用根据业务方的需求，增加播放组件，并对播放组件UI界面进行配置项的设置。

本申请实施例提供的公共组件UI界面的配置方法，组件方可以利用项目管理模块进行公共组件UI界面的配置项的设置，业务方根据组件方设置的公共组件UI界面的配置项，定制公共组件UI界面的配置方案，配置出公共组件的UI界面，并可以在***内进行展示配置效果，以便根据配置效果对公共组件UI界面进行调整和修改。公共组件UI界面的配置项可以采用多层级的配置方式，配置方式灵活并且方便管理。项目管理模块和配置管理模块共用同一个数据库，在同一个***内，可以进行公共组件UI界面的定制和管理，满足可不同业务方对公共组件的业务需求，实现了公共组件UI界面的灵活定制。

需要说明的是，上述方法根据***实施例的描述还可以包括其他的实施方式。具体的实现方式可以参照相关***实施例的描述，在此不作一一赘述。

本说明书实施例提供的上述公共组件UI界面的配置***可以在计算机中由处理器执行相应的程序指令来实现，如使用windows操作***的c++语言在PC端实现、linux***实现，或其他例如使用android、iOS***程序设计语言在智能终端实现，以及基于量子计算机的处理逻辑实现等。本说明书提供的一种公共组件UI界面的配置的电子设备的一个实施例中，电子设备可以是智能手机、平板电脑、智能可穿戴设备(智能手表、虚拟现实眼镜、虚拟现实头盔等)等。图7是本申请提供的一种公共组件UI界面的配置***的实施例的模块结构示意图，如图7所示，本申请一个实施例提供的用于公共组件UI界面的配置的电子设备可以包括处理器71以及用于存储处理器可执行指令的存储器72，处理器71和存储器72通过总线73完成相互间的通信；

所述处理器71用于调用所述存储器72中的程序指令，以执行上述各公共组件UI界面的配置方法实施例所提供的方法，例如包括：组件方利用项目管理模块设置公共组件UI界面的配置项，所述配置项采用多层级的配置方式；业务方获取所述组件方设置的所述公共组件UI界面的配置项，利用配置管理模块设置所述公共组件UI界面的配置项的取值，并根据所述配置管理模块展示的所述公共组件UI界面的效果图，确定所述公共组件UI界面。

需要说明的是说明书上述所述的***根据相关方法实施例的描述还可以包括其他的实施方式，具体的实现方式可以参照方法实施例的描述，在此不作一一赘述。本申请中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于硬件+程序类实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本说明书实施例并不局限于必须是符合行业通信标准、标准计算机数据处理和数据存储规则或本说明书一个或多个实施例所描述的情况。某些行业标准或者使用自定义方式或实施例描述的实施基础上略加修改后的实施方案也可以实现上述实施例相同、等同或相近、或变形后可预料的实施效果。应用这些修改或变形后的数据获取、存储、判断、处理方式等获取的实施例，仍然可以属于本说明书实施例的可选实施方案范围之内。

在20世纪90年代，对于一个技术的改进可以很明显地区分是硬件上的改进(例如，对二极管、晶体管、开关等电路结构的改进)还是软件上的改进(对于方法流程的改进)。然而，随着技术的发展，当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。设计人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。因此，不能说一个方法流程的改进就不能用硬件实体模块来实现。例如，可编程逻辑器件(Programmable Logic Device,PLD)(例如现场可编程门阵列(Field Programmable GateArray，FPGA))就是这样一种集成电路，其逻辑功能由用户对器件编程来确定。由设计人员自行编程来把一个数字***“集成”在一片PLD上，而不需要请芯片制造厂商来设计和制作专用的集成电路芯片。而且，如今，取代手工地制作集成电路芯片，这种编程也多半改用“逻辑编译器(logic compiler)”软件来实现，它与程序开发撰写时所用的软件编译器相类似，而要编译之前的原始代码也得用特定的编程语言来撰写，此称之为硬件描述语言(Hardware Description Language，HDL)，而HDL也并非仅有一种，而是有许多种，如ABEL(Advanced Boolean Expression Language)、AHDL(Altera Hardware DescriptionLanguage)、Confluence、CUPL(Cornell University Programming Language)、HDCal、JHDL(Java HardwareDescription Language)、Lava、Lola、MyHDL、PALASM、RHDL(Ruby HardwareDescription Language)等，目前最普遍使用的是VHDL(Very-High-Speed IntegratedCircuit Hardware Description Language)与Verilog。本领域技术人员也应该清楚，只需要将方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中，就可以很容易得到实现该逻辑方法流程的硬件电路。

控制器可以按任何适当的方式实现，例如，控制器可以采取例如微处理器或处理器以及存储可由该(微)处理器执行的计算机可读程序代码(例如软件或固件)的计算机可读介质、逻辑门、开关、专用集成电路(Application Specific Integrated Circuit，ASIC)、可编程逻辑控制器和嵌入微控制器的形式，控制器的例子包括但不限于以下微控制器：ARC 625D、Atmel AT91SAM、Microchip PIC18F26K20以及Silicone Labs C8051F320，存储器控制器还可以被实现为存储器的控制逻辑的一部分。本领域技术人员也知道，除了以纯计算机可读程序代码方式实现控制器以外，完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件，而对其内包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。

上述实施例阐明的***、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的，计算机例如可以为个人计算机、膝上型计算机、车载人机交互设备、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何设备的组合。

虽然本说明书一个或多个实施例提供了如实施例或流程图所述的方法操作步骤，但基于常规或者无创造性的手段可以包括更多或者更少的操作步骤。实施例中列举的步骤顺序仅仅为众多步骤执行顺序中的一种方式，不代表唯一的执行顺序。在实际中的装置或终端产品执行时，可以按照实施例或者附图所示的方法顺序执行或者并行执行(例如并行处理器或者多线程处理的环境，甚至为分布式数据处理环境)。术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、产品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、产品或者设备所固有的要素。在没有更多限制的情况下，并不排除在包括所述要素的过程、方法、产品或者设备中还存在另外的相同或等同要素。第一，第二等词语用来表示名称，而并不表示任何特定的顺序。

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

本发明是参照根据本发明实施例的方法、装置(***)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

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

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

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储、石墨烯存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

本领域技术人员应明白，本说明书一个或多个实施例可提供为方法、***或计算机程序产品。因此，本说明书一个或多个实施例可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本说明书一个或多个实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

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

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

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

Claims (16)

1.一种公共组件UI界面的配置***，其特征在于，包括：项目管理模块、配置管理模块和平台管理模块；

所述项目管理模块用于设置公共组件UI界面的配置项，所述配置项采用多层级的配置方式；所述项目管理模块还用于将设置后的公共组件UI界面的配置项上传至所述平台管理模块；

所述配置管理模块用于从所述平台管理模块中获取所述项目管理模块设置的公共组件UI界面的配置项，设置所述公共组件UI界面的配置项的取值，根据设置的所述配置项的取值展示所述公共组件UI界面的效果图；所述配置管理模块还用于将设置后的所述公共组件UI界面的配置项上传至所述平台管理模块；

所述平台管理模块用于添加、删除、编辑所述公共组件的平台；所述项目管理模块和所述配置管理模块使用共同的数据库。

2.如权利要求1所述的***，其特征在于，所述配置项包括四个层级，所述配置项的层级从高到低包括：全局、页面组、页面、页面模块，所述全局包括至少一个所述页面组，所述页面组包括至少一个所述页面，所述页面包括至少一个所述页面模块。

3.如权利要求1所述的***，其特征在于，所述配置项的配置方式为树状配置。

4.如权利要求1所述的***，其特征在于，所述项目管理模块提供所述配置项的配置界面，所述配置界面中在所述配置项的属性编辑区域通过增加单文件组件增加所述配置项的可配置字段。

5.如权利要求1所述的***，其特征在于，所述项目管理模块具体用于增加、删除、修改所述公共组件UI界面的配置项。

6.如权利要求1所述的***，其特征在于，所述项目管理模块还用于增加或删除公共组件。

7.如权利要求1所述的***，其特征在于，所述根据设置的所述配置项的取值展示所述公共组件UI界面的效果图，包括：

根据所述配置项的取值同步展示所述公共组件UI界面的效果图。

8.如权利要求7所述的***，其特征在于，所述配置管理模块提供所述配置项的取值设置界面，所述取值设置界面中所述公共组件UI界面的页面展示区域和所述配置项的取值设置区域的数据双向绑定，以实现所述页面展示区域的公共组件UI界面的效果图与所述取值设置区域的数据同步。

9.如权利要求8所述的***，其特征在于，所述取值设置界面中还包括配置项的导航区域，所述配置项的导航区域、所述页面展示区域的数据双向绑定，以实现所述页面展示区域的公共组件UI界面的效果图与所述导航区域的数据同步。

10.如权利要求7所述的***，其特征在于，所述取值设置区域通过增加单文件组件设置所述配置项的取值。

11.如权利要求1所述的***，其特征在于，所述配置管理模块具体用于增加、删除、修改所述公共组件UI界面的配置项的取值。

12.应用上述权利要求1-11任意一项配置***进行公共组件UI界面的配置方法，其特征在于，包括：

组件方利用项目管理模块设置公共组件UI界面的配置项，所述配置项采用多层级的配置方式；

业务方获取所述组件方设置的所述公共组件UI界面的配置项，利用配置管理模块设置所述公共组件UI界面的配置项的取值，并根据所述配置管理模块展示的所述公共组件UI界面的效果图，确定所述公共组件UI界面。

13.如权利要求12所述的方法，其特征在于，所述配置项采用多层级的配置方式，包括：

所述配置项的层级从高到低包括：全局、页面组、页面、页面模块，所述全局包括至少一个所述页面组，所述页面组包括至少一个所述页面，所述页面包括至少一个所述页面模块。

14.如权利要求12所述的方法，其特征在于，所述组件方利用项目管理模块配置公共组件UI界面的配置项，包括：

所述组件方利用所述项目管理模块增加、删除、修改所述配置项。

15.如权利要求12所述的方法，其特征在于，所述方法还包括：所述组件方利用所述项目管理模块增加或删除公共组件。

16.一种用于公共组件UI界面的配置的电子设备，其特征在于，包括处理器以及用于存储处理器可执行指令的存储器，所述处理器执行所述指令时实现如权利要求12至15中任意一项所述方法的步骤。

Images