可视化页面构建方法、装置、计算机设备和存储介质与流程

1.本技术涉及计算机技术领域，特别是涉及一种可视化页面构建方法、装置、计算机设备、存储介质和计算机程序产品。


背景技术：

2.随着互联网、物联网、云计算等信息技术的迅猛发展，信息技术与人类世界的经济、军事、科研、生活等方面不断交叉融合；大数据可视化技术被广泛应用在各个领域；目前的大数据可视化技术包括：文本可视化、网络(图)可视化、时空数据可视化，多维可视化、关系图谱数据可视化等，实现数据可视化呈现与分析能力，可以让用户直观获取信息。
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.根据所述页面可编辑单元确定所述项目页面的组件树，以及根据所述配置数据更新所述组件树的组件配置数据，得到项目资源包；
39.将所述项目资源包同步至各所述开发终端，以使各所述开发终端根据所述项目资源包对所述项目页面进行页面预览，生成可视化页面。
40.第四方面，本技术还提供了一种计算机可读存储介质。所述计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：
41.响应于项目的构建指令，获取所述项目的构建信息；
42.将所述项目的构建信息分别发送至至少一个开发终端；
43.响应于各所述开发终端针对所述构建信息触发的对项目页面的构建操作，得到页面可编辑单元和所述页面可编辑单元的配置数据；
44.根据所述页面可编辑单元确定所述项目页面的组件树，以及根据所述配置数据更新所述组件树的组件配置数据，得到项目资源包；
45.将所述项目资源包同步至各所述开发终端，以使各所述开发终端根据所述项目资源包对所述项目页面进行页面预览，生成可视化页面。
46.第五方面，本技术还提供了一种计算机程序产品。所述计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现以下步骤：
47.响应于项目的构建指令，获取所述项目的构建信息；
48.将所述项目的构建信息分别发送至至少一个开发终端；
49.响应于各所述开发终端针对所述构建信息触发的对项目页面的构建操作，得到页面可编辑单元和所述页面可编辑单元的配置数据；
50.根据所述页面可编辑单元确定所述项目页面的组件树，以及根据所述配置数据更新所述组件树的组件配置数据，得到项目资源包；
51.将所述项目资源包同步至各所述开发终端，以使各所述开发终端根据所述项目资源包对所述项目页面进行页面预览，生成可视化页面。
52.上述可视化页面构建方法、装置、计算机设备、存储介质和计算机程序产品，通过多开发终端同时响应于对应的页面构建信息触发的页面构建操作，能够通过多开发终端协作来提升页面构建效率，避免开发过程中多开发终端的文件形式的相互传递，降低用户的使用成本。根据页面可编辑单元和配置数据进行可视化编辑，以及对可视化编辑得到的目标页面进行页面预览，生成待发布可视化页面。通过多终端协作来提升建站效率，避免文件形式的相互传递；以及对页面进行页面预览，在开发过程中可以获取页面在真实设备运行上的实际效果，避免页面发布后未达到实际需求效果导致二次开发，提高页面生成效率。
附图说明
53.图1为一个实施例中可视化页面构建方法的应用环境图；
54.图2为一个实施例中可视化页面构建方法的流程示意图；
55.图3a为一个实施例中项目页面的示意图；
56.图3b为一个实施例中项目页面对应的组件树的示意图；
57.图4为一个实施例中确定项目资源包的方法的流程示意图；
58.图5为一个实施例中组件树的层级关系的示意图；
59.图6为另一个实施例中可视化页面构建方法的流程示意图；
60.图7为一个实施例中页面预览的流程示意图；
61.图8为一个实施例中可视化页面构建装置的结构框图；
62.图9为一个实施例中计算机设备的内部结构图。
具体实施方式
63.为了使本技术的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本技术进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本技术，并不用于限定本技术。
64.本技术实施例提供的可视化页面构建方法，可以应用于如图1所示的应用环境中。其中，终端集群102通过网络与服务器104进行通信。数据存储装置可以存储服务器104需要处理的数据。数据存储装置可以集成在服务器104上，也可以放在云上或其他网络服务器上。服务端104响应于项目的构建指令，获取项目的构建信息；将项目的构建信息分别发送至终端集群102中至少一个开发终端；服务器响应于各开发终端针对构建信息触发的对项目页面的构建操作，得到页面可编辑单元和页面可编辑单元的配置数据；根据页面可编辑单元确定项目页面的组件树，以及根据配置数据更新组件树的组件配置数据，得到项目资源包；将项目资源包同步至各开发终端，通过各开发终端根据项目资源包对项目页面进行页面预览，生成可视化页面。其中，终端集群102中的各开发终端可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑、物联网设备和便携式可穿戴设备。服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。
65.在一个实施例中，如图2所示，提供了一种可视化页面构建方法，以该方法应用于图1中的服务器例进行说明，包括以下步骤：
66.步骤202，响应于项目的构建指令，获取项目的构建信息。
67.其中，项目可以是业务装置，也可以是一个或多个可视化页面(如，可视化页面)；在不同的业务应用场景中，如，在物流行业中，项目为物流进度查询项目；在医疗领域中，可以是医疗资讯项目。构建信息中可以包括项目的版本号、项目的构建内容，以及项目要实现的功能等信息。构建内容包括可视化页面的页面可编辑单元(也可以理解为组件)，如可视化页面中包括组件a、组件b、组件c和组件d。例如，当构建的项目为医疗可视化页面时，构建信息中包括医疗可视化页面的装置版本号，以及可视化页面显示的组件(包括用于显示医疗资讯信息的组件、选择医疗物品的选择组件等组件)。构建指令是指项目的协同构建指令，可以理解为，项目是通过多个开发终端协同构建的，且在构建过程中，将各开发终端确定的页面可编辑单元进行实时同步；例如，开发终端1在页面工具栏中拖拽组件a，同步显示在开发终端2中；开发终端2在页面工具栏中拖拽组件b，同步显示在开发终端1中。
68.具体地，服务器响应于项目的构建指令，根据构建指令从数据库中获取项目模块(如，页面模板)；根据得到的项目模板获取项目的构建信息。
69.可选地，在一个实施例，项目的构建指令可以是第一开发终端生成的，第一开发终端以二维码或者网址信息的形式发送至至少一个第二开发终端，服务器响应与第一开发终端和第二开发终端的构建指令，获取项目的构建信息，可以实现开发终端的协同编辑。
70.步骤204，将项目的构建信息分别发送至至少一个开发终端。
71.其中，开发终端是指属于同一个项目开发的目标对象，各开发终端的获取的构建信息可以是相同的，可以是不同的；各开发终端的开发权限数据可以是相同的(如，各开发终端可以获取整个项目的构建信息)，也可以是不同的(如，各开发终端只能根据权限数据获取对应的构建信息)。
72.将构建信息发送给开发终端的形式可以是通过服务器以链接网址或是图形码的方式发送给各开发终端；也可以是先将构建信息发送给指定的开发终端，通过指定的开发终端将构建信息以链接网址或是图形码的方式发送给其他开发终端；例如，服务器将项目a的构建信息发送至开发终端1，开发终端1将接收的构建信息以链接网址或是图形码的方式分享给开发终端2和开发终端3；在此，对构建信息的发送方式不做限定。
73.具体地，确定参与项目协同构建的开发终端，将获取的项目的构建信息分别发送至至少一个开发终端，并在各开发终端显示项目构建的开发环境；其中，协同构建是指各开发终端基于websocket实现协同编辑，实时同步每位协作者的操作。
74.步骤206，响应于各开发终端针对构建信息触发的对项目页面的构建操作，得到页面可编辑单元和页面可编辑单元的配置数据。
75.其中，页面可编辑单元为组件；不同开发终端的构建任务不同，针对构建信息触发的对项目页面的构建操作也是不同的；例如，项目页面为物品推送页面，开发终端1触发的构建操作为添加图像组件，开发终端2触发的构建操作为添加物品的活动组件(如，活动转盘)。
76.各开发终端通过在开发终端显示的页面工具栏中拖曳页面可编辑单元，即通过页面可视化搭建工具建立项目页面，不需要依赖页面前端框，即页面可视化搭建工具与页面前端框架解偶。
77.具体地，服务器响应于各开发终端针对构建信息触发的对项目页面的构建操作，得到页面可编辑单元；并自动生成各页面可编辑单元的配置数据；例如，开发终端1触发的构建操作添加图像组件，开发终端2触发的构建操作添加物品的活动组件时，将开发终端2添加的活动组件同步显示在开发终端1的开发显示界面上；将开发终端1添加的图像组件同步显示在开发终端2的开发显示区域。
78.步骤208，根据页面可编辑单元确定项目页面的组件树，以及根据配置数据更新组件树的组件配置数据，得到项目资源包。
79.其中，组件是对html元素、元素布局和样式、业务逻辑的封装,将页面的搭建转化为对组件的组合。根据得到的页面可编辑单元使用组件化的方式来组织页面，得到项目页面的组件树。项目页面可以认为是一棵组件树，组件树中的节点代表页面可编辑单元(即，页面组件)，页面组件可以包含子组件。如图3a所示一个实施例中的项目页面，项目页面中包括《app/》、左边区域《left/》和右边区域《right/》和头部《header/》，其中，《left/》包括多个子标签《banner/》，《right/》中包括多个子项《item/》。图3b所示，为项目页面对应的组件树，父节点为app，父节点的从属子节点为left、header、right，left的子节点为banner，right的子节点为item。
80.具体地，使用组件化的方式对得到的页面可编辑单元进行页面组织，得到项目页面的组件树，并确定各页面编辑单元的配置数据，根据配置数据更新组件树的组件配置数据；并对组件树进行打包得到项目资源包。
81.进一步地，使用组件化的方式对得到的页面可编辑单元进行页面组织的方式可以是：动态地给页面源码添加组件,然后重新打包生成页面。如通过可视化的方式替换left组件为newleft组件后,对源码的组件树声明做替换,将left标签替换为newleft标签。
82.步骤210，将项目资源包同步至各开发终端，通过各开发终端根据项目资源包对项目页面进行页面预览，生成可视化页面。
83.其中，页面预览的方式包括页面挂载和后台渲染，页面挂载是指在编辑器前端页面的某个元素节点(div)上对项目资源包进行渲染，显示开发终端编辑的效果；页面挂载可以理解为后端没有对要展示的项目页面进行编译，在前端进行编译显示。后台渲染是指装置的后端渲染是指页面直出，由服务端将现有的数据和组件一起拼装后返回给前端进行直接渲染显示；后台渲染可以理解对后端对要展示项目页面提前进行编译，将编译后的项目页面发送给前端，由前端进行渲染显示。
84.具体地，将项目资源包同步至各开发终端，基于页面挂载和后台渲染中任意一种方式，通过各开发终端根据项目资源包对项目页面进行页面预览，得到预览页面，当页面预览效果满足实际需要时，生成可视化页面并对可视化页面进行发布。
85.上述可视化页面构建方法中，通过多开发终端同时响应于对应的页面构建信息触发的页面构建操作，能够通过多开发终端协作来提升页面构建效率，避免开发过程中多开发终端的文件形式的相互传递，降低用户的使用成本。根据页面可编辑单元和配置数据进行可视化编辑，以及对可视化编辑得到的目标页面进行页面预览，生成待发布可视化页面。通过多终端协作来提升建站效率，避免文件形式的相互传递；以及对页面进行页面预览，在开发过程中可以获取页面在真实设备运行上的实际效果，避免页面发布后未达到实际需求效果导致二次开发，提高页面生成效率。
86.在一个实施例中，如图4所示，提供了一种确定项目资源包的方法，以该方法应用于图1中的服务器例进行说明，包括以下步骤：
87.步骤402，将各页面可编辑单元发送至可视化编辑器，获取各页面编辑单元对应的组件以及组件标签。
88.其中，页面可视化搭建工具(即可视化编辑器)与页面前端框架解偶；可视化编辑器用于实现可视化搭建，可视化搭建可以理解成json数据与组件的映射，用户不需要关心组件的实现，装置会将组件映射成可读的标签，例如，文本框、轮播图、验证表单等等；用户在拖动组件的同时服务器上的装置会将组件拼装成配置数据json，页面会实时根据json规则来渲染页面。进一步可以理解的是，当组件发生变化时，配置数据也会发生改变，当配置数据发生改变时配置数据对应的组件也会发生更新，项目页面也会实时更新。
89.步骤404，根据组件映射策略将各组件标签映射成对应配置数据。
90.步骤406，获取各组件之间的层级关系。
91.其中，组件之间的层级关系包括父子层级关系和兄弟层级关系。组件树定义了组件间父子、兄弟的层级关系,父子组件通过数据流和事件进行关联:数据从父组件的state传递到子组件的props；子组件的变更触发event通知父组件。如图5所示，组件树定义了组件间的父子兄弟的层级关系。
92.步骤408，根据层级关系，对各组件之间的组件布局进行调整，得到项目页面的组件树。
93.其中，不同的组件有不同的样式布局，在对各组件进行布局编辑组件树时，需要处理不同组件产生层级关系后带来的布局影响。当组件之间存在父子层级关系时，可能会存在子组件宽度过大，可能会导致样式溢出；即需要对子组件设置布局参数，布局参数如autofix(是否自适应父组件)、forcewidth(强制子组件宽度)等等，组件内部根据这些属性来修改不同的样式。
94.在组件布局中，页面可视化搭建工具需要制订组件嵌套的规则和约束，基于组件嵌套的规则和约束来确保可视化编辑后的组件树正常渲染。组件嵌套规则除包括现有的组件嵌套规则之外，还包括灵活定制的组件嵌套规则，如在组件嵌套过程中不能出现固定元素位置fixed的样式。
95.具体地，获取组件嵌套规则，以及确定各组件之间的布局参数；基于组件嵌套规则，根据层级关系对布局参数进行调整，直到满足预设的布局约束，确定项目页面的组件树。布局参数包括自适应父组件、固定尺寸；进一步地，基于组件嵌套规则，根据层级关系对布局参数中是否自适应父组件、固定尺寸中至少一种布局参数进行调整，直到满足预设的布局约束，确定项目页面的组件树。
96.步骤410，根据配置数据更新组件树的组件配置数据，得到项目资源包。
97.具体地，根据层级关系，对各组件之间的组件布局进行调整的过程中，若页面可编辑单元发生了改变，则其对应的配置数据也发生改变；在对各组件之间的组件布局进行调整，得到项目页面的组件树后，根据调整后的配置数据更新组件数的组件配置数据，得到项目资源包。
98.上述项目资源包的确定方法中，根据各开发终端不同的编辑自由度的选择，确定项目所需的组件；通过获取各组件之间的层级关系，根据组件映射策略将各组件标签映射成对应配置数据；根据层级关系，通过可视化搭建工具与页面前端框架解耦，对各组件之间的组件布局进行调整，得到项目页面的组件树；以及根据配置数据更新组件树的组件配置数据，得到项目资源包，提高组件化和实现页面生成的效率。
99.在一个实施例中，如图6所示，提供了一种可视化页面构建方法，以该方法应用于图1中的服务器例进行说明，包括以下步骤：
100.步骤602，响应于项目的构建指令，获取项目的构建信息。
101.具体地，服务器的编辑器后台响应于项目的构建指令，从确定的项目模板中获取对应的项目模板，确定项目的构建信息。
102.步骤604，获取各开发终端的开发权限数据。
103.其中，各开发终端的开发权限数据包括只读和可写的操作权限，以及是否允许参与开发的权限等；各开发终端的开发权限数据是预先根据项目的开发实际需求进行设置的。例如，构建信息包括a、b、c、d四部分，开发终端1只能对a部分进行读写操作，开发终端2只能对b部分进行读写操作，开发终端3只能对c部分进行读写操作，开发终端4只能对d部分进行读写操作。
104.步骤606，根据开发权限数据从构建信息确定各开发终端对应的构建信息。
105.具体地，对各开发终端的开发权限数据进行验证，当验证通过后，根据开发权限数据从构建信息中确定各开发终端对应得构建信息。
106.步骤608，响应于各开发终端针对构建信息触发的对项目页面的构建操作，从预设
的组件库中确定对应的页面可编辑单元，以及得到页面可编辑单元的配置数据。
107.具体地，根据开发权限数据从构建信息确定各开发终端对应的构建信息，将各构建信息发送至对应的开发终端，并在各开发终端上显示项目对应的开发环境；各开发终端在开发环境中触发构建操作，服务器响应于各开发终端针对构建信息触发的对项目页面的构建操作，从预设的组件库中确定对应的组件；例如，开发终端1的构建操作为将图片组件移动至项目页面的主操作区，即需要从组件库中获取对应的图片组件；开发终端2的构建操作为将活动组件拖曳到项目页面上，即需要从组件库中确定活动组件(例如，权要转盘，满199减50)。
108.可选地，响应于各开发终端针对构建信息触发的对项目页面的构建操作，当组件库中不存在与该构建操作对应的组件时，根据组件库中组件进行设置，得到与该构件操作对应的组件，实现组件的自由拓展。
109.步骤610，根据页面可编辑单元确定项目页面的组件树，以及根据配置数据更新组件树的组件配置数据，得到项目资源包。
110.步骤612，将项目资源包同步至各开发终端，以使各开发终端根据项目资源包对项目页面进行页面预览，生成可视化页面。
111.可选地，在一个实施例中，将项目资源包发送至各开发终端，以使各开发终端响应渲染请求，从获取项目资源包中获取页面可编辑单元以及对应请求数据，将可编辑单元和请求数据进行组合拼接，得到组合拼接数据并执行渲染展示，生成可视化页面。
112.具体地，服务器将项目资源包发送至各开发终端，各开发终端根据项目资源包构造文件对象模型元素；并通过执行各开发终端中预先设置的代码(其中，代码中设置了需要定位的目标元素节点)，定位文件对象模型元素中的目标元素节点，将项目资源包挂载到目标元素节点进行组件渲染，生成可视化页面。
113.如图7所示，在服务器的编辑后台响应于项目的构建指令，获取对应的项目模板，得到项目的构建信息，响应于各开发终端针对构建信息触发的对项目页面的构建操作，从组件库中获取对应的组件和组件的配置数据，在服务器的编辑器前端根据页面可编辑单元确定项目页面的组件树，以及根据配置数据更新组件树的组件配置数据；将项目资源包同步至各开发终端，在指定的元素节点上重新渲染组件树，得到预览页面。即使用页面挂载的预览方式,编辑器前端页面需要提供组件库组件渲染环境(组件库前端框架)；为实现前端渲染，编辑器前端源码引入组件库组件源码；后续组件库更新，编辑器需要同步更新，进而提高了实时渲染的速度。
114.可选地，在一个实施例中，将项目资源包同步至各开发终端，以使各开发终端根据项目资源包构造文件对象模型元素，并定位文件对象模型元素中的目标元素节点，在目标元素节点对项目资源包进行组件渲染，生成可视化页面。
115.具体地，服务器将项目资源包发送至各开发终端，各开发终端响应渲染请求，从项目资源包中获取页面可编辑单元以及对应请求数据；将可编辑单元和请求数据进行组合拼接，得到组合拼接数据，并将组合拼接数据发送至各开发终端；根据组合拼接数据，通过各开发终端执行渲染展示，生成可视化页面。即采用后台渲染,使编辑器后台与组件前端框架解耦，在发布之前项目页面进行预览，预览实际发布后的页面，可以实时预览页面的实际效果，减少开发时长。
116.可选地，在一个实施例中，生成可视化页面的链接信息；链接信息用于对可视化页面进行检验。其中，链接信息可以但不仅限于是二维码，终端可以通过扫描二维码获取可视化页面的预览效果。
117.在一个实施例中，应用场景以医疗场景为例进行说明；服务器响应于医疗项目的构建指令，获取医疗项目的构建信息；将医疗项目的构建信息分别发送至至少一个开发终端；响应于各开发终端针对构建信息触发的对医疗项目页面的构建操作，得到页面可编辑单元和页面可编辑单元的配置数据；将各页面可编辑单元发送至可视化编辑器，获取各页面编辑单元对应的组件以及组件标签；根据组件映射策略将各组件标签映射成对应配置数据；获取各组件之间的层级关系；获取组件嵌套规则，以及确定各组件之间的布局参数；基于组件嵌套规则，根据层级关系对布局参数进行调整，直到满足预设的布局约束，确定项目页面的组件树；根据配置数据更新组件树的组件配置数据，得到项目资源包。
118.将项目资源包发送至各开发终端，各开发终端响应渲染请求，从获取项目资源包中获取页面可编辑单元以及对应请求数据；将可编辑单元和请求数据进行组合拼接，得到组合拼接数据，并将组合拼接数据发送至各开发终端；根据组合拼接数据，通过各开发终端执行渲染展示，生成医疗可视化页面。或通过各开发终端根据项目资源包构造文件对象模型元素；各开发终端定位文件对象模型元素中的目标元素节点，将项目资源包挂载到目标元素节点进行组件渲染，生成医疗可视化页面。
119.在一个实施例中，提供了一种可视化页面构建系统，可视化页面构建系统包括多个开发前端(编辑器前端)和后端(编辑器后端，可以理解为服务器端)；可视化页面构建系统建立活动页面、宣传页面等h5站点，用于对医疗信息的推送以及展示(如，医疗资讯的展示，医用物品的展示以及相关注意事项等)。
120.可视化页面构建系统的后端响应于项目的构建指令，获取项目的构建信息；将项目的构建信息分别发送至至少一个开发终端；开发终端根据构建信息在开发终端的页面工具上触发构建操作，例如，拖拽页面组件到项目页面中；后端响应于各开发终端针对构建信息触发的对项目页面的构建操作，得到页面可编辑单元和页面可编辑单元的配置数据；将各页面可编辑单元发送至可视化编辑器，获取各页面编辑单元对应的组件以及组件标签；根据组件映射策略将各组件标签映射成对应配置数据；根据各组件确定项目页面的组件树，以及根据配置数据更新组件树的组件配置数据，得到项目资源包；将项目资源包同步至各开发终端，通过各开发终端根据项目资源包对项目页面进行页面预览，生成医疗可视化页面。
121.上述可视化页面构建方法中，通过多开发终端协作来提升建站效率，避免文件形式的相互传递，降低用户的使用成本；以及通过页面可视化搭建工具进行可视化搭建，可提高组件化和页面模板实现页面生成效率；同时采用页面挂载或后台渲染，编辑装置与组件前端框架解耦，可以提高实时渲染速度。
122.应该理解的是，虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这
些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。
123.基于同样的发明构思，本技术实施例还提供了一种用于实现上述所涉及的可视化页面构建方法的可视化页面构建装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似，故下面所提供的一个或多个可视化页面构建装置实施例中的具体限定可以参见上文中对于可视化页面构建方法的限定，在此不再赘述。
124.在一个实施例中，如图8所示，提供了一种可视化页面构建装置，包括：构建信息获取模块802、构建信息分发模块804、协同构建模块806、确定模块808和同步预览模块810，其中：
125.构建信息获取模块802，用于响应于项目的构建指令，获取项目的构建信息。
126.构建信息分发模块804，用于将项目的构建信息分别发送至至少一个开发终端。
127.协同构建模块806，用于响应于各开发终端针对构建信息触发的对项目页面的构建操作，得到页面可编辑单元和页面可编辑单元的配置数据。
128.确定模块808，用于根据页面可编辑单元确定项目页面的组件树，以及根据配置数据更新组件树的组件配置数据，得到项目资源包。
129.同步预览模块810，用于将项目资源包同步至各开发终端，以使各开发终端根据项目资源包对项目页面进行页面预览，生成可视化页面。
130.上述可视化页面构建装置中，通过多开发终端同时响应于对应的页面构建信息触发的页面构建操作，能够通过多开发终端协作来提升页面构建效率，避免开发过程中多开发终端的文件形式的相互传递，降低用户的使用成本。根据页面可编辑单元和配置数据进行可视化编辑，以及对可视化编辑得到的目标页面进行页面预览，生成待发布可视化页面。通过多终端协作来提升建站效率，避免文件形式的相互传递；以及对页面进行页面预览，在开发过程中可以获取页面在真实设备运行上的实际效果，避免页面发布后未达到实际需求效果导致二次开发，提高页面生成效率。
131.可选地，在一个实施例中，可视化页面构建装置还包括收发模块，用于将各页面可编辑单元发送至可视化编辑器，获取各页面编辑单元对应的组件以及组件标签。
132.可视化页面构建装置还包括映射模块，映射模块，用于根据组件映射策略将各组件标签映射成对应配置数据。
133.可选地，在一个实施例中，确定模块808还用于根据各组件确定项目页面的组件树，以及根据配置数据更新组件树的组件配置数据，得到项目资源包。
134.在一个实施例中，可视化页面构建装置还包括布局调整模块，布局调整模块，用于获取各组件之间的层级关系；根据层级关系，对各组件之间的组件布局进行调整，得到项目页面的组件树。
135.可选地，在一个实施例中，确定模块808还用于根据配置数据更新组件树的组件配置数据，得到项目资源包。
136.在一个实施例中，布局调整模块还用于获取组件嵌套规则，以及确定各组件之间的布局参数；基于组件嵌套规则，根据层级关系对布局参数进行调整，直到满足预设的布局约束，确定项目页面的组件树。
137.在一个实施例中，布局调整模块还用于基于组件嵌套规则，根据层级关系对布局
参数中是否自适应父组件、固定尺寸中至少一种布局参数进行调整，直到满足预设的布局约束，确定项目页面的组件树。
138.在一个实施例中，可视化页面构建装置还包括权限验证模块，权限验证模块，用于获取各开发终端的开发权限数据；根据开发权限数据从构建信息确定各开发终端对应的构建信息。
139.可选地，在一个实施例中，协同构建模块806还用于响应于各开发终端针对构建信息触发的对项目页面的构建操作，从预设的组件库中确定对应的页面可编辑单元，以及得到页面可编辑单元的配置数据。
140.在一个实施例中，可视化页面构建装置还包括页面预览模块，页面预览模块用于将项目资源包发送至各开发终端，以使各开发终端响应渲染请求，从获取项目资源包中获取页面可编辑单元以及对应请求数据，对可编辑单元和请求数据进行组合拼接，得到组合拼接数据，对组合拼接数据执行渲染展示，生成可视化页面。
141.可选地，在一个实施例中，页面预览模块还用于将项目资源包同步至各开发终端，以使各开发终端根据项目资源包构造文件对象模型元素，并定位文件对象模型元素中的目标元素节点，在目标元素节点对项目资源包进行组件渲染，生成可视化页面。
142.在一个实施例中，可视化页面构建装置还包括链接信息生成模块，链接信息生成模块用于生成可视化页面的链接信息；链接信息用于对可视化页面进行检验。
143.上述可视化页面构建装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
144.在一个实施例中，提供了一种计算机设备，该计算机设备可以是服务器，其内部结构图可以如图9所示。该计算机设备包括通过装置总线连接的处理器、存储器和网络接口。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质和内存储器。该非易失性存储介质存储有操作装置、计算机程序和数据库。该内存储器为非易失性存储介质中的操作装置和计算机程序的运行提供环境。该计算机设备的数据库用于存储组件库以及配置数据。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种可视化页面构建方法。
145.本领域技术人员可以理解，图9中示出的结构，仅仅是与本技术方案相关的部分结构的框图，并不构成对本技术方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。
146.在一个实施例中，还提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述各方法实施例中的步骤。
147.在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。
148.在一个实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。
149.需要说明的是，本技术所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)，均为经用户授权或者经过各方充分授权的信息和数据。
150.本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本技术所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(read-only memory，rom)、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器(reram)、磁变存储器(magnetoresistive ran文件对象模型access memory，mram)、铁电存储器(ferroelectric ran文件对象模型access memory，fram)、相变存储器(phase change memory，pcm)、石墨烯存储器等。易失性存储器可包括随机存取存储器(ran文件对象模型access memory，ram)或外部高速缓冲存储器等。作为说明而非局限，ram可以是多种形式，比如静态随机存取存储器(static ran文件对象模型access memory，sram)或动态随机存取存储器(dynamic ran文件对象模型access memory，dram)等。本技术所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本技术所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等，不限于此。
151.以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
152.以上所述实施例仅表达了本技术的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本技术专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本技术构思的前提下，还可以做出若干变形和改进，这些都属于本技术的保护范围。因此，本技术的保护范围应以所附权利要求为准。