网页外部逻辑数据获取方法、系统、设备及存储介质与流程

1.本技术涉及互联网信息处理技术领域，尤其涉及一种网页外部逻辑数据获取方法、系统、设备及存储介质。


背景技术：

2.在网页开发的项目或用户浏览网页时，网页时常有在https协议下获取外部逻辑数据的需求，由于受到服务器架设在海外从而因不确定的网络环境和资源失效问题的影响，有时会出现网站网页获取数据及组件失败或获取速度慢的问题，会导致网站网页加载出错，显示乱码或者空白页面，从而使得用户的网页使用体验差。


技术实现要素：

3.本技术的主要目的在于提供一种网页外部逻辑数据获取方法、系统、设备及存储介质，旨在解决现有技术中网页开发效率低下技术问题。
4.为实现以上目的，本技术提供一种网页外部逻辑数据获取方法，所述网页外部逻辑数据获取方法包括：
5.加载资源数据；
6.判断所述资源数据是否加载成功；
7.若不成功，切换源地址，返回所述加载资源数据的步骤，直到所述资源数据加载成功。
8.可选地，所述切换源地址，返回所述加载资源数据的步骤的步骤，包括：
9.选取新的数据源地址；
10.在所述新的数据源地址创建地址标签，基于所述地址标签，引入所述资源数据；
11.返回所述加载资源数据，加载所述资源数据。
12.可选地，所述选取新的数据源地址的步骤，包括：
13.获取预设备用数据源；
14.在所述预设备用数据源中，选取所述新的数据源地址。
15.可选地，所述加载资源数据的步骤，包括：
16.获取外部数据库；
17.引入所述外部数据库中的资源数据文件；
18.对所述资源数据文件中的所述资源数据进行按需加载。
19.可选地，所述对所述资源数据文件中的资源数据进行按需加载的步骤，包括：
20.确定所述资源数据文件中需求的资源数据；
21.对所述需求的资源数据进行加载。
22.可选地，所述判断所述资源数据是否加载成功的步骤，包括：
23.监控所述资源数据的加载，得到加载信息；
24.基于所述加载信息，判断所述资源数据是否加载成功。
25.可选地，所述基于所述加载信息，判断所述资源数据是否加载成功的步骤，包括：
26.判断所述加载信息中是否包含资源加载失败或资源加载超时的信息；
27.若所述加载信息中包含资源加载失败或资源加载超时的信息，则判定为所述资源数据加载失败。
28.本技术还提供一种网页外部逻辑数据获取系统，所述网页外部逻辑数据获取系统包括：
29.加载模块，用于加载资源数据；
30.判断模块，用于判断所述资源数据是否加载成功；
31.切换模块，用于若不成功，切换源地址，返回所述加载资源数据的步骤，直到所述资源数据加载成功。
32.本技术还提供一种网页外部逻辑数据获取设备，所述网页外部逻辑数据获取设备包括：存储器、处理器以及存储在存储器上的用于实现所述网页外部逻辑数据获取方法的程序，
33.所述存储器用于存储实现网页外部逻辑数据获取方法的程序；
34.所述处理器用于执行实现所述网页外部逻辑数据获取方法的程序，以实现所述网页外部逻辑数据获取方法的步骤。
35.本技术还提供一种存储介质，所述存储介质上存储有实现网页外部逻辑数据获取方法的程序，所述实现网页外部逻辑数据获取方法的程序被处理器执行以实现所述网页外部逻辑数据获取方法的步骤。
36.本技术提供的一种网页外部逻辑数据获取方法、系统、设备及存储介质，与现有技术中因网络问题或资源失效，网页无法显示，导致用户体验差相比，在本技术中，加载资源数据；判断所述资源数据是否加载成功；若不成功，切换源地址，返回所述加载资源数据的步骤，直到所述资源数据加载成功。即在本技术中，在网页加载所述资源数据后，判断所述资源数据是否加载成功，在资源数据加载失败的情况下，自动切换获取源的源地址，直到资源数据获取成功再把网页成功加载出来，提高了用户的网页使用体验。
附图说明
37.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本技术的实施例，并与说明书一起用于解释本技术的原理。为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
38.图1是本技术实施例方案涉及的硬件运行环境的设备结构示意图；
39.图2为本技术网页外部逻辑数据获取方法第一实施例的流程示意图；
40.图3为本技术网页外部逻辑数据获取方法第二实施例的流程示意图。
41.本技术目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
42.应当理解，此处所描述的具体实施例仅仅用以解释本技术，并不用于限定本技术。
43.如图1所示，图1是本技术实施例方案涉及的硬件运行环境的终端结构示意图。
44.本技术实施例终端可以是pc，也可以是智能手机、平板电脑、电子书阅读器、mp3(moving picture experts group audio layer iii，动态影像专家压缩标准音频层面3)播放器、mp4(moving picture experts group audio layer iv，动态影像专家压缩标准音频层面4)播放器、便携计算机等具有显示功能的可移动式终端设备。
45.如图1所示，该终端可以包括：处理器1001，例如cpu，网络接口1004，用户接口1003，存储器1005，通信总线1002。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(display)、输入单元比如键盘(keyboard)，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如wi-fi接口)。存储器1005可以是高速ram存储器，也可以是稳定的存储器(non-volatile memory)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。
46.可选地，终端还可以包括摄像头、rf(radio frequency，射频)电路，传感器、音频电路、wifi模块等等。其中，传感器比如光传感器、运动传感器以及其他传感器。具体地，光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示屏的亮度，接近传感器可在移动终端移动到耳边时，关闭显示屏和/或背光。作为运动传感器的一种，重力加速度传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别移动终端姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；当然，移动终端还可配置陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。
47.本领域技术人员可以理解，图1中示出的终端结构并不构成对终端的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。
48.如图1所示，作为一种计算机存储介质的存储器1005中可以包括操作装置、网络通信模块、用户接口模块以及网页外部逻辑数据获取程序。
49.在图1所示的终端中，网络接口1004主要用于连接后台服务器，与后台服务器进行数据通信；用户接口1003主要用于连接客户端(用户端)，与客户端进行数据通信；而处理器1001可以用于调用存储器1005中存储的网页外部逻辑数据获取程序。
50.参照图2，本技术实施例提供一种网页外部逻辑数据获取方法，所述网页外部逻辑数据获取方法包括：
51.步骤s100，加载资源数据；
52.步骤s200，判断所述资源数据是否加载成功；
53.步骤s300，若不成功，切换源地址，返回所述加载资源数据的步骤，直到所述资源数据加载成功。
54.在本实施例中，具体的应用场景可以是：
55.在用户浏览网页时，网页需要获取外部逻辑数据，进行网页的构建，而在网页的浏览过程中，因网络问题或资源失效，会导致外部逻辑数据获取不到、获取速度缓慢等问题，从而使得网页无法显示，导致用户体验差。
56.具体步骤如下：
57.步骤s100，加载资源数据；
58.在本实施例中，系统加载资源数据，所述资源数据为外部逻辑数据，其中，所述资源数据包括网页构建所需要的逻辑数据以及界面组件，用于网站网页的构建。
59.在本实施例中，网站网页的开发框架可以是react、vue、angular、alpine、preact、litelement、stimulus和ember等，其中，在本实施例中优选vue框架，vue是一套用于构建用户界面的渐进式框架。vue具备自底向上逐层应用。vue的核心库在于视图层，易与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，vue能为复杂的单页应用提供驱动。
60.具体地，所述步骤s100，包括以下步骤s110-s130：
61.步骤s110，获取外部数据库；
62.在本实施例中，系统获取外部数据库，其中，所述外部数据库为开源数据库，其源码对外开放，开发人员可以在其原始设计基础上修改或使用。具体地，开源数据库包括：mssql服务器、mysql、oracle、postgresql、mongodb等。
63.在本实施例中，系统获取外部数据库的方式可以是网页预连接所述外部数据库，其中，预连接可以是访问数据库的相应访问标准，也可以是相应的访问组件。
64.步骤s120，引入所述外部数据库中的资源数据文件；
65.在本实施例中，所述资源数据文件为承载网页构建所需要的逻辑数据以及界面组件的文件，优选地，在前端vue框架开发的网站页面中，系统引入所述外部数据库中的资源数据文件的方式可以是通过link标签引入开源数据库里所需要的逻辑数据以及界面组件，将外部引入link在浏览器上会变成一个可监控的动态文件。
66.步骤s130，对所述资源数据文件中的所述资源数据进行按需加载。
67.在本实施例中，系统基于网站网页的构建需求，对所述资源数据文件中的所述资源数据进行按需加载，由于在不同网页的构建，所需求的资源数据不同，即根据网页的需求进行资源数据的加载，以此加快资源数据的获取速度。例如，一个网站包含a、b两个网页，外部数据库中包括有x、y、z文件，a网页所需要的加载的资源文件为外部数据库中的x、y文件，b网页所需要的加载的资源文件为外部数据库中的y、z文件，当用户打开a网页，则系统加载外部数据库中的x、y文件。
68.在本实施例中，系统通过轮询的方式，对所述资源数据文件中的所述资源数据进行按需加载。例如，系统采用if函数轮询判断，进行按需数据加载。
69.具体地，所述步骤s130，包括以下步骤s131-s132：
70.步骤s131，确定所述资源数据文件中需求的资源数据；
71.在本实施例中，系统通过轮询的方式，确定所述资源数据文件中需求的资源数据，优选地，在前端vue框架开发的网站页面中，系统采用if函数轮询判断，确定所述资源数据文件中需求的资源数据。
72.步骤s132，对所述需求的资源数据进行加载。
73.在本实施例中，系统对所述需求的资源数据进行加载。例如，一个网站包含网页a，外部数据库中包括有x、y、z文件，a网页所需要的加载的资源文件为外部数据库中的x、y文件，当用户打开a网页，则系统加载外部数据库中的x、y文件。
74.步骤s200，判断所述资源数据是否加载成功；
75.在本实施例中，系统判断所述资源数据是否加载成功，若所述资源数据加载成功，
则正常加载网页界面；若所述资源数据加载失败，则进入步骤s300。
76.在本实施例中，系统判断所述资源数据是否加载成功的方式可以是判断所述资源数据是否成功加载，也可以是判断所述资源数据是否加载超时。在本实施例中，系统启用自定义的算法判断该数据源已超时或者已失效。
77.具体地，所述步骤s200，包括以下步骤s210-s220：
78.步骤s210，监控所述资源数据的加载，得到加载信息；
79.在本实施例中，系统监控所述资源数据的加载，得到所述加载信息，其中，所述加载信息包括加载成功的信息、加载失败的信息和加载超时的信息。优选地，在前端vue框架开发的网站页面下，通过vue框架的watch监听属性来监控数据组件有无加载成功。
80.步骤s220，基于所述加载信息，判断所述资源数据是否加载成功。
81.在本实施例中，所述加载信息包括加载成功的信息、加载失败的信息和加载超时的信息，若加载信息为加载成功的信息，则判断所述资源数据加载成功；若加载信息为加载失败的信息或加载超时的信息，则判断所述资源数据加载失败。
82.具体地，所述步骤s220，包括以下步骤s221-s222：
83.步骤s221，判断所述加载信息中是否包含资源加载失败或资源加载超时的信息；
84.在本实施例中，资源加载超时的信息是系统监控所述资源数据的加载时，超过预设时间，未得到其他加载信息时，判定为资源加载超时，其中，预设时间可以根据需求进行自行设定，例如10秒计时，在此不做具体限定。
85.步骤s222，若所述加载信息中包含资源加载失败或资源加载超时的信息，则判定为所述资源数据加载失败。
86.在本实施例中，若加载信息为加载成功的信息，则判断所述资源数据加载成功；若加载信息为加载失败的信息或加载超时的信息，则判断所述资源数据加载失败。
87.步骤s300，若不成功，切换源地址，返回所述加载资源数据的步骤，直到所述资源数据加载成功。
88.在本实施例中，系统若判定资源数据获取成功，则正常加载网页界面；若所述资源数据加载失败，则系统切换源地址，重新加载获取失败的资源数据。其中，源地址为预设的数据源地址，所述源地址中也包含网站网页所需求的资源数据。在重新加载获取失败的资源数据中，按需加载获取失败的资源数据，按需加载必要文件，加快加载速度。
89.具体地，所述步骤s300，包括以下步骤s310-s330：
90.步骤s310，选取新的数据源地址；
91.在本实施例中，新的数据源地址为预设的数据源地址，所述新的数据源地址中也包含网站网页所需求的资源数据，其中，外部数据库中包含预设数量的数据源地址，所述新的数据源地址从预设数量的数据源地址中选取。预设数量的数据源地址包含两个以上，预设数量可以根据需求进行自行设定，在此不做具体限定。
92.具体地，所述步骤s310，包括以下步骤s311-s312：
93.步骤s311，获取预设备用数据源；
94.在本实施例中，预设备用数据源为预设的数据源地址，系统获取预设备用数据源，其中，所述预设备用数据源也包含网站网页所需求的资源数据。
95.步骤s312，在所述预设备用数据源中，选取所述新的数据源地址。
96.在本实施例中，外部数据库中包含预设数量的预设备用数据源，所述新的数据源地址从预设备用数据源中选取，其中，所述预设备用数据源也包含网站网页所需求的资源数据。
97.步骤s320，在所述新的数据源地址创建地址标签，基于所述地址标签，引入所述资源数据；
98.在本实施例中，系统在所述新的数据源地址创建地址标签，基于所述地址标签，引入所述资源数据，即在新的数据源地址引入以上获取失败的资源数据。优选地，在前端vue框架开发的网站页面下，重新创建一个文件引入地址标签，插入head头部标签，引入所述资源数据。
99.步骤s330，返回所述加载资源数据，加载所述资源数据。
100.在本实施例中，同上步骤s100，系统在所述新的数据源地址中，重新加载所述资源数据。
101.在本实施例中，系统判断在新的数据源地址加载的所述资源数据是否加载成功，若成功，则正常加载网页界面；若所述资源数据加载失败，同上步骤s300，系统切换源地址，重新加载获取失败的资源数据，直到资源数据获取成功再把网页成功加载出来，有效降低了网站页面的报错概率，提升用户体验。
102.本技术提供的一种网页外部逻辑数据获取方法、系统、设备及存储介质，与现有技术中因网络问题或资源失效，网页无法显示，导致用户体验差相比，在本技术中，加载资源数据；判断所述资源数据是否加载成功；若不成功，切换源地址，返回所述加载资源数据的步骤，直到所述资源数据加载成功。即在本技术中，在网页加载所述资源数据后，判断所述资源数据是否加载成功，在资源数据加载失败的情况下，自动切换获取源的源地址，直到资源数据获取成功再把网页成功加载出来，提高了用户的网页使用体验。
103.本技术基于第一实施例，还提供另一实施例，所述另一实施例中，参照图3，在前端vue框架开发的html静态网站页面下，构建一个loadjscss函数，里面用document.createelement方法初始化的script标签和link标签，这样从外部引入script和link在浏览器上会变成一个可监控的动态文件，之后ie浏览器会提供onload属性、webkit内核的浏览器会提供sheet属性来判断文件是否加载成功。这个时候可以在vue.js框架的watch监听钩子函数里做if判断，来确认onload和sheet里的js和css引入文件是否加载成功，如果引入成功的话会返回true逻辑值跳过此步骤正常加载网页；若是不成功，则构建一个poll函数做if判断，得到的逻辑值不为true时，则进入失败if判断，更换一个源文件地址，其中，更换源文件地址采用document.createelement、setattribute、document.getelementsbytagname("head")[0].appendchild(link)三个函数方法，重新创建一个文件引入地址标签，插入head头部标签里，浏览器会优先加载head标签。再重新调用loadjscss函数开始初始化加载网页，使用javascript里的document.write方法按需加载必要文件，watch钩子函数会持续监听onload和sheet属性有没有返回true逻辑值，若没有返回则继续调用poll函数进行轮询换源操作，直到外部源文件成功加载然后跳过轮询，不再调用poll函数为止。
[0104]
需要说明的是，根据网页加载html文件的顺序加载规则，没有加载完head标签里的script标签和link标签不会加载body标签里的网站主体内容，所以在这个规则下，可以
使用进行持续的轮询引入的外部源文件(源代码里的script标签和link标签)，进行一个网页加载过程的优化。
[0105]
本技术还提供一种网页外部逻辑数据获取系统，所述网页外部逻辑数据获取系统包括：
[0106]
加载模块，用于加载资源数据；
[0107]
判断模块，用于判断所述资源数据是否加载成功；
[0108]
切换模块，用于若不成功，切换源地址，返回所述加载资源数据的步骤，直到所述资源数据加载成功。
[0109]
可选地，所述切换模块包括：
[0110]
选址模块，用于选取新的数据源地址；
[0111]
换源模块，用于在所述新的数据源地址创建地址标签，基于所述地址标签，引入所述资源数据；
[0112]
循环加载模块，用于返回所述加载资源数据，加载所述资源数据。
[0113]
可选地，所述选址模块包括：
[0114]
数据源获取模块，用于获取预设备用数据源；
[0115]
选取模块，用于在所述预设备用数据源中，选取所述新的数据源地址。
[0116]
可选地，所述加载模块包括：
[0117]
数据库获取模块，获取外部数据库；
[0118]
引入模块，用于引入所述外部数据库中的资源数据文件；
[0119]
按需加载模块，用于对所述资源数据文件中的所述资源数据进行按需加载。
[0120]
可选地，所述按需加载模块包括：
[0121]
确定模块，用于确定所述资源数据文件中需求的资源数据；
[0122]
需求加载模块，用于对所述需求的资源数据进行加载。
[0123]
可选地，所述判断模块包括：
[0124]
监控模块，用于监控所述资源数据的加载，得到加载信息；
[0125]
加载判断模块，用于基于所述加载信息，判断所述资源数据是否加载成功。
[0126]
可选地，所述加载判断模块包括：
[0127]
信息判断模块，用于判断所述加载信息中是否包含资源加载失败或资源加载超时的信息；
[0128]
判定模块，用于若所述加载信息中包含资源加载失败或资源加载超时的信息，则判定为所述资源数据加载失败。
[0129]
本技术网页外部逻辑数据获取系统具体实施方式与上述网页外部逻辑数据获取方法各实施例基本相同，在此不再赘述。
[0130]
参照图1，图1是本技术实施例方案涉及的硬件运行环境的设备结构示意图。
[0131]
如图1所示，该网页外部逻辑数据获取设备可以包括：处理器1001，例如cpu，存储器1005，通信总线1002。其中，通信总线1002用于实现处理器1001和存储器1005之间的连接通信。存储器1005可以是高速ram存储器，也可以是稳定的存储器(non-volatile memory)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储设备。
[0132]
可选地，该网页外部逻辑数据获取设备还可以包括矩形用户接口、网络接口、摄像
头、rf(radio frequency，射频)电路，传感器、音频电路、wifi模块等等。矩形用户接口可以包括显示屏(display)、输入子模块比如键盘(keyboard)，可选矩形用户接口还可以包括标准的有线接口、无线接口。网络接口可选的可以包括标准的有线接口、无线接口(如wi-fi接口)。
[0133]
本领域技术人员可以理解，图3中示出的网页外部逻辑数据获取设备结构并不构成对网页外部逻辑数据获取设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。
[0134]
如图1所示，作为一种存储介质的存储器1005中可以包括操作系统、网络通信模块以及网页外部逻辑数据获取程序。操作系统是管理和控制网页外部逻辑数据获取设备硬件和软件资源的程序，支持网页外部逻辑数据获取程序以及其它软件和/或程序的运行。网络通信模块用于实现存储器1005内部各组件之间的通信，以及与网页外部逻辑数据获取系统中其它硬件和软件之间通信。
[0135]
在图1所示的网页外部逻辑数据获取设备中，处理器1001用于执行存储器1005中存储的网页外部逻辑数据获取程序，实现上述任一项所述的网页外部逻辑数据获取方法的步骤。
[0136]
本技术网页外部逻辑数据获取设备具体实施方式与上述网页外部逻辑数据获取方法各实施例基本相同，在此不再赘述。
[0137]
本技术还提供一种存储介质，所述存储介质上存储有实现网页外部逻辑数据获取方法的程序，所述实现网页外部逻辑数据获取方法的程序被处理器执行以实现所述网页外部逻辑数据获取方法的步骤。
[0138]
本技术存储介质具体实施方式与上述网页外部逻辑数据获取方法各实施例基本相同，在此不再赘述。
[0139]
本技术还提供一种计算机程序产品、包括计算机程序，该计算机程序被处理器执行时实现上述的网页外部逻辑数据获取方法的步骤。
[0140]
本技术计算机程序产品的具体实施方式与上述网页外部逻辑数据获取方法各实施例基本相同，在此不再赘述。
[0141]
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
[0142]
上述本技术实施例序号仅仅为了描述，不代表实施例的优劣。
[0143]
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在如上所述的一个存储介质(如rom/ram、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本技术各个实施例所述的方法。
[0144]
以上仅为本技术的优选实施例，并非因此限制本技术的专利范围，凡是利用本申
请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本技术的专利保护范围内。