CN113703738A - 前端开发方法、装置、设备及介质 - Google Patents

Abstract

本公开提供了一种前端开发方法，可以应用于金融领域。该前端开发方法包括：展示第一用户交互界面，第一用户交互界面包括与前端开发任务的全流程所包含的M个阶段一一对应的的M个控件，其中，前端开发任务的全流程包括从前端开发任务的项目创建到将前端开发任务中开发的业务代码部署到服务器的整个流程，其中，M为大于1的整数；响应于对M个控件中每个控件的选择操作，展示所选择的控件对应的当前阶段的第二用户交互界面；基于在当前阶段的第二用户交互界面中的用户交互操作，进行当前阶段的任务开发；以及在M个阶段的任务均开发完成后，向用户反馈前端开发任务开发完成的信息。本公开还提供了一种前端开发装置、设备、介质及程序产品。

Description

前端开发方法、装置、设备及介质

技术领域

本公开涉及互联网技术领域，可用于金融领域，更具体地涉及一种前端开发方法、装置、设备、介质和程序产品。

背景技术

随着前后端分离研发模式及前端工程化的不断演进，脚手架工具、打包工具、低代码平台及持续部署平台等在前端领域也得到了飞速发展，可以依托各种工具和平台，进行前端开发。

然而，现有技术中开发人员想要实现从研发到上线完整闭环，往往需要部不断切换工。例如，开发人员需要使用脚手架工具初始化项目，然后在项目初始化完毕后又切换到npm工具安装项目所需依赖。依赖安装完毕后，再切换到IDE工具打开项目进行代码研发。代码研发完毕，又需要切换到打包工具对代码进行转义、压缩及混淆等操作，打包完毕后就生成了最终我们需要部署到生成环境的代码。此后，把打包后的代码存放到服务器指定目录下，然后再打开部署工具对代码进行部署。由此可见，前端开发的整个过程自动化程度很低，开发人员需要频繁切换各种工具，效率极低。

发明内容

鉴于上述问题，本公开实施例提供了一种可以自动化实现前端开发全流程管理的前端开发方法、装置、设备、介质和程序产品。

本公开实施例的第一方面，提供了一种前端开发方法。所述方法包括：展示第一用户交互界面，所述第一用户交互界面包括与前端开发任务的全流程所包含的M个阶段一一对应的的M个控件，其中，所述前端开发任务的全流程包括从所述前端开发任务的项目创建到将所述前端开发任务中开发的业务代码部署到服务器的整个流程，其中，M为大于1的整数；响应于对所述M个控件中每个控件的选择操作，展示所选择的控件对应的当前阶段的第二用户交互界面，所述当前阶段的第二用户交互界面用于引导用户进行所述当前阶段的任务开发；基于在所述当前阶段的第二用户交互界面中的用户交互操作，进行所述当前阶段的任务开发；以及在所述M个阶段的任务均开发完成后，向用户反馈所述前端开发任务开发完成的信息。

根据本公开的实施例，所述M个阶段包括项目创建阶段、依赖安装阶段、代码生成阶段或者持续部署阶段中的至少之一。

根据本公开的实施例，所述方法为利用Electron技术实现的。则，所述基于在所述当前阶段的第二用户交互界面中的用户交互操作，进行所述当前阶段的任务开发包括：调用第三方工具来进行所述当前阶段的任务开发；其中，当所述当前阶段为所述项目创建阶段时，所述第三方工具包括本地安装的脚手架工具；当所述当前阶段为所述依赖安装阶段时，所述第三方工具包括包管理器npm工具；或者当所述当前阶段为所述持续部署阶段时，所述第三方工具包括持续部署平台。

根据本公开的实施例，所述项目创建阶段的第二用户交互界面包括目录选择区域、以及项目初始化方式选择控件；其中，基于在所述项目创建阶段的第二用户交互界面中的用户交互操作，进行所述项目创建阶段的任务开发包括：响应于用户在所述目录选择区域中的操作，调用本地文件系统来选择用于开发所述前端开发任务的项目的根目录；以及响应于用户从所述项目初始化方式选择控件中选择项目初始化方式的操作，按照用户所选择的项目初始化方式在所述根目录下创建用于开发所述前端开发任务的新项目。

根据本公开的实施例，所述项目初始化方式选择控件包括创建项目按钮、复制项目按钮或克隆项目按钮至少之一；其中，按照用户所选择的项目初始化方式在所述根目录下创建用于开发所述前端开发任务的新项目包括：当用户选择所述创建项目按钮时，调用本地安装的脚手架工具创建所述新项目；当用户选择所述复制项目按钮时，将用户选择的本地项目文件复制到所述根目录下，以作为所述新项目；或者当用户选择所述克隆项目按钮时，调用本地安装的分布式版本控制器Git工具从远程仓库拉取业务代码到所述根目录下，以作为所述新项目，其中，所述远程仓库中的业务代码为等待部署到服务器的其他前端开发任务的业务代码。

根据本公开的实施例，所述依赖安装阶段的第二用户界面包括文件目录选择区域以及依赖安装按钮；其中，基于在所述依赖安装阶段的第二用户交互界面中的用户交互操作，进行所述依赖安装阶段的任务开发包括：基于用户在所述文件目录选择区域的操作，调用本地文件系统，以使用户利用所述本地文件系统来选择需要安装的依赖；以及响应于用户对所述依赖安装按钮的操作，调用本地的包管理器npm工具，以通过所述npm工具执行npmintall依赖安装命令进行依赖安装。

根据本公开的实施例，所述依赖安装阶段的第二用户界面中还包括依赖列表，所述依赖列表中用于列示已安装的所有依赖的信息。

根据本公开的实施例，所述依赖列表还包括操作栏，所述操作栏用于接收用户对所述依赖列表中所展示的依赖的更新操作或删除操作。

根据本公开的实施例，所述代码生成阶段的第二用户界面包括组件选择区域和页面拼接区域，其中，所述组件选择区域集成有至少一个表单组件；其中，基于在所述代码生成阶段的第二用户交互界面中的用户交互操作，进行所述代码生成阶段的任务开发包括：基于用户对表单组件的拖拽操作，将用户在所述组件选择区域中选中的表单组件拖拽至所述页面拼接区域，组合成页面样式；以及在所述页面样式设计完成后，基于设计完成的所述页面样式生成所述前端开发任务的业务代码。

根据本公开的实施例，所述持续部署阶段的第二用户界面包括部署信息配置控件及一键部署按钮；其中，基于在所述持续部署阶段的第二用户交互界面中的用户交互操作，进行所述持续部署阶段的任务开发包括：通过所述部署信息配置控件接收用户对所述前端开发任务的用户部署配置；以及响应于用户操作所述一键部署按钮，调用持续部署平台按照所述用户部署配置将所述前端开发任务的业务代码部署到服务器。

根据本公开的实施例，所述方法还包括：在所述持续部署阶段之前，当所述前端开发任务的业务代码开发完成后，调用本地的分布式版本控制器Git工具将所述前端开发任务的业务代码推送至远程仓库。则所述调用持续部署平台按照所述用户部署配置将所述前端开发任务的业务代码部署到服务器包括：调用所述持续部署平台提供的代码部署接口，以通过所述持续部署平台从所述远程仓库读取所述前端开发任务的业务代码，并进行打包后部署到服务器。

根据本公开的实施例，在部署过程中向用户展示部署进度信息。

本公开实施例的第二方面，提供了一种前端开发装置。所述装置包括用户交互模块、以及开发模块。所述用户交互模块用于：展示第一用户交互界面，所述第一用户交互界面包括与前端开发任务的全流程所包含的M个阶段一一对应的的M个控件，其中，所述前端开发任务的全流程包括从所述前端开发任务的项目创建到将所述前端开发任务中开发的业务代码部署到服务器的整个流程，其中，M为大于1的整数；响应于对所述M个控件中每个控件的选择操作，展示所选择的控件对应的当前阶段的第二用户交互界面，所述当前阶段的第二用户交互界面用于引导用户进行所述当前阶段的任务开发；以及在所述M个阶段的任务均开发完成后，向用户反馈所述前端开发任务开发完成的信息。所述开发模块用于基于在所述当前阶段的第二用户交互界面中的用户交互操作，进行所述当前阶段的任务开发。

根据本公开的实施例，所述开发模块包括项目创建模块。所述M个阶段包括项目创建阶段，所述项目创建阶段的第二用户交互界面包括目录选择区域、以及项目初始化方式选择控件。所述项目创建模块用于响应于用户在所述目录选择区域中的操作，调用本地文件系统来选择用于开发所述前端开发任务的项目的根目录；以及响应于用户从所述项目初始化方式选择控件中选择项目初始化方式的操作，按照用户所选择的项目初始化方式在所述根目录下创建用于开发所述前端开发任务的新项目。

根据本公开的实施例，所述开发模块包括依赖安装模块。所述M个阶段包括依赖安装阶段，所述依赖安装阶段的第二用户界面包括文件目录选择区域以及依赖安装按钮。所述依赖安装模块用于：基于用户在所述文件目录选择区域的操作，调用本地文件系统，以使用户利用所述本地文件系统来选择需要安装的依赖；以及响应于用户对所述依赖安装按钮的操作，调用本地的包管理器npm工具，以通过所述npm工具执行npm intall依赖安装命令进行依赖安装。

根据本公开的实施例，所述依赖安装阶段的第二用户界面中还包括依赖列表。所述依赖安装模块还用于通过所述依赖列表列示已安装的所有依赖的信息。

根据本公开的实施例，所述依赖列表还包括操作栏。所述依赖安装模块还用于通过所述操作栏接收用户对所述依赖列表中所展示的依赖的更新操作或删除操作。

根据本公开的实施例，所述开发模块包括代码生成器。所述M个阶段包括代码生成阶段，所述代码生成阶段的第二用户界面包括组件选择区域和页面拼接区域，其中，所述组件选择区域集成有至少一个表单组件。所述代码生成器用于基于用户对表单组件的拖拽操作，将用户在所述组件选择区域中选中的表单组件拖拽至所述页面拼接区域，组合成页面样式；以及在所述页面样式设计完成后，基于设计完成的所述页面样式生成所述前端开发任务的业务代码。

根据本公开的实施例，所述开发模块包括持续部署模块。所述M个阶段包括持续部署阶段，所述持续部署阶段的第二用户界面包括部署信息配置控件及一键部署按钮。所述持续部署模块用于通过所述部署信息配置控件接收用户对所述前端开发任务的用户部署配置；以及响应于用户操作所述一键部署按钮，调用持续部署平台按照所述用户部署配置将所述前端开发任务的业务代码部署到服务器。

根据本公开的实施例，所述开发模块包括代码共享模块。所述代码共享模块用于在所述持续部署阶段之前，当所述前端开发任务的业务代码开发完成后，调用本地的分布式版本控制器Git工具将所述前端开发任务的业务代码推送至远程仓库。所述持续部署模块用于调用所述持续部署平台提供的代码部署接口，以通过所述持续部署平台从所述远程仓库读取所述前端开发任务的业务代码，并进行打包后部署到服务器。

本公开实施例的第三方面提供了一种电子设备，包括：一个或多个处理器、以及一个或多个存储器。所述一个或多个存储器用于存储一个或多个程序。其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得一个或多个处理器执行上述前端开发方法。

本公开实施例的第四方面还提供了一种计算机可读存储介质，其上存储有可执行指令，该指令被处理器执行时使处理器执行上述前端开发方法。

本公开实施例的第五方面还提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述前端开发方法。

附图说明

通过以下参照附图对本公开实施例的描述，本公开的上述内容以及其他目的、特征和优点将更为清楚，在附图中：

图1示意性示出了根据本公开实施例的前端开发方法、装置、设备、介质和程序产品的应用场景图；

图2示意性示出了根据本公开一实施例的前端开发方法的流程图；

图3示意性示出了根据本公开实施例的前端开发方法的示例性系统架构；

图4示意性示出了根据本公开一实施例的项目创建阶段的用户交互界面示意图；

图5示意性示出了根据本公开一实施例的依赖安装阶段的用户交互界面示意图；

图6示意性示出了根据本公开一实施例的代码生成阶段的用户交互界面示意图；

图7示意性示出了根据本公开一实施例的持续部署阶段的用户交互界面的示意图；

图8示意性示出了根据本公开另一实施例的前端开发方法中用户交互时序图；

图9示意性示出了根据本公开一实施例的前端开发装置的结构框图；以及

图10示意性示出了适于实现根据本公开实施例的前端交互方法的电子设备的方框图。

具体实施方式

以下，将参照附图来描述本公开的实施例。但是应该理解，这些描述只是示例性的，而并非要限制本公开的范围。在下面的详细描述中，为便于解释，阐述了许多具体的细节以提供对本公开实施例的全面理解。然而，明显地，一个或多个实施例在没有这些具体细节的情况下也可以被实施。此外，在以下说明中，省略了对公知结构和技术的描述，以避免不必要地混淆本公开的概念。

在此使用的术语仅仅是为了描述具体实施例，而并非意在限制本公开。在此使用的术语“包括”、“包含”等表明了所述特征、步骤、操作和/或部件的存在，但是并不排除存在或添加一个或多个其他特征、步骤、操作或部件。

在此使用的所有术语(包括技术和科学术语)具有本领域技术人员通常所理解的含义，除非另外定义。应注意，这里使用的术语应解释为具有与本说明书的上下文相一致的含义，而不应以理想化或过于刻板的方式来解释。

在使用类似于“A、B和C等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有A、B和C中至少一个的系统”应包括但不限于单独具有A、单独具有B、单独具有C、具有A和B、具有A和C、具有B和C、和/或具有A、B、C的系统等)。

在本文中，需要理解的是，说明书及附图中的任何元素数量均用于示例而非限制，以及任何命名(例如，第一、第二)都仅用于区分，而不具有任何限制含义。

针对前端开发全流程中需要不断切换工具的问题，本公开实施例提供了一种前端开发方法、装置、设备、介质和程序，可以实现对前端开发过程全生命周期自动化管理，使开发人员能在一个自动化工具中实现前端开发任务的全流程可视化操作。

根据本公开实施的前端开发方法可以通过如下过程实现。首先，展示第一用户交互界面，第一用户交互界面包括与前端开发任务的全流程所包含的M个阶段一一对应的的M个控件，其中，前端开发任务的全流程包括从前端开发任务的项目创建到将前端开发任务中开发的业务代码部署到服务器的整个流程，其中，M为大于1的整数。然后，响应于对M个控件中每个控件的选择操作，展示所选择的控件对应的当前阶段的第二用户交互界面，当前阶段的第二用户交互界面用于引导用户进行当前阶段的任务开发。接下来，基于在当前阶段的第二用户交互界面中的用户交互操作，进行当前阶段的任务开发。最后，在M个阶段的任务均开发完成后，向用户反馈前端开发任务开发完成的信息。

根据本公开的实施例，可以通过第一用户交互界面中的M个控件来引导开发人员进行前端开发任务的全流程开发，并且可以通过每个阶段的第二用户交互界面引导开发人员实施每个阶段的具体开发任务，并在M个阶段的任务均开发完成后向用户反馈开发完成的信息，以此方式，可以实现对前端开发任务全流程自动化管理，对开发过程进行引导，简化了前端开发过程中的操作，避免了在不同工具之间的切换，有效提高了前端开发效率。

需要说明的是，本公开实施例确定的前端开发方法、装置、设备、介质和程序可用于金融领域(例如，在互联网金融方面的应用)，也可用于除金融领域之外的任意领域，本公开对应用领域不做限定。

图1示意性示出了根据本公开实施例的前端开发方法、装置、设备、介质和程序产品的应用场景图；。需要注意的是，图1所示仅为可以应用本公开实施例的系统架构的示例，以帮助本领域技术人员理解本公开的技术内容，但并不意味着本公开实施例不可以用于其他设备、系统、环境或场景。

如图1所示，根据该实施例的应用场景100可以包括终端设备101、网络102和服务器103。网络102用以在终端设备101和服务器103之间提供通信链路的。网络102可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

开发人员1可以利用终端设备101进行前端业务代码的开发，开发完成后的业务代码被部署到服务器103中。

在一些实施例中，该应用场景100还可以进一步包括部署平台104和远程仓库105。部署平台104和远程仓库105可以分别与网络102连接，可以通过网络102与终端设备101和服务器103进行通信。

持续部署平台104可以执行具体的代码部署操作。例如，持续部署平台104可以可以接受终端设备101的调用执行具体的代码部署操作，将开发人员在终端设备101中开发完成的业务代码最终部署到服务器103中。

远程仓库105为代码托管平台。在一些实施例中，在前端开发的过程中，开发人员利用终端设备101开发的前端业务代码可以被提交到远程仓库105中。例如，可以通过终端设备101中本地安装的分布式版本控制器Git工具(简称，Git工具)将前端代码提交到远程仓库105中，其中，远程仓库105可以与终端设备101中的git工具连接，其中，Git工具可以将本地文件推送(push)到远程仓库105中。

从而，持续部署平台104可以在接收到终端设备101的调用或部署指令后，从远程仓库105读取该业务代码，并将读取到的业务代码部署到服务器103中。在一些实施例中，持续部署平台104可以是DOS系统平台。

本公开实施例的方法可以由终端设备101来执行。例如，终端设备101中可以设置有用于实现本公开实施例的前端开发方法的装置、软件程序、介质或者电子设备，开发人员可以通过在终端设备101中的操作来实现前端的开发。

以终端设备101中安装有可以执行本公开实施例的前端开发方法的应用程序为例，对开发人员的开发场景示例性描述如下。例如，开发人员1可以在终端设备101中打开该应用程序，并根据该应用程序的用户交互界面(包括第一用户交互界面、以及各个阶段的第二用户交互界面)的交互指引，进行前端的全流程开发。其中，在每个阶段的开发过程中，该应用程序101可以基于用户操作指令，通过自身集成的功能、或者通过调用本地安装的第三方工具、或者调用部署平台104等方式，实现对前端开发任务的全流程开发。在整个过程中开发人员可以不用切换工具，其中，调用第三方工具或其他平台的逻辑可以通过应用程序的内部处理逻辑来实现。从而，用户可以仅通过在该应用程序中的操作来进行前端的全流程开发。而且，该应用程序提供的可以引导开发操作的用户交互界面，可以极大的简化开发过程中的操作，提高开发效率。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

以下将基于图1描述的场景，通过图2～图8对公开实施例的前端开发方法进行详细描述。

图2示意性示出了根据本公开一实施例的前端开发方法的流程图。

如图2所示，根据该实施例的前端开发方法可以包括操作S210～操作S240。

在操作S210，展示第一用户交互界面，第一用户交互界面包括与前端开发任务的全流程所包含的M个阶段一一对应的的M个控件。其中，前端开发任务的全流程包括从前端开发任务的项目创建到将前端开发任务中开发的业务代码部署到服务器的整个流程，其中，M为大于1的整数。

前端开发任务的全流程所包含的M个阶段可以根据实际需要进行划分，其中该M个阶段可以是并行的，也可以是串行的，或者也可以是部分并行部分串行的混合，对此本公开不予限定。

在操作S220，响应于对M个控件中每个控件的选择操作，展示所选择的控件对应的当前阶段的第二用户交互界面，当前阶段的第二用户交互界面用于引导用户进行当前阶段的任务开发。

在操作S230，基于在当前阶段的第二用户交互界面中的用户交互操作，进行当前阶段的任务开发。在每个阶段的任务开发过程中，可以基于用户操作来执行相应的功能。其中，该些功能可以是通过预先集成的功能实现，也可以是通过与操作系统、或者与第三方工具的调用来实现。

在操作S240，在M个阶段的任务均开发完成后，向用户反馈前端开发任务开发完成的信息。该前端开发任务开发完成的信息可以是通知用户开发完成的告知信息，也可以是该前端任务在服务器的部署信息，也可以是该前端任务开发过程中的摘要记录信息等。

以此方式，本公开实施例可以实现对前端开发任务全流程自动化管理，对开发过程进行引导，简化了前端开发过程中的操作，避免了在不同工具之间的切换，有效提高了前端开发效率。

图3示意性示出了根据本公开实施例的前端开发方法的示例性系统架构。

如图3所示，根据该实施例，该前端开发方法是利用Electron技术实现的。Electron为一种跨平台的、基于Web前端技术的桌面GUI应用程序开发框架。Electron可以调用脚手架工具、Git工具、npm工具来实现项目的创建、依赖的安装、向远程仓库拉取和推送业务代码。Electron还可以与操作系统打交道，例如打开文件系统来创建目录，Electron还可以进行本地文件的读取、删除、复制和修改等操作。

本公开实施例的方法中，可以利用Electron技术开发获得用户交互界面310，该用户交互界面310可以提供本公开实施例的第一用户交互界面和各个阶段的第二用户交互界面。用户交互界面310一方面可以引导开发人员进行前端开发的推进，另一方面可以接收用户交互操作，并响应于用户交互操作产生相应的操作指令，然后将操作指令传输给基于Electron技术开发的处理逻辑320。

结合图3，在一个实施例中前端开发任务的M个阶段可以包括项目创建阶段、依赖安装阶段、代码生成阶段或者持续部署阶段中的至少之一。其中，图3示例了全部4个阶段仅为示例性的，在实际应用中可以根据需要进行阶段的设置、合并或者替换等。

根据本公开的一些实施例，在进行一些阶段的任务开发时，可以调用第三方工具来实现。例如，当进行项目创建阶段的任务开发时，可以通过调用本地安装的脚手架工具331进行项目创建。或者，例如，当进行依赖安装阶段的任务开发时，可以通过调用包管理器npm工具332，来安装前端的依赖。或者，又例如，当进行持续部署阶段的任务时，可以调用持续部署平台335来执行具体的部署任务。

根据本公开的另一些实施例，在进行一些阶段的任务开发时，也可以通过利用Electron技术开发集成的相应功能来实现。例如，可以利用Electron技术开发代码研发环境，来进行代码的研发及调试。在一些实施例中，可以利用Electron技术开发集成代码生成器，该代码生成器中可以有一些Form表单组件，可以通过拖拽操作来实现前端页面中的Form表单组件的快速设计。

根据本公开的另一些实施例，在代码生成阶段生成代码之后，可以提交到远程仓库334。例如，可以在代码生成阶段生成代码完毕后，调用Git工具333来将本地开发的业务代码推送到远程仓库334中。这样，持续部署平台335在持续部署阶段被调用后，可以从远程仓库334读取代码。

根据本公开的一些实施例，在项目创建阶段，还可以通过Git工具333从远程仓库中共享的业务代码中拉取(pull)代码到本地，以此来创建项目。

图4示意性示出了根据本公开一实施例的项目创建阶段的用户交互界面示意图。

如图4所示，该用户交互界面400包括第一用户交互界面410和项目创建阶段的第二用户交互界面420。

在该实施例中，第一用户交互界面410位于界面左侧，其中，第一用户交互界面410中展示有项目创建按钮、依赖安装按钮、代码生成按钮、以及持续部署按钮。其中，在第一用户交互界面410中，项目创建按钮处于被选择状态，相应地在用户交互界面400的右侧展示有项目创建阶段的第二用户交互界面420。

项目创建阶段的第二用户交互界面420包括目录选择区域421以及项目初始化方式选择控件422。

在一个实施例中，项目初始化方式选择控件422可以包括创建项目按钮、复制项目按钮或克隆项目按钮至少之一(图4中示意性示出了全部三个按钮)。

目录选择区域421中可以根据需要设置目录选择、项目目录信息显示、目录创建控件等，不同的控件交互方式可以不同，例如点击目录选择控件可以提供弹出，让用户选择目录信息等。

结合图4，在操作S230中进行项目创建阶段的任务开发时，可以响应于用户在目录选择区域421中的操作，调用本地文件系统来选择用于开发前端开发任务的项目的根目录。然后可以响应于用户从项目初始化方式选择控件中选择项目初始化方式的操作，按照用户所选择的项目初始化方式在根目录下创建用于开发前端开发任务的新项目。

不同的项目初始化方式，可以触发不同的项目创建逻辑。例如，当用户选择创建项目按钮时，可以调用本地安装的脚手架工具创建新项目。又例如，当用户选择复制项目按钮时，将用户选择的本地项目文件复制到根目录下，以作为新项目。再例如，当用户选择克隆项目按钮时，调用本地安装的分布式版本控制器Git工具从远程仓库拉取业务代码到根目录下，以作为新项目，其中，远程仓库中的业务代码为等待部署到服务器的其他前端开发任务的业务代码。

图5示意性示出了根据本公开一实施例的依赖安装阶段的用户交互界面示意图。

如图5所示，该用户交互界面500包括第一用户交互界面510和依赖安装阶段的第二用户交互界面520。

在该实施例中，第一用户交互界面510位于界面左侧，其中，第一用户交互界面510中展示有项目创建按钮、依赖安装按钮、代码生成按钮、以及持续部署按钮。其中，在第一用户交互界面510中依赖安装按钮处于被选择状态，相应地在用户交互界面500的右侧展示有依赖安装阶段的第二用户交互界面520。

依赖安装阶段的第二用户界面520可以包括文件目录选择区域521以及依赖安装按钮522。文件目录选择区域521可以包括目录选择控件等，可以根据用户的操作选择在前端开发任务中需要进行安装的依赖的文件等。

结合图5，在操作S230中当进行依赖安装阶段的任务开发时，可以基于用户在文件目录选择区域521的操作，调用本地文件系统，以使用户利用本地文件系统来选择需要安装的依赖，然后响应于用户对依赖安装按钮522的操作，调用本地的包管理器npm工具，以通过npm工具执行npm intall依赖安装命令进行依赖安装。

在一些实施例中，第二用户界面520中还可以进一步包括依赖列表523。依赖列表523中可以列示已安装的所有依赖的信息，例如依赖的名称和/或版本等信息。从而可以帮助开发人员对依赖的安装情况进行查看和确认等。

更进一步地，根据本公开的一些实施例，依赖列表523中可以还可以还包括操作栏5231。操作栏5231用于接收用户对依赖列表中所展示的依赖的更新操作或删除操作，便于开发人员对依赖的管理，例如，更新依赖版本，或者删除不必要的依赖或者低版本的依赖等。

本公开实施例可以通过依赖列表523提供依赖的可视化管理，相比于现有技术中在依赖安装过程的非可视化的情况，本公开实施例可以有效提供依赖管理功能，提高前端开发效率。

图6示意性示出了根据本公开一实施例的代码生成阶段的用户交互界面示意图。

如图6所示，该用户交互界面600包括第一用户交互界面610和代码生成阶段的第二用户交互界面620。

在该实施例中，第一用户交互界面610位于界面左侧，其中，第一用户交互界面610中展示有项目创建按钮、依赖安装按钮、代码生成按钮、以及持续部署按钮。其中，在第一用户交互界面610中代码生成按钮处于被选择状态，相应地在用户交互界面600的右侧展示有代码生成阶段的第二用户交互界面620。

根据本公开的一个实施例，代码生成阶段的第二用户交互界面620可以包括组件选择区域621和页面拼接区域622，其中，组件选择区域621中集成有至少一个表单组件(例如，form表单组件)。

从而在操作S230中在进行代码生成阶段的任务开发时，可以通过对表单组件的拖拽操作，将用户在组件选择区域621中选中的表单组件拖拽至页面拼接区域620，组合成页面样式。然后在页面样式设计完成后，可以根据用户指令基于设计完成的页面样式生成前端开发任务的业务代码。

组件选择区域621和页面拼接区域622可以是利用Electron开发的代码生成功能(例如，代码生成器)，可以帮助开发人员进行网页的快速设计，提高常见代码的复用率，提高前端开发效率。

当然，可以理解图6中代码生成阶段的第二用户交互界面620中的内容仅是示例性的。在一些实施例中，代码生成阶段的第二用户交互界面620中可以提供代码开发环境，可以包括诸如代码编辑器、编译器、调试器和/或图形用户界面等工具，由开发人员根据需要进行代码编辑和调试。

图7示意性示出了根据本公开一实施例的持续部署阶段的用户交互界面的示意图。

如图7所示，该用户交互界面700包括第一用户交互界面710持续部署阶段的第二用户交互界面720。

在该实施例中，第一用户交互界面710位于界面左侧，其中，第一用户交互界面710中展示有项目创建按钮、依赖安装按钮、代码生成按钮、以及持续部署按钮。其中，在第一用户交互界面710中代持续按钮处于被选择状态，相应地在用户交互界面700的右侧展示有持续部署阶段的第二用户交互界面720。

持续部署阶段的第二用户界面720可以包括部署信息配置控件721及一键部署按钮722。部署信息配置控件721例如可以包括文件选择区域、环境选择下拉框或分支选择下拉框，其中不同的控件用于设置不同维度的配置信息。

从而在操作S230中在对持续部署阶段进行任务开发时，可以通过部署信息配置控件721接收用户对前端开发任务的用户部署配置，然后响应于用户操作一键部署按钮722，调用持续部署平台按照用户部署配置将前端开发任务的业务代码部署到服务器。

根据本公开的一些实施例，持续部署平台在进行代码部署时，可以从远程仓库读取代码。从而在持续部署阶段之前，当前端开发任务的业务代码开发完成后，可以调用本地的分布式版本控制器Git工具将前端开发任务的业务代码推送至远程仓库。在一个实施例中，可以在代码生成阶段代码生成完成的同时，触发向远程仓库提交代码。在另一些实施例中，可以在代码生成阶段和持续部署阶段之间，增加代码提交阶段，然后在代码提交阶段提示开发人员进行代码的提交。从而，在用户操作一键部署按钮722后，调用持续部署平台提供的代码部署接口，以通过持续部署平台从远程仓库读取前端开发任务的业务代码，并进行打包后部署到服务器。

根据本公开的实施例，在第二用户界面720中在部署过程中还可以向用户展示部署进度信息。

图8示意性示出了根据本公开另一实施例的前端开发方法中用户交互时序图。

结合图8，根据本公开的实施例，可以基于Electron技术开发用于前端任务全流程开发的自动化工具801，来实现本公开实施例的前端开发方法。其中，该自动化工具801可以集成四个核心功能模块，分别是创建项目、依赖安装、代码生成和持续部署。开发人员可通过在该自动化工具801中的可视化操作完成整个研发过程全生命周期自动化管理，减低了开发流程复杂度，且不需要切换各种工具，极大提升了研发效率。

具体地，图8所示的该自动化工具801的用户交互时序图可以包括步骤S1～S10。其中，该自动化工具801中在创建项目、依赖安装、代码生成和持续部署各个阶段中的用户交互界面可以参考图4～图7。

首先在步骤S1，选择文件目录初始化项目。开发人员点击左侧菜单栏创建项目按钮，右侧界面出现文件目录选择区域及创建项目、复制项目、克隆项目三个按钮(参考图4)。第一步自动化工具801通过Electron调用本地文件系统选择要生成的新项目的根目录，第二步通过创建项目、复制项目、克隆项目三个按钮其中之一来创建新项目。

创建项目、复制项目、克隆项目为创建新项目的三种不同方式。其中，点击创建新项目按钮，可以出现新项目配置信息弹窗，可以输入项目名称、项目描述等，还可选择不同风格的项目模板，点击确定后自动化工具801调用集成在工具内部的脚手架工具执行项目创建命令，在第一步选中的文件目录下生成一个新项目。点击复制按钮，出现项目目录选择弹窗，选择想要复制的项目，点击确定后，自动化工具801通过Electron读取并复制该项目到第一步选中的本地文件目录下的文件作为新项目。点击克隆新项目，会出现克隆项目信息弹窗，可以输入项目中通过Git工具连接的远程仓库的地址及分支名称，点击确定，自动化工具801可以调用本地全局安装的Git工具来执行代码克隆命令，将对应的代码拉取到第一步选中的文件目录下作为新项目。

然后在步骤S2，当项目初始化完毕后可以向用户反馈项目初始化完毕的信息。

接下来在步骤S3，安装依赖。项目初始化完毕，点击左侧菜单栏依赖安装按钮，右侧界面出现文件目录选择区域、一键安装按钮及依赖列表(参考图5)。开发人员可以使用自动化工具801通过Electron调用本地文件系统选择要安装依赖的项目。然后点击一键安装按钮，自动化工具801调用本地全局安装的npm工具，执行npm intall依赖安装命令，对项目进行依赖安装。

依赖列表为自动化工具801提供的依赖管理工具。项目依赖一键安装完毕后，所有安装的运行依赖和开发依赖都会展示在依赖列表中，依赖列表右侧为操作栏。通过操作栏可进行依赖管理，如选择已安装依赖的某个版本点击安装，则自动化工具801执行npmintall xxx@version依赖安装命令，更新已安装依赖的版本，或点击删除按钮，则自动化工具801执行npm unintall命令，删除该依赖。

然后在步骤S4，向用户反馈依赖安装完毕的信息。

接下来在步骤S5，依赖安装完毕，可以直接在自动化工具801中打开项目进行代码研发。自动化工具801可以提供代码生成器，点击左侧菜单栏代码生成器按钮，右侧界面出现组件选择区域和页面拼接区域(参考图6)。自动化工具801代码生成器集成了简单的通过Electron实现的Form表单组件，开发人员可通过拖拽的方式，将组件拖拽至页面拼接区域组合成我们想要开发的页面样式，最后点击代码生成按钮，弹出文件选择器，选择代码保存路径，点击确定按钮，则在对应目录下生成我们可以直接使用的业务代码。

然后在步骤S6，基于开发人员的确认操作，确定代码开发完毕。

接下来在步骤S7，代码提交远程仓库。代码开发完毕后，通过自动化工具801集成的命令行工具执行Git命令，将代码提交至远程仓库。

然后在步骤S8，向用户反馈代码提交完毕的信息。

接下来在步骤S9，持续部署。代码提交完毕，点击左侧菜单栏持续部署按钮，右侧界面出现文件选择区域、环境选择下拉框、分支选择下拉框及一键部署按钮(参考图7)。开发人员可以使用自动化工具801通过Electron调用本地文件系统选择我们要部署的项目，并选择环境和分支，点击一键部署，自动化工具801会调用持续部署平台提供的代码部署API，对代码进行打包并上传至目标服务器完成部署操作。该持续部署平台例如可以是DOS平台。现有技术中，由于前端开发任务是在不同的工具中分散执行的，开发人员一般不具有登陆DOS平台进行代码部署的权限，通常还需通知有限的人员登陆DOS平台进行代码打包部署操作，效率极低。与此不同，本申请方案中将自动化工具801调用持续部署平台DOS平台的逻辑进行封装为后端逻辑，开发人员可以通过在自动化工具801中的触发操作，就可以调用DOS平台进行代码的部署，提高了部署效率。

然后在步骤S10，部署完毕后自动化工具801反馈开发人员具体部署信息，流程结束。

本公开实施例的前端开发方法，可以使开发人员能在自动化工具801中实现从项目创建、依赖安装、代码研发、代码打包到持续部署的全流程可视化操作。

而且，可以通过可视化操作，精简前端开发任务的操作流程，降低操作复杂度。开发人员可以实时获取流程进度信息，时刻把控研发进度，实现了研发过程全生命周期的自动化管理。

同时通过提供了项目克隆、依赖管理、代码生成器等功能，提高了项目复用度，解决了依赖版本不兼容问题，减少了开发代码量，提升了研发效率。

图9示意性示出了根据本公开一实施例的前端开发装置900的结构框图。

如图9所示，根据该实施例的前端开发装置900可以包括用户交互模块910以及开发模块920。

用户交互模块910可以用于在前端开发任务中提供用户交互界面，并接收用户的交互操作，以及向用户反馈交互操作的结果。根据本公开的一个实施例，用户交互模块910例如可以用于执行操作S210、操作S220以及操作S240。

具体地，用户交互模块910可以用于展示第一用户交互界面，其中第一用户交互界面包括与前端开发任务的全流程所包含的M个阶段一一对应的的M个控件，其中，前端开发任务的全流程包括从前端开发任务的项目创建到将前端开发任务中开发的业务代码部署到服务器的整个流程，其中，M为大于1的整数。

进一步地，用户交互模块910还可以用于响应于对M个控件中每个控件的选择操作，展示所选择的控件对应的当前阶段的第二用户交互界面，当前阶段的第二用户交互界面用于引导用户进行当前阶段的任务开发。

更进一步地，用户交互模块910还可以用于在M个阶段的任务均开发完成后，向用户反馈前端开发任务开发完成的信息。

开发模块920可以用于基于在当前阶段的第二用户交互界面中的用户交互操作，进行当前阶段的任务开发。根据本公开的一个实施例，开发模块920例如可以执行操作S230。

根据本公开一些实施例，前端开发任务的全流程所包含的M个阶段可以包括项目创建阶段、依赖安装阶段、代码生成阶段或者持续部署阶段中的至少之一。相应地，开发模块920可以包括项目创建模块921、依赖安装模块922、代码生成器923或持续部署模块924中的至少之一。

在项目创建阶段，第二用户交互界面包括目录选择区域、以及项目初始化方式选择控件(参考图4)。项目创建模块921可以用于响应于用户在目录选择区域中的操作，调用本地文件系统来选择用于开发前端开发任务的项目的根目录；以及响应于用户从项目初始化方式选择控件中选择项目初始化方式的操作，按照用户所选择的项目初始化方式在根目录下创建用于开发前端开发任务的新项目。

在依赖安装阶段，第二用户界面可以包括文件目录选择区域以及依赖安装按钮(参考图5)。依赖安装模块922可以用于：基于用户在文件目录选择区域的操作，调用本地文件系统，以使用户利用本地文件系统来选择需要安装的依赖；以及响应于用户对依赖安装按钮的操作，调用本地的包管理器npm工具，以通过npm工具执行npm intall依赖安装命令进行依赖安装。

根据本公开另一实施例，依赖安装阶段的第二用户界面中还包括依赖列表(参考图5)。依赖安装模块922还可以用于通过依赖列表列示已安装的所有依赖的信息。根据本公开的另一实施例，依赖列表还包括操作栏。依赖安装模块922还可以用于通过操作栏接收用户对依赖列表中所展示的依赖的更新操作或删除操作。

在代码生成阶段，第二用户界面包括组件选择区域和页面拼接区域(参考图6)，其中，组件选择区域集成有至少一个表单组件。代码生成器923用于在代码生成阶段基于用户对表单组件的拖拽操作，将用户在组件选择区域中选中的表单组件拖拽至页面拼接区域，组合成页面样式；以及在页面样式设计完成后，基于设计完成的页面样式生成前端开发任务的业务代码。

在持续部署阶段，第二用户界面包括部署信息配置控件及一键部署按钮(参考图7)。持续部署模块924可以用于通过部署信息配置控件接收用户对前端开发任务的用户部署配置；以及响应于用户操作一键部署按钮，调用持续部署平台按照用户部署配置将前端开发任务的业务代码部署到服务器。

根据本公开另一些实施例，开发模块920还可以包括代码共享模块。代码共享模块可以用于在持续部署阶段之前，当前端开发任务的业务代码开发完成后，调用本地的分布式版本控制器Git工具将前端开发任务的业务代码推送至远程仓库。从而持续部署模块924可以用于调用持续部署平台提供的代码部署接口，以通过持续部署平台从远程仓库读取前端开发任务的业务代码，并进行打包后部署到服务器。

根据本公开的实施例，该前端开发装置900可以用于实现参考图2～图8所描述的前端开发方法，提供前端开发的全流程、自动化管理平台，降低前端开发流程复杂度，且可以不用户切换各种工具，提升了前端开发效率。

根据本公开的实施例，用户交互模块910、项目创建模块921、依赖安装模块922、代码生成器923、持续部署模块924或代码共享模块中的任意多个模块可以合并在一个模块中实现，或者其中的任意一个模块可以被拆分成多个模块。或者，这些模块中的一个或多个模块的至少部分功能可以与其他模块的至少部分功能相结合，并在一个模块中实现。根据本公开的实施例，用户交互模块910、项目创建模块921、依赖安装模块922、代码生成器923、持续部署模块924或代码共享模块中的至少一个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式等硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，用户交互模块910、项目创建模块921、依赖安装模块922、代码生成器923、持续部署模块924或代码共享模块中的至少一个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

图10示意性示出了适于实现根据本公开实施例的前端交互方法的电子设备1000的方框图。

如图10所示，根据本公开实施例的电子设备1000包括处理器1001，其可以根据存储在只读存储器(ROM)1002中的程序或者从存储部分1008加载到随机访问存储器(RAM)1003中的程序而执行各种适当的动作和处理。处理器1001例如可以包括通用微处理器(例如CPU)、指令集处理器和/或相关芯片组和/或专用微处理器(例如，专用集成电路(ASIC))等等。处理器1001还可以包括用于缓存用途的板载存储器。处理器1001可以包括用于执行根据本公开实施例的方法流程的不同动作的单一处理单元或者是多个处理单元。

在RAM 1003中，存储有电子设备1000操作所需的各种程序和数据。处理器1001、ROM 1002以及RAM 1003通过总线1004彼此相连。处理器1001通过执行ROM 1002和/或RAM1003中的程序来执行根据本公开实施例的方法流程的各种操作。需要注意，所述程序也可以存储在除ROM 1002和RAM 1003以外的一个或多个存储器中。处理器1001也可以通过执行存储在所述一个或多个存储器中的程序来执行根据本公开实施例的方法流程的各种操作。

根据本公开的实施例，电子设备1000还可以包括输入/输出(I/O)接口1005，输入/输出(I/O)接口1005也连接至总线1004。电子设备1000还可以包括连接至I/O接口1005的以下部件中的一项或多项：包括键盘、鼠标等的输入部分1006；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分1007；包括硬盘等的存储部分1008；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分1009。通信部分1009经由诸如因特网的网络执行通信处理。驱动器1010也根据需要连接至I/O接口1005。可拆卸介质1011，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器1010上，以便于从其上读出的计算机程序根据需要被安装入存储部分1008。

本公开还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例中描述的设备/装置/系统中所包含的；也可以是单独存在，而未装配入该设备/装置/系统中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或者多个程序被执行时，实现根据本公开实施例的方法。

根据本公开的实施例，计算机可读存储介质可以是非易失性的计算机可读存储介质，例如可以包括但不限于：便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。例如，根据本公开的实施例，计算机可读存储介质可以包括上文描述的ROM 1002和/或RAM 1003和/或ROM 1002和RAM 1003以外的一个或多个存储器。

本公开的实施例还包括一种计算机程序产品，其包括计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。当计算机程序产品在计算机系统中运行时，该程序代码用于使计算机系统实现本公开实施例所提供的前端开发方法。

在该计算机程序被处理器1001执行时执行本公开实施例的系统/装置中限定的上述功能。根据本公开的实施例，上文描述的系统、装置、模块、单元等可以通过计算机程序模块来实现。

在一种实施例中，该计算机程序可以依托于光存储器件、磁存储器件等有形存储介质。在另一种实施例中，该计算机程序也可以在网络介质上以信号的形式进行传输、分发，并通过通信部分1009被下载和安装，和/或从可拆卸介质1011被安装。该计算机程序包含的程序代码可以用任何适当的网络介质传输，包括但不限于：无线、有线等等，或者上述的任意合适的组合。

在这样的实施例中，该计算机程序可以通过通信部分1009从网络上被下载和安装，和/或从可拆卸介质1011被安装。在该计算机程序被处理器1001执行时，执行本公开实施例的系统中限定的上述功能。根据本公开的实施例，上文描述的系统、设备、装置、模块、单元等可以通过计算机程序模块来实现。

根据本公开的实施例，可以以一种或多种程序设计语言的任意组合来编写用于执行本公开实施例提供的计算机程序的程序代码，具体地，可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。程序设计语言包括但不限于诸如Java，C++，python，“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

本领域技术人员可以理解，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合或/或结合，即使这样的组合或结合没有明确记载于本公开中。特别地，在不脱离本公开精神和教导的情况下，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合。所有这些组合和/或结合均落入本公开的范围。

以上对本公开的实施例进行了描述。但是，这些实施例仅仅是为了说明的目的，而并非为了限制本公开的范围。尽管在以上分别描述了各实施例，但是这并不意味着各个实施例中的措施不能有利地结合使用。本公开的范围由所附权利要求及其等同物限定。不脱离本公开的范围，本领域技术人员可以做出多种替代和修改，这些替代和修改都应落在本公开的范围之内。

Claims (15)

1.一种前端开发方法，包括：

展示第一用户交互界面，所述第一用户交互界面包括与前端开发任务的全流程所包含的M个阶段一一对应的的M个控件，其中，所述前端开发任务的全流程包括从所述前端开发任务的项目创建到将所述前端开发任务中开发的业务代码部署到服务器的整个流程，其中，M为大于1的整数；

响应于对所述M个控件中每个控件的选择操作，展示所选择的控件对应的当前阶段的第二用户交互界面，所述当前阶段的第二用户交互界面用于引导用户进行所述当前阶段的任务开发；

基于在所述当前阶段的第二用户交互界面中的用户交互操作，进行所述当前阶段的任务开发；以及

在所述M个阶段的任务均开发完成后，向用户反馈所述前端开发任务开发完成的信息。

2.根据权利要求1所述的方法，其中，所述M个阶段包括项目创建阶段、依赖安装阶段、代码生成阶段或者持续部署阶段中的至少之一。

3.根据权利要求2所述的方法，其中，所述方法为利用Electron技术实现的；则，所述基于在所述当前阶段的第二用户交互界面中的用户交互操作，进行所述当前阶段的任务开发包括：

调用第三方工具来进行所述当前阶段的任务开发；

其中，

当所述当前阶段为所述项目创建阶段时，所述第三方工具包括本地安装的脚手架工具；

当所述当前阶段为所述依赖安装阶段时，所述第三方工具包括包管理器npm工具；或者

当所述当前阶段为所述持续部署阶段时，所述第三方工具包括持续部署平台。

4.根据权利要求2所述的方法，其中，所述项目创建阶段的第二用户交互界面包括目录选择区域、以及项目初始化方式选择控件；其中，基于在所述项目创建阶段的第二用户交互界面中的用户交互操作，进行所述项目创建阶段的任务开发包括：

响应于用户在所述目录选择区域中的操作，调用本地文件系统来选择用于开发所述前端开发任务的项目的根目录；以及

响应于用户从所述项目初始化方式选择控件中选择项目初始化方式的操作，按照用户所选择的项目初始化方式在所述根目录下创建用于开发所述前端开发任务的新项目。

5.根据权利要求4所述的方法，其中，所述项目初始化方式选择控件包括创建项目按钮、复制项目按钮或克隆项目按钮至少之一；其中，按照用户所选择的项目初始化方式在所述根目录下创建用于开发所述前端开发任务的新项目包括：

当用户选择所述创建项目按钮时，调用本地安装的脚手架工具创建所述新项目；

当用户选择所述复制项目按钮时，将用户选择的本地项目文件复制到所述根目录下，以作为所述新项目；或者

当用户选择所述克隆项目按钮时，调用本地安装的分布式版本控制器Git工具从远程仓库拉取业务代码到所述根目录下，以作为所述新项目，其中，所述远程仓库中的业务代码为等待部署到服务器的其他前端开发任务的业务代码。

6.根据权利要求2所述的方法，其中，所述依赖安装阶段的第二用户界面包括文件目录选择区域以及依赖安装按钮；其中，基于在所述依赖安装阶段的第二用户交互界面中的用户交互操作，进行所述依赖安装阶段的任务开发包括：

基于用户在所述文件目录选择区域的操作，调用本地文件系统，以使用户利用所述本地文件系统来选择需要安装的依赖；以及

响应于用户对所述依赖安装按钮的操作，调用本地的包管理器npm工具，以通过所述npm工具执行npmintall依赖安装命令进行依赖安装。

7.根据权利要求6所述的方法，其中，所述依赖安装阶段的第二用户界面中还包括依赖列表，所述依赖列表用于列示已安装的所有依赖的信息。

8.根据权利要求7所述的方法，其中，所述依赖列表还包括操作栏，所述操作栏用于接收用户对所述依赖列表中所展示的依赖的更新操作或删除操作。

9.根据权利要求2所述的方法，其中，所述代码生成阶段的第二用户界面包括组件选择区域和页面拼接区域，其中，所述组件选择区域集成有至少一个表单组件；其中，基于在所述代码生成阶段的第二用户交互界面中的用户交互操作，进行所述代码生成阶段的任务开发包括：

基于用户对表单组件的拖拽操作，将用户在所述组件选择区域中选中的表单组件拖拽至所述页面拼接区域，组合成页面样式；以及

在所述页面样式设计完成后，基于设计完成的所述页面样式生成所述前端开发任务的业务代码。

10.根据权利要求2所述的方法，其中，所述持续部署阶段的第二用户界面包括部署信息配置控件及一键部署按钮；其中，基于在所述持续部署阶段的第二用户交互界面中的用户交互操作，进行所述持续部署阶段的任务开发包括：

通过所述部署信息配置控件接收用户对所述前端开发任务的用户部署配置；以及

响应于用户操作所述一键部署按钮，调用持续部署平台按照所述用户部署配置将所述前端开发任务的业务代码部署到服务器。

11.根据权利要求10所述的方法，其中，

所述方法还包括：在所述持续部署阶段之前，当所述前端开发任务的业务代码开发完成后，调用本地的分布式版本控制器Git工具将所述前端开发任务的业务代码推送至远程仓库；

则，所述调用持续部署平台按照所述用户部署配置将所述前端开发任务的业务代码部署到服务器包括：

调用所述持续部署平台提供的代码部署接口，以通过所述持续部署平台从所述远程仓库读取所述前端开发任务的业务代码，并进行打包后部署到服务器。

12.根据权利要求10所述的方法，其中，在部署过程中向用户展示部署进度信息。

13.一种前端开发装置，包括：

用户交互模块，用于：

展示第一用户交互界面，所述第一用户交互界面包括与前端开发任务的全流程所包含的M个阶段一一对应的的M个控件，其中，所述前端开发任务的全流程包括从所述前端开发任务的项目创建到将所述前端开发任务中开发的业务代码部署到服务器的整个流程，其中，M为大于1的整数；

响应于对所述M个控件中每个控件的选择操作，展示所选择的控件对应的当前阶段的第二用户交互界面，所述当前阶段的第二用户交互界面用于引导用户进行所述当前阶段的任务开发；以及

在所述M个阶段的任务均开发完成后，向用户反馈所述前端开发任务开发完成的信息；

开发模块，用于基于在所述当前阶段的第二用户交互界面中的用户交互操作，进行所述当前阶段的任务开发。

14.一种电子设备，包括：

一个或多个处理器；

一个或多个存储器，用于存储一个或多个程序，

其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器执行根据权利要求1～12中任一项所述的方法。

15.一种计算机可读存储介质，其上存储有可执行指令，该指令被处理器执行时使处理器执行根据权利要求1～12中任一项所述的方法。

Images