CN110083356B - 组件样式同步方法、装置及服务器 - Google Patents

Abstract

本申请提供的组件样式同步方法、装置及服务器，通过选取一Vue组件作为源组件，并获取该源Vue组件的属性项。将该源Vue组件的属性项和目标Vue组件的属性项进行比较，确定出相同的属性项。并将相同属性项在源Vue组件中的参数同步至该目标Vue组件中。如此，用户不用对每个Vue组件进行单独配置，提高了工作效率。

Description

组件样式同步方法、装置及服务器

技术领域

本申请涉及互联网领域，具体而言，涉及一种组件样式同步方法、装置及服务器。

背景技术

Web中的组件作为Web页面组成的一部分，具有独立的逻辑、功能和界面。同时，可根据规定的接口规则进行相互融合，使之变成完整的应用。然而，将多个组件融合成完整的应用时，需要对各个组件进行样式的单独配置，需要耗费开发人员大量的时间。

发明内容

为了克服现有技术中的至少一个不足，本申请的目的之一在于提供一种组件样式同步方法，应用于数据处理设备，所述方法包括：

获取源Vue组件的属性项和目标Vue组件的属性项，并进行比较；

确定出所述源Vue组件和所述目标Vue组件中相同的属性项；

将所述相同的属性项在所述源Vue组件中的参数同步至所述目标Vue组件中。

可选地，在所述目标Vue组件为多个时，所述方法还包括：

根据所述源Vue组件的属性项遍历多个所述目标Vue组件的属性项；

将所述目标Vue组件中拥有与所述源Vue组件相同属性项的目标Vue组件进行标记。

可选地，所述获取源Vue组件的属性项和目标Vue组件的属性项的步骤包括：

提供一显示界面，所述显示界面显示有多个标识，每个所述标识对应有相应的Vue组件；

响应用户源标识选取操作，将用户选中的标识作为源标识；

响应用户目标标识选取操作，将用户选中的标识作为目标标识；

根据所述源标识和所述目标标识确定出对应的源Vue组件和目标Vue组件，并获取所述源Vue组件和所述目标Vue组件的属性项。

可选地，所述Vue组件包括对应的属性配置文件，所述获取所述源Vue组件和所述目标Vue组件的属性项的步骤包括：

根据所述源Vue组件和所述目标Vue组件对应的属性配置文件，获取所述源Vue组件和所述目标Vue组件的属性项。

可选地，所述方法还包括：

响应用户多目标标识选取操作，通过所述源标识对应的源Vue组件的参数同步到用户选中的多个目标标识对应的目标Vue组件中。

本实施例的另一目的在于提供一种组件样式同步装置，应用于数据处理设备，所述组件样式同步装置包括获取模块、确定模块和第一同步模块；

所述获取模块用于获取源Vue组件的属性项和目标Vue组件的属性项，并进行比较；

所述确定模块用于确定出所述源Vue组件和所述目标Vue组件中相同的属性项；

所述第一同步模块用于将所述相同的属性项在所述源Vue组件中的参数同步至所述目标Vue组件中。

可选地，在所述目标Vue组件为多个时，所述组件样式同步装置还包括遍历模块和标记模块；

所述遍历模块用于根据所述源Vue组件的属性项遍历多个所述目标Vue组件的属性项；

所述标记模块用于将所述目标Vue组件中拥有与所述源Vue组件相同属性项的目标Vue组件进行标记。

可选地，获取模块通过以下方式获取源Vue组件的属性项和目标Vue组件的属性项：

提供一显示界面，所述显示界面显示有多个标识，每个所述标识对应有相应的Vue组件；

响应用户源标识选取操作，将用户选中的标识作为源标识；

响应用户目标标识选取操作，将用户选中的标识作为目标标识；

根据所述源标识和所述目标标识确定出对应的源Vue组件和目标Vue组件，并获取所述源Vue组件和所述目标Vue组件的属性项。

可选地，所述组件样式同步装置还包括第二同步模块；

所述第二同步模块用于响应用户多目标标识选取操作，通过所述源标识对应的源Vue组件的参数同步到用户选中的多个目标标识对应的目标Vue组件中。

本申请实施例的另一目的在于提供一种服务器，所述服务器存储有预设网页文件，当所述服务器获取到数据处理设备发送的获取请求时，将所述预设网页文件发送给所述数据处理设备，使得所述数据处理设备运行所述网页文件时，实现如所述组件样式同步方法。

相对于现有技术而言，本申请具有以下有益效果：

本申请实施例提供的组件样式同步方法、装置及服务器，通过选取一Vue组件作为源组件，并获取该源Vue组件的属性项。将该源Vue组件的属性项和目标Vue组件的属性项进行比较，确定出相同的属性项。并将相同属性项在源Vue组件中的参数同步至该目标Vue组件中。如此，用户不用对每个Vue组件进行单独配置，提高了工作效率。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本申请实施例提供的数据处理设备的硬件结构图；

图2为本申请实施例提供的组件样式同步方法的步骤流程图；

图3为本申请实施例提供的源Vue组件与目标Vue组件属性样式对比图；

图4为本申请实施例提供的组件样式同步装置结构图之一；

图5为本申请实施例提供的组件样式同步装置结构图之二。

图标：100-数据处理设备；130-处理器；110-组件样式同步装置；120-存储器；500-源Vue组件；600-目标Vue组件；1101-获取模块；1102-确定模块；1103-第一同步模块；1104-遍历模块；1105-标记模块；1106-第二同步模块。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

在本申请的描述中，需要说明的是，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

请参照图1，图1是本申请实施例提供的数据处理设备100的硬件结构图，该数据处理设备100包括组件样式同步装置110、存储器120和处理器130。所述存储器120和处理器各元件相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。所述组件样式同步装置110包括至少一个可以软件或固件(firmware)的形式存储于所述存储器120中或固化在所述服务器100的操作系统(operating system，OS)中的软件功能模块。所述处理器130用于执行所述存储器120中存储的可执行模块，例如所述组件样式同步装置110所包括的软件功能模块及计算机程序等。

其中，该数据处理设备100可以是，但不限于，智能手机、个人电脑(personalcomputer，PC)、平板电脑、个人数字助理(personal digital assistant，PDA)、移动上网设备(mobile Internet device，MID)等。

其中，所述存储器120可以是，但不限于，随机存取存储器(Random AccessMemory，RAM)，只读存储器(Read Only Memory，ROM)，可编程只读存储器(ProgrammableRead-Only Memory，PROM)，可擦除只读存储器(Erasable Programmable Read-OnlyMemory，EPROM)，电可擦除只读存储器(Electric Erasable Programmable Read-OnlyMemory，EEPROM)等。其中，存储器120用于存储程序，所述处理器130在接收到执行指令后，执行所述程序。所述通信单元140用于通过所述网络300建立所述服务器100与用户终端200之间的通信连接，并用于通过所述网络300收发数据。

所述处理器130可能是一种集成电路芯片，具有信号的处理能力。上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

请参照图2，图2为应用于图1所示数据处理设备100的组件样式同步方法的步骤流程图，下面就该组件样式同步方法各个步骤进行详细阐述。

步骤S100，获取源Vue组件的属性项和目标Vue组件的属性项，并进行比较。

可选地，该数据处理设备100提供一显示界面，该显示界面显示有多个组件标识。每一个组件标识对应有相应的Vue组件。例如，在一种可能的示例中，该Vue组件包括文本组件、图文组件、树组件和GIS组件等。其中，该文本组件用于展示文本；该图片组件用于展示图标；该树形组件用于展示数据结构；该GIS组件用于展示地理位置信息。

该数据处理设备100用户的标识选取请求，将用户选中的标识显示到该显示界面的预设区域。其中，用户可以通过拖拽的方式，将用户选中的Vue组件标识拖拽到该预设区域中。每一个标识拥有该标识对应组件的属性项。例如，在一种可能的示例中，该属性项包括公共属性项和特殊属性项。该公共属性项包括组件的宽、高、颜色、阴影、字体和边框样式。针对图表组件的特殊属性项包括坐标轴、文本属性、图例样式和提示信息。

该数据处理设备100响应用户选取操作和对该选中的标识的配置操作，完成对用户选中的标识的配置行为，并记录各个属性项的配置参数。该数据处理设备100响应用户的源Vue组件选取操作和目标Vue组件的选取操作，确定出源Vue组件和目标Vue组件。

步骤S200，确定出所述源Vue组件和所述目标Vue组件中相同的属性项。

可选地，每一Vue组件通过以配置文件记录该组件的各个属性项和该属性项对应的参数。例如，在一种可能的示例中，通过JavaScript的数组记录Vue组件的参数项和对应的参数：

其中，“type”代表一个属性项，其他的参数表示该属性项的参数名称和参数值。

该数据处理设备100根据该源Vue组件和该目标Vue组件的配置文件获得相应的属性项，并对源Vue组件和目标Vue组件的属性项进行比较，找出相同的属性项。

步骤S300，将所述相同的属性项在所述源Vue组件中的参数同步至所述目标Vue组件中。

该数据处理设备100将该相同的属性项在源Vue组件中的参数同步至目标Vue中。例如，请参照图3，在一种可能的实例中，该源Vue组件500包括属性项A、属性项B、属性项C和属性项D；该目标Vue组件600包括属性项A、属性项B、属性项S、属性项M和属性项X；则相同的属性项为属性项A和属性项B。该数据处理设备100将源Vue组件500中的属性项A和属性项B中的参数同步至目标Vue组件600的属性项A和属性项B。

如此，使得用户不在需要对Vue组件的每一个属性项进行一一配置，只需要将源Vue组件500的样式属性项同步至目标Vue组件600的属性项即可，提高了工作效率。

可选地，在目标Vue组件600为多个时，为了提醒用户哪些目标Vue组件600同源Vue组件500拥有相同的属性项，使得用户避免对没有相同属性项的Vue组件进行无效操作。该数据处理设备100根据源Vue组件500的属性项对各个目标Vue组件600进行遍历操作，若目标Vue组件600同该源Vue组件500拥有相同的属性项，则对该目标Vue组件600进行标记。其中，该标记的方式包括对该目标Vue组件600进行突出显示。例如，在一种可能的示例中，将目标Vue组件600和源Vue相同的属性项的数量进行显示。

可选地，该数据处理设备100响应用户多目标标识选取操作，通过所述源标识对应的源Vue组件500的参数同步到用户选中的多个目标标识对应的目标Vue组件600中。即用户一起选取多个目标标识，该数据处理设备100根据源Vue组件500的属性项，一次对多个目标标识对应的Vue组件进行样式的同步。

值得说明是，该Vue组件基于Vue.js开发。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和视图组件的绑定，使得数据和视图关联。进而屏蔽掉底层对网页繁琐的DOM(Document Object Model，文档对象模型)操作。使得技术人员只需要关注具体的业务，降低开发难度。

本申请实施例还提供一种组件样式同步装置110，请参照图4，该组件样式同步装置110从功能上划分，包括获取模块1101、确定模块1102和第一同步模块1103；

该获取模块1101用于获取源Vue组件500的属性项和目标Vue组件600的属性项，并进行比较。

在本实施例中，该获取模块1101用于执行图2中的步骤S100，关于该获取模块1101的详细描述，可以参考步骤S100的详细描述。

该确定模块1102用于确定出所述源Vue组件500和所述目标Vue组件600中相同的属性项。

在本实施例中，该确定模块1102用于执行图2中的步骤S200，关于该确定模块1102的详细描述可以参考步骤S200的详细描述。

该第一同步模块1103用于将所述相同的属性项在所述源Vue组件500中的参数同步至所述目标Vue组件600中。

在本实施例中，该第一同步模块1103用于执行图2中的步骤S300，关于该第一同步模块1103的详细描述可以参考步骤S300的详细描述。

可选地，请参照图5，在所述目标Vue组件600为多个时，所述组件样式同步装置110还包括遍历模块1104和标记模块1105：

所述遍历模块1104用于根据所述源Vue组件500的属性项遍历多个所述目标Vue组件600的属性项；

所述标记模块1105用于将所述目标Vue组件600中拥有与所述源Vue组件500相同属性项的目标Vue组件600进行标记。

可选地，获取模块1101通过以下方式获取源Vue组件500的属性项和目标Vue组件600的属性项：

提供一显示界面，所述显示界面显示有多个标识，每个所述标识对应有相应的Vue组件；

响应用户源标识选取操作，将用户选中的标识作为源标识；

响应用户目标标识选取操作，将用户选中的标识作为目标标识；

根据所述源标识和所述目标标识确定出对应的源Vue组件500和目标Vue组件600，并获取所述源Vue组件500和所述目标Vue组件600的属性项。

请再次参照图5，所述组件样式同步装置110还包括第二同步模块1106；

所述第二同步模块1106用于响应用户多目标标识选取操作，通过所述源标识对应的源Vue组件500的参数同步到用户选中的多个目标标识对应的目标Vue组件600中。

本申请还提供一种服务器，所述服务器存储有预设网页文件，当所述服务器获取到数据处理设备100发送的获取请求时，将所述预设网页文件发送给所述数据处理设备100，使得所述数据处理设备100运行所述网页文件时，实现所述组件样式同步方法。

综上所述，本申请实施例提供的组件样式同步方法、装置及服务器，通过选取一Vue组件作为源组件，并获取该源Vue组件的属性项。将该源Vue组件的属性项和目标Vue组件的属性项进行比较，确定出相同的属性项。并将相同属性项在源Vue组件中的参数同步至该目标Vue组件中。如此，用户不用对每个Vue组件进行单独配置，提高了工作效率。

在本申请所提供的实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本申请的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述，仅为本申请的各种实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应所述以权利要求的保护范围为准。

Claims (4)

1.一种组件样式同步方法，其特征在于，应用于数据处理设备，所述方法包括：

提供一显示界面，所述显示界面显示有多个标识，每个所述标识对应有相应的Vue组件；

响应用户源标识选取操作，将用户选中的标识作为源标识；

根据所述源标识确定出对应的源Vue组件，获取所述源Vue组件的属性项；

根据所述源Vue组件的属性项遍历所述显示界面中的其他标识所对应的组件，将与所述源Vue组件具有相同属性项的组件所对应的标识进行标记；

响应用户目标标识选取操作，将用户选中的标识作为目标标识，其中，所述目标标识对应目标Vue组件；

获取所述源Vue组件的属性项和所述目标Vue组件的属性项，并进行比较；

确定出所述源Vue组件和所述目标Vue组件中相同的属性项；

将所述相同的属性项在所述源Vue组件中的参数同步至所述目标Vue组件中。

2.根据权利要求1所述的组件样式同步方法，其特征在于，所述Vue组件包括对应的属性配置文件，所述获取所述源Vue组件的属性项和所述目标Vue组件的属性项的步骤包括：

根据所述源Vue组件和所述目标Vue组件对应的属性配置文件，获取所述源Vue组件和所述目标Vue组件的属性项。

3.一种组件样式同步装置，其特征在于，应用于数据处理设备，所述组件样式同步装置包括获取模块、确定模块和第一同步模块；

所述获取模块，用于提供一显示界面，所述显示界面显示有多个标识，每个所述标识对应有相应的Vue组件；

响应用户源标识选取操作，将用户选中的标识作为源标识；

根据所述源标识确定出对应的源Vue组件，获取所述源Vue组件的属性项；

根据所述源Vue组件的属性项遍历所述显示界面中的其他标识所对应的组件，将与所述源Vue组件具有相同属性项的组件所对应的标识进行标记；

响应用户目标标识选取操作，将用户选中的标识作为目标标识，其中，所述目标标识对应目标Vue组件；

所述获取模块，还用于获取所述源Vue组件的属性项和所述目标Vue组件的属性项，并进行比较；

所述确定模块用于确定出所述源Vue组件和所述目标Vue组件中相同的属性项；

所述第一同步模块用于将所述相同的属性项在所述源Vue组件中的参数同步至所述目标Vue组件中。

4.一种服务器，其特征在于，所述服务器存储有预设网页文件，当所述服务器获取到数据处理设备发送的获取请求时，将所述预设网页文件发送给所述数据处理设备，使得所述数据处理设备运行所述网页文件时，实现如权利要求1-2中任一项所述的组件样式同步方法。

Images