CN111414168A - 基于思维导图的Web应用开发方法及装置、电子设备 - Google Patents

Abstract

本发明公开了一种基于思维导图的Web应用开发方法及装置、电子设备。其中，该方法包括：接收思维导图配置文件，其中，思维导图是基于Web应用的目标项目新增的思维架构图；基于思维导图配置文件，编辑Web应用的信息架构；确定Web应用的界面设计框架；基于Web应用的信息架构和界面设计框架，生成Web应用框架。本发明解决了Web应用开发过程中的重复工作量大，降低开发效率的技术问题。

Description

基于思维导图的Web应用开发方法及装置、电子设备

技术领域

本发明涉及应用开发技术领域，具体而言，涉及一种基于思维导图的Web应用开发方法及装置、电子设备。

背景技术

相关技术中，在Web应用开发过程中存在许多重复性的工作，如开发一个资源管理系统，其一般流程如下：第一步，初始化项目仓库并引入UI框架；第二步，根据系统设计开发路由机制；第三步，开发系统的整体应用框架；第四步，逐个编写系统的各个资源管理页面。这种开发方式，存在较大的弊端：需要手动引入UI框架，并重复的开发系统的路由机制和相似的页面及组件，这些重复的工作使得开发人员无法聚焦于具体业务的开发，大大降低了Web应用的开发效率。

针对上述的问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例提供了一种基于思维导图的Web应用开发方法及装置、电子设备，以至少解决Web应用开发过程中的重复工作量大，降低开发效率的技术问题。

根据本发明实施例的一个方面，提供了一种基于思维导图的Web应用开发方法，包括：接收思维导图配置文件，其中，所述思维导图是基于Web应用的目标项目新增的思维架构图；基于所述思维导图配置文件，编辑Web应用的信息架构；确定Web应用的界面设计框架；基于所述Web应用的信息架构和界面设计框架，生成Web应用框架。

可选地，基于所述思维导图配置文件，编辑Web应用的信息架构的步骤，包括：基于所述思维导图配置文件，确定Web应用的应用基本信息，其中，所述应用基本信息至少包括：页面、信息节点和操作；为所述信息节点添加备注信息，其中，所述备注信息包括下述至少之一：统一资源定位符和链接地址；基于所述应用基本信息和所述备注信息，确定Web应用的信息架构。

可选地，基于所述Web应用的信息架构和界面设计框架，生成Web应用框架的步骤，包括：控制解析引擎遍历所述信息架构上所有信息节点，确定每个信息节点的节点信息和备注信息；基于所述节点信息和所述备注信息，确定与每个项目资源对应的资源列表页面和资源详情页面，其中，所述资源列表页用于记录对每个项目资源的操作工具栏，所述资源详情页面用于记录项目资源的资源信息和附属标签页面；基于所述资源列表页面和资源详情页面，生成Web应用框架。

可选地，在接收思维导图配置文件之后，所述开发方法还包括：将所述思维导图配置文件保存为目标格式的配置文件，以便解析引擎调用。

可选地，在生成Web应用框架之后，所述开发方法还包括：生成与每个信息节点对应的插槽文件，其中，所述插槽文件用于对Web应用框架中的页面或组件进行定制修改。

根据本发明实施例的另一方面，还提供了一种基于思维导图的Web应用开发装置，包括：接收单元，关于接收思维导图配置文件，其中，所述思维导图是基于Web应用的目标项目新增的思维架构图；编辑单元，用于基于所述思维导图配置文件，编辑Web应用的信息架构；确定单元，用于确定Web应用的界面设计框架；生成单元，用于基于所述Web应用的信息架构和界面设计框架，生成Web应用框架。

可选地，所述编辑单元包括：第一确定模块，用于基于所述思维导图配置文件，确定Web应用的应用基本信息，其中，所述应用基本信息至少包括：页面、信息节点和操作；添加模块，用于为所述信息节点添加备注信息，其中，所述备注信息包括下述至少之一：统一资源定位符和链接地址；第二确定模块，用于基于所述应用基本信息和所述备注信息，确定Web应用的信息架构。

可选地，所述生成单元包括：遍历模块，用于控制解析引擎遍历所述信息架构上所有信息节点，确定每个信息节点的节点信息和备注信息；第三确定模块，用于基于所述节点信息和所述备注信息，确定与每个项目资源对应的资源列表页面和资源详情页面，其中，所述资源列表页用于记录对每个项目资源的操作工具栏，所述资源详情页面用于记录项目资源的资源信息和附属标签页面；生成模块，用于基于所述资源列表页面和资源详情页面，生成Web应用框架。

可选地，所述开发装置还包括：保存模块，用于在接收思维导图配置文件之后，将所述思维导图配置文件保存为目标格式的配置文件，以便解析引擎调用。

可选地，所述开发装置还包括：生成子模块，用于在生成Web应用框架之后，生成与每个信息节点对应的插槽文件，其中，所述插槽文件用于对Web应用框架中的页面或组件进行定制修改。

根据本发明实施例的另一方面，还提供了一种电子设备，包括：处理器；以及存储器，用于存储所述处理器的可执行指令；其中，所述处理器配置为经由执行所述可执行指令来执行上述任意一项所述的基于思维导图的Web应用开发方法。

根据本发明实施例的另一方面，还提供了一种计算机存储介质，所述存储介质包括存储的程序，其中，在所述程序运行时控制所述存储介质所在设备执行上述任意一项所述的基于思维导图的Web应用开发方法。

本发明实施例中，在开发Web应用时，先接收思维导图配置文件，然后基于思维导图配置文件，编辑Web应用的信息架构，并确定Web应用的界面设计框架，最后基于Web应用的信息架构和界面设计框架，生成Web应用框架。在该实施例中，Web应用开发中相似页面需要重复开发的问题，只需要基于Mindmap可视化的编辑信息架构图就可以自动化的生成应用页面，明显提高Web应用的开发效率，从而解决Web应用开发过程中的重复工作量大，降低开发效率的技术问题。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是根据本发明实施例的一种可选的基于思维导图的Web应用开发方法的流程图；

图2是根据本发明实施例的一种可选的构建系统思维导图的示意图；

图3是根据本发明实施例的一种可选的基于思维导图的Web应用开发装置的示意图。

具体实施方式

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

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

为便于本领域技术人员理解本发明，下面对本发明各实施例中涉及的部分术语或名词做出解释：

Mindmap：思维导图，是一种表现力丰富的信息架构图，我们使用它来编辑Web应用的界面、组件、操作等的节点信息。

SRM：Storage Resource Management，存储资源管理系统。

Slot：插槽，指在Web应用框架中支持定制开发的挂载点。

UI：User Interface，用户界面设计。

本发明实施例，针对现有Web应用开发流程的缺点，提供高了一种新的快速开发Web应用的开发方法，基于思维导图Mindmap可视化的编辑Web应用的信息架构图，结合流行的UI框架，可以快速的生成Web应用的整体框架，然后基于该框架进行应用的定制开发。

根据本发明实施例，提供了一种基于思维导图的Web应用开发方法实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

图1是根据本发明实施例的一种可选的基于思维导图的Web应用开发方法的流程图，如图1所示，该方法包括如下步骤：

步骤S102，接收思维导图配置文件，其中，思维导图是基于Web应用的目标项目新增的思维架构图；

步骤S104，基于思维导图配置文件，编辑Web应用的信息架构；

步骤S106，确定Web应用的界面设计框架；

步骤S108，基于Web应用的信息架构和界面设计框架，生成Web应用框架。

通过上述步骤，可以在开发Web应用时，先接收思维导图配置文件，然后基于思维导图配置文件，编辑Web应用的信息架构，并确定Web应用的界面设计框架，最后基于Web应用的信息架构和界面设计框架，生成Web应用框架。在该实施例中，Web应用开发中相似页面需要重复开发的问题，只需要基于Mindmap可视化的编辑信息架构图就可以自动化的生成应用页面，明显提高Web应用的开发效率，从而解决Web应用开发过程中的重复工作量大，降低开发效率的技术问题。

本发明实施例提供了一种基于Mindmap快速开发Web应用的方案，在项目中加入Mindmap配置文件，使用可视化的Mindmap编辑器(如vscode-mindmap)快速编辑Web应用的信息架构，然后选择UI框架，配合Mindmap解析引擎将信息架构解析成一个完整的Web应用框架。同时，本发明还可以基于应用插槽slot定制开发特殊的页面。

下面结合上述各步骤对本发明实施例进行详细说明。

步骤S102，接收思维导图配置文件，其中，思维导图是基于Web应用的目标项目新增的思维架构图。

本发明实施例结合一个可选的存储资源管理系统(SRM)的项目为例进行说明。图2是根据本发明实施例的一种可选的构建系统思维导图的示意图，如图2所示，对于存储管理系统SDR，可以配置该系统的二级节点(包括：系统文件Hosts、磁盘Disk、工具Pools、资源卷Volumes)和每个二级节点下的三级分节点(如包括工具条Toolbar、网站首页Detail)。

思维导图Mindmap，是一种表现力特别丰富的信息组织方式，利用它我们不仅能添加一个Web应用所需的页面、组件、操作等信息，还能为每个信息节点添加额外的备注信息。例如上图2的二级节点(Hosts、Disks等)对应的是应用中的主要管理资源，通过给它们添加备注信息如URL、Title等，就可以快速的生成Web应用的路由系统和导航菜单。

可选的，在接收思维导图配置文件之后，开发方法还包括：将思维导图配置文件保存为目标格式的配置文件，以便解析引擎调用。编辑好思维导图之后，可以将其保存为目标格式(如Json格式)的文件，如ia.km(Information Architecture)文件，后面将用它解析出整个应用的框架。

步骤S104，基于思维导图配置文件，编辑Web应用的信息架构；

可选的，基于思维导图配置文件，编辑Web应用的信息架构的步骤，包括：基于思维导图配置文件，确定Web应用的应用基本信息，其中，应用基本信息至少包括：页面、信息节点和操作；为信息节点添加备注信息，其中，备注信息包括下述至少之一：统一资源定位符和链接地址；基于应用基本信息和备注信息，确定Web应用的信息架构。

步骤S106，确定Web应用的界面设计框架。

界面设计框架，即UI框架，例如Bootstrap、Ant Design、Material UI等，本发明实施例以选择Bootstrap为例。

步骤S108，基于Web应用的信息架构和界面设计框架，生成Web应用框架。

作为本发明可选的实施例，基于Web应用的信息架构和界面设计框架，生成Web应用框架的步骤，包括：控制解析引擎遍历信息架构上所有信息节点，确定每个信息节点的节点信息和备注信息；基于节点信息和备注信息，确定与每个项目资源对应的资源列表页面和资源详情页面，其中，资源列表页用于记录对每个项目资源的操作工具栏，资源详情页面用于记录项目资源的资源信息和附属标签页面；基于资源列表页面和资源详情页面，生成Web应用框架。

通过解析引擎遍历二级节点，根据节点备注信息(note)的URL、Title等信息生成管理系统的导航菜单，并添加导航功能。然后为每个资源(如图2中的二级节点)生成一个资源列表页面和一个资源详情页面。对于存储资源管理系统，可以通过Toolbar节点生成资源列表页上对于资源的各种操作的工具栏；通过Detail节点可以生成资源的详情页面，及附属的标签页面(即Tab页面)。

本发明实施例，在生成Web应用框架之后，开发方法还包括：生成与每个信息节点对应的插槽文件，其中，插槽文件用于对Web应用框架中的页面或组件进行定制修改。即在生成Web应用框架之后，同步生成节点的Slot文件，开发人员可以编辑Slot文件来修改定制具体的页面或组件。

通过上述实施例，可以解决Web应用开发中相似页面需要重复开发的问题，本发明只需要基于思维导图可视化的编辑信息架构图就可以自动化的生成这些页面，同时还可以解决需要重复开发路由系统的问题，本发明支持在信息架构节点上设置URL，可以自动的为页面添加路由机制；另外，本发明实施例还可以解决需要手动引入UI框架的问题，本发明只需要选择其支持的其中一种流行的UI框架，便可以自动将其引入并与思维导图结合，快速的生成Web应用框架。

本发明实施例可基于思维导图生成Web应用框架，并支持以插槽的方式进行具体页面及组件的定制开发，在自动化的基础上提供了足够的灵活性。

下面通过另一种可选的实施例来说明本发明。

图3是根据本发明实施例的一种可选的基于思维导图的Web应用开发装置的示意图，如图3所示，该开发装置包括：接收单元31、编辑单元33、确定单元35、生成单元37，其中，

接收单元31，关于接收思维导图配置文件，其中，思维导图是基于Web应用的目标项目新增的思维架构图；

编辑单元33，用于基于思维导图配置文件，编辑Web应用的信息架构；

确定单元35，用于确定Web应用的界面设计框架；

生成单元37，用于基于Web应用的信息架构和界面设计框架，生成Web应用框架。

上述基于思维导图的Web应用开发装置，可以在开发Web应用时，通过接收单元31接收思维导图配置文件，然后通过编辑单元33基于思维导图配置文件，编辑Web应用的信息架构，并通过确定单元35确定Web应用的界面设计框架，最后通过生成单元37基于Web应用的信息架构和界面设计框架，生成Web应用框架。在该实施例中，Web应用开发中相似页面需要重复开发的问题，只需要基于Mindmap可视化的编辑信息架构图就可以自动化的生成应用页面，明显提高Web应用的开发效率，从而解决Web应用开发过程中的重复工作量大，降低开发效率的技术问题。

可选的，编辑单元包括：第一确定模块，用于基于思维导图配置文件，确定Web应用的应用基本信息，其中，应用基本信息至少包括：页面、信息节点和操作；添加模块，用于为信息节点添加备注信息，其中，备注信息包括下述至少之一：统一资源定位符和链接地址；第二确定模块，用于基于应用基本信息和备注信息，确定Web应用的信息架构。

在本发明实施例中，生成单元包括：遍历模块，用于控制解析引擎遍历信息架构上所有信息节点，确定每个信息节点的节点信息和备注信息；第三确定模块，用于基于节点信息和备注信息，确定与每个项目资源对应的资源列表页面和资源详情页面，其中，资源列表页用于记录对每个项目资源的操作工具栏，资源详情页面用于记录项目资源的资源信息和附属标签页面；生成模块，用于基于资源列表页面和资源详情页面，生成Web应用框架。

可选地，开发装置还包括：保存模块，用于在接收思维导图配置文件之后，将思维导图配置文件保存为目标格式的配置文件，以便解析引擎调用。

可选地，开发装置还包括：生成子模块，用于在生成Web应用框架之后，生成与每个信息节点对应的插槽文件，其中，插槽文件用于对Web应用框架中的页面或组件进行定制修改。

上述的基于思维导图的Web应用开发装置还可以包括处理器和存储器，上述接收单元31、编辑单元33、确定单元35、生成单元37等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。

上述处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来基于Web应用的信息架构和界面设计框架，生成Web应用框架。

上述存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。

根据本发明实施例的另一方面，还提供了一种电子设备，包括：处理器；以及存储器，用于存储处理器的可执行指令；其中，处理器配置为经由执行可执行指令来执行上述任意一项的基于思维导图的Web应用开发方法。

根据本发明实施例的另一方面，还提供了一种计算机存储介质，存储介质包括存储的程序，其中，在程序运行时控制存储介质所在设备执行上述任意一项的基于思维导图的Web应用开发方法。

本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：接收思维导图配置文件，其中，思维导图是基于Web应用的目标项目新增的思维架构图；基于思维导图配置文件，编辑Web应用的信息架构；确定Web应用的界面设计框架；基于Web应用的信息架构和界面设计框架，生成Web应用框架。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (10)

1.一种基于思维导图的Web应用开发方法，其特征在于，包括：

接收思维导图配置文件，其中，所述思维导图是基于Web应用的目标项目新增的思维架构图；

基于所述思维导图配置文件，编辑Web应用的信息架构；

确定Web应用的界面设计框架；

基于所述Web应用的信息架构和界面设计框架，生成Web应用框架。

2.根据权利要求1所述的开发方法，其特征在于，基于所述思维导图配置文件，编辑Web应用的信息架构的步骤，包括：

基于所述思维导图配置文件，确定Web应用的应用基本信息，其中，所述应用基本信息至少包括：页面、信息节点和操作；

为所述信息节点添加备注信息，其中，所述备注信息包括下述至少之一：统一资源定位符和链接地址；

基于所述应用基本信息和所述备注信息，确定Web应用的信息架构。

3.根据权利要求2所述的开发方法，其特征在于，基于所述Web应用的信息架构和界面设计框架，生成Web应用框架的步骤，包括：

控制解析引擎遍历所述信息架构上所有信息节点，确定每个信息节点的节点信息和备注信息；

基于所述节点信息和所述备注信息，确定与每个项目资源对应的资源列表页面和资源详情页面，其中，所述资源列表页用于记录对每个项目资源的操作工具栏，所述资源详情页面用于记录项目资源的资源信息和附属标签页面；

基于所述资源列表页面和资源详情页面，生成Web应用框架。

4.根据权利要求2所述的开发方法，其特征在于，在接收思维导图配置文件之后，所述开发方法还包括：

将所述思维导图配置文件保存为目标格式的配置文件，以便解析引擎调用。

5.根据权利要求2所述的开发方法，其特征在于，在生成Web应用框架之后，所述开发方法还包括：

生成与每个信息节点对应的插槽文件，其中，所述插槽文件用于对Web应用框架中的页面或组件进行定制修改。

6.一种基于思维导图的Web应用开发装置，其特征在于，包括：

接收单元，关于接收思维导图配置文件，其中，所述思维导图是基于Web应用的目标项目新增的思维架构图；

编辑单元，用于基于所述思维导图配置文件，编辑Web应用的信息架构；

确定单元，用于确定Web应用的界面设计框架；

生成单元，用于基于所述Web应用的信息架构和界面设计框架，生成Web应用框架。

7.根据权利要求6所述的开发装置，其特征在于，所述编辑单元包括：

第一确定模块，用于基于所述思维导图配置文件，确定Web应用的应用基本信息，其中，所述应用基本信息至少包括：页面、信息节点和操作；

添加模块，用于为所述信息节点添加备注信息，其中，所述备注信息包括下述至少之一：统一资源定位符和链接地址；

第二确定模块，用于基于所述应用基本信息和所述备注信息，确定Web应用的信息架构。

8.根据权利要求7所述的开发装置，其特征在于，所述生成单元包括：

遍历模块，用于控制解析引擎遍历所述信息架构上所有信息节点，确定每个信息节点的节点信息和备注信息；

第三确定模块，用于基于所述节点信息和所述备注信息，确定与每个项目资源对应的资源列表页面和资源详情页面，其中，所述资源列表页用于记录对每个项目资源的操作工具栏，所述资源详情页面用于记录项目资源的资源信息和附属标签页面；

生成模块，用于基于所述资源列表页面和资源详情页面，生成Web应用框架。

9.一种电子设备，其特征在于，包括：

处理器；以及

存储器，用于存储所述处理器的可执行指令；

其中，所述处理器配置为经由执行所述可执行指令来执行权利要求1至5中任意一项所述的基于思维导图的Web应用开发方法。

10.一种计算机存储介质，其特征在于，所述计算机存储介质包括存储的程序，其中，

在所述程序运行时控制所述计算机存储介质所在设备执行权利要求1至5中任意一项所述的基于思维导图的Web应用开发方法。

Images