CN117785194A - Web应用可视化页面的开发工具生成方法 - Google Patents

Abstract

本发明提供一种Web应用可视化页面的开发工具生成方法、装置、电子设备及存储介质，方法包括：响应于项目创建菜单扩展指令、页面创建菜单扩展指令、页面设计菜单扩展指令以及代码编辑菜单扩展指令，从而分别获取对应的项目数据包、页面数据包、设计数据包以及代码数据包，进而分别在VS开发工具的命令菜单上生成项目创建命令菜单、页面创建命令菜单、页面设计命令菜单以及代码编辑命令菜单，最终得到Web应用可视化页面的开发工具；得到的Web应用可视化页面的开发工具通过AJAX与服务端进行交互。VS内置有AJAX库，从而能够利用AJAX技术实现客户端的页面渲染，无需每次都递交请求到服务器进行重新渲染，提高操作流畅度。

Description

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

技术领域

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

背景技术

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

创建页面名称；

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明一个实施例中Web应用可视化页面的开发工具生成方法的应用场景示意图；

图2为本发明一个实施例中Web应用可视化页面的开发工具生成方法的流程示意图；

图3为本发明另一个实施例中Web应用可视化页面的开发工具生成方法的流程示意图；

图4为本发明一个实施例中Web应用可视化页面的开发工具生成装置的结构示意图；

图5为本发明另一个实施例中Web应用可视化页面的开发工具生成装置的结构示意图；

图6为本发明一个实施例中电子设备的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在本发明的描述中，需要理解的是，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个所述特征。在本申请的描述中，“多个”的含义是两个或两个以上，除非另有明确具体的限定。在本申请中，“示例性”一词用来表示“用作例子、例证或说明”。本申请中被描述为“示例性”的任何实施例不一定被解释为比其它实施例更优选或更具优势。为了使本领域任何技术人员能够实现和使用本发明，给出了以下描述。在以下描述中，为了解释的目的而列出了细节。应当明白的是，本领域普通技术人员可以认识到，在不使用这些特定细节的情况下也可以实现本发明。在其它实例中，不会对公知的结构和过程进行详细阐述，以避免不必要的细节使本发明的描述变得晦涩。因此，本发明并非旨在限于所示的实施例，而是与符合本申请所公开的原理和特征的最广范围相一致。

本发明实施例中的Web应用可视化页面的开发工具生成方法应用于Web应用可视化开发装置，Web应用可视化开发装置设置于电子设备；电子设备可以是终端，例如，手机或平板电脑，电子设备还可以是一台服务器，或者多台服务器组成的服务集群。

如图1所示，图1为本发明实施例中Web应用可视化页面的开发工具生成方法的应用场景示意图，本发明实施例中Web应用可视化页面的开发工具生成方法的应用场景中包括电子设备100(电子设备100中集成有Web应用可视化开发装置)，电子设备100中运行Web应用可视化页面的开发工具生成方法对应的计算机可读存储介质，以执行Web应用可视化页面的开发工具生成方法的步骤。

可以理解的是，图1所示Web应用可视化页面的开发工具生成方法的应用场景中的电子设备，或者电子设备中包含的装置并不构成对本发明实施例的限制，即，Web应用可视化页面的开发工具生成方法的应用场景中包含的设备数量、设备种类，或者各个设备中包含的装置数量、装置种类不影响本发明实施例中技术方案整体实现，均可以算作本发明实施例要求保护技术方案的等效替换或衍生。

本发明实施例中电子设备100可以是独立的设备，也可以是设备组成的设备网络或设备集群，例如，本发明实施例中所描述的电子设备100，其包括但不限于电脑、网络主机、单个网络设备、多个网络设备集或多个设备构成的云设备。其中，云设备由基于云计算(Cloud Computing)的大量电脑或网络设备构成。

本领域技术人员可以理解，图1中示出的应用场景，仅仅是与本发明的技术方案对应的一种应用场景，并不构成对本发明的技术方案的应用场景的限定，其他的应用场景还可以包括比图1中所示更多或更少的电子设备，或者电子设备网络连接关系，例如图1中仅示出1个电子设备，可以理解的，该Web应用可视化页面的开发工具生成方法的场景还可以包括一个或多个其他电子设备，具体此处不作限定；该电子设备100中还可以包括存储器，用于存储Web应用可视化页面的开发工具生成方法相关的信息。

此外，本发明实施例中的Web应用可视化页面的开发工具生成方法的应用场景中电子设备100可以设置显示装置，或者电子设备100中不设置显示装置并与外接的显示装置200通讯连接，显示装置200用于输出电子设备中Web应用可视化页面的开发工具生成方法执行的结果。电子设备100可以访问后台数据库300(后台数据库300可以是电子设备100的本地存储器，后台数据库300还可以设置在云端)，后台数据库300中保存有Web应用可视化页面的开发工具生成方法相关的信息。

需要说明的是，图1所示的Web应用可视化页面的开发工具生成方法的应用场景仅仅是一个示例，本发明实施例描述的Web应用可视化页面的开发工具生成方法的应用场景是为了更加清楚的说明本发明实施例的技术方案，并不构成对于本发明实施例提供的技术方案的限定。

基于上述Web应用可视化页面的开发工具生成方法的应用场景，提出了Web应用可视化页面的开发工具生成方法的实施例。

第一方面，如图2所示，在一个实施例中，本发明提供一种Web应用可视化开发方法，包括：

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

其中，Visual Studio是由微软开发的集成开发环境(IDE)，用于软件开发、网站开发、移动应用程序开发等；它提供了丰富的工具和功能，使开发人员能够高效地编写、调试和部署各种类型的应用程序；Visual Studio的一些主要特点和功能包括：多语言支持(Visual Studio支持多种编程语言，包括C#、VB.NET、C++、Python、JS(JavaScript)，使开发人员可以使用自己熟悉的语言进行开发)、代码编辑器、调试工具、图形化设计器、版本控制集成、测试工具、扩展性；而在本实施例中，尤其用到其扩展性，Visual Studio支持通过开发自己的扩展程序来增加额外的功能和工具，开发人员可以根据自己的需求来自己开发适用于特定开发任务的扩展插件，从而实现Web应用可视化开发；

其中，每一个Web应用都可以对应一个项目，需要实现一个Web应用可视化开发时，可创建一个对应的项目，因此在本实施例中，通过创建对应的项目创建命令菜单来实现后续项目的创建；

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

其中，页面创建命令菜单用于创建可视化页面，而在实际开发过程中，也可能存在页面删除的情况，比如创建了多余的页面，因此，除了扩展创建页面创建命令菜单以外，还需要扩展创建页面删除命令菜单，以实现页面的删除；

其中，页面的创建和删除都是针对页面整体而言，创建的可视化页面可以理解为空白页，不包含所需要的组件及其布局等；

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

其中，页面设计则是对上述创建的作为空白页的可视化页面进行具体设置，包括设置其中的组件及其布局等；在本实施例中，通过对应的页面设计命令菜单来实现；

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

其中，代码编辑则是定义相关交互行为的具体事件以及事件如何实现、如何触发等；还可以用于定义相关组件的具体样式；

其中，基于Web应用可视化开发的基本需求，在Visual Studio开发工具的命令菜单进行扩展开发实现创建项目创建命令菜单、页面创建命令菜单、页面设计命令菜单、代码编辑命令菜单等，从而在后续基于这些命令菜单来完成Web应用可视化开发；

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

其中，AJAX(Asynchronous JavaScript and XML)是一种使用JavaScript、XML和HTTP等技术创建交互式Web应用的编程技术；它的主要特点是可以在不刷新整个页面的情况下，通过异步方式向服务器请求或提交数据，并且可以实时更新页面内容(即实现客户端的页面渲染)，提升了Web应用的用户体验；该方式相当于传统的Web应用具有更高的效率，传统的Web应用在用户与页面进行交互时，需要重复下载整个页面的HTML、CSS、JavaScript等资源，然后再将用户的操作发送给服务器，这样会消耗较大的带宽和时间；而AJAX技术可以使得Web应用更加快速和灵活，因为仅仅需要更新局部的页面内容而无需加载整个页面；在使用AJAX后，可以把【数据处理】和【页面渲染】这两部分分开，也就是【后端】负责数据处理，【前端】负责页面渲染，这种分离模式极大的提高了开发效率和可维护性。

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

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

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

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

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

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

其中，项目属性文件主要用于构建目录属性；

其中，主尺寸布局文件主要用于定义所有页面的尺寸限度；

其中，主数据显示和页面交互代码编写文件主要用于供开发者编写对应功能的代码；

其中，主html基本代码生成文件主要用于自动生成html基本代码；

根据项目属性文件、主尺寸布局文件、主数据显示和页面交互代码编写文件以及主html基本代码生成文件，创建得到Web应用开发项目；

其中，具体的，创建项目时输入项目名称，项目目录，构建目录，确认后做如下操作

1)：在项目目录下生成{项目名称}.prj文件，文件格式为xml或其他格式，生成时写入项目名称，构建目录属性；

2)：在项目目录下生成main.design.js文件，文件内容自动生成此页面的show函数，show函数能够根据页面设置的高度宽度和页面上组件的布局属性计算，得到此页面实际高度宽度，组件绝对位置，绝对高度宽度进行显示；自动生成window.load监听事件，监听事件中调用show函数方法显示当前页面；

其中，main.design.js可以包含一些与界面设计相关的JavaScript代码，例如：页面布局：通过JavaScript实现动态布局和响应式设计；用户交互：通过JavaScript处理用户的点击、滚动、拖拽等交互操作，实现界面的反馈和动态效果；表单验证：通过JavaScript实现表单输入验证并给出提示；页面元素动画：使用JavaScript实现页面动态元素的动画效果；图片处理：通过JavaScript对图片进行处理和优化，例如裁剪、压缩、旋转等；第三方库集成：将一些第三方库或工具集成到Web应用中，例如jQuery、Bootstrap、Vue等；

其中，window.load是一个JavaScript事件，它在整个HTML文档(包括页面中的所有元素和资源)加载完成后触发；当浏览器加载完所有的HTML、CSS、JavaScript、图片和其他资源，并且页面完全呈现给用户之后，window.load事件就会被触发；它表示页面已经准备好了，可以开始执行JavaScript代码或执行其他操作；

3)：在项目目录下生成main.js文件，此文件是用于编写获取数据显示和页面交互代码，默认为空文件；

其中，main.js是一个常见的JavaScript文件名，它通常在Web应用程序中使用；main.js文件包含一些主要的JavaScript逻辑，例如：页面交互：处理页面的点击、滚动、拖动等交互，并实现不同状态下的反馈；表单验证：对表单进行输入验证，以确保用户输入的数据格式正确，并给出相应的提示；AJAX请求：通过AJAX技术向服务器发送异步请求，以获取或提交数据；第三方库集成：将一些第三方库或工具集成到Web应用中，例如jQuery、Vue、React等；数据处理和逻辑：实现数据的读取、处理和展示，例如计算、排序、搜索等；页面路由：通过JavaScript实现页面跳转和路由控制，实现单页应用(SPA)的效果；

4)：在项目下生成main.html文件，生成html基本代码和引入main.design.js，main.js的代码；

其中，当用户访问网站或Web应用程序时，浏览器就会自动加载main.html文件并呈现其内容；一个典型的main.html文件通常包括：HTML结构：它包含整个页面的结构、元素和布局，包括<head>和<body>等元素；样式表：CSS样式表用于定义页面的外观和样式；JavaScript库和脚本：包括各种JavaScript库和脚本，比如jQuery、Vue、React等等，这些库和脚本用于实现前端的交互逻辑和功能；动态数据：如果需要动态地显示数据，就需要使用后端技术(如PHP、Node.js等)生成动态数据并将其嵌入main.html文件中。

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

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

创建页面名称；

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

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

其中，子尺寸布局文件、子数据显示和页面交互代码编写文件以及子html基本代码生成文件的作用可参照上述实施例中的主尺寸布局文件、主数据显示和页面交互代码编写文件以及主html基本代码生成文件；

其中，具体的，创建页面时输入页面名称，确认后做如下操作。

1)：在项目目录下生成{页面名称}.design.js文件；文件内容自动生成此页面的show函数，show函数能够根据页面设置的高度宽度和页面上组件的布局属性计算，得到此页面实际高度宽度，组件绝对位置，绝对高度宽度进行显示；

2)：生成{页面名称}.js文件，此文件是用于编写自己的获取数据显示和页面交互代码，默认为空文件；

3)：生成{页面名称}.html文件,生成的内容包括{页面名称}.js导入代码和一个充满body的div容器；

4)：在.prj文件的页面列表属性中写入此页面名称，对应的html文件名。

在一个实施例中，Visual Studio开发工具的命令菜单上还扩展开发有页面删除命令菜单；

其中，具体的页面删除过程包括：

1)：遍历项目下所有除了本身的所有页面相关的文件，删除对{页面名称}.design.js引用代码；

2)：删除{页面名称}.design.js，{页面名称}.js，{页面名称}.html文件；

3)：删除.prj文件中此页面信息内容。

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

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

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

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

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

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

根据页面设计器，生成页面设计命令菜单；

其中，页面设计器初始化时，首先做以下过程：

1)建立每个组件类型对应的组名称，显示图标，工具箱中序号，默认大小，默认模板代码，在实现工具箱使用；

2)建立每个组件类型的属性列表和对应的样式模板，在实现属性窗口使用；

3)建立每个组件类型的事件列表和对应的代码框架模板，在实现事件窗口使用；

其中，页面设计器包含工具箱，画布，属性窗口，事件窗口，以下分别描述各自的创建过程；

工具箱实现逻辑；

a)建立每个组件类型对应的组名称，显示图标，工具箱中序号，默认大小，默认模板代码；

b)遍历每个组件，根据组件对应的组名称，图标，序号依次显示在工具箱中；

c)监听组件的拖拽事件，当拖拽到画布结束时，做如下动作：

在{页面名称}.html文件的div容器中再插入一个div容器代码，该div id自动按组件类型_n的规则生成，布局采用绝对定位布局，left设置鼠标当前在画布的x坐标，top设置鼠标的y坐标，height设置组件类型的默认高度，weight设置组件类型的默认宽度；

d)在刚才生成div容器代码中插入组件类型的模板代码，组件填充到整个div容器；

画布实现逻辑：

a)画布嵌入浏览器组件(cefsharp)，加载页面时首先把项目目录下页面文件复制到临时目录，复制结束后，在html文件中插入对组件进行添加，删除，设置样式，设置JS代码的通用函数代码，完成后浏览器组件加载此修改后html进行显示；

b)工具箱拖拽组件完成，画布通过浏览器组件调用a)添加的添加函数；

c)画布中删除组件，画布通过浏览器组件调用a)添加的删除函数；

d)画布中调整组件大小，调整组件位置操作，画布通过浏览器组件调用a)添加的设置样式函数；

e)通过组件属性窗口修改组件属性画布通过浏览器组件调用a)添加的设置样式函数；

f)通过组件事件窗口修改组件事件画布通过浏览器组件调用a)添加的JS代码函数；

属性窗口实现逻辑：

a)遍历当前选择组件的组件类型对应的属性列表进行显示；

b)设置属性时，通过画布浏览器组件调用设置样式函数；

事件窗口实现逻辑：

a)遍历当前选择组件的组件类型对应的事件列表进行显示；

b)设置事件时，通过画布浏览器组件调用设置JS函数,同时在项目目录下{当前页面}.html文件中插入事件调用代码，在{当前页面}.js中插入事件模板代码；

其中，在完成页面设计器中的画布模块、工具箱模块、属性窗口模块以及事件窗口模块之后，即可根据这些模块来实现对应的设计，从而完成对可视化页面的设计。

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

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

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

根据代码编辑器，生成代码编辑命令菜单；

其中，上述已经提到，Visual Studio拥有强大的代码编辑功能，本身就支持JS，利用Visual Studio代码编辑器本身的功能已经足够强大，在此基础上对Visual Studio的代码编辑器进行扩展开发，增加对自动生成代码提供标记显示；实现逻辑在代码编辑器中搜索对应的事件函数名，定位到事件函数所在行后，分析事件函数的除函数体外的代码行，对这些代码设置背景色。

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

步骤206，响应于运行调试菜单扩展指令，获取相关的运行调试数据包，对运行调试数据包进行处理，在Visual Studio开发工具的命令菜单上生成运行调试命令菜单；

其中，具体的，运行调试的实现逻辑：

1)代码内部实现Web服务器功能，Web服务器端口默认80，根目录默认为项目目录，调试时启动该Web服务器；

2)代码调用chrome浏览器进程，命令行参数为http://127.0.0.1/main.html；

3)手动进入chrome自带的调试器进行调试。

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

步骤207，响应于构建发布菜单扩展指令，获取相关的构建发布数据包，对构建发布数据包进行处理，在Visual Studio开发工具的命令菜单上生成构建发布命令菜单；

其中，具体的，构建发布流程如下：

1)遍历项目目录下所有html文件，分析所有DOM节点(DOM(Document ObjectModel)节点指的是HTML文档中的所有元素和标签；在JavaScript中，可以通过访问DOM节点来获取或修改HTML文档中的内容和属性，实现与用户的交互、动态更新页面等功能)的CSS样式(CSS(Cascading Style Sheets)样式用于控制HTML文档中的元素和标签的布局、外观和行为；通过CSS样式，我们可以改变HTML元素的字体、颜色、大小、位置等属性，从而优化页面的视觉效果和用户体验)，记录相同CSS对应的DOM个数，对于个数大于2的CSS，提取出来生成公共CSS样式，修改原有DOM的CSS；

2)遍历所有js文件，去除多余空格，注释，回车换行；另外分析提取所有变量，函数，按顺序把变量名和函数名和引用的地方替换为最短字符，减小生成文件大小；

3)输出最终文件到项目输出目录。

第二方面，如图4所示，在一个实施例中，本发明提供一种Web应用可视化页面的开发工具生成装置，包括：

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

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

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

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

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

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

在一个实施例中，项目创建菜单扩展模块具体用于基于项目创建菜单扩展指令和项目数据包，创建项目名称和项目目录；在项目目录下生成包含项目名称的项目属性文件、主尺寸布局文件、主数据显示和页面交互代码编写文件以及主html基本代码生成文件；根据项目属性文件、主尺寸布局文件、主数据显示和页面交互代码编写文件以及主html基本代码生成文件，生成项目创建命令菜单。

在一个实施例中，页面创建菜单扩展模块具体用于基于页面创建菜单扩展指令和页面数据包，创建页面名称；在项目目录下生成包含页面名称的子尺寸布局文件、子数据显示和页面交互代码编写文件以及子html基本代码生成文件；根据子尺寸布局文件、子数据显示和页面交互代码编写文件以及子html基本代码生成文件，生成页面创建命令菜单。

在一个实施例中，页面设计菜单扩展模块具体用于基于页面设计菜单扩展指令和设计数据包，构建用于创建画布的画布模块；构建用于在画布中创建对应的组件的工具箱模块；构建用于对画布中的组件进行属性修改的属性窗口模块；根据画布模块、工具箱模块和属性窗口模块，生成页面设计器；根据页面设计器，生成页面设计命令菜单。

在一个实施例中，代码编辑菜单扩展模块具体用于基于代码编辑菜单扩展指令和代码数据包，构建代码编辑器；代码编辑器用于对创建的Web应用开发项目中的主数据显示和页面交互代码编写文件进行代码编辑以及对创建的可视化页面中的子数据显示和页面交互代码编写文件进行代码编辑；根据代码编辑器，生成代码编辑命令菜单。

如图5所示，上述Web应用可视化页面的开发工具生成装置还包括：

运行调试菜单扩展模块306，用于在生成代码编辑命令菜单的步骤之后，响应于运行调试菜单扩展指令，获取相关的运行调试数据包，对运行调试数据包进行处理，在VisualStudio开发工具的命令菜单上生成运行调试命令菜单。

如图5所示，在一个实施例中，上述Web应用可视化页面的开发工具生成装置还包括：

构建发布菜单扩展模块307，用于在生成代码编辑命令菜单的步骤之后，响应于构建发布菜单扩展指令，获取相关的构建发布数据包，对构建发布数据包进行处理，在VisualStudio开发工具的命令菜单上生成构建发布命令菜单。

第三方面，在一个实施例中，本发明提供一种电子设备，如图6所示，其示出了本发明所涉及的电子设备的结构，具体来讲：

该电子设备可以包括一个或者一个以上处理核心的处理器401、一个或一个以上计算机可读存储介质的存储器402、电源403和输入单元404等部件。本领域技术人员可以理解，图6中示出的电子设备的结构并不构成对电子设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：

处理器401是该电子设备的控制中心，利用各种接口和线路连接整个电子设备的各个部分，通过运行或执行存储在存储器402内的软件程序和/或模块，以及调用存储在存储器402内的数据，执行电子设备的各种功能和处理数据，从而对电子设备进行整体监控。可选的，处理器401可包括一个或多个处理核心；优选的，处理器401可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和计算机程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器401中。

存储器402可用于存储软件程序以及模块，处理器401通过运行存储在存储器402的软件程序以及模块，从而执行各种功能应用以及数据处理。存储器402可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的计算机程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据服务器的使用所创建的数据等。此外，存储器402可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器402还可以包括存储器控制器，以提供处理器401对存储器402的访问。

电子设备还包括给各个部件供电的电源403，优选的，电源403可以通过电源管理系统与处理器401逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源403还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

该电子设备还可包括输入单元404，该输入单元404可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。

尽管未示出，电子设备还可以包括显示单元等，在此不再赘述。具体在本实施例中，当电子设备为模型训练电子设备时，电子设备中的处理器401会按照如下的指令，将一个或一个以上的计算机程序的进程对应的可执行文件加载到存储器402中，并由处理器401来运行存储在存储器402中的计算机程序，以执行如下步骤：

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

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

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

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

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

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

本领域普通技术人员可以理解，上述实施例的任一种方法中的全部或部分步骤可以通过计算机程序来完成，或通过计算机程序控制相关的硬件来完成，该计算机程序可以存储于一计算机可读存储介质中，并由处理器进行加载和执行。

第四方面，在一个实施例中，本发明提供一种存储介质，其中存储有多条计算机程序，该计算机程序能够被处理器进行加载，以执行如下步骤：

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

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

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

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

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

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

本领域普通技术人员可以理解，本发明所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)、DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

由于该存储介质中所存储的计算机程序，可以执行本发明所提供的任一种实施例中的Web应用可视化页面的开发工具生成方法中的步骤，因此，可以实现本发明所提供的任一种实施例中的Web应用可视化页面的开发工具生成方法所能实现的有益效果，详见前面的实施例，在此不再赘述。

以上各个操作的具体实施可参见前面的实施例，在此不再赘述。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见上文针对其他实施例的详细描述，此处不再赘述。

以上对本发明所提供的一种Web应用可视化页面的开发工具生成方法、装置、电子设备及存储介质进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

Claims (10)

1.一种Web应用可视化页面的开发工具生成方法，其特征在于，包括：

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

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

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

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

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

2.根据权利要求1所述的Web应用可视化页面的开发工具生成方法，其特征在于，所述响应于项目创建菜单扩展指令，获取相关的项目数据包，对所述页面数据包进行处理，在Visual Studio开发工具的命令菜单上生成项目创建命令菜单，包括：

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

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

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

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

3.根据权利要求2所述的Web应用可视化页面的开发工具生成方法，其特征在于，所述响应于页面创建菜单扩展指令，获取相关的页面数据包，对所述页面数据包进行处理，在Visual Studio开发工具的命令菜单上生成页面创建命令菜单，包括：

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

创建页面名称；

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

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

4.根据权利要求3所述的Web应用可视化页面的开发工具生成方法，其特征在于，所述响应于页面设计菜单扩展指令，获取相关的设计数据包，对所述设计数据包进行处理，在Visual Studio开发工具的命令菜单上生成页面设计命令菜单，包括：

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

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

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

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

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

根据所述页面设计器，生成所述页面设计命令菜单。

5.根据权利要求3所述的Web应用可视化页面的开发工具生成方法，其特征在于，所述响应于代码编辑菜单扩展指令，获取相关的代码数据包，对所述代码数据包进行处理，在Visual Studio开发工具的命令菜单上生成代码编辑命令菜单，包括：

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

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

根据所述代码编辑器，生成所述代码编辑命令菜单。

6.根据权利要求1所述的Web应用可视化页面的开发工具生成方法，其特征在于，在所述生成代码编辑命令菜单的步骤之后，还包括：

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

7.根据权利要求1所述的Web应用可视化页面的开发工具生成方法，其特征在于，在所述生成代码编辑命令菜单的步骤之后，还包括：

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

8.一种Web应用可视化页面的开发工具生成装置，其特征在于，包括：

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

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

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

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

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

9.一种电子设备，其特征在于，包括存储器和处理器；所述存储器存储有计算机程序，所述处理器用于运行所述存储器内的所述计算机程序，以执行权利要求1至7任一项所述的Web应用可视化页面的开发工具生成方法中的步骤。

10.一种存储介质，其特征在于，所述存储介质存储有计算机程序，所述计算机程序被处理器进行加载，以执行权利要求1至7任一项所述的Web应用可视化页面的开发工具生成方法中的步骤。