CN113312036B - Web页面的大屏显示方法、装置、设备及存储介质 - Google Patents

Abstract

本发明实施例公开了一种Web页面的大屏显示方法、装置、设备及存储介质。该方法包括：响应于目标Web页面的大屏显示请求，获取与目标Web页面匹配的单纯业务逻辑代码和目标Web页面中待加载的目标数据的数据参数；根据数据参数，在多个前端存储区和多个后端存储区中定位目标存储区；至少一个前端存储区和至少一个后端存储区能够响应修改操作；在目标存储区中获取目标数据，并根据单纯业务逻辑代码和目标数据，生成目标Web页面进行大屏显示。本发明实施例的技术方案，实现了前端业务逻辑代码与显示数据分开，保证前端代码的可读性，同时使得前端和后端都支持对大屏显示内容进行修改。

Description

Web页面的大屏显示方法、装置、设备及存储介质

技术领域

本发明实施例涉及互联网技术领域，尤其涉及一种Web页面的大屏显示方法、装置、设备及存储介质。

背景技术

随着互联网技术的发展，可视化大屏出现在人们视野中，帮助人们更直观的获取信息。由于大屏具有强跨端、易开发、易分享等优点，通过大屏显示Web页面的内容逐渐成为主流。

现有技术中，大屏既可以显示Web页面中的演示数据，也可以显示Web页面中的真实数据。在管理大屏待显示的演示数据时，一种方式可以利用后端的配置文件，但是这种方式会增加开发成本，并且只能在具备良好的网络环境时才能对演示数据进行修改。另外一种方式可以预先在前端业务逻辑代码中定义一些演示数据，但这会导致前端代码的可读性变差，同时也不能对前端演示数据进行灵活修改。

发明内容

本发明实施例提供一种Web页面的大屏显示方法、装置、设备及存储介质，实现前端业务逻辑代码与显示数据分开，保证前端代码的可读性，同时使得前端和后端都支持对大屏显示内容进行修改。

第一方面，本发明实施例提供了一种Web页面的大屏显示方法，包括：

响应于目标Web页面的大屏显示请求，获取与目标Web页面匹配的单纯业务逻辑代码和目标Web页面中待加载的目标数据的数据参数；

根据数据参数，在多个前端存储区和多个后端存储区中定位目标存储区；至少一个前端存储区和至少一个后端存储区能够响应修改操作；

在目标存储区中获取目标数据，并根据单纯业务逻辑代码和目标数据，生成目标Web页面进行大屏显示。

可选的，前端存储区包括：用于存储演示数据的前端演示数据模块以及用于存储演示数据的前端应用缓存区；

后端存储区包括：用于存储演示数据的第一后端服务器存储区，以及用于存储真实数据的第二后端服务器存储区；

其中，前端应用缓存区和第一后端服务器存储区能够响应修改操作。

采用上述技术方案，通过设置前端演示数据模块，使前端业务逻辑代码与前端演示数据分开，保证前端业务逻辑代码的可读性和可移植性；通过在前端应用缓存区中存储演示数据，用户可通过应用缓存区提供的脚本自己修改应用缓存区中的演示数据。通过在第一后端服务器存储区中存储演示数据，支持在后端获取和修改演示数据；通过在第二后端服务器存储区中存储采集到的真实数据，可以获取真实数据作为待显示数据。通过上述设置可以满足客户端在各种场景下对待显示数据的各种需求。

可选的，根据数据参数，在多个前端存储区和多个后端存储区中定位目标存储区，包括：

如果数据参数包括演示参数，则将前端演示数据模块作为目标存储区；

如果数据参数包括非演示参数以及前端参数，则将前端应用缓存区作为目标存储区；

如果数据参数包括非演示参数以及后端参数，则获取服务器的配置文件中设置的数据模式；

如果数据模式为演示模式，则将第一后端服务器存储区作为目标存储区，否则，将第二后端服务器存储区作为目标存储区。

采用上述技术方案，可以通过修改目标Web页面的URL中的数据参数，从多个前端或后端数据存储区中指定待加载的目标数据所在的目标存储区，也即，通过修改URL中的数据参数实现目标数据的数据类型切换，从而针对不同的用户需求，能够灵活获取各种类型目标数据。

可选的，目标Web页面中待加载的目标数据的数据参数是通过Axios获取的；

所述方法，还包括：

通过Axios，如果确定数据参数包括非演示参数，则向目标Web页面的监控节点发送HTTP请求；

通过监控节点，对HTTP请求进行格式解析，获取数据端字段对应的字段值作为目标数据的端类型参数；端类型参数包括前端参数和后端参数。

采用上述技术方案，通过将待显示的目标数据存储在Axios之后，使得Web页面的所有HTTP请求都由Axios统一管理，从而实现将业务逻辑代码与数据区分开。

可选的，在目标存储区中获取目标数据，包括：

如果目标存储区为前端演示数据模块，则通过Axios中的适配器应用程序接口API，从前端演示数据模块中获取演示数据作为目标数据；

如果目标存储区为前端应用缓存区，则通过浏览器应用的缓存API，从前端应用缓存区中获取演示数据作为目标数据；

如果目标存储区为第一后端服务器存储区，则通过监控节点从第一后端服务器存储区中获取演示数据作为目标数据；

如果目标存储区为第二后端服务器存储区，则通过监控节点从第二后端服务器存储区中获取真实数据作为目标数据。

采用上述技术方案，针对不同的数据存储区的特点，设置不同的数据获取手段，可以根据用户需求快速从多个数据存储区中获取到所需的目标数据，从而提高页面大屏显示的速率。可选的，还包括：

响应于对可执行JS脚本页面的输入操作，使用输入数据对前端应用缓存区中的演示数据进行修改；前端应用缓存区对外提供可执行JS脚本的页面入口；和/或，

响应于对后端服务器的配置文件的数据编辑操作，对配置文件中的演示数据进行修改。

采用上述技术方案，可以保证在任何网络环境下，前端和后端中至少有一方可以支持对待显示数据进行修改。当需要对演示数据进行修改时，可以根据当前的网络环境，选择在前端或者后端修改演示数据。

第二方面，本发明实施例还提供了一种Web页面的大屏显示装置，包括：

获取模块，用于响应于目标Web页面的大屏显示请求，获取与目标Web页面匹配的单纯业务逻辑代码和目标Web页面中待加载的目标数据的数据参数；

定位模块，用于根据数据参数，在多个前端存储区和多个后端存储区中定位目标存储区；至少一个前端存储区和至少一个后端存储区能够响应修改操作；

显示模块，用于在目标存储区中获取目标数据，并根据单纯业务逻辑代码和目标数据，生成目标Web页面进行大屏显示。

可选的，前端存储区包括：用于存储演示数据的前端演示数据模块以及用于存储演示数据的前端应用缓存区；

后端存储区包括：用于存储演示数据的第一后端服务器存储区，以及用于存储真实数据的第二后端服务器存储区；

其中，前端应用缓存区和第一后端服务器存储区能够响应修改操作。

第三方面，本发明实施例还提供了一种电子设备，设备包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当一个或多个程序被一个或多个处理器执行，使得一个或多个处理器实现本发明任意实施例提供的Web页面的大屏显示方法。

第四方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现本发明任意实施例提供的Web页面的大屏显示方法。

本发明实施例中，响应于目标Web页面的大屏显示请求，获取与目标Web页面匹配的单纯业务逻辑代码和目标Web页面中待加载的目标数据的数据参数；根据数据参数，在多个前端存储区和多个后端存储区中定位目标存储区；至少一个前端存储区和至少一个后端存储区能够响应修改操作；在目标存储区中获取目标数据，并根据单纯业务逻辑代码和目标数据，生成目标Web页面进行大屏显示，解决了现有技术中前端和后端都无法有效管理大屏显示内容的问题，实现了前端业务逻辑代码与显示数据分开，保证前端代码的可读性，同时使得前端和后端都支持对大屏显示内容进行修改。

附图说明

图1是本发明实施例一中的一种Web页面的大屏显示方法的流程图；

图2a是本发明实施例二中的一种Web页面的大屏显示方法的流程图；

图2b是本发明实施例二中的一种大屏显示Web页面内容的实现流程图；

图3是本发明实施例三中的一种Web页面的大屏显示装置的结构示意图；

图4是本发明实施例四中的一种电子设备的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

实施例一

图1是本发明实施例一中的一种Web页面的大屏显示方法流程图，本实施例可适用于使用大屏显示Web页面内容的情况，该方法可以由Web页面的大屏显示装置来执行，该装置可以由硬件和/或软件来实现，并一般可以集成在提供大屏显示Web页面服务的电子设备中。如图1所示，该方法包括：

步骤110、响应于目标Web页面的大屏显示请求，获取与目标Web页面匹配的单纯业务逻辑代码和目标Web页面中待加载的目标数据的数据参数。

本实施例中，目标Web页面是指将在可视化大屏上进行内容显示的页面，目标Web页面中待加载的目标数据可以是演示数据或者真实数据。其中，演示数据是指通过代码动态生成的用户想要看到的数据，真实数据是采集到的集群的真实数据。目标数据的数据参数用于确定目标数据所在的存储区，与目标Web页面匹配的单纯业务逻辑代码用于在获取到目标数据后，将目标数据渲染到目标Web页面上。

可选的，目标Web页面中待加载的目标数据的数据参数是通过Axios获取的。本实施例中，Axios是一个支持浏览器和node端的http库。在接收到目标Web页面的大屏显示请求之后，可以通过Axios从目标Web页面的统一资源定位符(Uniform Resource Locator，URL)中提取目标数据的数据参数。

步骤120、根据数据参数，在多个前端存储区和多个后端存储区中定位目标存储区；至少一个前端存储区和至少一个后端存储区能够响应修改操作。

本实施例中，为了针对不同的用户需求，能够灵活获取待显示的数据，以及在任何网络环境下，前端和后端中至少有一方可以支持对待显示数据进行修改，预先设置多个前端存储区和后端存储区来存储待显示的数据。

可选的，前端存储区包括：用于存储演示数据的前端演示数据模块以及用于存储演示数据的前端应用缓存区；后端存储区包括：用于存储演示数据的第一后端服务器存储区，以及用于存储真实数据的第二后端服务器存储区；其中，前端应用缓存区和第一后端服务器存储区能够响应修改操作。

本实施例中，为了使前端业务逻辑代码与前端演示数据分开，保证前端业务逻辑代码的可读性和可移植性，专门在前端设置一个存储演示数据的演示数据模块。其中，演示数据模块中的演示数据是定义在代码中的数据，无法修改。为了方便用户自己修改演示数据，在前端应用缓存区中存储演示数据，用户可通过应用缓存区提供的脚本修改应用缓存区中的演示数据。为了在后端支持演示数据的获取和修改操作，在第一后端服务器存储区中存储演示数据，以及，为了能够获取真实数据，在第二后端服务器存储区中存储采集到的真实数据。

可选的，根据数据参数，在多个前端存储区和多个后端存储区中定位目标存储区，可以包括：如果数据参数包括演示参数，则将前端演示数据模块作为目标存储区；如果数据参数包括非演示参数以及前端参数，则将前端应用缓存区作为目标存储区；如果数据参数包括非演示参数以及后端参数，则获取服务器的配置文件中设置的数据模式；如果数据模式为演示模式，则将第一后端服务器存储区作为目标存储区，否则，将第二后端服务器存储区作为目标存储区。

本实施例中，数据参数可以包括演示参数或非演示参数，以及端类型参数。其中，演示参数用于指示目标数据存储于前端演示数据模块，非演示参数用于指示目标数据未存储于前端演示数据模块，端类型参数包括前端参数和后端参数，用于在确定目标数据未存储于前端演示数据模块时，进一步确定目标数据存储在前端存储区还是后端存储区。

本实施例中，如果数据参数中包括演示参数，则目标存储区为前端演示数据模块。如果数据参数中包括非演示参数，则需要获取端类型参数来确定目标数据在前端应用缓存区还是后端存储区，如果端类型参数为前端参数，则目标存储区为前端应用缓存区。如果端类型参数为后端参数，则目标数据存储在后端存储区。此时，需要获取后端服务器的配置文件中设置的数据模式，如果数据模式为演示模式，则说明目标数据为存储在后端服务器中的演示数据，因此，确定目标存储区为第一后端服务器存储区。如果数据模式为真实模式，则说明目标数据为存储在后端服务器中的真实数据，因此，确定目标存储区为第二后端服务器存储区。

采用上述技术方案，可以通过修改目标Web页面的URL中的数据参数，从多个前端或后端数据存储区中指定待加载的目标数据所在的目标存储区，也即，通过修改URL中的数据参数实现目标数据的数据类型切换，从而针对不同的用户需求，能够灵活获取各种类型目标数据。

可选的，所述方法，还可以包括：通过Axios，如果确定数据参数包括非演示参数，则向目标Web页面的监控节点发送HTTP请求；通过监控节点，对HTTP请求进行格式解析，获取数据端字段对应的字段值作为目标数据的端类型参数；端类型参数包括前端参数和后端参数。

本实施例中，Axios除了可以获取目标Web页面中待加载的目标数据的数据参数，还可以统一管理所有的HTTP请求。具体来说，如果Axios确定数据参数包括演示参数，则通过Axios可以直接从前端演示数据模块获取目标数据，因此，Axios无需生成HTTP请求。如果Axios确定数据参数包括非演示参数，即无法通过Axios获取目标数据，此时，Axios需要生成与数据参数对应的HTTP请求，并发送给目标Web页面的监控节点，以通过监控节点确定目标数据所在的存储区。

其中，监控节点是注册在前端应用指定源和路径下的事件驱动节点，可以监听页面所有的HTTP请求。可以通过监控节点对HTTP请求进行格式解析，获取HTTP请求中的数据端字段的字段值作为目标数据的端类型参数，从而确定目标数据存储于前端存储区还是后端存储区。

采用上述技术方案，通过将待显示的目标数据存储在Axios之后，使得Web页面的所有HTTP请求都由Axios统一管理，从而实现将业务逻辑代码与数据区分开。

步骤130、在目标存储区中获取目标数据，并根据单纯业务逻辑代码和目标数据，生成目标Web页面进行大屏显示。

本实施例中，在确定目标存储区后，可以采用与目标存储区对应的方式获取目标数据，并使用单纯业务逻辑代码将目标数据渲染到目标Web页面上，并在可视化大屏上显示目标Web页面。

可选的，在目标存储区中获取目标数据，可以包括：如果目标存储区为前端演示数据模块，则通过Axios中的适配器应用程序接口API，从前端演示数据模块中获取演示数据作为目标数据；如果目标存储区为前端应用缓存区，则通过浏览器应用的缓存API，从前端应用缓存区中获取演示数据作为目标数据；如果目标存储区为第一后端服务器存储区，则通过监控节点从第一后端服务器存储区中获取演示数据作为目标数据；如果目标存储区为第二后端服务器存储区，则通过监控节点从第二后端服务器存储区中获取真实数据作为目标数据。

本实施例中，对于前端演示数据模块中存储的演示数据，可以直接通过Axios中的适配器API获取；对于前端应用缓存区中的演示数据，即浏览器缓存中存储的演示数据，可以利用浏览器的缓存API获取；对于第一后端服务器存储区中存储的演示数据，即后端服务器的配置文件中存储的演示数据，可以通过监控节点从服务器提供的HTTP接口获取；对于第二后端服务器存储区中存储的真实数据，也是通过监控节点从服务器提供的HTTP接口获取。

采用上述技术方案，针对不同的数据存储区的特点，设置不同的数据获取手段，可以根据用户需求快速从多个数据存储区中获取到所需的目标数据，从而提高页面大屏显示的速率。

可选的，还可以包括：响应于对可执行JS脚本页面的输入操作，使用输入数据对前端应用缓存区中的演示数据进行修改；前端应用缓存区对外提供可执行JS脚本的页面入口；和/或，响应于对后端服务器的配置文件的数据编辑操作，对配置文件中的演示数据进行修改。

本实施例中，当需要对演示数据进行修改时，可以根据当前的网络环境，例如，网络良好、断网或弱网络，选择在前端或者后端修改演示数据。如果在前端修改演示数据，可以通过前端应用缓存区对外提供的可执行JS脚本的页面入口，对前端应用缓存区中的演示数据进行更新。如果在后端修改演示数据，可以通过对后端服务器的配置文件进行修改，来更新配置文件中的演示数据。

采用上述技术方案，可以保证在任何网络环境下，前端和后端中至少有一方可以支持对待显示数据进行修改。

本发明实施例中，响应于目标Web页面的大屏显示请求，获取与目标Web页面匹配的单纯业务逻辑代码和目标Web页面中待加载的目标数据的数据参数；根据数据参数，在多个前端存储区和多个后端存储区中定位目标存储区；至少一个前端存储区和至少一个后端存储区能够响应修改操作；在目标存储区中获取目标数据，并根据单纯业务逻辑代码和目标数据，生成目标Web页面进行大屏显示，解决了现有技术中前端和后端都无法有效管理大屏显示内容的问题，实现了前端业务逻辑代码与显示数据分开，保证前端代码的可读性，同时使得前端和后端都支持对大屏显示内容进行修改。

实施例二

图2a是本发明实施例二中的一种Web页面的大屏显示方法的流程图，本实施例可以与上述实施例中各个可选方案结合。具体的，参考图2a，该方法可以包括如下步骤：

步骤210、预先在前端和后端存储目标Web页面的待显示数据。

本实施例中，如图2b所示，为了使前端业务逻辑代码与前端演示数据分开，保证前端业务逻辑代码的可读性和可移植性，预先构建前端演示数据模块并在其中存储演示数据，然后使用Axios中的适配器API将前端演示数据模块集成到前端应用中。预先在前端应用缓存中存储演示数据，并向用户提供的可执行JS脚本的页面入口，使得用户可以在前端修改演示数据。预先在后端服务器的配置文件中存储演示数据，以使得后端也支持演示数据的获取和修改操作。通过后端服务器的HTTP接口采集并存储真实数据。

步骤220、响应于目标Web页面的大屏显示请求，获取与目标Web页面匹配的单纯业务逻辑代码，并通过Axios获取目标Web页面中待加载的目标数据的数据参数。

本实施例中，如图2b所示，为了将业务逻辑代码与数据区分开，将待显示的目标数据存储在Axios之后，Web页面的所有HTTP请求都由Axios统一管理，因此，可以先通过Axios从目标Web页面的URL中获取目标数据的数据参数，以根据数据参数确定目标数据的类型以及存储区域。

其中，由于数据参数可以指示目标数据的类型以及存储区域，因此，可以通过对目标Web页面的URL中的数据参数进行修改，实现目标数据在不同存储区的演示数据之间切换，或者在演示数据和真实数据之间切换。

步骤230、如果数据参数包括演示参数，则通过Axios中的适配器API从前端演示数据模块中获取演示数据作为目标数据。

步骤240、如果数据参数包括非演示参数，则通过Axios生成与目标Web页面对应的HTTP请求，并发送给目标Web页面的监控节点，以使监控节点从HTTP请求中提取端类型参数。

步骤250、如果端类型参数为前端参数，则通过浏览器的缓存API从前端应用缓存区中获取演示数据作为目标数据。

需要说明的是，可以通过前端应用缓存区对外提供的可执行JS脚本的页面入口，对前端应用缓存区中的演示数据进行更新。

步骤260、如果端类型参数为后端参数，则通过监控节点获取后端服务器的配置文件中设置的数据模式，以判断目标数据是演示数据还是真实数据。

步骤270、如果数据模式为演示模式，则通过监控节点，从服务器提供的HTTP接口获取第一后端服务器存储区中的演示数据作为目标数据。

需要说明的是，可以根据需求对后端服务器的配置文件中的演示数据进行修改，可以通过修改后端服务器中的配置文件中的数据模式参数，实现目标数据在第一后端服务器存储区的演示数据和第二后端服务器存储区的真实数据之间切换。

步骤280、如果数据模式为真实模式，则通过监控节点，从服务器提供的HTTP接口获取第二后端服务器存储区中的真实数据作为目标数据。

步骤290、使用单纯业务逻辑代码将目标数据渲染到目标Web页面上，并在可视化大屏上显示目标Web页面。

本发明实施例中，响应于目标Web页面的大屏显示请求，获取与目标Web页面匹配的单纯业务逻辑代码和目标Web页面中待加载的目标数据的数据参数；根据数据参数，在多个前端存储区和多个后端存储区中定位目标存储区；至少一个前端存储区和至少一个后端存储区能够响应修改操作；在目标存储区中获取目标数据，并根据单纯业务逻辑代码和目标数据，生成目标Web页面进行大屏显示，解决了现有技术中前端和后端都无法有效管理大屏显示内容的问题，实现了前端业务逻辑代码与显示数据分开，保证前端代码的可读性，同时使得前端和后端都支持对大屏显示内容进行修改。

实施例三

图3是本发明实施例三中的一种Web页面的大屏显示装置的结构示意图，本实施例可适用于使用大屏显示Web页面内容的情况。该装置可以由硬件和/或软件来实现，并一般可以集成在提供大屏显示Web页面服务的电子设备中。

如图3所示，该装置包括：

获取模块310，用于响应于目标Web页面的大屏显示请求，获取与目标Web页面匹配的单纯业务逻辑代码和目标Web页面中待加载的目标数据的数据参数；

定位模块320，用于根据数据参数，在多个前端存储区和多个后端存储区中定位目标存储区；至少一个前端存储区和至少一个后端存储区能够响应修改操作；

显示模块330，用于在目标存储区中获取目标数据，并根据单纯业务逻辑代码和目标数据，生成目标Web页面进行大屏显示。

本发明实施例中，响应于目标Web页面的大屏显示请求，获取与目标Web页面匹配的单纯业务逻辑代码和目标Web页面中待加载的目标数据的数据参数；根据数据参数，在多个前端存储区和多个后端存储区中定位目标存储区；至少一个前端存储区和至少一个后端存储区能够响应修改操作；在目标存储区中获取目标数据，并根据单纯业务逻辑代码和目标数据，生成目标Web页面进行大屏显示，解决了现有技术中前端和后端都无法有效管理大屏显示内容的问题，实现了前端业务逻辑代码与显示数据分开，保证前端代码的可读性，同时使得前端和后端都支持对大屏显示内容进行修改。

可选的，前端存储区包括：用于存储演示数据的前端演示数据模块以及用于存储演示数据的前端应用缓存区；

后端存储区包括：用于存储演示数据的第一后端服务器存储区，以及用于存储真实数据的第二后端服务器存储区；

其中，前端应用缓存区和第一后端服务器存储区能够响应修改操作。

可选的，定位模块320，用于：

如果数据参数包括演示参数，则将前端演示数据模块作为目标存储区；

如果数据参数包括非演示参数以及前端参数，则将前端应用缓存区作为目标存储区；

如果数据参数包括非演示参数以及后端参数，则获取服务器的配置文件中设置的数据模式；

如果数据模式为演示模式，则将第一后端服务器存储区作为目标存储区，否则，将第二后端服务器存储区作为目标存储区。

可选的，目标Web页面中待加载的目标数据的数据参数是通过Axios获取的；

所述方法，还包括：

请求发送模块，用于通过Axios，如果确定数据参数包括非演示参数，则向目标Web页面的监控节点发送HTTP请求；

通过监控节点，对HTTP请求进行格式解析，获取数据端字段对应的字段值作为目标数据的端类型参数；端类型参数包括前端参数和后端参数。

可选的，显示模块330，用于：

如果目标存储区为前端演示数据模块，则通过Axios中的适配器应用程序接口API，从前端演示数据模块中获取演示数据作为目标数据；

如果目标存储区为前端应用缓存区，则通过浏览器应用的缓存API，从前端应用缓存区中获取演示数据作为目标数据；

如果目标存储区为第一后端服务器存储区，则通过监控节点从第一后端服务器存储区中获取演示数据作为目标数据；

如果目标存储区为第二后端服务器存储区，则通过监控节点从第二后端服务器存储区中获取真实数据作为目标数据。

可选的，还包括：

数据修改模块，用于响应于对可执行JS脚本页面的输入操作，使用输入数据对前端应用缓存区中的演示数据进行修改；前端应用缓存区对外提供可执行JS脚本的页面入口；和/或，

响应于对后端服务器的配置文件的数据编辑操作，对配置文件中的演示数据进行修改。

本发明实施例所提供的Web页面的大屏显示装置可执行本发明任意实施例所提供的Web页面的大屏显示方法，具备执行方法相应的功能模块和有益效果。

实施例四

图4是本发明实施例四中的一种电子设备的结构示意图。图4示出了适于用来实现本发明实施方式的示例性设备12的框图。图4显示的设备12仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图4所示，设备12以通用计算设备的形式表现。设备12的组件可以包括但不限于：一个或者多个处理器或者处理单元16，***存储器28，连接不同***组件(包括***存储器28和处理单元16)的总线18。

总线18表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，***总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(ISA)总线，微通道体系结构(MAC)总线，增强型ISA总线、视频电子标准协会(VESA)局域总线以及***组件互连(PCI)总线。

设备12典型地包括多种计算机***可读介质。这些介质可以是任何能够被设备12访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

***存储器28可以包括易失性存储器形式的计算机***可读介质，例如随机存取存储器(RAM)30和/或高速缓存存储器32。设备12可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机***存储介质。仅作为举例，存储***34可以用于读写不可移动的、非易失性磁介质(图4未显示，通常称为“硬盘驱动器”)。尽管图4中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM,DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线18相连。存储器28可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施例的功能。

具有一组(至少一个)程序模块42的程序/实用工具40，可以存储在例如存储器28中，这样的程序模块42包括但不限于操作***、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块42通常执行本发明所描述的实施例中的功能和/或方法。

设备12也可以与一个或多个外部设备14(例如键盘、指向设备、显示器24等)通信，还可与一个或者多个使得用户能与该设备12交互的设备通信，和/或与使得该设备12能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口22进行。并且，设备12还可以通过网络适配器20与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器20通过总线18与设备12的其它模块通信。应当明白，尽管图中未示出，可以结合设备12使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID***、磁带驱动器以及数据备份存储***等。

处理单元16通过运行存储在***存储器28中的程序，从而执行各种功能应用以及数据处理，例如实现本发明实施例所提供的Web页面的大屏显示方法。

也即：实现一种Web页面的大屏显示方法，包括：

响应于目标Web页面的大屏显示请求，获取与目标Web页面匹配的单纯业务逻辑代码和目标Web页面中待加载的目标数据的数据参数；

根据数据参数，在多个前端存储区和多个后端存储区中定位目标存储区；至少一个前端存储区和至少一个后端存储区能够响应修改操作；

在目标存储区中获取目标数据，并根据单纯业务逻辑代码和目标数据，生成目标Web页面进行大屏显示。

实施例五

本发明实施例五还公开了一种计算机存储介质，其上存储有计算机程序，该程序被处理器执行时实现一种Web页面的大屏显示方法，包括：

响应于目标Web页面的大屏显示请求，获取与目标Web页面匹配的单纯业务逻辑代码和目标Web页面中待加载的目标数据的数据参数；

根据数据参数，在多个前端存储区和多个后端存储区中定位目标存储区；至少一个前端存储区和至少一个后端存储区能够响应修改操作；

在目标存储区中获取目标数据，并根据单纯业务逻辑代码和目标数据，生成目标Web页面进行大屏显示。

本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是，但不限于电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行***、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，程序设计语言包括面向对象的程序设计语言，诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言，诸如”C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (8)

1.一种Web页面的大屏显示方法，其特征在于，包括：

响应于目标Web页面的大屏显示请求，获取与目标Web页面匹配的单纯业务逻辑代码和目标Web页面中待加载的目标数据的数据参数；

根据数据参数，在多个前端存储区和多个后端存储区中定位目标存储区；至少一个前端存储区和至少一个后端存储区能够响应修改操作；

在目标存储区中获取目标数据，并根据单纯业务逻辑代码和目标数据，生成目标Web页面进行大屏显示；

其中，根据数据参数，在多个前端存储区和多个后端存储区中定位目标存储区，包括：

如果所述数据参数包括演示参数，则将前端演示数据模块作为目标存储区；

如果所述数据参数包括非演示参数以及前端参数，则将前端应用缓存区作为目标存储区；

如果所述数据参数包括非演示参数以及后端参数，则获取服务器的配置文件中设置的数据模式；

如果所述数据模式为演示模式，则将第一后端服务器存储区作为目标存储区，否则，将第二后端服务器存储区作为目标存储区；

其中，所述目标Web页面中待加载的目标数据的数据参数是通过Axios获取的；所述方法，还包括：

通过所述Axios，如果确定所述数据参数包括非演示参数，则向所述目标Web页面的监控节点发送HTTP请求；

通过所述监控节点，对所述HTTP请求进行格式解析，获取数据端字段对应的字段值作为目标数据的端类型参数；所述端类型参数包括前端参数和后端参数。

2.根据权利要求1所述的方法，其特征在于,所述前端存储区包括：用于存储演示数据的前端演示数据模块以及用于存储演示数据的前端应用缓存区；

所述后端存储区包括：用于存储演示数据的第一后端服务器存储区，以及用于存储真实数据的第二后端服务器存储区；

其中，所述前端应用缓存区和所述第一后端服务器存储区能够响应修改操作。

3.根据权利要求1所述的方法，其特征在于，在目标存储区中获取目标数据，包括：

如果所述目标存储区为前端演示数据模块，则通过Axios中的适配器应用程序接口API，从前端演示数据模块中获取演示数据作为目标数据；

如果所述目标存储区为前端应用缓存区，则通过浏览器应用的缓存API，从前端应用缓存区中获取演示数据作为目标数据；

如果所述目标存储区为第一后端服务器存储区，则通过监控节点从第一后端服务器存储区中获取演示数据作为目标数据；

如果所述目标存储区为第二后端服务器存储区，则通过监控节点从第二后端服务器存储区中获取真实数据作为目标数据。

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

响应于对可执行JS脚本页面的输入操作，使用输入数据对前端应用缓存区中的演示数据进行修改；所述前端应用缓存区对外提供所述可执行JS脚本的页面入口；和/或，

响应于对后端服务器的配置文件的数据编辑操作，对所述配置文件中的演示数据进行修改。

5.一种Web页面的大屏显示装置，其特征在于，包括：

获取模块，用于响应于目标Web页面的大屏显示请求，获取与目标Web页面匹配的单纯业务逻辑代码和目标Web页面中待加载的目标数据的数据参数；

定位模块，用于根据数据参数，在多个前端存储区和多个后端存储区中定位目标存储区；至少一个前端存储区和至少一个后端存储区能够响应修改操作；

显示模块，用于在目标存储区中获取目标数据，并根据单纯业务逻辑代码和目标数据，生成目标Web页面进行大屏显示；

其中，所述定位模块，用于：

如果数据参数包括演示参数，则将前端演示数据模块作为目标存储区；

如果数据参数包括非演示参数以及前端参数，则将前端应用缓存区作为目标存储区；

如果数据参数包括非演示参数以及后端参数，则获取服务器的配置文件中设置的数据模式；

如果数据模式为演示模式，则将第一后端服务器存储区作为目标存储区，否则，将第二后端服务器存储区作为目标存储区；

其中，目标Web页面中待加载的目标数据的数据参数是通过Axios获取的；

所述装置，还包括：请求发送模块，用于通过Axios，如果确定数据参数包括非演示参数，则向目标Web页面的监控节点发送HTTP请求；

通过监控节点，对HTTP请求进行格式解析，获取数据端字段对应的字段值作为目标数据的端类型参数；端类型参数包括前端参数和后端参数。

6.根据权利要求5所述的装置，其特征在于，所述前端存储区包括：用于存储演示数据的前端演示数据模块以及用于存储演示数据的前端应用缓存区；

所述后端存储区包括：用于存储演示数据的第一后端服务器存储区，以及用于存储真实数据的第二后端服务器存储区；

其中，所述前端应用缓存区和所述第一后端服务器存储区能够响应修改操作。

7.一种电子设备，其特征在于，所述设备包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-4中任一项所述的Web页面的大屏显示方法。

8.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-4中任一项所述的Web页面的大屏显示方法。