Web应用可视化页面的开发工具生成方法与流程

本发明涉及应用开发，具体涉及一种web应用可视化页面的开发工具生成方法、装置、电子设备及存储介质。

背景技术：

1、web应用(web应用是指基于web技术开发的应用程序，可以通过网络访问和使用。它通常由前端界面、后端逻辑和数据库组成，用户可以通过浏览器或其他网络客户端与之交互)的可视化设计，微软最早推出的asp.net web form(一种用于构建web应用程序的技术框架，它是microsoft asp.net平台的一部分。该框架允许开发人员使用像windows窗体那样的事件驱动模型来构建web应用程序)是最典型的，另外还有阿里的datav(一款由阿里云推出的大屏数据可视化工具，可以将复杂的数据转化为直观的图形化展示效果。datav有着丰富的图表库和模板，能够满足不同行业、不同场景下的数据可视化需求。它可以帮助用户快速构建具有交互性和美观性的大屏数据可视化页面)等类似产品，这些都存在一定的缺点。

2、asp.net web form虽然使用方便，能快速搭建web应用，但存在以下问题：1、asp.net web form是服务端组件，组件内容发生变动需要递交请求到服务器重新渲染，操作流畅程度体验差；2、服务端组件封装程度高，非常难扩展，不容易测试；3、复杂的生命周期模型，控制不灵活等等；4、使用的开发语言主要是c#，不是广大前端开发者常用熟悉的js语言。而datav这类可视化设计工具缺点在于，这类工具主要用于数据展示方面，不适合开发带交互的完整web应用程序。

技术实现思路

1、针对现有技术中所存在的不足，本发明提供一种web应用可视化页面的开发工具生成方法、装置、电子设备及存储介质。

2、第一方面，在一个实施例中，本发明提供一种web应用可视化页面的开发工具生成方法，包括：

3、响应于项目创建菜单扩展指令，获取相关的项目数据包，对页面数据包进行处理，在visual studio开发工具的命令菜单上生成项目创建命令菜单；

4、响应于页面创建菜单扩展指令，获取相关的页面数据包，对页面数据包进行处理，在visual studio开发工具的命令菜单上生成页面创建命令菜单；

5、响应于页面设计菜单扩展指令，获取相关的设计数据包，对设计数据包进行处理，在visual studio开发工具的命令菜单上生成页面设计命令菜单；

6、响应于代码编辑菜单扩展指令，获取相关的代码数据包，对代码数据包进行处理，在visual studio开发工具的命令菜单上生成代码编辑命令菜单；

7、根据项目创建命令菜单、页面创建命令菜单、页面设计命令菜单和代码编辑命令菜单，得到web应用可视化页面的开发工具；得到的web应用可视化页面的开发工具通过ajax与服务端进行交互。

8、在一个实施例中，响应于项目创建菜单扩展指令，获取相关的项目数据包，对页面数据包进行处理，在visual studio开发工具的命令菜单上生成项目创建命令菜单，包括：

9、基于项目创建菜单扩展指令和项目数据包，

10、创建项目名称和项目目录；

11、在项目目录下生成包含项目名称的项目属性文件、主尺寸布局文件、主数据显示和页面交互代码编写文件以及主html基本代码生成文件；

12、根据项目属性文件、主尺寸布局文件、主数据显示和页面交互代码编写文件以及主html基本代码生成文件，生成项目创建命令菜单。

13、在一个实施例中，响应于页面创建菜单扩展指令，获取相关的页面数据包，对页面数据包进行处理，在visual studio开发工具的命令菜单上生成页面创建命令菜单，包括：

14、基于页面创建菜单扩展指令和页面数据包，

15、创建页面名称；

16、在项目目录下生成包含页面名称的子尺寸布局文件、子数据显示和页面交互代码编写文件以及子html基本代码生成文件；

17、根据子尺寸布局文件、子数据显示和页面交互代码编写文件以及子html基本代码生成文件，生成页面创建命令菜单。

18、在一个实施例中，响应于页面设计菜单扩展指令，获取相关的设计数据包，对设计数据包进行处理，在visual studio开发工具的命令菜单上生成页面设计命令菜单，包括：

19、基于页面设计菜单扩展指令和设计数据包，

20、构建用于创建画布的画布模块；

21、构建用于在画布中创建对应的组件的工具箱模块；

22、构建用于对画布中的组件进行属性修改的属性窗口模块；

23、根据画布模块、工具箱模块和属性窗口模块，生成页面设计器；

24、根据页面设计器，生成页面设计命令菜单。

25、在一个实施例中，响应于代码编辑菜单扩展指令，获取相关的代码数据包，对代码数据包进行处理，在visual studio开发工具的命令菜单上生成代码编辑命令菜单，包括：

26、基于代码编辑菜单扩展指令和代码数据包，

27、构建代码编辑器；代码编辑器用于对创建的web应用开发项目中的主数据显示和页面交互代码编写文件进行代码编辑以及对创建的可视化页面中的子数据显示和页面交互代码编写文件进行代码编辑；

28、根据代码编辑器，生成代码编辑命令菜单。

29、在一个实施例中，在生成代码编辑命令菜单的步骤之后，上述web应用可视化页面的开发工具生成方法还包括：

30、响应于运行调试菜单扩展指令，获取相关的运行调试数据包，对运行调试数据包进行处理，在visual studio开发工具的命令菜单上生成运行调试命令菜单。

31、在一个实施例中，在生成代码编辑命令菜单的步骤之后，上述web应用可视化页面的开发工具生成方法还包括：

32、响应于构建发布菜单扩展指令，获取相关的构建发布数据包，对构建发布数据包进行处理，在visual studio开发工具的命令菜单上生成构建发布命令菜单。

33、第二方面，在一个实施例中，本发明提供一种web应用可视化页面的开发工具生成装置，包括：

34、项目创建菜单扩展模块，用于响应于项目创建菜单扩展指令，获取相关的项目数据包，对页面数据包进行处理，在visual studio开发工具的命令菜单上生成项目创建命令菜单；

35、页面创建菜单扩展模块，用于响应于页面创建菜单扩展指令，获取相关的页面数据包，对页面数据包进行处理，在visual studio开发工具的命令菜单上生成页面创建命令菜单；

36、页面设计菜单扩展模块，用于响应于页面设计菜单扩展指令，获取相关的设计数据包，对设计数据包进行处理，在visual studio开发工具的命令菜单上生成页面设计命令菜单；

37、代码编辑菜单扩展模块，用于响应于代码编辑菜单扩展指令，获取相关的代码数据包，对代码数据包进行处理，在visual studio开发工具的命令菜单上生成代码编辑命令菜单；

38、开发工具生成模块，用于根据项目创建命令菜单、页面创建命令菜单、页面设计命令菜单和代码编辑命令菜单，得到web应用可视化页面的开发工具；得到的web应用可视化页面的开发工具通过ajax与服务端进行交互。

39、第三方面，在一个实施例中，本发明提供一种电子设备，包括存储器和处理器；存储器存储有计算机程序，处理器用于运行存储器内的计算机程序，以执行上述任一种实施例中的web应用可视化页面的开发工具生成方法中的步骤。

40、第四方面，在一个实施例中，本发明提供一种存储介质，存储介质存储有计算机程序，计算机程序被处理器进行加载，以执行上述任一种实施例中的web应用可视化页面的开发工具生成方法中的步骤。

41、通过上述web应用可视化页面的开发工具生成方法、装置、电子设备及存储介质，利用visual studio的扩展开发功能，实现对应于web应用可视化开发的项目创建命令菜单、页面创建命令菜单、页面设计命令菜单以及代码编辑命令菜单的扩展开发，使得web应用的开发人员可以基于这些命令菜单实现web应用可视化页面开发；visual studio内置有ajax库，从而能够利用ajax技术实现客户端的页面渲染，无需每次都递交请求到服务器进行重新渲染，提高操作流畅度；visual studio灵活度高，容易扩展和测试；visual studio没有复杂的生命周期模型，控制较为灵活；visual studio能够使开发者使用常用的js语言进行代码编写；visual studio能够实现带交互的完整web应用。