CN114676371A - 页面的元素信息替换方法、装置、计算机设备及存储介质 - Google Patents

Abstract

本申请实施例公开了一种页面的元素信息替换方法、装置、计算机设备及存储介质。设计师可以在模拟出目标页面的浏览器上提交目标页面中想要修改的目标页面元素的页面元素更新数据，浏览器可以与运行目标页面的服务器进行交互，根据设计师上传的页面元素更新数据替换目标页面上的目标页面元素的元素显示内容，并且设计师可以在浏览器上看到更新后页面，确定提交的页面元素更新数据是否适用目标页面，以及根据提交的页面元素更新数据进行页面元素更新后的更新后页面是否满足预期效果，从而不需要与技术人员沟通即可得到符合目标页面更新后预期的页面元素资源文件，减少了页面开发成本。

Description

页面的元素信息替换方法、装置、计算机设备及存储介质

技术领域

本申请涉及通信技术领域，具体涉及一种页面的元素信息替换方法、装置、计算机设备及存储介质。

背景技术

在需要替换页面中的页面元素(例如，页面图片、页面按钮等等)的项目中，当页面的页面元素需要替换时，设计页面元素的设计师需要向技术人员提供新的页面元素资源，以使技术人员将新的页面元素资源导入到页面的项目代码中，从而实现页面的元素替换。然而无论是设计师先提供新的页面元素资源，技术人员按照新的页面元素资源替换页面元素生成更新后页面，还是技术人员先把页面原有的页面元素资源打包一份给设计师，设计师按照已有的页面元素资源进行修改，再把修改后新的页面元素资源提供给技术人员，技术人员按照新的页面元素资源替换页面元素生成更新后页面，都会经常出现新的页面元素资源不适用页面、或不满足预期效果等的情况，技术人员需要和设计师反复沟通，增加了页面开发成本。

发明内容

本申请实施例提供一种页面的元素信息替换方法、装置、计算机设备及存储介质，设计师可以在模拟出目标页面的浏览器上看到更新后页面，从而不需要与技术人员沟通即可得到符合目标页面更新后预期的页面元素资源文件，减少了页面开发成本。

本申请实施例提供一种页面的元素信息替换方法，包括：

接收通过前端浏览器上传的针对目标页面的页面元素更新数据，所述前端浏览器当前显示有模拟出的所述目标页面，所述页面元素更新数据包括所述目标页面上目标页面元素的元素替换数据以及在服务器中所述目标页面元素对应的元素查找信息；

根据所述元素查找信息在运行于所述服务器上的所述目标页面的页面相关数据中确定所述目标页面元素的当前元素数据；

利用所述元素替换数据替换对应的所述当前元素数据，形成所述目标页面的更新后数据；

根据所述更新后数据向所述前端浏览器发送页面替换信息，以使所述前端浏览器根据所述页面替换信息替换所述目标页面上的目标页面元素的元素显示内容。

相应地，本申请实施例还提供一种页面的元素信息替换方法，应用于前端浏览器，包括：

通过所述前端浏览器提供用于管理页面元素的用户界面，所述用户界面包括模拟出的目标页面；

响应于通过所述用户界面触发的针对所述目标页面的元素数据更新操作，确定针对所述目标页面的页面元素更新数据，所述页面元素更新数据包括所述目标页面上目标页面元素的元素替换数据以及在服务器中所述目标页面元素对应的元素查找信息；

将所述页面元素更新数据上传至所述前端浏览器对应的所述服务器，以使所述服务器根据所述页面元素更新数据更新所述目标页面的页面相关数据中目标页面元素的当前元素数据，形成所述目标页面的更新后数据；

接收所述服务器根据所述更新后数据发送的页面替换信息；

根据所述页面替换信息替换所述目标页面上的目标页面元素的元素显示内容，显示更新后页面。

相应的，本申请实施例还提供一种页面的元素信息替换装置，包括：

第一接收单元，用于接收通过前端浏览器上传的针对目标页面的页面元素更新数据，所述前端浏览器当前显示有模拟出的所述目标页面，所述页面元素更新数据包括所述目标页面上目标页面元素的元素替换数据以及在服务器中所述目标页面元素对应的元素查找信息；

第一确定单元，用于根据所述元素查找信息在运行于所述服务器上的所述目标页面的页面相关数据中确定所述目标页面元素的当前元素数据；

替换单元，用于利用所述元素替换数据替换对应的所述当前元素数据，形成所述目标页面的更新后数据；

发送单元，用于根据所述更新后数据向所述前端浏览器发送页面替换信息，以使所述前端浏览器根据所述页面替换信息替换所述目标页面上的目标页面元素的元素显示内容。

可选的，所述第一接收单元还用于：

接收通过所述前端浏览器分片上传的针对所述目标页面的多个压缩页面元素更新数据；

获取各所述压缩页面元素更新数据的索引，根据所述索引依次合并各所述压缩页面元素更新数据，形成目标压缩文件；

解压所述目标压缩文件，形成针对所述目标页面的所述页面元素更新数据。

可选的，所述页面元素更新数据为所述目标页面的更新后元素资源文件，所述更新后元素资源文件包括所述目标页面的全部页面元素的资源文件；

所述第一确定单元还用于：

根据所述元素查找信息在所述服务器上确定所述目标页面的全部页面元素的当前资源文件为所述目标页面元素的所述当前元素数据；

所述替换单元还用于：

利用所述元素替换数据替换所述目标页面的所述当前资源文件，形成所述目标页面的所述更新后数据。

可选的，所述装置还用于：

遍历所述目标页面的页面相关数据，获取所述目标页面中的各页面元素对应的元素标识数据和各所述页面元素在所述服务器中对应的元素定位数据；

根据所述元素标识数据和所述元素定位数据，形成所述目标页面中各所述页面元素的页面元素记录信息。

可选的，所述页面元素更新数据包括所述目标页面的至少部分页面元素的更新后资源文件；

所述第一接收单元还用于：

根据所述元素查找信息和所述页面元素记录信息中的元素定位数据，获取所述元素替换数据对应的候选元素标识数据；

为所述候选元素标识数据添加更新标识，以使所述前端浏览器根据所述更新标识在所述目标页面的更新后页面中标记所述候选元素标识数据对应的页面元素。

可选的，所述页面元素更新数据包括所述目标页面的全部页面元素的更新后资源文件；

所述第一接收单元还用于：

根据所述元素查找信息和所述元素定位数据，分别在所述元素替换数据和所述页面相关数据中获取同一目标页面元素对应的目标元素替换数据和目标当前元素数据；

对比所述目标元素替换数据的第一数据标识信息，和所述目标当前元素数据的第二数据标识信息；

若所述第一数据标识信息和所述第二数据标识信息不同，确定所述目标页面元素为待替换的页面元素；

为所述待替换的页面元素添加更新标识，以使所述前端浏览器根据所述更新标识在所述目标页面的更新后页面中标记所述待替换的页面元素。

可选的，所述发送单元还用于：

获取形成所述目标页面的当前代码文件；

根据所述更新后数据更新所述当前代码文件，形成更新后代码文件；

编译所述更新后代码文件，生成编译后文件；

向所述前端浏览器发送生成的所述编译后文件，以使所述前端浏览器根据所述编译后文件替换所述目标页面上的目标页面元素的元素显示内容。

相应的，本申请实施例还提供一种页面的元素信息替换装置，应用于前端浏览器，包括：

模拟单元，用于通过所述前端浏览器提供用于管理页面元素的用户界面，所述用户界面包括模拟出的目标页面；

第二确定单元，用于响应于通过所述用户界面触发的针对所述目标页面的元素数据更新操作，确定针对所述目标页面的页面元素更新数据，所述页面元素更新数据包括所述目标页面上目标页面元素的元素替换数据以及在服务器中所述目标页面元素对应的元素查找信息；

上传单元，用于将所述页面元素更新数据上传至所述前端浏览器对应的所述服务器，以使所述服务器根据所述页面元素更新数据更新所述目标页面的页面相关数据中目标页面元素的当前元素数据，形成所述目标页面的更新后数据；

第二接收单元，用于接收所述服务器根据所述更新后数据发送的页面替换信息；

显示单元，用于根据所述页面替换信息替换所述目标页面上的目标页面元素的元素显示内容，显示更新后页面。

可选的，所述用户界面还包括元素修改子页面，所述元素修改子页面包括所述目标页面中页面元素的元素标识：

所述第二确定单元还用于：

根据目标用户在所述元素修改子页面上触发的针对目标页面元素的数据修改操作，获取所述目标用户执行所述数据修改操作时上传的数据，作为所述目标页面元素的元素替换数据；

响应于针对所述元素修改子页面的数据上传确认操作，基于所述目标页面元素的元素查找信息以及所述元素替换数据生成所述目标页面的所述页面元素更新数据。

可选的，所述第二确定单元还用于：

根据目标用户在所述用户界面上触发的元素批量更新操作，从所述服务器中获取所述目标页面的全部页面元素的资源文件；

根据所述目标用户在所述用户界面上触发的数据上传操作，获取所述目标用户上传的根据所述资源文件修改的更新后元素资源文件，作为所述页面元素更新数据。

同样的，本申请实施例还提供一种计算机设备，包括：

存储器，用于存储计算机程序；

处理器，用于在执行所述页面的元素信息替换方法任一项的步骤。

此外，本申请实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现所述页面的元素信息替换方法任一项的步骤。

本申请实施例提供一种页面的元素信息替换方法、装置、计算机设备及存储介质，设计师可以在模拟出目标页面的浏览器上提交目标页面中想要修改的目标页面元素的页面元素更新数据，浏览器可以与运行目标页面的服务器进行交互，根据设计师上传的页面元素更新数据替换目标页面上的目标页面元素的元素显示内容，并且设计师可以在浏览器上看到更新后页面，确定提交的页面元素更新数据是否适用目标页面，以及根据提交的页面元素更新数据进行页面元素更新后的更新后页面是否满足预期效果，从而不需要与技术人员沟通即可得到符合目标页面更新后预期的页面元素资源文件，减少了页面开发成本。

附图说明

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

图1是本申请实施例提供的页面的元素信息替换装置的系统示意图；

图2是本申请实施例提供的页面的元素信息替换方法的流程示意图；

图3是本申请实施例提供的页面的元素信息替换方法的另一流程示意图；

图4是本申请实施例提供的元素修改子页面的示意图；

图5是本申请实施例提供的页面的元素信息替换方法的操作流程图；

图6是本申请实施例提供的服务器资源替换流程图；

图7是本申请实施例提供的页面的元素信息替换装置的结构示意图；

图8是本申请实施例提供的页面的元素信息替换装置的另一结构示意图；

图9是本申请实施例提供的计算机设备的结构示意图。

具体实施方式

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

本申请实施例提供一种页面的元素信息替换方法、装置、计算机设备及存储介质。具体地，本申请实施例的页面的元素信息替换方法可以由计算机设备执行，其中，该计算机设备可以为终端或者服务器等设备。该终端可以为智能手机、平板电脑、笔记本电脑、触控屏幕、游戏机、个人计算机(Personal Computer，PC)、个人数字助理(Personal DigitalAssistant，PDA)等终端设备，终端还可以包括客户端，该客户端可以是游戏应用客户端、携带有游戏程序的前端浏览器客户端或即时通信客户端等。服务器可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络服务、以及大数据和人工智能平台等基础云计算服务的云服务器。

请参阅图1，图1为本申请实施例提供的页面的元素信息替换装置的系统示意图。该系统可以包括至少一个终端和至少一个服务器。用户持有的终端可以通过网络连接到服务器，例如，网络可以为无线网络或者有线网络，无线网络可以为无线局域网(WLAN)、局域网(LAN)、蜂窝网络、2G网络、3G网络、4G网络、5G网络等，终端上安装有前端浏览器，终端上的前端浏览器用于通过前端浏览器提供用于管理页面元素的用户界面，用户界面包括模拟出的目标页面；响应于通过用户界面触发的针对目标页面的元素数据更新操作，确定针对目标页面的页面元素更新数据，页面元素更新数据包括目标页面上目标页面元素的元素替换数据以及在服务器中目标页面元素对应的元素查找信息；将页面元素更新数据上传至前端浏览器对应的服务器，以使服务器根据页面元素更新数据更新目标页面的页面相关数据中目标页面元素的当前元素数据，形成目标页面的更新后数据；接收服务器根据更新后数据发送的页面替换信息；根据页面替换信息替换目标页面上的目标页面元素的元素显示内容，显示更新后页面。

与终端对应的服务器用于接收通过前端浏览器上传的针对目标页面的页面元素更新数据，前端浏览器当前显示有模拟出的目标页面，页面元素更新数据包括目标页面上目标页面元素的元素替换数据以及在服务器中目标页面元素对应的元素查找信息；根据元素查找信息在运行于服务器上的目标页面的页面相关数据中确定目标页面元素的当前元素数据；利用元素替换数据替换对应的当前元素数据，形成目标页面的更新后数据；根据更新后数据向前端浏览器发送页面替换信息，以使前端浏览器根据页面替换信息替换目标页面上的目标页面元素的元素显示内容。

以下分别进行详细说明。需说明的是，以下实施例的描述顺序不作为对实施例优选顺序的限定。

本实施例将从页面的元素信息替换装置的角度进行描述，该页面的元素信息替换装置具体可以集成在服务器中，该服务器可以包括独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统等。

本申请实施例提供的一种页面的元素信息替换方法，该方法可以由服务器的处理器执行，如图2所示，该页面的元素信息替换方法的具体流程主要包括步骤201至步骤204，详细说明如下：

步骤201、接收通过前端浏览器上传的针对目标页面的页面元素更新数据，前端浏览器当前显示有模拟出的目标页面，页面元素更新数据包括目标页面上目标页面元素的元素替换数据以及在服务器中目标页面元素对应的元素查找信息。

在本申请实施例中，可以搭建作为运行目标页面的载体的服务器，服务器可以利用Node.js(基于Chrome V8引擎的JavaScript运行环境)以及Express(基于Node.js平台，快速、开放、极简的Web开发框架)进行搭建服务器，为了使得前端浏览器与服务器之间可以相互通信，可以在前端浏览器与服务器之间建立通信机制(例如，websocket和/或tcp等)。为了及时确定目标页面的页面相关数据发生变化，可以在服务器中运行的目标页面的项目代码文件中添加webpack，webpack首次编译后使用node express框架启动服务器本地server，让浏览器可以请求服务器本地的目标页面相关的静态资源，本地server启动之后，才去启动websocket服务，从而可以建立本地服务和浏览器的双向通信。

在本申请实施例中，目标页面为需要替换页面元素的页面，目标页面可以是一个网页页面，也可以是一个项目中的多个网页页面。其中，页面元素是组成目标页面的元素，例如，页面元素可以是目标页面的图片、控件、字体等等。

在本申请实施例中，页面元素更新数据是更新是用于更新目标页面中的目标页面元素的相关数据，例如，页面元素更新数据可以是目标页面中的需要替换的图片资源和该图片在服务器中的查找信息。

在本申请实施例中，目标用户(例如，提供更新的元素资源文件的设计师)通过前端浏览器上传针对目标页面的页面元素更新数据时，如果上传的页面元素更新数据的数据量较大，即当数据包比上传链路的最大传输单元大时，可以将页面元素更新数据分片上传到服务器中，即将数据包分成多个数据碎片，为了使得服务器接收到分片上传的数据后能够还原成原有的数据，所以服务器需要获取分片上传的数据的顺序，具体地，上述步骤201中“接收通过前端浏览器上传的针对目标页面的页面元素更新数据”可以是：

接收通过前端浏览器分片上传的针对目标页面的多个压缩页面元素更新数据；

获取各压缩页面元素更新数据的索引，根据索引依次合并各压缩页面元素更新数据，形成目标压缩文件；

解压目标压缩文件，形成针对目标页面的页面元素更新数据。

在本申请实施例中，为了使得数据传输时间较快，可以将分片上传的数据进行压缩。

在本申请实施例中，索引是对数据进行排序的一种数据结构，前端浏览器获得目标用户上传的页面元素更新数据之后，可以将压缩后的页面元素更新数据进行分片，得到多个压缩页面元素更新数据，并且将多个压缩页面元素更新数据按照索引的方式进行排序，当服务器接收到所有压缩页面元素更新数据后，使用node创建可读流读取上传过来的压缩页面元素更新数据，创建可写流，按照压缩页面元素更新数据的索引依次合并多个压缩页面元素更新数据，得到页面元素更新数据压缩后的目标压缩文件。进一步地，服务器使用第三方库node-stream-zip解压压缩文件，得到解压后的页面元素更新数据。

步骤202、根据元素查找信息在运行于服务器上的目标页面的页面相关数据中确定目标页面元素的当前元素数据。

在本申请实施例中，元素查找信息可以确定是目标页面的页面相关数据在服务器中的存储位置的信息，目标页面的页面相关数据可以是在服务器中运行目标页面所需的所有数据，例如，页面相关数据可以是目标页面中的图片数据(图片文件地址、图片大小等属性信息)、控件数据(按钮形状、按钮颜色等等属性信息)和/或文字数据(字体大小、字体类型等等)。元素查找信息可以是图片数据的路径信息、控件数据所属的配置文件信息以及控件数据在配置文件中的具体位置信息等等。此外，当目标页面元素是图片时，目标页面元素的当前元素数据可以是对应的图片数据。

在本申请实施例中，当需要替换的目标页面元素较多时，为了避免服务器查找多个目标页面元素需要替换的当前元素数据并进行替换，减少服务器替换所需的时间和资源，页面元素更新数据可以包括目标页面的全部页面元素的更新后资源文件，此时可以直接替换目标页面的全部页面元素的当前资源文件，加快资源替换过程。具体地，当页面元素更新数据为目标页面的更新后元素资源文件，更新后元素资源文件包括目标页面的全部页面元素的更新后资源文件；上述步骤202中“根据元素查找信息在运行于服务器上的目标页面的页面相关数据中确定目标页面元素的当前元素数据”可以是：根据元素查找信息在服务器上确定目标页面的全部页面元素的当前资源文件为目标页面元素的当前元素数据。

在本申请实施例中，当替换的目标页面元素较少时，目标用户可以直接上传需要替换的目标页面元素的页面元素更新数据，服务器接收到页面元素更新数据后，可以直接根据其中的元素查找信息确定目标页面元素的当前元素数据。

步骤203、利用元素替换数据替换对应的当前元素数据，形成目标页面的更新后数据。

在本申请实施例中，当页面元素更新数据可以包括目标页面的全部页面元素的更新后资源文件时，上述步骤203中“利用元素替换数据替换对应的当前元素数据，形成目标页面的更新后数据”可以是：利用元素替换数据替换目标页面的当前资源文件，形成目标页面的更新后数据。

在本申请实施例中，当页面元素更新数据包括目标页面的少量页面元素的更新后资源文件时，直接将上传的页面元素更新数据中的元素替换数据替换查找到的目标页面元素的当前元素数据，形成目标页面的更新后数据。

步骤204、根据更新后数据向前端浏览器发送页面替换信息，以使前端浏览器根据页面替换信息替换目标页面上的目标页面元素的元素显示内容。

在本申请实施例中，当生成更新后数据后，上述步骤204中“根据更新后数据向前端浏览器发送页面替换信息，以使前端浏览器根据页面替换信息替换目标页面上的目标页面元素的元素显示内容”具体可以是：

获取形成目标页面的当前代码文件；

根据更新后数据更新当前代码文件，形成更新后代码文件；

编译更新后代码文件，生成编译后文件；

向前端浏览器发送生成的编译后文件，以使前端浏览器根据编译后文件替换目标页面上的目标页面元素的元素显示内容。

在本申请实施例中，为了及时确定目标页面的页面相关数据发生变化，可以在服务器中运行的目标页面的项目代码文件中添加webpack，webpack支持HMR(Hot ModuleReplacement，热模块替换)，技术人员可以使用webpack内置的webpack-dev-server开启HMR功能，使得模拟显示目标页面的浏览器可以在不刷新浏览器的情况下更新浏览器效果。在服务器中初始化目标页面的项目代码文件时，使用shell命令执行项目脚手架的运行项目指令开启webpack–watch监听模式，webpack第一次编译项目代码文件，将结果存储在服务器的内存文件系统。webpack监听到目标页面的页面相关数据发生变化后，对目标页面的项目代码文件重新编译打包，每次编译生成唯一的hash值，根据变化的内容生成两个补丁文件：描述变化内容的manifest(文件格式是hash.hot-update.json，包含了hash和chunkid)和chunkjs模块。HMR Server通过websocket将manifest推送给浏览器。浏览器端HMR Runtime根据manifest的hash和chunkid使用ajax拉取最新的模块chunk，触发render流程实现局部热重载，从而替换目标页面上的目标页面元素的元素显示内容。

在本申请实施例中，可以在服务器中建立目标页面的全部页面元素的页面元素记录信息，用于记录全部页面元素的元素标识数据(区分不同页面元素的数据)、元素定位数据(即确定页面元素的当前元素数据在服务器中的存储的数据)和/或页面元素的当前元素数据等。具体地建立方法可以是：

遍历目标页面的页面相关数据，获取目标页面中的各页面元素对应的元素标识数据和各页面元素在服务器中对应的元素定位数据；

根据元素标识数据和元素定位数据，形成目标页面中各页面元素的页面元素记录信息。

在本申请实施例中，当获取页面元素的元素标识数据时，即可通过页面元素记录信息获取元素标识数据对应的页面元素的元素定位数据和当前元素数据等信息。

在本申请实施例中，为了可以使得目标用户(设计师等)可以从更新后页面中方便地得知哪些是替换后的页面元素，可以页面元素记录信息中对需要进行当前元素数据替换的页面元素添加更新标识，当浏览器从服务器中获取了页面元素记录信息后，可以根据更新标识确定更新后页面中替换后的页面元素，进一步在更新后页面中区别标记替换后的页面元素，更好地帮助设计师进行判断。由于页面元素更新数据可以是目标页面的至少部分页面元素的更新后资源文件，也可以是目标页面的全部页面元素的更新后资源文件，所以在页面元素记录信息中对需要进行当前元素数据替换的页面元素添加更新标识的方法不同。

在本申请实施例中，当页面元素更新数据包括目标页面的至少部分页面元素的更新后资源文件，可以表明页面元素更新数据是目标用户直接上传的需要更新的目标页面元素的更新后资源文件，则页面元素更新数据中的所有元素替换数据都用于替换目标页面的页面相关数据对应的当前元素数据，此时，可以找到页面更新元素数据对应的全部目标页面元素添加更新标识，具体地，在上述步骤201“接收通过前端浏览器上传的针对目标页面的页面元素更新数据”之后，还包括：

根据元素查找信息和页面元素记录信息中的元素定位数据，获取元素替换数据对应的候选元素标识数据；

为候选元素标识数据添加更新标识，以使前端浏览器根据更新标识在目标页面的更新后页面中标记候选元素标识数据对应的页面元素。

在本申请实施例中，当页面元素更新数据包括目标页面的全部页面元素的更新后资源文件时，可以表明页面元素更新数据是目标用户根据目标页面的全部页面元素最新的当前资源文件修改得到的，因为目标用户可能只修改了部分页面元素的当前元素数据，页面元素更新数据中的元素替换数据有一部分与目标页面的当前资源文件不同，有一部分与目标页面的当前资源文件相同。在添加更新标识时，需要预先判定哪些页面元素的当前元素数据需要替换，此时，上述步骤201“接收通过前端浏览器上传的针对目标页面的页面元素更新数据”之后，还包括：

根据元素查找信息和元素定位数据，分别在元素替换数据和页面相关数据中获取同一目标页面元素对应的目标元素替换数据和目标当前元素数据；

对比目标元素替换数据的第一数据标识信息，和目标当前元素数据的第二数据标识信息；

若第一数据标识信息和第二数据标识信息不同，确定目标页面元素为待替换的页面元素；

为待替换的页面元素添加更新标识，以使前端浏览器根据更新标识在目标页面的更新后页面中标记待替换的页面元素。

在本申请实施例中，为了得到准确的对比结果，目标元素替换数据的第一数据标识信息和目标当前元素数据的第二数据标识信息是同一类型的信息，例如，第一数据标识信息为目标元素替换数据的数据量大小，第二数据标识信息也为目标当前元素数据的数据量大小，第一数据标识信息为目标元素替换数据的哈希值时，第二数据标识信息也为目标当前元素数据的数据量大小。

在本申请实施例中，更新标识的形式不受限制，可以根据实际情况灵活设置，不同的页面元素对应的更新标识可以相同，也可以不同。

上述所有的技术方案，可以采用任意结合形成本申请的可选实施例，在此不再一一赘述。

本申请实施例提供的页面的元素信息替换方法，设计师可以在模拟出目标页面的浏览器上提交目标页面中想要修改的目标页面元素的页面元素更新数据，浏览器可以与运行目标页面的服务器进行交互，根据设计师上传的页面元素更新数据替换目标页面上的目标页面元素的元素显示内容，并且设计师可以在浏览器上看到更新后页面，确定提交的页面元素更新数据是否适用目标页面，以及根据提交的页面元素更新数据进行页面元素更新后的更新后页面是否满足预期效果，从而不需要与技术人员沟通即可得到符合目标页面更新后预期的页面元素资源文件，减少了页面开发成本。

本申请实施例提供的一种页面的元素信息替换方法，该方法可以由终端的浏览器执行，如图3所示，该页面的元素信息替换方法的具体流程主要包括步骤301至步骤305，详细说明如下：

步骤301、通过前端浏览器提供用于管理页面元素的用户界面，用户界面包括模拟出的目标页面。

在本申请实施例中，前端浏览器可以是由Vue3(渐进式JavaScript框架3.x版本)和Node.js(基于Chrome V8引擎的JavaScript运行环境)共同开发得到。用户界面中可以显示下载目标页面的当前资源文件的下载控件，上传页面元素更新数据的上传控件、和/或目标页面的页面元素的元素标识等信息。

步骤302、响应于通过用户界面触发的针对目标页面的元素数据更新操作，确定针对目标页面的页面元素更新数据，页面元素更新数据包括目标页面上目标页面元素的元素替换数据以及在服务器中目标页面元素对应的元素查找信息。

在本申请实施例中，用户界面还包括元素修改子页面，元素修改子页面包括目标页面中页面元素的元素标识，当目标用户想替换目标页面中少量的页面元素时，可以直接通过元素修改子页面选中对应的元素标识，并上传对应的页面元素更新数据，具体上述步骤302中“响应于通过用户界面触发的针对目标页面的元素数据更新操作，确定针对目标页面的页面元素更新数据”包括：

根据目标用户在元素修改子页面上触发的针对目标页面元素的数据修改操作，获取目标用户执行数据修改操作时上传的数据，作为目标页面元素的元素替换数据；

响应于针对元素修改子页面的数据上传确认操作，基于目标页面元素的元素查找信息以及元素替换数据生成目标页面的页面元素更新数据。

例如，如图4所示的元素修改子页面的示意图，元素修改子页面中可以包括目标页面中图片修改选项和样式修改选项，当目标用户想要修改目标页面中的图片时，可以触控想要替换的图片标识对应的点击上传控件，从而上传替换的图片，以使服务器接收到上传的替换图片，替换原先的项目中的图片。

在本申请实施例中，目标用户可以直接上传目标页面的全部页面元素的更新后资源文件，此时，目标用户需要从浏览器中预先下载目标页面的全部页面元素的当前资源文件，进一步进行修改，具体地，上述步骤302中“响应于通过用户界面触发的针对目标页面的元素数据更新操作，确定针对目标页面的页面元素更新数据”可以是：

根据目标用户在用户界面上触发的元素批量更新操作，从服务器中获取目标页面的全部页面元素的资源文件；

根据目标用户在用户界面上触发的数据上传操作，获取目标用户上传的根据资源文件修改的更新后元素资源文件，作为页面元素更新数据。

例如，目标用户可以触控用户界面上的批量下载按钮，浏览器向服务器发送目标用户下载的目标页面的项目标识，服务器根据前端浏览器传输的目标页面的项目标识，使用node的fs api提供的可读流读取目标页面项目下的当前资源文件，然后使用第三方库archiver，创建压缩文件导入当前资源文件的可读流，生成压缩文件后，向前端浏览器回传压缩文件的静态地址，目标用户在前端浏览器使用下载标签下载。

在本申请实施例中，当前资源文件下载到本地之后，目标用户在下载的当前资源文件的基础上修改，当前资源文件的命名不变，全部修改完成后，按照下载的当前资源文件的文件目录结构压缩，再次上传至服务器。从而保证上传、替换资源后，在目标页面项目源码不用修改的情况下，目标页面的项目引用目标页面更新后资源文件的路径不会出错。

步骤303、将页面元素更新数据上传至前端浏览器对应的服务器，以使服务器根据页面元素更新数据更新目标页面的页面相关数据中目标页面元素的当前元素数据，形成目标页面的更新后数据。

在本申请实施例中，用户界面可以包括上传控件，当目标用户对上传控件执行触控操作后，可以将页面元素更新数据上传至前端浏览器对应的服务器。

步骤304、接收服务器根据更新后数据发送的页面替换信息。

步骤305、根据页面替换信息替换目标页面上的目标页面元素的元素显示内容，显示更新后页面。

在本申请实施例中，当浏览器显示的更新后页面满足预期效果后，目标用户可以将更新后页面对应的当前资源文件(例如，更新后页面的图片资源、控件属性资源等等)下载，然后将下载的当前资源文件传输给技术人员，使得技术人员可以将当前资源文件应用到目标页面的项目中，达到预期的项目显示效果。

上述所有的技术方案，可以采用任意结合形成本申请的可选实施例，在此不再一一赘述。

本申请实施例提供的页面的元素信息替换方法，设计师可以在模拟出目标页面的浏览器上提交目标页面中想要修改的目标页面元素的页面元素更新数据，浏览器可以与运行目标页面的服务器进行交互，根据设计师上传的页面元素更新数据替换目标页面上的目标页面元素的元素显示内容，并且设计师可以在浏览器上看到更新后页面，确定提交的页面元素更新数据是否适用目标页面，以及根据提交的页面元素更新数据进行页面元素更新后的更新后页面是否满足预期效果，从而不需要与技术人员沟通即可得到符合目标页面更新后预期的页面元素资源文件，减少了页面开发成本。

请参阅图5，本申请实施例还提供一种页面的元素信息替换方法的操作流程图，目标用户在前端浏览器预览最新的目标页面项目，目标用户开始替换资源时，浏览器根据目标用户在浏览器的用户界面做出的元素数据更新操作，判断目标用户是否批量替换资源。在一种情况下，若目标用户是批量替换资源，则根据目标用户的元素批量更新操作，从服务器中下载目标页面的全部页面元素的资源文件到终端本地，浏览器对下载的资源文件进行解压，目标用户在终端本地下载的资源文件的基础上修改，命名不变，全部修改完成后，按照下载的资源文件的文件目录结构压缩并通过浏览器上传至服务器，服务器根据上传的压缩文件对目标页面的全部页面元素的当前资源文件进行替换之后，在浏览器显示更新后页面的更新效果。另一种情况下，若目标用户不是批量操作，可以在元素修改子页面上上传少量页面元素对应的页面元素更新数据，服务器根据上传的页面元素更新数据对对应的目标页面元素进行替换之后，在浏览器显示更新后页面的更新效果。目标用户判断更新效果是否符合预期，若符合预期，则不符合，则重新进行替换资源，若符合，则下载目标页面的当前资源文件，提供资源给开发，以使开发将当前资源文件应用到目标页面的项目中。

请参阅图6，本申请实施例还提供一种服务器资源替换流程图，服务器接收上传的少量页面元素对应的页面元素更新数据，服务器更新页面元素更新数据对应的目标页面元素的当前元素数据。服务器接收上传的全部页面元素的更新后资源文件后，服务器将上传的更新后资源文件的分片按照索引进行合并，利用更新资源文件替换目标页面的全部页面元素的当前资源位文件。服务器进行资源更新后，将页面替换信息发送至浏览器，以使浏览器显示更新后页面。

本申请实施例提供的页面的元素信息替换方法，设计师可以在模拟出目标页面的浏览器上提交目标页面中想要修改的目标页面元素的页面元素更新数据，浏览器可以与运行目标页面的服务器进行交互，根据设计师上传的页面元素更新数据替换目标页面上的目标页面元素的元素显示内容，并且设计师可以在浏览器上看到更新后页面，确定提交的页面元素更新数据是否适用目标页面，以及根据提交的页面元素更新数据进行页面元素更新后的更新后页面是否满足预期效果，从而不需要与技术人员沟通即可得到符合目标页面更新后预期的页面元素资源文件，减少了页面开发成本。

为便于更好的实施本申请实施例的页面的元素信息替换方法，本申请实施例还提供一种页面的元素信息替换装置。请参阅图7，图7为本申请实施例提供的页面的元素信息替换装置的结构示意图。该页面的元素信息替换装置可以包括第一接收单元701、第一确定单元702、替换单元703和发送单元704。

其中，第一接收单元701，用于接收通过前端浏览器上传的针对目标页面的页面元素更新数据，前端浏览器当前显示有模拟出的目标页面，页面元素更新数据包括目标页面上目标页面元素的元素替换数据以及在服务器中目标页面元素对应的元素查找信息；

第一确定单元702，用于根据元素查找信息在运行于服务器上的目标页面的页面相关数据中确定目标页面元素的当前元素数据；

替换单元703，用于利用元素替换数据替换对应的当前元素数据，形成目标页面的更新后数据；

发送单元704，用于根据更新后数据向前端浏览器发送页面替换信息，以使前端浏览器根据页面替换信息替换目标页面上的目标页面元素的元素显示内容。

可选的，第一接收单元701还用于：

接收通过前端浏览器分片上传的针对目标页面的多个压缩页面元素更新数据；

获取各压缩页面元素更新数据的索引，根据索引依次合并各压缩页面元素更新数据，形成目标压缩文件；

解压目标压缩文件，形成针对目标页面的页面元素更新数据。

可选的，页面元素更新数据为目标页面的更新后元素资源文件，更新后元素资源文件包括目标页面的全部页面元素的资源文件；

第一确定单元702还用于：

根据元素查找信息在服务器上确定目标页面的全部页面元素的当前资源文件为目标页面元素的当前元素数据；

替换单元703还用于：

利用元素替换数据替换目标页面的当前资源文件，形成目标页面的更新后数据。

可选的，装置还用于：

遍历目标页面的页面相关数据，获取目标页面中的各页面元素对应的元素标识数据和各页面元素在服务器中对应的元素定位数据；

根据元素标识数据和元素定位数据，形成目标页面中各页面元素的页面元素记录信息。

可选的，页面元素更新数据包括目标页面的至少部分页面元素的更新后资源文件；

第一接收单元701还用于：

根据元素查找信息和页面元素记录信息中的元素定位数据，获取元素替换数据对应的候选元素标识数据；

为候选元素标识数据添加更新标识，以使前端浏览器根据更新标识在目标页面的更新后页面中标记候选元素标识数据对应的页面元素。

可选的，页面元素更新数据包括目标页面的全部页面元素的更新后资源文件；

第一接收单元701还用于：

根据元素查找信息和元素定位数据，分别在元素替换数据和页面相关数据中获取同一目标页面元素对应的目标元素替换数据和目标当前元素数据；

对比目标元素替换数据的第一数据标识信息，和目标当前元素数据的第二数据标识信息；

若第一数据标识信息和第二数据标识信息不同，确定目标页面元素为待替换的页面元素；

为待替换的页面元素添加更新标识，以使前端浏览器根据更新标识在目标页面的更新后页面中标记待替换的页面元素。

可选的，发送单元704还用于：

获取形成目标页面的当前代码文件；

根据更新后数据更新当前代码文件，形成更新后代码文件；

编译更新后代码文件，生成编译后文件；

向前端浏览器发送生成的编译后文件，以使前端浏览器根据编译后文件替换目标页面上的目标页面元素的元素显示内容。

上述所有的技术方案，可以采用任意结合形成本申请的可选实施例，在此不再一一赘述。

本申请实施例提供页面的元素信息替换装置，设计师可以在模拟出目标页面的浏览器上提交目标页面中想要修改的目标页面元素的页面元素更新数据，浏览器可以与运行目标页面的服务器进行交互，根据设计师上传的页面元素更新数据替换目标页面上的目标页面元素的元素显示内容，并且设计师可以在浏览器上看到更新后页面，确定提交的页面元素更新数据是否适用目标页面，以及根据提交的页面元素更新数据进行页面元素更新后的更新后页面是否满足预期效果，从而不需要与技术人员沟通即可得到符合目标页面更新后预期的页面元素资源文件，减少了页面开发成本。

为便于更好的实施本申请实施例的页面的元素信息替换方法，本申请实施例还提供一种页面的元素信息替换装置，应用于前端浏览器。请参阅图8，图8为本申请实施例提供的页面的元素信息替换装置的结构示意图。该页面的元素信息替换装置可以包括模拟单元801、第二确定单元802、上传单元803、第二接收单元804和显示单元805。

其中，模拟单元801，用于通过前端浏览器提供用于管理页面元素的用户界面，用户界面包括模拟出的目标页面；

第二确定单元802，用于响应于通过用户界面触发的针对目标页面的元素数据更新操作，确定针对目标页面的页面元素更新数据，页面元素更新数据包括目标页面上目标页面元素的元素替换数据以及在服务器中目标页面元素对应的元素查找信息；

上传单元803，用于将页面元素更新数据上传至前端浏览器对应的服务器，以使服务器根据页面元素更新数据更新目标页面的页面相关数据中目标页面元素的当前元素数据，形成目标页面的更新后数据；

第二接收单元804，用于接收服务器根据更新后数据发送的页面替换信息；

显示单元805，用于根据页面替换信息替换目标页面上的目标页面元素的元素显示内容，显示更新后页面。

可选的，用户界面还包括元素修改子页面，元素修改子页面包括目标页面中页面元素的元素标识：

第二确定单元802还用于：

根据目标用户在元素修改子页面上触发的针对目标页面元素的数据修改操作，获取目标用户执行数据修改操作时上传的数据，作为目标页面元素的元素替换数据；

响应于针对元素修改子页面的数据上传确认操作，基于目标页面元素的元素查找信息以及元素替换数据生成目标页面的页面元素更新数据。

可选的，第二确定单元802还用于：

根据目标用户在用户界面上触发的元素批量更新操作，从服务器中获取目标页面的全部页面元素的资源文件；

根据目标用户在用户界面上触发的数据上传操作，获取目标用户上传的根据资源文件修改的更新后元素资源文件，作为页面元素更新数据。

本申请实施例提供页面的元素信息替换装置，设计师可以在模拟出目标页面的浏览器上提交目标页面中想要修改的目标页面元素的页面元素更新数据，浏览器可以与运行目标页面的服务器进行交互，根据设计师上传的页面元素更新数据替换目标页面上的目标页面元素的元素显示内容，并且设计师可以在浏览器上看到更新后页面，确定提交的页面元素更新数据是否适用目标页面，以及根据提交的页面元素更新数据进行页面元素更新后的更新后页面是否满足预期效果，从而不需要与技术人员沟通即可得到符合目标页面更新后预期的页面元素资源文件，减少了页面开发成本。

相应的，本申请实施例还提供一种计算机设备，该计算机设备可以为终端，该终端可以为智能手机、平板电脑、笔记本电脑、触控屏幕、游戏机、个人计算机、个人数字助理等终端设备。如图9所示，图9为本申请实施例提供的计算机设备的结构示意图。该计算机设备900包括有一个或者一个以上处理核心的处理器901、有一个或一个以上计算机可读存储介质的存储器902及存储在存储器902上并可在处理器上运行的计算机程序。其中，处理器901与存储器902电性连接。本领域技术人员可以理解，图中示出的计算机设备结构并不构成对计算机设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

处理器901是计算机设备900的控制中心，利用各种接口和线路连接整个计算机设备900的各个部分，通过运行或加载存储在存储器902内的软件程序和/或模块，以及调用存储在存储器902内的数据，执行计算机设备900的各种功能和处理数据，从而对计算机设备900进行整体监控。

在本申请实施例中，计算机设备900中的处理器901会按照如下的步骤，将一个或一个以上的应用程序的进程对应的指令加载到存储器902中，并由处理器901来运行存储在存储器902中的应用程序，从而实现各种功能：

接收通过前端浏览器上传的针对目标页面的页面元素更新数据，前端浏览器当前显示有模拟出的目标页面，页面元素更新数据包括目标页面上目标页面元素的元素替换数据以及在服务器中目标页面元素对应的元素查找信息；

根据元素查找信息在运行于服务器上的目标页面的页面相关数据中确定目标页面元素的当前元素数据；

利用元素替换数据替换对应的当前元素数据，形成目标页面的更新后数据；

根据更新后数据向前端浏览器发送页面替换信息，以使前端浏览器根据页面替换信息替换目标页面上的目标页面元素的元素显示内容。

通过前端浏览器提供用于管理页面元素的用户界面，用户界面包括模拟出的目标页面；

响应于通过用户界面触发的针对目标页面的元素数据更新操作，确定针对目标页面的页面元素更新数据，页面元素更新数据包括目标页面上目标页面元素的元素替换数据以及在服务器中目标页面元素对应的元素查找信息；

将页面元素更新数据上传至前端浏览器对应的服务器，以使服务器根据页面元素更新数据更新目标页面的页面相关数据中目标页面元素的当前元素数据，形成目标页面的更新后数据；

接收服务器根据更新后数据发送的页面替换信息；

根据页面替换信息替换目标页面上的目标页面元素的元素显示内容，显示更新后页面。

以上各个操作的具体实施可参见前面的实施例，在此不再赘述。

可选的，如图9所示，计算机设备900还包括：触控显示屏903、射频电路904、音频电路905、输入单元906以及电源907。其中，处理器901分别与触控显示屏903、射频电路904、音频电路905、输入单元906以及电源907电性连接。本领域技术人员可以理解，图9中示出的计算机设备结构并不构成对计算机设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

触控显示屏903可用于显示图形用户界面以及接收用户作用于图形用户界面产生的操作指令。触控显示屏903可以包括显示面板和触控面板。其中，显示面板可用于显示由用户输入的信息或提供给用户的信息以及计算机设备的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。可选的，可以采用液晶显示器(Liquid Crystal Display，LCD)、有机发光二极管(Organic Light-Emitting Diode，OLED)等形式来配置显示面板。触控面板可用于收集用户在其上或附近的触摸操作(比如用户兑现手指、触笔等任何适合的物体或附件在触控面板上或在触控面板附近的操作)，并生成相应的操作指令，且操作指令执行对应程序。可选的，触控面板可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器901，并能接收处理器901发来的命令并加以执行。触控面板可覆盖显示面板，当触控面板检测到在其上或附近的触摸操作后，传送给处理器901以确定触摸事件的类型，随后处理器901根据触摸事件的类型在显示面板上提供相应的视觉输出。在本申请实施例中，可以将触控面板与显示面板集成到触控显示屏903而实现输入和输出功能。但是在某些实施例中，触控面板与触控面板可以作为两个独立的部件来实现输入和输出功能。即触控显示屏903也可以作为输入单元906的一部分实现输入功能。

射频电路904可用于收发射频信号，以通过无线通信与网络设备或其他计算机设备建立无线通讯，与网络设备或其他计算机设备之间收发信号。

音频电路905可以用于通过扬声器、传声器提供用户与计算机设备之间的音频接口。音频电路905可将接收到的音频数据转换后的电信号，传输到扬声器，由扬声器转换为声音信号输出；另一方面，传声器将收集的声音信号转换为电信号，由音频电路905接收后转换为音频数据，再将音频数据输出处理器901处理后，经射频电路904以发送给比如另一计算机设备，或者将音频数据输出至存储器902以便进一步处理。音频电路905还可能包括耳塞插孔，以提供外设耳机与计算机设备的通信。

输入单元906可用于接收输入的数字、字符信息或用户特征信息(例如指纹、虹膜、面部信息等)，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。

电源907用于给计算机设备900的各个部件供电。可选的，电源907可以通过电源管理系统与处理器901逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源907还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

尽管图9中未示出，计算机设备900还可以包括摄像头、传感器、无线保真模块、蓝牙模块等，在此不再赘述。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

由上可知，本实施例提供的计算机设备，设计师可以在模拟出目标页面的浏览器上提交目标页面中想要修改的目标页面元素的页面元素更新数据，浏览器可以与运行目标页面的服务器进行交互，根据设计师上传的页面元素更新数据替换目标页面上的目标页面元素的元素显示内容，并且设计师可以在浏览器上看到更新后页面，确定提交的页面元素更新数据是否适用目标页面，以及根据提交的页面元素更新数据进行页面元素更新后的更新后页面是否满足预期效果，从而不需要与技术人员沟通即可得到符合目标页面更新后预期的页面元素资源文件，减少了页面开发成本。

本领域普通技术人员可以理解，上述实施例的各种方法中的全部或部分步骤可以通过指令来完成，或通过指令控制相关的硬件来完成，该指令可以存储于一计算机可读存储介质中，并由处理器进行加载和执行。

为此，本申请实施例提供一种计算机可读存储介质，其中存储有多条计算机程序，该计算机程序能够被处理器进行加载，以执行本申请实施例所提供的任一种页面的元素信息替换方法中的步骤。例如，该计算机程序可以执行如下步骤：

接收通过前端浏览器上传的针对目标页面的页面元素更新数据，前端浏览器当前显示有模拟出的目标页面，页面元素更新数据包括目标页面上目标页面元素的元素替换数据以及在服务器中目标页面元素对应的元素查找信息；

根据元素查找信息在运行于服务器上的目标页面的页面相关数据中确定目标页面元素的当前元素数据；

利用元素替换数据替换对应的当前元素数据，形成目标页面的更新后数据；

根据更新后数据向前端浏览器发送页面替换信息，以使前端浏览器根据页面替换信息替换目标页面上的目标页面元素的元素显示内容。

通过前端浏览器提供用于管理页面元素的用户界面，用户界面包括模拟出的目标页面；

响应于通过用户界面触发的针对目标页面的元素数据更新操作，确定针对目标页面的页面元素更新数据，页面元素更新数据包括目标页面上目标页面元素的元素替换数据以及在服务器中目标页面元素对应的元素查找信息；

将页面元素更新数据上传至前端浏览器对应的服务器，以使服务器根据页面元素更新数据更新目标页面的页面相关数据中目标页面元素的当前元素数据，形成目标页面的更新后数据；

接收服务器根据更新后数据发送的页面替换信息；

根据页面替换信息替换目标页面上的目标页面元素的元素显示内容，显示更新后页面。

以上各个操作的具体实施可参见前面的实施例，在此不再赘述。

其中，该存储介质可以包括：只读存储器(Read Only Memory，ROM)、随机存取记忆体(Random Access Memory，RAM)、磁盘或光盘等。

由于该存储介质中所存储的计算机程序，可以执行本申请实施例所提供的任一种页面的元素信息替换方法中的步骤，因此，可以实现本申请实施例所提供的任一种页面的元素信息替换方法所能实现的有益效果，详见前面的实施例，在此不再赘述。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

以上对本申请实施例所提供的一种页面的元素信息替换方法、装置、计算机设备及存储介质进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的技术方案及其核心思想；本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例的技术方案的范围。

Claims (14)

1.一种页面的元素信息替换方法，其特征在于，包括：

接收通过前端浏览器上传的针对目标页面的页面元素更新数据，所述前端浏览器当前显示有模拟出的所述目标页面，所述页面元素更新数据包括所述目标页面上目标页面元素的元素替换数据以及在服务器中所述目标页面元素对应的元素查找信息；

根据所述元素查找信息在运行于所述服务器上的所述目标页面的页面相关数据中确定所述目标页面元素的当前元素数据；

利用所述元素替换数据替换对应的所述当前元素数据，形成所述目标页面的更新后数据；

根据所述更新后数据向所述前端浏览器发送页面替换信息，以使所述前端浏览器根据所述页面替换信息替换所述目标页面上的目标页面元素的元素显示内容。

2.根据权利要求1所述的方法，其特征在于，所述接收通过前端浏览器上传的针对目标页面的页面元素更新数据，包括：

接收通过所述前端浏览器分片上传的针对所述目标页面的多个压缩页面元素更新数据；

获取各所述压缩页面元素更新数据的索引，根据所述索引依次合并各所述压缩页面元素更新数据，形成目标压缩文件；

解压所述目标压缩文件，形成针对所述目标页面的所述页面元素更新数据。

3.根据权利要求1所述的方法，其特征在于，所述页面元素更新数据为所述目标页面的更新后元素资源文件，所述更新后元素资源文件包括所述目标页面的全部页面元素的更新后资源文件；

所述根据所述元素查找信息在运行于所述服务器上的所述目标页面的页面相关数据中确定所述目标页面元素的当前元素数据，包括：

根据所述元素查找信息在所述服务器上确定所述目标页面的全部页面元素的当前资源文件为所述目标页面元素的所述当前元素数据；

所述利用所述元素替换数据替换对应的所述当前元素数据，形成所述目标页面的更新后数据，包括：

利用所述元素替换数据替换所述目标页面的所述当前资源文件，形成所述目标页面的所述更新后数据。

4.根据权利要求1所述的方法，其特征在于，所述方法还包括：

遍历所述目标页面的页面相关数据，获取所述目标页面中的各页面元素对应的元素标识数据和各所述页面元素在所述服务器中对应的元素定位数据；

根据所述元素标识数据和所述元素定位数据，形成所述目标页面中各所述页面元素的页面元素记录信息。

5.根据权利要求4所述的方法，其特征在于，所述页面元素更新数据包括所述目标页面的至少部分页面元素的更新后资源文件；

所述接收通过前端浏览器上传的针对目标页面的页面元素更新数据之后，还包括：

根据所述元素查找信息和所述页面元素记录信息中的元素定位数据，获取所述元素替换数据对应的候选元素标识数据；

为所述候选元素标识数据添加更新标识，以使所述前端浏览器根据所述更新标识在所述目标页面的更新后页面中标记所述候选元素标识数据对应的页面元素。

6.根据权利要求4所述的方法，其特征在于，所述页面元素更新数据包括所述目标页面的全部页面元素的更新后资源文件；

所述接收通过前端浏览器上传的针对目标页面的页面元素更新数据之后，还包括：

根据所述元素查找信息和所述元素定位数据，分别在所述元素替换数据和所述页面相关数据中获取同一目标页面元素对应的目标元素替换数据和目标当前元素数据；

对比所述目标元素替换数据的第一数据标识信息，和所述目标当前元素数据的第二数据标识信息；

若所述第一数据标识信息和所述第二数据标识信息不同，确定所述目标页面元素为待替换的页面元素；

为所述待替换的页面元素添加更新标识，以使所述前端浏览器根据所述更新标识在所述目标页面的更新后页面中标记所述待替换的页面元素。

7.根据权利要求1所述的方法，其特征在于，所述根据所述更新后数据向所述前端浏览器发送页面替换信息，以使所述前端浏览器根据所述页面替换信息替换所述目标页面上的目标页面元素的元素显示内容，包括：

获取形成所述目标页面的当前代码文件；

根据所述更新后数据更新所述当前代码文件，形成更新后代码文件；

编译所述更新后代码文件，生成编译后文件；

向所述前端浏览器发送生成的所述编译后文件，以使所述前端浏览器根据所述编译后文件替换所述目标页面上的目标页面元素的元素显示内容。

8.一种页面的元素信息替换方法，其特征在于，应用于前端浏览器，包括：

通过所述前端浏览器提供用于管理页面元素的用户界面，所述用户界面包括模拟出的目标页面；

响应于通过所述用户界面触发的针对所述目标页面的元素数据更新操作，确定针对所述目标页面的页面元素更新数据，所述页面元素更新数据包括所述目标页面上目标页面元素的元素替换数据以及在服务器中所述目标页面元素对应的元素查找信息；

将所述页面元素更新数据上传至所述前端浏览器对应的所述服务器，以使所述服务器根据所述页面元素更新数据更新所述目标页面的页面相关数据中目标页面元素的当前元素数据，形成所述目标页面的更新后数据；

接收所述服务器根据所述更新后数据发送的页面替换信息；

根据所述页面替换信息替换所述目标页面上的目标页面元素的元素显示内容，显示更新后页面。

9.根据权利要求8所述的方法，其特征在于，所述用户界面还包括元素修改子页面，所述元素修改子页面包括所述目标页面中页面元素的元素标识；

所述响应于通过所述用户界面触发的针对所述目标页面的元素数据更新操作，确定针对所述目标页面的页面元素更新数据，包括：

根据目标用户在所述元素修改子页面上触发的针对目标页面元素的数据修改操作，获取所述目标用户执行所述数据修改操作时上传的数据，作为所述目标页面元素的元素替换数据；

响应于针对所述元素修改子页面的数据上传确认操作，基于所述目标页面元素的元素查找信息以及所述元素替换数据生成所述目标页面的所述页面元素更新数据。

10.根据权利要求8所述的方法，其特征在于，所述响应于通过所述用户界面触发的针对所述目标页面的元素数据更新操作，确定针对所述目标页面的页面元素更新数据，包括：

根据目标用户在所述用户界面上触发的元素批量更新操作，从所述服务器中获取所述目标页面的全部页面元素的资源文件；

根据所述目标用户在所述用户界面上触发的数据上传操作，获取所述目标用户上传的根据所述资源文件修改的更新后元素资源文件，作为所述页面元素更新数据。

11.一种页面的元素信息替换装置，其特征在于，包括：

第一接收单元，用于接收通过前端浏览器上传的针对目标页面的页面元素更新数据，所述前端浏览器当前显示有模拟出的所述目标页面，所述页面元素更新数据包括所述目标页面上目标页面元素的元素替换数据以及在服务器中所述目标页面元素对应的元素查找信息；

第一确定单元，用于根据所述元素查找信息在运行于所述服务器上的所述目标页面的页面相关数据中确定所述目标页面元素的当前元素数据；

替换单元，用于利用所述元素替换数据替换对应的所述当前元素数据，形成所述目标页面的更新后数据；

发送单元，用于根据所述更新后数据向所述前端浏览器发送页面替换信息，以使所述前端浏览器根据所述页面替换信息替换所述目标页面上的目标页面元素的元素显示内容。

12.一种页面的元素信息替换装置，其特征在于，应用于前端浏览器，包括：

模拟单元，用于通过所述前端浏览器提供用于管理页面元素的用户界面，所述用户界面包括模拟出的目标页面；

第二确定单元，用于响应于通过所述用户界面触发的针对所述目标页面的元素数据更新操作，确定针对所述目标页面的页面元素更新数据，所述页面元素更新数据包括所述目标页面上目标页面元素的元素替换数据以及在服务器中所述目标页面元素对应的元素查找信息；

上传单元，用于将所述页面元素更新数据上传至所述前端浏览器对应的所述服务器，以使所述服务器根据所述页面元素更新数据更新所述目标页面的页面相关数据中目标页面元素的当前元素数据，形成所述目标页面的更新后数据；

第二接收单元，用于接收所述服务器根据所述更新后数据发送的页面替换信息；

显示单元，用于根据所述页面替换信息替换所述目标页面上的目标页面元素的元素显示内容，显示更新后页面。

13.一种计算机设备，其特征在于，包括：

存储器，用于存储计算机程序；

处理器，用于在执行所述计算机程序时实现如权利要求1至10任一项所述页面的元素信息替换方法中的步骤。

14.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至10任一项所述页面的元素信息替换方法中的步骤。

Images