WEB页面的生成方法、装置、电子设备及存储介质与流程

本技术涉及电子信息处理，尤其涉及web页面的生成方法、装置、电子设备及存储介质。

背景技术：

1、随着电子信息技术的不断发展，为满足各行各业对产品数据可视化的需求，将数据以web页面的形式进行可视化展示逐渐成为趋势。

2、现有技术中，实现可视化数据展示的平台如finebi、powerbi等，这些平台通常是在chrome浏览器中采用直接拖拽的方式完成web页面的创建，拖拽的对象为浏览器支持的各种图形用户界面(graphical user interface，gui)控件，这些控件可与后台数据建立直接的关联，且在运行期支撑控件的数据刷新，由于finebi、powerbi的平台文件体量庞大，对承载平台的终端设备的存储空间要求比较高，且平台内模块化集成度有限，用于生成web页面的各控件之间关联性比较强，需要携带很多附加内容才能发布最终的web页面，使得生成web页面变得繁琐，用户体验感差。

3、因此，如何缩小文件体量，使得生成web页面更加便捷，提升用户体验是亟待解决的技术问题。

技术实现思路

1、本技术实施例提供web页面的生成方法、装置、电子设备及存储介质，用以缩小文件体量，生成web页面更加便捷，提升用户体验。

2、第一方面，本技术实施例提供一种web页面的生成方法，包括：

3、接收对目标web页面的创建操作，响应于所述创建操作显示控件列表；

4、响应于对所述控件列表中任一控件的选择操作，从服务端获取所述控件对应的预先配置的控件模板文件，其中，所述控件对应的控件模板文件为所述服务端根据所述控件在模块库中对应的各类模块组合得到，各类模块为独立的逻辑控制；

5、加载所述控件模板文件，生成并显示所述控件；

6、结合所述各控件生成并显示所述目标web页面。

7、这样，预先为每个控件配置模板文件，且控件模板文件为服务端根据控件在模块库中对应的各类模块组合得到，各类模块为独立的逻辑控制，可以有效缩小文件体量，加载模板文件即可生成控件，进而生成web页面，使得生成web页面更加便捷，进而提升了用户体验。

8、在一些实施例中，所述控件模板文件至少包括样式模块、行为模块、基本元素模块以及属性模块；所述样式模块为用于在界面上显示对应展示样式的逻辑控制；所述行为模块为用于在界面上显示对应操作行为的逻辑控制；所述基本元素模块为用于在界面上显示对应基本元素的逻辑控制；所述属性模块为用于在界面上显示可设置操作行为对应的属性参数的逻辑控制。

9、在一些实施例中，所述操作行为包括调整行为，还包括：

10、接收针对所述控件的调整行为操作，响应于所述调整行为操作更新所述控件，并显示更新后的所述控件；

11、其中，所述调整行为操作至少包括复制控件操作以及删除控件操作。

12、这样，可以根据复制控件操作以及删除控件操作对控件的操作行为进行扩展，使得控件的扩展更灵活。

13、在一些实施例中，从服务端获取所述控件对应的预先配置的控件模板文件，包括：

14、从服务端获取所述控件对应的预先配置的控件模板文件中各类模块的文件索引；

15、基于所述各类模块的文件索引，从服务端获取所述文件索引对应的各类模块；

16、加载所述控件模板文件，生成并显示所述控件，包括：

17、加载样式模块和基本元素模块，显示所述控件的初始界面；

18、响应于对所述控件的初始界面的点击操作，加载行为模块和属性模块，显示所述控件的属性列表。

19、这样，根据控件先获取控件对于的控件模板中各类模块的文件索引，再根据索引获得对应的各类模块，可以缩小控件模板文件的文件体量。

20、在一些实施例中，还包括：

21、接收针对所述控件的属性列表中属性的更改操作，响应于所述更改操作，调用本地用于更改所述控件属性参数的调整函数更新所述控件，并显示更新后的所述控件。

22、这样，针对控件的属性列表中属性可以灵活更改，使得生成并显示的控件更加个性化和多样化，进一步提升用户的使用体验。

23、在一些实施例中，结合所述各控件生成并显示所述目标web页面，包括：

24、结合所述各控件以及嵌套关系生成目标web页面，并将所述目标web页面作为子页面嵌入预先生成的作为父页面的第一页面中进行显示，或者，将所述第一页面作为子页面嵌入作为父页面的所述目标web页面进行显示；所述嵌套关系为父页面和子页面的对应关系；所述嵌套关系包括所述目标web页面与所述第一页面的对应关系。

25、这样，建立父页面和子页面的嵌套关系，可增加页面显示的多样性，可提升用户使用体验。

26、在一些实施例中，所述方法还包括：

27、采用如下方式建立所述嵌套关系：

28、接收针对任一父页面的嵌入操作，响应于所述嵌入操作，在所述父页面的空白区域生成页面控件；

29、接收对所述页面控件的页面文档属性的设置，获取对所述页面文档属性设置的子页面的标识；

30、基于所述子页面的标识以及所述任一父页面的标识，建立所述任一父页面与所述子页面的对应关系。

31、这样，只需在父页面的空白区域生成页面控件，将页面控件的页面文档属性的设置为子页面的标识，即可建立父页面与子页面的对应关系，将子页面嵌入父页面内进行显示，使得页面显示更加灵活和便捷。

32、在一些实施例中，结合所述各控件生成并显示所述目标web页面，包括：

33、接收从上级页面跳转到下级页面的点击操作，响应于所述点击操作，基于预先建立的上级页面向下级页面的跳转关系，从作为上级页面的当前页面跳转到作为下级页面的目标web页面，或者从作为上级页面的目标web页面跳转到下级页面。

34、这样，建立上级页面和下级页面的跳转关系，可增加页面显示的多样性，进一步提升用户使用体验。

35、在一些实施例中，所述方法还包括：

36、采用如下方式建立上级页面向下级页面的跳转关系：

37、接收针对任一上级页面内任一控件的导航属性设置操作，响应于所述导航属性设置操作，接收输入的下级页面名称；

38、将所述控件的导航属性设置为所述下级页面名称，建立所述上级页面向下级页面的跳转关系。

39、这样，只需在上级页面内任一控件的导航属性设置为下级页面名称，即可建立上级页面向下级页面的跳转关系，从上级页面通过操作控件跳转值下级页面，进而显示下级页面，使得页面显示更加灵活和便捷。

40、在一些实施例中，结合所述各控件生成并显示所述目标web页面之后，还包括：

41、接收针对所述目标web页面或所述目标web页面中的任一控件设置的联动操作；

42、响应于所述联动操作，确定所述目标web页面或所述目标web页面中的任一控件作为触发方产生的触发事件；

43、确定所述触发事件有效时，确定设置有与所述触发事件相同的接收事件的关联方；

44、确定所述接收事件有效时，根据所述触发方和所述关联方的联动关系对所述关联方界面作对应的变化。

45、这样，若触发事件有效时，根据触发方产生的触发事件确定设置有与触发事件相同的接收事件的关联方，若接收事件有效，则可根据触发方和关联方的联动关系对关联方界面作对应的变化，通过触发方和关联方的联动，实现触发方和关联方之间的数据传递，提升了用户的使用体验。

46、第二方面，本技术实施例提供一种web页面的生成装置，包括：

47、接收模块，用于接收对目标web页面的创建操作，响应于所述创建操作显示控件列表；

48、获取模块，用于响应于对所述控件列表中任一控件的选择操作，从服务端获取所述控件对应的预先配置的控件模板文件，其中，所述控件对应的控件模板文件为所述服务端根据所述控件在模块库中对应的各类模块组合得到，各类模块为独立的逻辑控制；

49、加载模块，用于加载所述控件模板文件，生成并显示所述控件；

50、生成模块，用于结合所述各控件生成并显示所述目标web页面。

51、在一些实施例中，所述控件模板文件至少包括样式模块、行为模块、基本元素模块以及属性模块；所述样式模块为用于在界面上显示对应展示样式的逻辑控制；所述行为模块为用于在界面上显示对应操作行为的逻辑控制；所述基本元素模块为用于在界面上显示对应基本元素的逻辑控制；所述属性模块为用于在界面上显示可设置操作行为对应的属性参数的逻辑控制。

52、在一些实施例中，所述操作行为包括调整行为，还包括：

53、更新模块，用于接收针对所述控件的调整行为操作，响应于所述调整行为操作更新所述控件，并显示更新后的所述控件；

54、其中，所述调整行为操作至少包括复制控件操作以及删除控件操作。

55、在一些实施例中，所述获取模块，具体用于：

56、从服务端获取所述控件对应的预先配置的控件模板文件中各类模块的文件索引；

57、基于所述各类模块的文件索引，从服务端获取所述文件索引对应的各类模块；

58、所述加载模块，具体用于：

59、加载样式模块和基本元素模块，显示所述控件的初始界面；

60、响应于对所述控件的初始界面的点击操作，加载行为模块和属性模块，显示所述控件的属性列表。

61、在一些实施例中，所述更新模块，还用于：

62、接收针对所述控件的属性列表中属性的更改操作，响应于所述更改操作，调用本地用于更改所述控件属性参数的调整函数更新所述控件，并显示更新后的所述控件。

63、在一些实施例中，所述生成模块，具体用于：

64、结合所述各控件以及嵌套关系生成目标web页面，并将所述目标web页面作为子页面嵌入预先生成的作为父页面的第一页面中进行显示，或者，将所述第一页面作为子页面嵌入作为父页面的所述目标web页面进行显示；所述嵌套关系为父页面和子页面的对应关系；所述嵌套关系包括所述目标web页面与所述第一页面的对应关系。

65、在一些实施例中，还包括：

66、建立模块，用于采用如下方式建立所述嵌套关系：

67、接收针对任一父页面的嵌入操作，响应于所述嵌入操作，在所述父页面的空白区域生成页面控件；

68、接收对所述页面控件的页面文档属性的设置，获取对所述页面文档属性设置的子页面的标识；

69、基于所述子页面的标识以及所述任一父页面的标识，建立所述任一父页面与所述子页面的对应关系。

70、在一些实施例中，所述生成模块，具体用于：

71、接收从上级页面跳转到下级页面的点击操作，响应于所述点击操作，基于预先建立的上级页面向下级页面的跳转关系，从作为上级页面的当前页面跳转到作为下级页面的目标web页面，或者从作为上级页面的目标web页面跳转到下级页面。

72、在一些实施例中，所述建立模块，还用于：

73、采用如下方式建立上级页面向下级页面的跳转关系：

74、接收针对任一上级页面内任一控件的导航属性设置操作，响应于所述导航属性设置操作，接收输入的下级页面名称；

75、将所述控件的导航属性设置为所述下级页面名称，建立所述上级页面向下级页面的跳转关系。

76、在一些实施例中，所述生成模块结合所述各控件生成并显示所述目标web页面之后，所述更新模块，还用于：

77、接收针对所述目标web页面或所述目标web页面中的任一控件设置的联动操作；

78、响应于所述联动操作，确定所述目标web页面或所述目标web页面中的任一控件作为触发方产生的触发事件；

79、确定所述触发事件有效时，确定设置有与所述触发事件相同的接收事件的关联方；

80、确定所述接收事件有效时，根据所述触发方和所述关联方的联动关系对所述关联方界面作对应的变化。

81、第三方面，本技术实施例提供一种电子设备，包括：至少一个处理器，以及与所述至少一个处理器通信连接的存储器，其中：

82、存储器存储有可被至少一个处理器执行的计算机程序，该计算机程序被所述至少一个处理器执行，以使所述至少一个处理器能够执行上述web页面的生成方法。

83、第四方面，本技术实施例提供一种存储介质，当所述存储介质中的计算机程序由电子设备的处理器执行时，所述电子设备能够执行上述web页面的生成方法。

84、本技术实施例中，接收对目标web页面的创建操作，响应于创建操作显示控件列表，响应于对控件列表中任一控件的选择操作，从服务端获取控件对应的预先配置的控件模板文件，其中，控件对应的控件模板文件为服务端根据控件在模块库中对应的各类模块组合得到，各类模块为独立的逻辑控制，加载控件模板文件，生成并显示控件，结合各控件生成并显示目标web页面。这样，预先为每个控件配置模板文件，且控件模板文件为服务端根据控件在模块库中对应的各类模块组合得到，各类模块为独立的逻辑控制，可以有效缩小文件体量，加载模板文件即可生成控件，进而生成web页面，使得生成web页面更加便捷，进而提升了用户体验。

技术特征：

1.一种web页面的生成方法，其特征在于，包括：

2.如权利要求1所述的生成方法，其特征在于，所述控件模板文件至少包括样式模块、行为模块、基本元素模块以及属性模块；所述样式模块为用于在界面上显示对应展示样式的逻辑控制；所述行为模块为用于在界面上显示对应操作行为的逻辑控制；所述基本元素模块为用于在界面上显示对应基本元素的逻辑控制；所述属性模块为用于在界面上显示可设置操作行为对应的属性参数的逻辑控制。

3.根据权利要求1或2所述的生成方法，其特征在于，所述操作行为包括调整行为，还包括：

4.如权利要求1或2所述的生成方法，其特征在于，从服务端获取所述控件对应的预先配置的控件模板文件，包括：

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

6.如权利要求1所述的生成方法，其特征在于，结合所述各控件生成并显示所述目标web页面，包括：

7.如权利要求6所述的生成方法，其特征在于，所述方法还包括：

8.如权利要求1所述的生成方法，其特征在于，结合所述各控件生成并显示所述目标web页面，包括：

9.如权利要求8所述的生成方法，其特征在于，所述方法还包括：

10.如权利要求1所述的生成方法，其特征在于，结合所述各控件生成并显示所述目标web页面之后，还包括：

11.一种web页面的生成装置，其特征在于，包括：

12.一种电子设备，其特征在于，包括：至少一个处理器，以及与所述至少一个处理器通信连接的存储器，其中：

13.一种存储介质，其特征在于，当所述存储介质中的计算机程序由电子设备的处理器执行时，所述电子设备能够执行如权利要求1-10任一所述的方法。

技术总结
本申请公开一种WEB页面的生成方法、装置、电子设备及存储介质，属于电子信息技术领域，包括：接收对目标WEB页面的创建操作，响应于创建操作显示控件列表，响应于对控件列表中任一控件的选择操作，从服务端获取控件对应的预先配置的控件模板文件，其中，控件对应的控件模板文件为服务端根据控件在模块库中对应的各类模块组合得到，各类模块为独立的逻辑控制，加载控件模板文件，生成并显示控件，结合各控件生成并显示目标WEB页面。这样，预先为每个控件配置模板文件，可以有效缩小文件体量，加载模板文件即可生成控件，进而生成WEB页面，使得生成WEB页面更加便捷，进而提升了用户体验。

技术研发人员：马敏哲,傅烈虎
受保护的技术使用者：维谛技术有限公司
技术研发日：
技术公布日：2024/9/23