微服务组件的渲染方法、电子设备和存储介质与流程

1.本技术涉及计算机领域，具体而言，涉及一种微服务组件的渲染方法、电子设备和存储介质。


背景技术：

2.随着技术的发展，web应用由单一的单体应用转变为多个小型前端微组件聚合为一的应用。
3.目前，微组件的渲染通常在加载(初始化)页面时，并行执行，在这一过程中，微组件的渲染需要在服务器返回渲染所需的数据之后，才能执行，然而由于服务器返回渲染所需的数据需要时间，因此会出现渲染所需的数据未拿到而无法显示页面的具体内容，即页面的首屏为白屏。


技术实现要素：

4.本技术实施例的目的在于提供一种微服务组件的渲染方法、电子设备和存储介质，用以提高客户端渲染页面组件的速度，进而实现客户端在加载目标页面时，目标页面的首屏就能够看到所有的数据。同时，本技术还用于实现服务端和页面级别不再关注微组件的接口及业务逻辑，进而降低接口的维护成本。
5.第一方面，本发明提供一种微服务组件的渲染方法，所述渲染方法应用于客户端，所述渲染方法包括：
6.将目标页面中若干个微服务组件的服务文件发送至服务端，所述服务文件包括初始化函数，所述初始化函数用于实现所述微服务组件的渲染接口并返回promise对象；
7.向所述服务端发送针对所述目标页面的预渲染请求，所述预渲染请求包括所述微服务组件列表和所述微服务组件列表的数据，所述微服务组件列表的数据包括所述微服务组件之间的顺序和所述微服务组件之间的嵌套关系，以使所述服务端基于所述微服务组件之间的顺序和所述微服务组件之间的嵌套关系，调用每个微服务组件的服务文件并基于所述服务文件中的所述初始化函数，得到到所述微服务组件的属性数据；
8.接收所述服务端返回的每个所述微服务组件的属性数据，并将每个所述微服务组件的属性数据存储于所述目标页面的数据仓库；
9.当所述目标页面初始化时，从所述目标页面的数据仓库读取每个所述微服务组件的属性数据；
10.基于每个所述微服务组件的属性数据渲染每个所述微服务组件。
11.在本技术实施例中，通过将目标页面中若干个微服务组件的服务文件发送至服务端和将微服务组件列表和微服务组件列表的数据发送子服务端，进而服务端就能够基于微服务组件之间的顺序和微服务组件之间的嵌套关系，调用每个微服务组件的服务文件并基于服务文件中的初始化函数，得到到微服务组件的属性数据，进而完成对组件的预渲染，进而当客户终端加载目标页面初始化，就能够从所述目标页面的数据仓库读取每个所述微服
务组件的属性数据，并基于每个所述微服务组件的属性数据快速渲染每个所述微服务组件。
12.与现有技术相比，本技术的客户端在加载目标页面之前，将服务文件发送至服务端，从而利用服务端获取组件的属性数据，这样一来，当客户端在渲染每个组件时，无需等待服务端返回组件的属性数据，进而快速渲染组件。而现有技术，则需要在客户端在渲染每个组件时，等待服务端返回组件的属性数据，其中，等待服务端返回组件的属性数据期间，目标页面因没有组件的属性数据，故目标页面的首屏为白屏。换而言之，本技术能够提高客户端渲染页面组件的速度，进而实现客户端在加载目标页面时，目标页面的首屏就能够看到所有的数据。
13.另一方面，通过将目标页面中若干个微服务组件的服务文件发送至服务端，使得服务端通过调用服务文件中的初始化函数即可得到组件的属性数据，进而使得服务无需注微组件的接口及业务逻辑，从而降低接口的维护成本。
14.在可选的实施方式中，在所述基于每个所述微服务组件的属性数据渲染每个所述微服务组件之后，所述方法还包括：
15.接收所述服务端再次返回的所述微服务组件的属性数据，并作为所述微服务组件的刷新数据；
16.获取所述微服务组件的实时数据；
17.判断所述微服务组件的实时数据是否与所述微服务组件的刷新数据一致，当所述微服务组件的刷新数据与所述微服务组件的实时数据不一致时，基于所述微服务组件的实时数据渲染所述微服务组件。
18.在本可选的实施方式中，通过判断微服务组件的实时数据是否与微服务组件的刷新数据一致，进而当微服务组件的刷新数据与微服务组件的实时数据不一致时，基于微服务组件的实时数据渲染微服务组件，能够使得客户看到的数据具有实时性。
19.在可选的实施方式中，所述将目标页面中若干个微服务组件的服务文件发送至服务端，包括：
20.将所述目标页面中若干个微服务组件的服务文件进行打包，得到每个所述微服务组件的库文件；
21.将所述每个所述微服务组件的库文件发送至所述服务端，以使所述服务端基于每个所述微服务组件的库文件调用所述每个微服务组件的服务文件。
22.在本可选的实施方式中，通过将目标页面中若干个微服务组件的服务文件进行打包，进而能够得到每个微服务组件的库文件，进而能够将每个微服务组件的库文件发送至服务端，使服务端基于每个微服务组件的库文件调用每个微服务组件的服务文件。
23.在可选的实施方式中，所述将所述目标页面中若干个微服务组件的服务文件进行打包，包括：
24.基于webpack工具对所述目标页面中若干个微服务组件的服务文件进行打包，得到每个所述微服务组件的库文件，其中，每个所述微服务组件的库文件的模式为预设模式，在所述预设模式下，所述服务端可调用每个所述微服务组件的库文件。
25.在本可选的实施方式中，基于webpack工具能够对目标页面中若干个微服务组件的服务文件进行打包，进而得到每个微服务组件的库文件，其中，每个微服务组件的库文件
的模式为预设模式，在预设模式下，服务端可调用每个微服务组件的库文件。
26.第二方面，本发明提供一种微服务组件的渲染方法，所述方法应用于服务端，所述方法包括：
27.接收客户端发送的目标页面中若干个微服务组件的服务文件，所述服务文件包括初始化函数，所述初始化函数用于实现所述微服务组件的渲染接口并返回promise对象；
28.接收所述客户端发送的针对所述目标页面的预渲染请求，所述预渲染请求包括所述微服务组件列表和所述微服务组件列表的数据，所述微服务组件列表的数据包括所述微服务组件之间的顺序和所述微服务组件之间的嵌套关系；
29.基于所述微服务组件之间的顺序和所述微服务组件之间的嵌套关系，调用每个微服务组件的服务文件并基于所述服务文件中的所述初始化函数，得到到所述微服务组件的属性数据；
30.向所述客户端返回每个所述微服务组件的属性数据，以使所述客户端并将每个所述微服务组件的属性数据存储于所述目标页面的数据仓库，并在所述目标页面初始化时，从所述目标页面的数据仓库读取每个所述微服务组件的属性数据和基于每个所述微服务组件的属性数据渲染每个所述微服务组件。
31.在本技术实施例中，通过将目标页面中若干个微服务组件的服务文件发送至服务端和将微服务组件列表和微服务组件列表的数据发送子服务端，进而服务端就能够基于微服务组件之间的顺序和微服务组件之间的嵌套关系，调用每个微服务组件的服务文件并基于服务文件中的初始化函数，得到到微服务组件的属性数据，进而完成对组件的预渲染，进而当客户终端加载目标页面初始化，就能够从所述目标页面的数据仓库读取每个所述微服务组件的属性数据，并基于每个所述微服务组件的属性数据快速渲染每个所述微服务组件。
32.与现有技术相比，本技术的客户端在加载目标页面之前，将服务文件发送至服务端，从而利用服务端获取组件的属性数据，这样一来，当客户端在渲染每个组件时，无需等待服务端返回组件的属性数据，进而快速渲染组件。而现有技术，则需要在客户端在渲染每个组件时，等待服务端返回组件的属性数据，其中，等待服务端返回组件的属性数据期间，目标页面因没有组件的属性数据，故目标页面的首屏为白屏。换而言之，本技术能够提高客户端渲染页面组件的速度，进而实现客户端在加载目标页面时，目标页面的首屏就能够看到所有的数据。
33.另一方面，通过将目标页面中若干个微服务组件的服务文件发送至服务端，使得服务端通过调用服务文件中的初始化函数即可得到组件的属性数据，进而使得服务无需注微组件的接口及业务逻辑，从而降低接口的维护成本。
34.在可选的实施方式中，在向所述客户端返回每个所述微服务组件的属性数据之后，所述方法还包括：
35.向所述客户端再次返回的所述微服务组件的属性数据，并作为所述微服务组件的刷新数据，以使所述客户端获取所述微服务组件的实时数据，并判断所述微服务组件的实时数据是否与所述微服务组件的刷新数据一致，并在所述微服务组件的刷新数据与所述微服务组件的实时数据不一致时，基于所述微服务组件的实时数据渲染所述微服务组件。
36.在本可选的实施方式中，通过向客户终端再次返回组件的属性数据，能够使得客
户端判断微服务组件的实时数据是否与微服务组件的刷新数据一致，进而当微服务组件的刷新数据与微服务组件的实时数据不一致时，基于微服务组件的实时数据渲染微服务组件，能够使得客户看到的数据具有实时性。
37.在可选的实施方式中，所述调用每个微服务组件的服务文件，包括：
38.基于每个所述微服务组件的库文件调用所述每个微服务组件的服务文件，其中，每个所述微服务组件的库文件由所述客户端通过打包所述目标页面中若干个微服务组件的服务文件得到。
39.在本可选的实施方式中，通过将目标页面中若干个微服务组件的服务文件进行打包，进而能够得到每个微服务组件的库文件，进而能够将每个微服务组件的库文件发送至服务端，使服务端基于每个微服务组件的库文件调用每个微服务组件的服务文件。
40.在可选的实施方式中，所述微服务组件的库文件由所述客户端基于webpack工具打包所述目标页面中若干个微服务组件的服务文件得到，其中，每个所述微服务组件的库文件的模式为预设模式，在所述预设模式下，所述服务端可调用每个所述微服务组件的库文件。
41.在本可选的实施方式中，基于webpack工具能够对目标页面中若干个微服务组件的服务文件进行打包，进而得到每个微服务组件的库文件，其中，每个微服务组件的库文件的模式为预设模式，在预设模式下，服务端可调用每个微服务组件的库文件。
42.第三方面，本发明提供一种微服务组件的渲染装置，所述渲染装置应用于客户端，所述渲染装置包括：
43.第一发送模块，用于将目标页面中若干个微服务组件的服务文件发送至服务端，所述服务文件包括初始化函数，所述初始化函数用于实现所述微服务组件的渲染接口并返回promise对象；
44.第二发送模块，用于向所述服务端发送针对所述目标页面的预渲染请求，所述预渲染请求包括所述微服务组件列表和所述微服务组件列表的数据，所述微服务组件列表的数据包括所述微服务组件之间的顺序和所述微服务组件之间的嵌套关系，以使所述服务端基于所述微服务组件之间的顺序和所述微服务组件之间的嵌套关系，调用每个微服务组件的服务文件并基于所述服务文件中的所述初始化函数，得到到所述微服务组件的属性数据；
45.第一接收模块，用于接收所述服务端返回的每个所述微服务组件的属性数据，并将每个所述微服务组件的属性数据存储于所述目标页面的数据仓库；
46.读取模块，用于当所述目标页面初始化时，从所述目标页面的数据仓库读取每个所述微服务组件的属性数据；
47.渲染模块，用于基于每个所述微服务组件的属性数据渲染每个所述微服务组件。
48.本技术的渲染装置能够在客户端加载目标页面之前，将服务文件发送至服务端，从而利用服务端获取组件的属性数据，这样一来，当客户端在渲染每个组件时，无需等待服务端返回组件的属性数据，进而快速渲染组件。而现有技术，则需要在客户端在渲染每个组件时，等待服务端返回组件的属性数据，其中，等待服务端返回组件的属性数据期间，目标页面因没有组件的属性数据，故目标页面的首屏为白屏。换而言之，本技术能够提高客户端渲染页面组件的速度，进而实现客户端在加载目标页面时，目标页面的首屏就能够看到所
有的数据。
49.另一方面，通过将目标页面中若干个微服务组件的服务文件发送至服务端，使得服务端通过调用服务文件中的初始化函数即可得到组件的属性数据，进而使得服务无需注微组件的接口及业务逻辑，从而降低接口的维护成本。
50.第四方面，本发明提供一种微服务组件的渲染装置，所述装置应用于服务端，所述装置包括：
51.第二接收模块，用于接收客户端发送的目标页面中若干个微服务组件的服务文件，所述服务文件包括初始化函数，所述初始化函数用于实现所述微服务组件的渲染接口并返回promise对象；
52.第三接收模块，用接收所述客户端发送的针对所述目标页面的预渲染请求，所述预渲染请求包括所述微服务组件列表和所述微服务组件列表的数据，所述微服务组件列表的数据包括所述微服务组件之间的顺序和所述微服务组件之间的嵌套关系；
53.调用模块，用于基于所述微服务组件之间的顺序和所述微服务组件之间的嵌套关系，调用每个微服务组件的服务文件并基于所述服务文件中的所述初始化函数，得到到所述微服务组件的属性数据；
54.第三发送模块，用于向所述客户端返回每个所述微服务组件的属性数据，以使所述客户端并将每个所述微服务组件的属性数据存储于所述目标页面的数据仓库，并在所述目标页面初始化时，从所述目标页面的数据仓库读取每个所述微服务组件的属性数据和基于每个所述微服务组件的属性数据渲染每个所述微服务组件。
55.本技术的渲染装置能够在客户端加载目标页面之前，将服务文件发送至服务端，从而利用服务端获取组件的属性数据，这样一来，当客户端在渲染每个组件时，无需等待服务端返回组件的属性数据，进而快速渲染组件。而现有技术，则需要在客户端在渲染每个组件时，等待服务端返回组件的属性数据，其中，等待服务端返回组件的属性数据期间，目标页面因没有组件的属性数据，故目标页面的首屏为白屏。换而言之，本技术能够提高客户端渲染页面组件的速度，进而实现客户端在加载目标页面时，目标页面的首屏就能够看到所有的数据。
56.第五方面，本发明提供一种电子设备，包括：
57.处理器；以及
58.存储器，配置用于存储机器可读指令，所述指令在由所述处理器执行时，执行如前述实施方式任一项所述的微服务组件的渲染方法。
59.本技术的电子设备能够在客户端加载目标页面之前，将服务文件发送至服务端，从而利用服务端获取组件的属性数据，这样一来，当客户端在渲染每个组件时，无需等待服务端返回组件的属性数据，进而快速渲染组件。而现有技术，则需要在客户端在渲染每个组件时，等待服务端返回组件的属性数据，其中，等待服务端返回组件的属性数据期间，目标页面因没有组件的属性数据，故目标页面的首屏为白屏。换而言之，本技术能够提高客户端渲染页面组件的速度，进而实现客户端在加载目标页面时，目标页面的首屏就能够看到所有的数据。
60.第六方面，本发明提供一种存储介质，所述存储介质存储有计算机程序，所述计算机程序被处理器执行如前述实施方式任一项所述的微服务组件的渲染方法。
61.本技术的存储介质能够在客户端加载目标页面之前，将服务文件发送至服务端，从而利用服务端获取组件的属性数据，这样一来，当客户端在渲染每个组件时，无需等待服务端返回组件的属性数据，进而快速渲染组件。而现有技术，则需要在客户端在渲染每个组件时，等待服务端返回组件的属性数据，其中，等待服务端返回组件的属性数据期间，目标页面因没有组件的属性数据，故目标页面的首屏为白屏。换而言之，本技术能够提高客户端渲染页面组件的速度，进而实现客户端在加载目标页面时，目标页面的首屏就能够看到所有的数据。
附图说明
62.为了更清楚地说明本技术实施例的技术方案，下面将对本技术实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本技术的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
63.图1是本技术实施例一公开的一种微服务组件的渲染方法的流程示意图；
64.图2是本技术实施例二公开的一种微服务组件的渲染方法的流程示意图；
65.图3是本技术实施例三公开的一种微服务组件的渲染装置的结构示意图；
66.图4是本技术实施例四公开的一种微服务组件的渲染装置的结构示意图；
67.图5是本技术实施例四公开的一种电子设备的结构示意图。
具体实施方式
68.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行描述。
69.实施例一
70.请参阅图1，图1是本技术实施例公开的一种微服务组件的渲染方法的流程示意图，其中，该渲染方法应用于客户端中。如图1所示，本技术实施例的渲染方法包括以下步骤：
71.101、将目标页面中若干个微服务组件的服务文件发送至服务端，服务文件包括初始化函数，初始化函数用于实现微服务组件的渲染接口并返回promise对象；
72.102、向服务端发送针对目标页面的预渲染请求，预渲染请求包括微服务组件列表和微服务组件列表的数据，微服务组件列表的数据包括微服务组件之间的顺序和微服务组件之间的嵌套关系，以使服务端基于微服务组件之间的顺序和微服务组件之间的嵌套关系，调用每个微服务组件的服务文件并基于服务文件中的初始化函数，得到到微服务组件的属性数据；
73.103、接收服务端返回的每个微服务组件的属性数据，并将每个微服务组件的属性数据存储于目标页面的数据仓库；
74.104、当目标页面初始化时，从目标页面的数据仓库读取每个微服务组件的属性数据；
75.105、基于每个微服务组件的属性数据渲染每个微服务组件。
76.在本技术实施例中，通过将目标页面中若干个微服务组件的服务文件发送至服务端和将微服务组件列表和微服务组件列表的数据发送子服务端，进而服务端就能够基于微
服务组件之间的顺序和微服务组件之间的嵌套关系，调用每个微服务组件的服务文件并基于服务文件中的初始化函数，得到到微服务组件的属性数据，进而完成对组件的预渲染，进而当客户终端加载目标页面初始化，就能够从目标页面的数据仓库读取每个微服务组件的属性数据，并基于每个微服务组件的属性数据快速渲染每个微服务组件。
77.与现有技术相比，本技术实施例的客户端在加载目标页面之前，将服务文件发送至服务端，从而利用服务端获取组件的属性数据，这样一来，当客户端在渲染每个组件时，无需等待服务端返回组件的属性数据，进而快速渲染组件。而现有技术，则需要在客户端在渲染每个组件时，等待服务端返回组件的属性数据，其中，等待服务端返回组件的属性数据期间，目标页面因没有组件的属性数据，故目标页面的首屏为白屏。换而言之，本技术能够提高客户端渲染页面组件的速度，进而实现客户端在加载目标页面时，目标页面的首屏就能够看到所有的数据。
78.另一方面，通过将目标页面中若干个微服务组件的服务文件发送至服务端，使得服务端通过调用服务文件中的初始化函数即可得到组件的属性数据，进而使得服务无需注微组件的接口及业务逻辑，从而降低接口的维护成本。
79.在本技术实施例中，作为一个示例性，假设目标页面包括微组件a、微组件b和微组件c此时，可将微组件a的服务文件、微组件b的服务文件和微组件c的服务文件发送至服务端，这样一来，就能够使得服务器在客户端加载目标页面之前，基于微组件a的服务文件、微组件b的服务文件和微组件c的服务文件发送至服务端，得到渲染微组件a所需的属性数据、渲染微组件b所需的属性数据和渲染微组件c所需的属性数据，进而客户端在加载目标页面时，就能够直接基于属性属性渲染每个组件，而无需等待服务器返回渲染组件所需的数据，进而缩短渲染组件的耗时，从而在目标页面的首屏时就能够看到数据。
80.此外，由于服务端通过微组件a、微组件b和微组件c提供的初始化函数、微服务组件之间的顺序和微服务组件之间的嵌套关系，就能够得到组件的属性数据，因此服务端无需微组件的接口及业务逻辑，从而降低接口的维护成本。
81.在本技术实施例中，目标页面可是指html页面，其中，html页面可被客户端的浏览器加载。进一步地，客户端的浏览器可以是uc浏览器、谷歌浏览器，本技术实施例对此不做限定。
82.在本技术实施例中，目标页面中若干个微服务组件可以是指目标页面中的一个微服务组件，也可以是指目标页面中的两个或两个以上的微服务组件。进一步地，微服务组件是指实现预设功能的功能单元，例如，假设目标页面需要实现“展示实时新闻”和“展示实时天气”这两个功能，则“展示实时新闻”和“展示实时天气”可作为微服务组件。
83.在本技术实施例中，针对步骤101，微服务组件的服务文件可以是适用js语言编写的文件，例如，微服务组件的服务文件可以是“service.js”。
84.在本技术实施例中，针对步骤101，promise对象携带了微服务组件的属性数据。
85.在本技术实施例中，针对步骤102，微服务组件之间的顺序是指微服务组件之间的先后关系，例如，如果目标页面需要先渲染微组件a，然而再渲染微组件b，则对微组件a和微组件b进行排序，并将排序结果[a、b]发送至服务端。
[0086]
在本技术实施例中，针对步骤102，微服务组件之间的嵌套关系用于表征组件之间的包含关系，例如，假设微组件a包括了组件a1和组件a2，则可以表示为{a：[a1、a2]}。
[0087]
在本技术实施例中，针对步骤103，目标页面的数据仓库可以是指目标页面的store数据仓库。
[0088]
在可选的实施方式中，在步骤：基于每个微服务组件的属性数据渲染每个微服务组件之后，本技术实施例的方法还包括以下：
[0089]
接收服务端再次返回的微服务组件的属性数据，并作为微服务组件的刷新数据；
[0090]
获取微服务组件的实时数据；
[0091]
判断微服务组件的实时数据是否与微服务组件的刷新数据一致，当微服务组件的刷新数据与微服务组件的实时数据不一致时，基于微服务组件的实时数据渲染微服务组件。
[0092]
在本可选的实施方式中，通过判断微服务组件的实时数据是否与微服务组件的刷新数据一致，进而当微服务组件的刷新数据与微服务组件的实时数据不一致时，基于微服务组件的实时数据渲染微服务组件，能够使得客户看到的数据具有实时性。
[0093]
在可选的实施方式中，将目标页面中若干个微服务组件的服务文件发送至服务端，包括以下子步骤：
[0094]
将目标页面中若干个微服务组件的服务文件进行打包，得到每个微服务组件的库文件；
[0095]
将每个微服务组件的库文件发送至服务端，以使服务端基于每个微服务组件的库文件调用每个微服务组件的服务文件。
[0096]
在本可选的实施方式中，通过将目标页面中若干个微服务组件的服务文件进行打包，进而能够得到每个微服务组件的库文件，进而能够将每个微服务组件的库文件发送至服务端，使服务端基于每个微服务组件的库文件调用每个微服务组件的服务文件。
[0097]
在可选的实施方式中，将目标页面中若干个微服务组件的服务文件进行打包，包括：
[0098]
基于webpack工具对目标页面中若干个微服务组件的服务文件进行打包，得到每个微服务组件的库文件，其中，每个微服务组件的库文件的模式为预设模式，在预设模式下，服务端可调用每个微服务组件的库文件。
[0099]
在本可选的实施方式中，基于webpack工具能够对目标页面中若干个微服务组件的服务文件进行打包，进而得到每个微服务组件的库文件，其中，每个微服务组件的库文件的模式为预设模式，在预设模式下，服务端可调用每个微服务组件的库文件。
[0100]
在本可选的实施方式中，预设模式可以是指commonjs2模式，其中，commonjs2模式是webpack工具中的配置参数，通过配置这一参数，能够使得服务端能够调用库文件。
[0101]
在本可选的实施方式中，webpack工具是指代码编辑工具。
[0102]
实施例二
[0103]
请参阅图2，图2是本技术实施例公开的一种微服务组件的渲染方法的流程示意图，其中，该渲染方法应用于服务端。如图2所示，本技术实施例的方法包括以下步骤：
[0104]
201、接收客户端发送的目标页面中若干个微服务组件的服务文件，服务文件包括初始化函数，初始化函数用于实现微服务组件的渲染接口并返回promise对象；
[0105]
202、接收客户端发送的针对目标页面的预渲染请求，预渲染请求包括微服务组件列表和微服务组件列表的数据，微服务组件列表的数据包括微服务组件之间的顺序和微服
务组件之间的嵌套关系；
[0106]
203、基于微服务组件之间的顺序和微服务组件之间的嵌套关系，调用每个微服务组件的服务文件并基于服务文件中的初始化函数，得到到微服务组件的属性数据；
[0107]
204、向客户端返回每个微服务组件的属性数据，以使客户端并将每个微服务组件的属性数据存储于目标页面的数据仓库，并在目标页面初始化时，从目标页面的数据仓库读取每个微服务组件的属性数据和基于每个微服务组件的属性数据渲染每个微服务组件。
[0108]
在本技术实施例中，通过将目标页面中若干个微服务组件的服务文件发送至服务端和将微服务组件列表和微服务组件列表的数据发送子服务端，进而服务端就能够基于微服务组件之间的顺序和微服务组件之间的嵌套关系，调用每个微服务组件的服务文件并基于服务文件中的初始化函数，得到到微服务组件的属性数据，进而完成对组件的预渲染，进而当客户终端加载目标页面初始化，就能够从目标页面的数据仓库读取每个微服务组件的属性数据，并基于每个微服务组件的属性数据快速渲染每个微服务组件。
[0109]
与现有技术相比，本技术实施例的客户端在加载目标页面之前，将服务文件发送至服务端，从而利用服务端获取组件的属性数据，这样一来，当客户端在渲染每个组件时，无需等待服务端返回组件的属性数据，进而快速渲染组件。而现有技术，则需要在客户端在渲染每个组件时，等待服务端返回组件的属性数据，其中，等待服务端返回组件的属性数据期间，目标页面因没有组件的属性数据，故目标页面的首屏为白屏。换而言之，本技术能够提高客户端渲染页面组件的速度，进而实现客户端在加载目标页面时，目标页面的首屏就能够看到所有的数据。
[0110]
另一方面，通过将目标页面中若干个微服务组件的服务文件发送至服务端，使得服务端通过调用服务文件中的初始化函数即可得到组件的属性数据，进而使得服务无需注微组件的接口及业务逻辑，从而降低接口的维护成本。
[0111]
在可选的实施方式中，在向客户端返回每个微服务组件的属性数据之后，本技术实施例的方法还包括以下步骤：
[0112]
向客户端再次返回的微服务组件的属性数据，并作为微服务组件的刷新数据，以使客户端获取微服务组件的实时数据，并判断微服务组件的实时数据是否与微服务组件的刷新数据一致，并在微服务组件的刷新数据与微服务组件的实时数据不一致时，基于微服务组件的实时数据渲染微服务组件。
[0113]
在本可选的实施方式中，通过向客户终端再次返回组件的属性数据，能够使得客户端判断微服务组件的实时数据是否与微服务组件的刷新数据一致，进而当微服务组件的刷新数据与微服务组件的实时数据不一致时，基于微服务组件的实时数据渲染微服务组件，能够使得客户看到的数据具有实时性。
[0114]
在可选的实施方式中，调用每个微服务组件的服务文件，包括以下子步骤：
[0115]
基于每个微服务组件的库文件调用每个微服务组件的服务文件，其中，每个微服务组件的库文件由客户端通过打包目标页面中若干个微服务组件的服务文件得到。
[0116]
在本可选的实施方式中，通过将目标页面中若干个微服务组件的服务文件进行打包，进而能够得到每个微服务组件的库文件，进而能够将每个微服务组件的库文件发送至服务端，使服务端基于每个微服务组件的库文件调用每个微服务组件的服务文件。
[0117]
在可选的实施方式中，微服务组件的库文件由客户端基于webpack工具打包目标
页面中若干个微服务组件的服务文件得到，其中，每个微服务组件的库文件的模式为预设模式，在预设模式下，服务端可调用每个微服务组件的库文件。
[0118]
在本可选的实施方式中，基于webpack工具能够对目标页面中若干个微服务组件的服务文件进行打包，进而得到每个微服务组件的库文件，其中，每个微服务组件的库文件的模式为预设模式，在预设模式下，服务端可调用每个微服务组件的库文件。
[0119]
需要说明的是，关于本技术实施例的方法的其他详细说明，请参阅本技术实施例一的相关说明，本技术实施例对此不作赘述。
[0120]
实施例三
[0121]
请参阅图3，图3是本技术实施例公开的一种微服务组件的渲染装置的结构示意图，其中，该装置应用于客户端。如图3所示，本技术实施例的装置包括以下功能模块：
[0122]
第一发送模块301，用于将目标页面中若干个微服务组件的服务文件发送至服务端，服务文件包括初始化函数，初始化函数用于实现微服务组件的渲染接口并返回promise对象；
[0123]
第二发送模块302，用于向服务端发送针对目标页面的预渲染请求，预渲染请求包括微服务组件列表和微服务组件列表的数据，微服务组件列表的数据包括微服务组件之间的顺序和微服务组件之间的嵌套关系，以使服务端基于微服务组件之间的顺序和微服务组件之间的嵌套关系，调用每个微服务组件的服务文件并基于服务文件中的初始化函数，得到到微服务组件的属性数据；
[0124]
第一接收模块303，用于接收服务端返回的每个微服务组件的属性数据，并将每个微服务组件的属性数据存储于目标页面的数据仓库；
[0125]
读取模块304，用于当目标页面初始化时，从目标页面的数据仓库读取每个微服务组件的属性数据；
[0126]
渲染模块305，用于基于每个微服务组件的属性数据渲染每个微服务组件。
[0127]
本技术实施例的渲染装置能够在客户端加载目标页面之前，将服务文件发送至服务端，从而利用服务端获取组件的属性数据，这样一来，当客户端在渲染每个组件时，无需等待服务端返回组件的属性数据，进而快速渲染组件。而现有技术，则需要在客户端在渲染每个组件时，等待服务端返回组件的属性数据，其中，等待服务端返回组件的属性数据期间，目标页面因没有组件的属性数据，故目标页面的首屏为白屏。换而言之，本技术能够提高客户端渲染页面组件的速度，进而实现客户端在加载目标页面时，目标页面的首屏就能够看到所有的数据。
[0128]
另一方面，通过将目标页面中若干个微服务组件的服务文件发送至服务端，使得服务端通过调用服务文件中的初始化函数即可得到组件的属性数据，进而使得服务无需注微组件的接口及业务逻辑，从而降低接口的维护成本。
[0129]
实施例四
[0130]
请参阅图4，图4是本技术实施例公开的一种微服务组件的渲染装置的结构示意图，其中，该装置应用于服务端。如图4所示，本技术实施例的装置包括以下功能模块：
[0131]
第二接收模块401，用于接收客户端发送的目标页面中若干个微服务组件的服务文件，服务文件包括初始化函数，初始化函数用于实现微服务组件的渲染接口并返回promise对象；
[0132]
第三接收模块402，用接收客户端发送的针对目标页面的预渲染请求，预渲染请求包括微服务组件列表和微服务组件列表的数据，微服务组件列表的数据包括微服务组件之间的顺序和微服务组件之间的嵌套关系；
[0133]
调用模块403，用于基于微服务组件之间的顺序和微服务组件之间的嵌套关系，调用每个微服务组件的服务文件并基于服务文件中的初始化函数，得到到微服务组件的属性数据；
[0134]
第三发送模块404，用于向客户端返回每个微服务组件的属性数据，以使客户端并将每个微服务组件的属性数据存储于目标页面的数据仓库，并在目标页面初始化时，从目标页面的数据仓库读取每个微服务组件的属性数据和基于每个微服务组件的属性数据渲染每个微服务组件。
[0135]
本技术实施例的渲染装置能够在客户端加载目标页面之前，将服务文件发送至服务端，从而利用服务端获取组件的属性数据，这样一来，当客户端在渲染每个组件时，无需等待服务端返回组件的属性数据，进而快速渲染组件。而现有技术，则需要在客户端在渲染每个组件时，等待服务端返回组件的属性数据，其中，等待服务端返回组件的属性数据期间，目标页面因没有组件的属性数据，故目标页面的首屏为白屏。换而言之，本技术能够提高客户端渲染页面组件的速度，进而实现客户端在加载目标页面时，目标页面的首屏就能够看到所有的数据。
[0136]
实施例五
[0137]
请参阅图3，图3是本技术实施例公开的一种电子设备的结构示意图，如图3所示，本技术实施例的电子设备包括：
[0138]
处理器501；以及
[0139]
存储器502，配置用于存储机器可读指令，指令在由处理器501执行时，执行如前述实施方式任一项的微服务组件的渲染方法。
[0140]
本技术实施例的电子设备能够在客户端加载目标页面之前，将服务文件发送至服务端，从而利用服务端获取组件的属性数据，这样一来，当客户端在渲染每个组件时，无需等待服务端返回组件的属性数据，进而快速渲染组件。而现有技术，则需要在客户端在渲染每个组件时，等待服务端返回组件的属性数据，其中，等待服务端返回组件的属性数据期间，目标页面因没有组件的属性数据，故目标页面的首屏为白屏。换而言之，本技术能够提高客户端渲染页面组件的速度，进而实现客户端在加载目标页面时，目标页面的首屏就能够看到所有的数据。
[0141]
实施例六
[0142]
本技术实施例提供一种存储介质，存储介质存储有计算机程序，计算机程序被处理器执行如前述实施方式任一项的微服务组件的渲染方法。
[0143]
本技术实施例的存储介质能够在客户端加载目标页面之前，将服务文件发送至服务端，从而利用服务端获取组件的属性数据，这样一来，当客户端在渲染每个组件时，无需等待服务端返回组件的属性数据，进而快速渲染组件。而现有技术，则需要在客户端在渲染每个组件时，等待服务端返回组件的属性数据，其中，等待服务端返回组件的属性数据期间，目标页面因没有组件的属性数据，故目标页面的首屏为白屏。换而言之，本技术能够提高客户端渲染页面组件的速度，进而实现客户端在加载目标页面时，目标页面的首屏就能
够看到所有的数据。
[0144]
在本技术所提供的实施例中，应该理解到，所揭露装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或微服务组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
[0145]
另外，作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
[0146]
再者，在本技术各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。
[0147]
需要说明的是，功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本技术各个实施例方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(read-only memory，rom)随机存取存储器(random access memory，ram)、磁碟或者光盘等各种可以存储程序代码的介质。
[0148]
在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。
[0149]
以上仅为本技术的实施例而已，并不用于限制本技术的保护范围，对于本领域的技术人员来说，本技术可以有各种更改和变化。凡在本技术的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本技术的保护范围之内。