一种页面代码生成方法、装置、电子设备及存储介质与流程

1.本公开涉及计算机技术领域，尤其涉及软件开发及图像处理技术领域。


背景技术：

2.智能设备中安装的应用(application，app)可以为用户提供各种服务，在对app的业务功能不断迭代更新的过程中，也需要对业务的页面视图进行更新。更新页面视图的过程为设计人员给出页面设计视图，研发人员再将页面设计视图转换为代码，后续通过运行该代码即可在app中显示更新后的页面视图。


技术实现要素：

3.本公开提供了一种页面代码生成方法、装置、电子设备及存储介质。
4.根据本公开的一方面，提供了一种页面代码生成方法，包括：
5.获取页面设计视图对应的色块图，所述色块图中的每个色块用于表示所述页面设计视图中的一个控件；
6.识别所述色块图中包括的每个色块区域，并确定每个色块区域的坐标和尺寸；
7.基于颜色与控件类型之间的对应关系，确定每个色块区域对应的控件类型；
8.基于每个色块区域对应的控件类型、坐标和尺寸，生成所述页面设计视图对应的页面代码。
9.根据本公开的第二方面，提供了一种页面代码生成装置，包括：
10.获取模块，用于获取页面设计视图对应的色块图，所述色块图中的每个色块用于表示所述页面设计视图中的一个控件；
11.识别模块，用于识别所述色块图中包括的每个色块区域，并确定每个色块区域的坐标和尺寸；
12.确定模块，用于基于颜色与控件类型之间的对应关系，确定每个色块区域对应的控件类型；
13.生成模块，用于基于每个色块区域对应的控件类型、坐标和尺寸，生成所述页面设计视图对应的页面代码。
14.根据本公开的第三方面，提供了一种电子设备，包括：
15.至少一个处理器；以及
16.与所述至少一个处理器通信连接的存储器；其中，
17.所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行第一方面所述的方法。
18.根据本公开的第四方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行第一方面所述的方法。
19.根据本公开的第五方面，提供了一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现第一方面所述的方法。
20.应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。
附图说明
21.附图用于更好地理解本方案，不构成对本公开的限定。其中：
22.图1是本公开实施例提供的一种页面代码生成方法流程图；
23.图2是本公开实施例提供的一种页面设计视图的示例性示意图；
24.图3是本公开实施例提供的一种与页面设计视图对应的色块图的示例性示意图；
25.图4是本公开实施例提供的一种页面代码生成装置的结构示意图；
26.图5是用来实现本公开实施例的页面代码生成方法的电子设备的框图。
具体实施方式
27.以下结合附图对本公开的示范性实施例做出说明，其中包括本公开实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本公开的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
28.为了使app可以更好的满足用户的需求，研发人员需要不断的对app的业务功能进行研发，在业务功能研发过程中，通常会对视图进行更改。视图更改需要设计人员给出页面设计视图，研发人员再将页面设计视图转换为代码。因此，在此过程中，需要设计人员通过标注等方式将该页面设计视图中每个控件的位置描述清楚，并与研发人员进行多次沟通，避免研发人员将页面设计视图转换为代码后，基于代码实现的视图效果是错误的。由于研发人员与设计人员专业分工不同，且还可能存在工作地点不同甚至跨地域的情况，导致开发过程中的沟通成本较高，且容易出错。
29.为了解决上述问题，本公开实施例提供了一种页面代码生成方法，该方法应用于电子设备，如图1所示，该方法包括：
30.s101、获取页面设计视图对应的色块图，色块图中的每个色块用于表示页面设计视图中的一个控件。
31.其中，色块图可以是设计人员绘制得到的，设计人员可以基于给定的颜色与控件类型之间的对应关系，将页面设计视图绘制为色块图。
32.例如，如图2所示，图2为本公开实施例提供的一种页面设计视图，该页面设计视图中的控件包括输入框、搜索按钮、网页视图(webview)以及页面设计视图底部的工具条，其中，工具条中包括向左箭头按钮、向右箭头按钮和星形按钮。
33.在图2的基础上，可以将该页面设计视图转换为色块图，即将该页面设计视图中的不同类型的控件以不同颜色填充。
34.如图3所示，图3示例性示出了图2的页面设计视图对应的色块图，图3中每个色块表示页面设计视图中的一个控件。作为示例，图3中的301部分为蓝色色块，302部分为黄色色块，303部分为绿色色块，304部分为红色色块，305部分为粉色色块。
35.s102、识别色块图中包括的每个色块区域，并确定每个色块区域的坐标和尺寸。
36.其中，可以基于已有的图像识别技术识别色块区域以及确定色块区域的坐标和尺
寸，此处对图像识别技术不做具体限定。
37.作为示例，电子设备可以通过逐行扫描的方式，获取色块图中每个像素点的色值，进而将颜色值相同且连续的像素点组成的色块作为一个色块区域。或者，电子设备也可以采用深度学习模型识别色块区域，本公开实施例对此不作限定。
38.s103、基于颜色与控件类型之间的对应关系，确定每个色块区域对应的控件类型。
39.以图3为例，颜色与控件类型之间的预设对应关系可以为：蓝色对应的控件类型为输入框；黄色对应的控件类型为浏览器内核，用于显示网页视图；绿色对应的控件类型为按钮1；红色对应的控件类型为按钮2；粉色对应的控件类型为工具条。
40.s104、基于每个色块区域对应的控件类型、坐标和尺寸，生成页面设计视图对应的页面代码。
41.其中，电子设备可以按照每种控件类型对应的代码要求，将每个控件类型对应的坐标和尺寸转换为代码语言，并且可将控件类型作为前缀，将前缀和控件类型的序列号组合为一个控件的变量名。
42.例如，若控件类型为button，若色块图中有3个色块区域的控件类型均为button，则变量名分别为button01、button02和button03。
43.采用上述方法，电子设备基于获取到页面设计视图对应的色块图，识别该色块图中包括的每个色块区域，并确定每个色块区域的坐标和尺寸。由于色块图中的每种颜色表示一种控件类型，所以基于颜色与控件类型之间的对应关系，即可确定色块图中每个色块区域对应的控件类型。可见，电子设备可以通过色块图准确地识别出每个控件的坐标和尺寸以及坐标类型，如此就无需研发人员频繁与设计人员进行沟通，可以节约沟通成本，节省研发时间，且可避免研发人员手动在代码中编辑控件的坐标和尺寸导致的出错，提高生成的页面代码的准确性。
44.在上述实施例的基础上，上述s102中确定每个色块区域的坐标和尺寸，具体可以实现为：
45.步骤一、确定每个色块区域在色块图的坐标系中的坐标和尺寸。
46.电子设备可以基于整个色块图建立坐标系，进而确定每个色块区域在色块图对应的坐标系中的坐标和尺寸。例如以色块图的左上角、中心点或者左下角为原点建立坐标系，本公开实施例对此不作限定。
47.作为示例，以色块图的左上角为原点，从原点开始，向右为横坐标，向下为纵坐标，建立色块图对应的坐标系，横坐标和纵坐标的每一个单位长度均表示一个像素。
48.本公开实施例中的坐标和尺寸可以表示为(x,y，w,h)。其中，(x,y)为色块区域的坐标点，w为色块区域的宽度，h为色块区域的高度。
49.步骤二、基于每个色块区域的坐标和尺寸，筛选出具有层级关系的父色块区域和子色块区域。
50.其中，层级关系为色块区域之间的嵌套关系，子色块区域嵌套在父色块区域中。
51.可选的，基于每个色块区域的坐标和尺寸，筛选出具有层级关系的父色块区域和子色块区域，可以实现为：
52.针对每个色块区域，基于该色块区域的坐标和尺寸判断该色块区域是否完全处于另一色块区域内。若是，则确定该色块区域为子色块区域，另一色块区域为该子色块区域的
父色块区域。
53.作为示例，在色块图对应的坐标系中，色块区域a的坐标为(0,680)，宽度为480像素，高度为40像素，色块区域b的坐标为(66,681)，宽度为38像素，高度为38像素，则可以确定色块区域b嵌套在色块区域a中，则色块区域a为父色块区域，色块区域b为子色块区域。
54.如此，通过色块区域的坐标和尺寸之间的包含关系，可以准确地筛选出具有层级关系的色块区域，进而，可以更加准确的基于色块图得到控件之间的布局方式。
55.步骤三、确定子色块区域在父色块区域的坐标系中的相对坐标。
56.其中，父色块区域的坐标系是基于该父色块区域建立的坐标系，例如以父色块区域的左上角为原点，从原点开始，向右为横坐标，向下为纵坐标，建立父层级色块区域坐标系，子色块区域在父色块区域的坐标系中的坐标即为相对坐标。
57.延续上述例子，色块区域a是色块区域b的父色块区域，则基于色块区域a，建立父色块区域的坐标系，得到色块区域b在色块区域a中的相对坐标为(66,1)，宽度为38像素，高度为38像素。
58.采用上述方法，基于每个色块区域的坐标和尺寸，筛选出具有层级关系的父色块区域和子色块区域，进而确定子色块区域在父色块区域的坐标系中的相对坐标，子色块区域在父色块区域的坐标系中的相对坐标可以更清晰的表征子色块区域与父色块区域之间的布局层级关系，如此，使得后续生成的代码能够准确表示控件之间的布局层次。
59.在一些实施例中，识别出的色块区域可以为矩形，也可以为不规则形状，在识别出色块区域后，可进一步确定色块区域的坐标和尺寸，尺寸可以包括宽度和高度。具体地，上述实施例中，确定每个色块区域在色块图的坐标系中的坐标和尺寸，可以实现为：
60.针对每个色块区域，若该色块区域为矩形，则将该色块区域的左上角坐标作为该色块区域的坐标，将矩形的宽度和高度作为该色块区域的尺寸。
61.若该色块区域不为矩形，则将该色块区域的一个顶点坐标作为该色块区域的坐标，将该色块区域在纵轴方向上的最大值和最小值之间的差值作为高度，将该色块区域在横轴方向上的最大值和最小值之间的差值作为宽度。
62.其中，若该色块区域不为矩形，则任选该色块区域的一个顶点作为该色块区域的坐标，进而将包含该色块区域的最小矩形区域的宽度和高度作为该色块区域的宽度和高度。
63.以图3为例，工具条中最左侧的箭头对应的色块区域不为矩形，该色块区域最上方的顶点坐标为(66,1)，该色块区域在纵轴方向上的最大值和最小值之间的差值为38像素，该色块区域在横轴方向上的最大值和最小值之间的差值为38像素，则该色块区域的坐标为(66,1)，宽度为38像素，高度为38像素。
64.采用上述方法，可以准确确定矩形的色块区域的坐标和尺寸，以及不是矩形的色块区域的坐标和尺寸，不受色块形状的限制，适配性较高，且无需人工测量坐标和尺寸，实现了自动识别，能够降低沟通成本。
65.在上述实施例的基础上，可以通过以下两种实现方式，生成页面代码。
66.其中，第一种实现方式包括：
67.针对每个色块区域，基于该色块区域对应的控件类型、坐标和尺寸，为该色块区域生成与色块图的分辨率匹配的坐标代码。基于控件类型与控件参数的预设对应关系，获取
该色块区域的控件类型对应的控件参数，生成该色块区域的控件参数代码。在该色块区域具有子色块区域的情况下，生成该色块区域对应的控件关系代码。
68.其中，坐标代码用于描述控件在页面设计视图中的坐标和尺寸。电子设备可以利用每个色块区域的坐标和尺寸生成坐标代码。在生成坐标代码时，所使用的具有层级关系的子色块区域的坐标为：该子色块区域在该子色块区域对应的父色块区域的坐标系中的相对坐标。
69.可以理解的是，控件的坐标和尺寸可能会随着分辨率的变化而变化，本公开实施例中，可以为每种分辨率适配一套坐标代码。例如，若色块图的分辨率为480*720，则生成480*720分辨率对应的坐标代码，该坐标代码适配于480*720分辨率的显示屏。
70.其中，每种控件类型都有对应的控件参数，控件参数可以包括以下任意一种或多种：控件的背景色、点击事件处理方式以及控件是否有边框等。控件参数代码用于描述控件的控件参数。
71.控件关系代码用于描述父色块区域对应的控件与子色块区域对应的控件之间的层级关系。例如，在父色块区域对应的控件的代码中，可以包括“添加子视图”的控件关系代码，从而引出子色块区域对应的控件的代码。
72.可以理解的，在生成页面代码后，需要根据控件类型的要求对页面代码进行初始化，以使得后续运行页面代码时，可以渲染得到页面视图。
73.采用上述方法，电子设备可以生成与色块图分辨率相匹配的坐标代码，无需考虑控件在不同分辨率中的显示区别，实现更加简单。并且，还可以生成控件参数代码和控件关系代码，能够准确表示出页面设计视图中每个控件的样式和布局，如此，保证了基于页面代码呈现的页面视图中，每个控件显示的准确性。
74.在第二种实现方式中，若页面设计视图对应的色块图存在至少两个，且各色块图的分辨率不同，则上述s104、基于每个色块区域对应的控件类型、坐标和尺寸，生成页面设计视图对应的页面代码，具体可以实现为：
75.步骤a、基于每个色块图中相同控件类型的目标色块区域的坐标和尺寸，确定目标色块区域在页面中的排布方式。
76.其中，排布方式用于表示目标色块区域在不同分辨率的色块图中的共性规律。
77.目标色块区域为每个色块图中，对应于相同控件类型的色块区域。例如，电子设备获取到同一页面设计视图对应的色块图1和色块图2，且色块图1和色块图2的分辨率不同。
78.色块图1中的色块区域a和色块图2中的色块区域a对应相同控件类型，则色块区域a和色块区域a为目标色块区域。色块图1中的色块区域b和色块图2中的色块区域b对应相同控件类型，则色块区域b和色块区域b为目标色块区域。
79.共性规律为目标色块区域在不同分辨率的色块图中的显示规律。
80.以图3为例，假设目标色块区域为搜索框，图3和另一分辨率的色块图对应相同页面设计视图，电子设备可以将图3中的目标色块区域与另一个分辨率的色块图中的目标色块区域进行对比，以确定共性规律。
81.例如该共性规律为搜索框宽度始终为页面宽度的15％，距离页面顶端和页面右端的像素距离均为20，即该页面设计视图中的搜索框在不同分辨率的色块图中的共性规律为：宽度为色块图宽度的15％、距离页面顶端和页面右端的像素距离均为20。
82.仍以图3为例，假设目标色块区域为星形按钮2，图3和另一分辨率的色块图对应相同页面设计视图，电子设备可以将图3中的目标色块区域与另一个分辨率的色块图中的目标色块区域进行对比，以确定共性规律。
83.例如该共性规律为星形按钮2的中心点始终位于工具条宽度的右侧四等分处，且星形按钮2的宽度为工具条宽度的10％，即该页面设计视图中的星形按钮2在不同分辨率的色块图中的共性规律为：该星形按钮2的中心点位于工具条宽度的右侧四等分处，且宽度为工具条宽度的10％。
84.步骤b、基于目标色块区域的控件类型和排布方式生成目标色块区域的坐标描述代码。
85.其中，坐标描述代码用于描述上述排布方式，进而，后续运行该坐标描述代码时，可以获取显示界面的尺寸，并将显示界面的尺寸代入到描述代码描述的排布方式中，即可得到每个控件的坐标和尺寸，以实现一套页面代码适配不同分辨率屏幕。
86.步骤c、基于控件类型与控件参数的预设对应关系，获取目标色块区域的控件类型对应的控件参数，生成目标色块区域的控件参数代码。
87.步骤d、在目标色块区域具有子色块区域的情况下，生成目标色块区域对应的控件关系代码。
88.步骤c和步骤d的具体实现方式可参考上述实施例中对控件参数代码和控件关系代码的介绍，此处不再赘述。
89.采用上述方法，对于同一页面设计视图的多个色块图，通过对比多个个色块图中目标色块区域，可以得到目标色块区域在不同分辨率色块图中的共性规律，基于共性规律，生成坐标描述代码，如此，生成的页面代码可以适配不同分辨率的显示设备，适配性更高。
90.基于相同的构思，本公开实施例提供一种页面代码生成装置，如图4所示，包括：
91.获取模块401，用于获取页面设计视图对应的色块图，所述色块图中的每个色块用于表示所述页面设计视图中的一个控件；
92.识别模块402，用于识别所述色块图中包括的每个色块区域，并确定每个色块区域的坐标和尺寸；
93.确定模块403，用于基于颜色与控件类型之间的对应关系，确定每个色块区域对应的控件类型；
94.生成模块404，用于基于每个色块区域对应的控件类型、坐标和尺寸，生成所述页面设计视图对应的页面代码。
95.可选的，所述识别模块402，具体用于：
96.确定每个色块区域在所述色块图的坐标系中的坐标和尺寸；
97.基于每个色块区域的坐标和尺寸，筛选出具有层级关系的父色块区域和子色块区域；
98.确定所述子色块区域在所述父色块区域的坐标系中的相对坐标。
99.可选的，所述尺寸包括宽度和高度；所述识别模块402，具体用于：
100.针对每个色块区域，若该色块区域为矩形，则将该色块区域的左上角坐标作为该色块区域的坐标，将所述矩形的宽度和高度作为该色块区域的尺寸；
101.若该色块区域不为矩形，则将该色块区域的一个顶点坐标作为该色块区域的坐
标，将该色块区域在纵轴方向上的最大值和最小值之间的差值作为高度，将该色块区域在横轴方向上的最大值和最小值之间的差值作为宽度。
102.可选的，所述识别模块402，具体用于：
103.针对每个色块区域，基于该色块区域的坐标和尺寸判断该色块区域是否完全处于另一色块区域内；
104.若是，则确定该色块区域为子色块区域，所述另一色块区域为该子色块区域的父色块区域。
105.可选的，所述生成模块404，具体用于：
106.针对每个色块区域，基于该色块区域对应的控件类型、坐标和尺寸，为该色块区域生成与所述色块图的分辨率匹配的坐标代码；
107.基于控件类型与控件参数的预设对应关系，获取该色块区域的控件类型对应的控件参数，生成该色块区域的控件参数代码；
108.在该色块区域具有子色块区域的情况下，生成该色块区域对应的控件关系代码。
109.可选的，所述页面设计视图对应的色块图存在至少两个，且各色块图的分辨率不同；所述生成模块404，具体用于：
110.基于每个色块图中相同控件类型的目标色块区域的坐标和尺寸，确定所述目标色块区域在页面中的排布方式，所述排布方式用于表示所述目标色块区域在不同分辨率的色块图中的共性规律；
111.基于所述目标色块区域的控件类型和所述排布方式生成所述目标色块区域的坐标描述代码；
112.基于控件类型与控件参数的预设对应关系，获取目标色块区域的控件类型对应的控件参数，生成目标色块区域的控件参数代码；
113.在目标色块区域具有子色块区域的情况下，生成目标色块区域对应的控件关系代码。
114.本公开的技术方案中，所涉及的用户个人信息的收集、存储、使用、加工、传输、提供和公开等处理，均符合相关法律法规的规定，且不违背公序良俗。
115.根据本公开的实施例，本公开还提供了一种电子设备、一种可读存储介质和一种计算机程序产品。
116.图5示出了可以用来实施本公开的实施例的示例电子设备500的示意性框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。
117.如图5所示，电子设备500包括计算单元501，其可以根据存储在只读存储器(rom)502中的计算机程序或者从存储单元508加载到随机访问存储器(ram)503中的计算机程序，来执行各种适当的动作和处理。在ram 503中，还可存储电子设备500操作所需的各种程序和数据。计算单元501、rom 502以及ram 503通过总线504彼此相连。输入/输出(i/o)接口505也连接至总线504。
118.电子设备500中的多个部件连接至i/o接口505，包括：输入单元506，例如键盘、鼠标等；输出单元507，例如各种类型的显示器、扬声器等；存储单元508，例如磁盘、光盘等；以及通信单元509，例如网卡、调制解调器、无线通信收发机等。通信单元509允许电子设备500通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。
119.计算单元501可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元501的一些示例包括但不限于中央处理单元(cpu)、图形处理单元(gpu)、各种专用的人工智能(ai)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(dsp)、以及任何适当的处理器、控制器、微控制器等。计算单元501执行上文所描述的各个方法和处理，例如页面代码生成方法。例如，在一些实施例中，页面代码生成方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元508。在一些实施例中，计算机程序的部分或者全部可以经由rom 502和/或通信单元509而被载入和/或安装到电子设备500上。当计算机程序加载到ram 503并由计算单元501执行时，可以执行上文描述的页面代码生成方法的一个或多个步骤。备选地，在其他实施例中，计算单元501可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行页面代码生成方法。
120.本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(fpga)、专用集成电路(asic)、专用标准产品(assp)、芯片上系统的系统(soc)、复杂可编程逻辑设备(cpld)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。
121.用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。
122.在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(ram)、只读存储器(rom)、可擦除可编程只读存储器(eprom或快闪存储器)、光纤、便捷式紧凑盘只读存储器(cd-rom)、光学储存设备、磁储存设备、或上述内容的任何合适组合。
123.为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，crt(阴极射线管)或者lcd(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的
反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。
124.可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(lan)、广域网(wan)和互联网。
125.计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，也可以为分布式系统的服务器，或者是结合了区块链的服务器。
126.应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本公开公开的技术方案所期望的结果，本文在此不进行限制。
127.上述具体实施方式，并不构成对本公开保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本公开的精神和原则之内所作的修改、等同替换和改进等，均应包含在本公开保护范围之内。