CN113703738A

CN113703738A - Front-end development method, device, equipment and medium

Info

Publication number: CN113703738A
Application number: CN202111029459.0A
Authority: CN
Inventors: 白长昊; 尤海洋; 杨德娜; 陈建华
Original assignee: Industrial and Commercial Bank of China Ltd ICBC; ICBC Technology Co Ltd
Current assignee: Industrial and Commercial Bank of China Ltd ICBC; ICBC Technology Co Ltd
Priority date: 2021-09-02
Filing date: 2021-09-02
Publication date: 2021-11-26

Abstract

The present disclosure provides a front-end development method, which can be applied to the financial field. The front-end development method comprises the following steps: displaying a first user interaction interface, wherein the first user interaction interface comprises M controls in one-to-one correspondence with M stages contained in a full flow of a front-end development task, the full flow of the front-end development task comprises the whole flow from project creation of the front-end development task to deployment of a business code developed in the front-end development task to a server, and M is an integer greater than 1; responding to the selection operation of each control in the M controls, and displaying a second user interaction interface of the current stage corresponding to the selected control; based on the user interaction operation in the second user interaction interface at the current stage, task development at the current stage is carried out; and after the tasks in the M stages are all developed, feeding back information of the development completion of the front-end development task to the user. The present disclosure also provides a front-end development apparatus, device, medium, and program product.

Description

Front-end development method, device, equipment and medium

Technical Field

The present disclosure relates to the field of internet technology, and more particularly, to a front-end development method, apparatus, device, medium, and program product.

Background

With the continuous evolution of a front-end and back-end separation research and development mode and front-end engineering, scaffold tools, packaging tools, low-code platforms, continuous deployment platforms and the like are rapidly developed in the front-end field, and front-end development can be carried out by depending on various tools and platforms.

However, in the prior art, developers often need to switch the work continuously when trying to realize complete closed loop from development to online. For example, the developer needs to initialize the project using the scaffold tool and then switch to npm the tool to install the required dependencies of the project after the project has been initialized. After the installation is finished, switching to an IDE tool to open a project for code research and development. After the code is developed, the operation of escape, compression, confusion and the like on the code needs to be switched to a packaging tool, and after the packaging is finished, the code which needs to be deployed to a generation environment finally is generated. And finally, storing the packaged codes in a specified directory of the server, and then opening a deployment tool to deploy the codes. Therefore, the automation degree of the whole process of front-end development is low, developers need to frequently switch various tools, and the efficiency is extremely low.

Disclosure of Invention

In view of the foregoing, embodiments of the present disclosure provide a front-end development method, apparatus, device, medium, and program product, which can automatically implement full-flow management of front-end development.

In a first aspect of the disclosed embodiments, a front-end development method is provided. The method comprises the following steps: displaying a first user interaction interface, wherein the first user interaction interface comprises M controls in one-to-one correspondence with M stages contained in a full flow of a front-end development task, the full flow of the front-end development task comprises a whole flow from project creation of the front-end development task to deployment of a business code developed in the front-end development task to a server, and M is an integer greater than 1; responding to the selection operation of each control in the M controls, and displaying a second user interaction interface of the current stage corresponding to the selected control, wherein the second user interaction interface of the current stage is used for guiding a user to carry out task development of the current stage; performing task development of the current stage based on user interaction operation in the second user interaction interface of the current stage; and after the tasks in the M stages are all developed, feeding back information of the development completion of the front-end development task to a user.

According to an embodiment of the present disclosure, the M phases include at least one of a project creation phase, a dependent installation phase, a code generation phase, or a persistent deployment phase.

According to an embodiment of the present disclosure, the method is implemented using Electron technology. Then, the performing task development of the current stage based on the user interaction operation in the second user interaction interface of the current stage includes: calling a third-party tool to perform task development of the current stage; wherein when the current stage is the project creation stage, the third party tool comprises a locally installed scaffold tool; when the current phase is the dependent installation phase, the third party tool comprises a package manager npm tool; or when the current stage is the continuous deployment stage, the third-party tool comprises a continuous deployment platform.

According to the embodiment of the disclosure, the second user interaction interface of the project creation phase comprises a catalog selection area and a project initialization mode selection control; wherein, based on the user interaction operation in the second user interaction interface of the project creation phase, performing the task development of the project creation phase comprises: in response to an operation of a user in the directory selection area, calling a local file system to select a root directory of a project for developing the front-end development task; and responding to the operation that the user selects the project initialization mode from the project initialization mode selection control, and creating a new project for developing the front-end development task under the root directory according to the project initialization mode selected by the user.

According to an embodiment of the present disclosure, the project initialization mode selection control includes at least one of a create project button, a copy project button, or a clone project button; wherein creating a new project for developing the front-end development task under the root directory according to a project initialization manner selected by a user comprises: when the user selects the create project button, calling a locally installed scaffold tool to create the new project; when the user selects the copy item button, copying the local item file selected by the user to the root directory to be used as the new item; or when the user selects the clone project button, calling a locally installed distributed version controller Git tool to pull service codes from a remote warehouse to the root directory to serve as the new project, wherein the service codes in the remote warehouse are the service codes of other front-end development tasks waiting to be deployed to the server.

According to an embodiment of the present disclosure, the second user interface of the dependent installation phase includes a file directory selection area and a dependent installation button; wherein, based on the user interaction operation in the second user interaction interface of the dependent installation phase, the task development of the dependent installation phase comprises: calling a local file system based on the operation of a user in the file directory selection area so that the user selects the dependence needing to be installed by using the local file system; and in response to user operation of the dependent install button, invoking a local package manager npm tool to execute an npm intall dependent install command for dependent installation via the npm tool.

According to the embodiment of the disclosure, the second user interface of the dependency installation phase further includes a dependency list, and the dependency list is used for listing information of all installed dependencies.

According to an embodiment of the present disclosure, the dependency list further includes an operation bar, and the operation bar is configured to receive an update operation or a deletion operation of a user on a dependency shown in the dependency list.

According to an embodiment of the present disclosure, the second user interface of the code generation phase includes a component selection area and a page splicing area, wherein the component selection area is integrated with at least one form component; wherein, based on the user interaction operation in the second user interaction interface of the code generation phase, the task development of the code generation phase comprises: based on the dragging operation of the user on the form components, dragging the form components selected by the user in the component selection area to the page splicing area to form a page style; and after the design of the page style is finished, generating a service code of the front-end development task based on the designed page style.

According to an embodiment of the present disclosure, the second user interface of the continuous deployment phase includes a deployment information configuration control and a one-key deployment button; wherein, based on the user interaction operation in the second user interaction interface of the continuous deployment phase, performing task development of the continuous deployment phase comprises: receiving user deployment configuration of the front-end development task by a user through the deployment information configuration control; and responding to the one-key deployment button operated by the user, and calling a continuous deployment platform to deploy the business code of the front-end development task to the server according to the user deployment configuration.

According to an embodiment of the present disclosure, the method further comprises: before the continuous deployment stage, after the business code development of the front-end development task is completed, calling a local distributed version controller Git tool to push the business code of the front-end development task to a remote warehouse. The step of deploying, by the calling persistent deployment platform, the service code of the front-end development task to the server according to the user deployment configuration includes: and calling a code deployment interface provided by the continuous deployment platform to read the service code of the front-end development task from the remote warehouse through the continuous deployment platform, and packaging and deploying the service code to a server.

According to the embodiment of the disclosure, deployment progress information is displayed to a user in a deployment process.

In a second aspect of the disclosed embodiments, a front-end development apparatus is provided. The device comprises a user interaction module and a development module. The user interaction module is to: displaying a first user interaction interface, wherein the first user interaction interface comprises M controls in one-to-one correspondence with M stages contained in a full flow of a front-end development task, the full flow of the front-end development task comprises a whole flow from project creation of the front-end development task to deployment of a business code developed in the front-end development task to a server, and M is an integer greater than 1; responding to the selection operation of each control in the M controls, and displaying a second user interaction interface of the current stage corresponding to the selected control, wherein the second user interaction interface of the current stage is used for guiding a user to carry out task development of the current stage; and after the tasks in the M stages are all developed, feeding back information of the development completion of the front-end development task to a user. The development module is used for developing the task of the current stage based on the user interaction operation in the second user interaction interface of the current stage.

According to an embodiment of the present disclosure, the development module includes a project creation module. The M stages comprise a project creation stage, and a second user interaction interface of the project creation stage comprises a catalog selection area and a project initialization mode selection control. The project creation module is used for responding to the operation of a user in the directory selection area, and calling a local file system to select a root directory of a project for developing the front-end development task; and responding to the operation that the user selects the project initialization mode from the project initialization mode selection control, and creating a new project for developing the front-end development task under the root directory according to the project initialization mode selected by the user.

According to an embodiment of the present disclosure, the development module includes a dependent installation module. The M phases include a dependent install phase, and a second user interface of the dependent install phase includes a file directory selection area and a dependent install button. The dependency installation module is to: calling a local file system based on the operation of a user in the file directory selection area so that the user selects the dependence needing to be installed by using the local file system; and in response to user operation of the dependent install button, invoking a local package manager npm tool to execute an npm intall dependent install command for dependent installation via the npm tool.

According to an embodiment of the present disclosure, the second user interface of the dependency installation phase further includes a dependency list. The dependency installation module is further used for listing information of all installed dependencies through the dependency list.

According to an embodiment of the present disclosure, the dependency list further includes an operation bar. The dependency installation module is further used for receiving an updating operation or a deleting operation of a user on the dependency shown in the dependency list through the operation bar.

According to an embodiment of the present disclosure, the development module includes a code generator. The M stages comprise a code generation stage, and a second user interface of the code generation stage comprises a component selection area and a page splicing area, wherein at least one form component is integrated in the component selection area. The code generator is used for dragging the form component selected by the user in the component selection area to the page splicing area based on the dragging operation of the user on the form component to form a page style; and after the design of the page style is finished, generating a service code of the front-end development task based on the designed page style.

According to an embodiment of the present disclosure, the development module includes a persistent deployment module. The M phases include a continuous deployment phase, and a second user interface of the continuous deployment phase includes a deployment information configuration control and a one-key deployment button. The continuous deployment module is used for receiving user deployment configuration of the front-end development task by a user through the deployment information configuration control; and responding to the one-key deployment button operated by the user, and calling a continuous deployment platform to deploy the business code of the front-end development task to the server according to the user deployment configuration.

According to an embodiment of the present disclosure, the development module includes a code sharing module. And the code sharing module is used for calling a local distributed version controller Git tool to push the service codes of the front-end development tasks to a remote warehouse before the continuous deployment stage and after the service codes of the front-end development tasks are developed. The continuous deployment module is used for calling a code deployment interface provided by the continuous deployment platform so as to read the service code of the front-end development task from the remote warehouse through the continuous deployment platform, and the service code is packaged and deployed to a server.

A third aspect of the embodiments of the present disclosure provides an electronic device, including: one or more processors, and one or more memories. The one or more memories are for storing one or more programs. Wherein the one or more programs, when executed by the one or more processors, cause the one or more processors to perform the front end development method described above.

A fourth aspect of embodiments of the present disclosure also provides a computer-readable storage medium having stored thereon executable instructions that, when executed by a processor, cause the processor to perform the above-described front-end development method.

A fifth aspect of the embodiments of the present disclosure also provides a computer program product, including a computer program, which when executed by a processor implements the above-mentioned front-end development method.

Drawings

The foregoing and other objects, features and advantages of the disclosure will be apparent from the following description of embodiments of the disclosure, which proceeds with reference to the accompanying drawings, in which:

FIG. 1 schematically illustrates an application scenario diagram of a front-end development method, apparatus, device, medium, and program product according to embodiments of the disclosure;

FIG. 2 schematically illustrates a flow diagram of a front-end development method according to an embodiment of the present disclosure;

FIG. 3 schematically illustrates an exemplary system architecture for a front-end development method according to an embodiment of the present disclosure;

FIG. 4 schematically shows a user interaction interface diagram of a project creation phase according to an embodiment of the present disclosure;

FIG. 5 schematically illustrates a user interaction interface diagram dependent on an installation phase according to an embodiment of the disclosure;

FIG. 6 schematically shows a user interaction interface diagram of a code generation phase according to an embodiment of the present disclosure;

FIG. 7 schematically illustrates a schematic view of a user interaction interface for a continuous deployment phase according to an embodiment of the present disclosure;

FIG. 8 schematically illustrates a user interaction timing diagram in a front-end development method according to another embodiment of the present disclosure;

fig. 9 schematically shows a block diagram of a front-end development apparatus according to an embodiment of the present disclosure; and

fig. 10 schematically shows a block diagram of an electronic device adapted to implement a front-end interaction method according to an embodiment of the present disclosure.

Detailed Description

Hereinafter, embodiments of the present disclosure will be described with reference to the accompanying drawings. It should be understood that the description is illustrative only and is not intended to limit the scope of the present disclosure. In the following detailed description, for purposes of explanation, numerous specific details are set forth in order to provide a thorough understanding of the embodiments of the disclosure. It may be evident, however, that one or more embodiments may be practiced without these specific details. Moreover, in the following description, descriptions of well-known structures and techniques are omitted so as to not unnecessarily obscure the concepts of the present disclosure.

The terminology used herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the disclosure. The terms "comprises," "comprising," and the like, as used herein, specify the presence of stated features, steps, operations, and/or components, but do not preclude the presence or addition of one or more other features, steps, operations, or components.

All terms (including technical and scientific terms) used herein have the same meaning as commonly understood by one of ordinary skill in the art unless otherwise defined. It is noted that the terms used herein should be interpreted as having a meaning that is consistent with the context of this specification and should not be interpreted in an idealized or overly formal sense.

Where a convention analogous to "at least one of A, B and C, etc." is used, in general such a construction is intended in the sense one having skill in the art would understand the convention (e.g., "a system having at least one of A, B and C" would include but not be limited to systems that have a alone, B alone, C alone, a and B together, a and C together, B and C together, and/or A, B, C together, etc.).

In this document, it is to be understood that any number of elements in the specification and drawings is to be considered exemplary rather than limiting, and that any nomenclature (e.g., first, second) is used for distinction only, and not in any limiting sense.

The embodiment of the disclosure provides a front-end development method, a front-end development device, a front-end development equipment, a front-end development medium and a front-end development program, which can realize the automatic management of the whole life cycle of the front-end development process and enable developers to realize the whole-process visual operation of a front-end development task in one automatic tool.

The front-end development method implemented according to the present disclosure may be implemented by the following process. The method comprises the steps of firstly, displaying a first user interaction interface, wherein the first user interaction interface comprises M controls which are in one-to-one correspondence with M stages contained in a full flow of a front-end development task, the full flow of the front-end development task comprises the whole flow from project creation of the front-end development task to deployment of business codes developed in the front-end development task to a server, and M is an integer larger than 1. And then, responding to the selection operation of each control in the M controls, and displaying a second user interaction interface of the current stage corresponding to the selected control, wherein the second user interaction interface of the current stage is used for guiding the user to carry out task development of the current stage. Next, based on the user interaction operation in the second user interaction interface of the current stage, the task development of the current stage is performed. And finally, after the tasks in the M stages are all developed, feeding back information of the development completion of the front-end development task to the user.

According to the embodiment of the disclosure, developers can be guided to carry out full-flow development of front-end development tasks through the M controls in the first user interaction interface, the developers can be guided to carry out specific development tasks in each stage through the second user interaction interface in each stage, and information of the completed development is fed back to the users after the tasks in the M stages are all developed.

It should be noted that the front-end development method, apparatus, device, medium, and program defined in the embodiments of the present disclosure may be applied to the financial field (for example, application in internet finance), and may also be applied to any field other than the financial field, and the present disclosure does not limit the application field.

FIG. 1 schematically illustrates an application scenario diagram of a front-end development method, apparatus, device, medium, and program product according to embodiments of the disclosure; . It should be noted that fig. 1 is only an example of a system architecture to which the embodiments of the present disclosure may be applied to help those skilled in the art understand the technical content of the present disclosure, and does not mean that the embodiments of the present disclosure may not be applied to other devices, systems, environments or scenarios.

As shown in fig. 1, an application scenario 100 according to this embodiment may include a terminal device 101, a network 102, and a server 103. Network 102 is used to provide a communication link between terminal device 101 and server 103. Network 102 may include various connection types, such as wired, wireless communication links, or fiber optic cables, to name a few.

The developer 1 can utilize the terminal device 101 to develop front-end service codes, and the developed service codes are deployed in the server 103.

In some embodiments, the application scenario 100 may further include a deployment platform 104 and a remote repository 105. The deployment platform 104 and the remote repository 105 may be connected to the network 102, respectively, and may communicate with the terminal device 101 and the server 103 via the network 102.

The persistent deployment platform 104 may perform specific code deployment operations. For example, the persistent deployment platform 104 may receive a call from the terminal device 101 to perform a specific code deployment operation, and finally deploy the service code developed and completed by the developer in the terminal device 101 to the server 103.

The remote repository 105 is a code hosting platform. In some embodiments, during the front-end development, front-end business code developed by a developer using terminal device 101 may be submitted to remote repository 105. For example, the front-end code may be submitted to the remote repository 105 by a distributed version controller Git tool (Git tool for short) installed locally in the terminal device 101, wherein the remote repository 105 may be connected to the Git tool in the terminal device 101, wherein the Git tool may push (push) a local file to the remote repository 105.

Thus, the continuous deployment platform 104 may read the service code from the remote repository 105 and deploy the read service code into the server 103 after receiving the call or deployment instruction of the terminal device 101. In some embodiments, the persistent deployment platform 104 may be a DOS system platform.

The method of the disclosed embodiments may be performed by the terminal device 101. For example, a device, a software program, a medium, or an electronic device for implementing the front-end development method according to the embodiment of the present disclosure may be provided in the terminal device 101, and a developer may implement the front-end development through an operation in the terminal device 101.

Taking an application program installed in the terminal device 101 and capable of executing the front-end development method according to the embodiment of the present disclosure as an example, a development scenario of a developer is exemplarily described as follows. For example, the developer 1 may open the application program in the terminal device 101, and perform full-flow development of the front end according to the interaction guidance of the user interaction interface (including the first user interaction interface and the second user interaction interfaces of the respective stages) of the application program. In the development process of each stage, the application program 101 may implement full-flow development of a front-end development task through a self-integrated function, or by calling a locally installed third-party tool, or calling the deployment platform 104, based on a user operation instruction. The developer may not need to switch tools throughout the process, where the logic to invoke third party tools or other platforms may be implemented through the internal processing logic of the application. Thus, the user can perform full-flow development of the front end only by the operation in the application. Moreover, the user interaction interface which is provided by the application program and can guide the development operation can greatly simplify the operation in the development process and improve the development efficiency.

It should be understood that the number of terminal devices, networks, and servers in fig. 1 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.

The front-end development method of the disclosed embodiment will be described in detail below with fig. 2 to 8 based on the scenario described in fig. 1.

FIG. 2 schematically shows a flow diagram of a front-end development method according to an embodiment of the present disclosure.

As shown in fig. 2, the front-end development method according to this embodiment may include operations S210 to S240.

In operation S210, a first user interaction interface is displayed, where the first user interaction interface includes M controls corresponding to M stages included in a full flow of a front-end development task. The whole flow of the front-end development task comprises the whole flow from project creation of the front-end development task to deployment of business codes developed in the front-end development task to the server, wherein M is an integer greater than 1.

The M stages included in the full flow of the front-end development task may be divided according to actual needs, where the M stages may be parallel, serial, or a mixture of partial parallel and partial serial, and the disclosure is not limited thereto.

In operation S220, in response to the selection operation on each control of the M controls, a second user interaction interface of the current stage corresponding to the selected control is displayed, where the second user interaction interface of the current stage is used to guide the user to perform task development of the current stage.

In operation S230, task development of the current stage is performed based on the user interaction operation in the second user interaction interface of the current stage. In the task development process of each stage, corresponding functions can be executed based on user operations. The functions may be implemented by pre-integrated functions, or by calling with an operating system or a third-party tool.

In operation S240, after all the tasks in the M stages are developed, information of the development completion of the front-end development task is fed back to the user. The information of the development completion of the front-end development task may be notification information notifying the user of the development completion, deployment information of the front-end task in the server, summary record information in the development process of the front-end task, and the like.

In this way, the embodiment of the disclosure can realize the automatic management of the whole process of the front-end development task, guide the development process, simplify the operation in the front-end development process, avoid the switching between different tools, and effectively improve the front-end development efficiency.

Fig. 3 schematically illustrates an exemplary system architecture for a front-end development method according to an embodiment of the present disclosure.

As shown in fig. 3, according to the embodiment, the front-end development method is implemented using Electron technology. Electron is a cross-platform desktop GUI application development framework based on Web front-end technology. The Electron can call the scaffold tool, the Git tool, the npm tool to accomplish the creation of a project, the installation of dependencies, the pulling and pushing of business codes to a remote warehouse. The Electron can also interact with the operating system, for example, open a file system to create a directory, and the Electron can also perform operations such as reading, deleting, copying and modifying local files.

In the method of the embodiment of the present disclosure, the user interaction interface 310 may be developed and obtained by utilizing Electron technology, and the user interaction interface 310 may provide the first user interaction interface and the second user interaction interfaces of the respective stages of the embodiment of the present disclosure. The user interface 310 may guide the developer to advance the front-end development, and may receive the user interaction operation, generate a corresponding operation instruction in response to the user interaction operation, and transmit the operation instruction to the processing logic 320 developed based on the Electron technology.

In connection with FIG. 3, in one embodiment the M phases of the front-end development task may include at least one of a project creation phase, a dependency installation phase, a code generation phase, or a persistent deployment phase. Fig. 3 illustrates that all 4 stages are only exemplary, and in practical applications, setting, merging, or replacing stages may be performed as needed.

According to some embodiments of the present disclosure, a third party tool may be invoked to implement when performing some stages of task development. For example, when performing task development in the project creation phase, project creation can be performed by calling the locally installed scaffold tool 331. Alternatively, for example, when performing task development in the dependency installation phase, the front-end dependencies may be installed by calling the package manager npm tool 332. Alternatively, or for another example, when performing the tasks of the persistent deployment phase, the persistent deployment platform 335 may be invoked to perform specific deployment tasks.

According to other embodiments of the present disclosure, when performing some stages of task development, it can also be realized by developing the integrated corresponding functions by using Electron technology. For example, a code development environment can be developed by using Electron technology to perform development and debugging of the code. In some embodiments, an Electron technology can be used to develop an integrated code generator, and the code generator can have some Form components therein, and the rapid design of the Form components in the front-end page can be realized through a drag operation.

According to other embodiments of the present disclosure, after code is generated in the code generation phase, it may be submitted to remote repository 334. For example, the Git tool 333 may be invoked to push locally developed business code into the remote repository 334 after the code generation phase has completed generating the code. In this way, the persistent deployment platform 335 may read code from the remote store 334 after the persistent deployment phase is invoked.

According to some embodiments of the present disclosure, in the project creation phase, a project may also be created by pulling (pull) code from the business code shared in the remote repository to the local via the Git tool 333.

FIG. 4 schematically shows a user interaction interface diagram of a project creation phase according to an embodiment of the present disclosure.

As shown in FIG. 4, the user interaction interface 400 includes a first user interaction interface 410 and a second user interaction interface 420 of the project creation phase.

In this embodiment, the first user interaction interface 410 is located on the left side of the interface, wherein the first user interaction interface 410 has a project creation button, a dependent installation button, a code generation button, and a persistent deployment button exposed therein. Wherein in the first user interaction interface 410 the project creation button is in a selected state and correspondingly on the right side of the user interaction interface 400 a second user interaction interface 420 of the project creation phase is presented.

The second user interface 420 of the project creation phase includes a catalog selection area 421 and a project initialization mode selection control 422.

In one embodiment, the project initialization mode selection control 422 can include at least one of a create project button, a copy project button, or a clone project button (all three buttons shown schematically in FIG. 4).

The catalog selection area 421 may be configured with catalog selection, item catalog information display, catalog creation control, and the like as needed, and different control interaction modes may be different, for example, clicking the catalog selection control may provide pop-up to allow the user to select catalog information, and the like.

In conjunction with fig. 4, when task development in the project creation phase is performed in operation S230, a local file system may be called to select a root directory of a project for developing a front-end development task in response to an operation of a user in the directory selection area 421. And then responding to the operation that the user selects the project initialization mode from the project initialization mode selection control, and creating a new project for developing the front-end development task under the root directory according to the project initialization mode selected by the user.

Different project creation logic can be triggered by different project initialization modes. For example, when the user selects the create project button, a locally installed scaffold tool may be invoked to create a new project. For another example, when the user selects the copy item button, the local item file selected by the user is copied under the root directory as a new item. For another example, when the user selects the clone project button, a locally installed distributed version controller Git tool is called to pull the service code from the remote repository to the root directory as a new project, wherein the service code in the remote repository is the service code of other front-end development tasks waiting to be deployed to the server.

FIG. 5 schematically illustrates a user interaction interface diagram dependent on an installation phase according to an embodiment of the disclosure.

As shown in FIG. 5, the user interaction interface 500 includes a first user interaction interface 510 and a second user interaction interface 520 that depends on the installation phase.

In this embodiment, the first user interaction interface 510 is located on the left side of the interface, wherein the first user interaction interface 510 has a project creation button, a dependent installation button, a code generation button, and a persistent deployment button exposed therein. Wherein the dependent installation button is in a selected state in the first user interaction interface 510, and correspondingly a second user interaction interface 520 with a dependent installation phase is presented on the right side of the user interaction interface 500.

The second user interface 520 of the dependent install phase may include a file directory selection area 521 and a dependent install button 522. The file directory selection area 521 may include a directory selection control and the like, and may select a dependent file or the like that needs to be installed in the front-end development task according to a user operation.

In connection with fig. 5, when performing task development in the dependent mount phase in operation S230, a local file system may be invoked based on a user operation in the file directory selection area 521 to enable the user to select a dependency to be mounted using the local file system, and then in response to the user operation of the dependent mount button 522, the local package manager npm tool may be invoked to perform an npm intall dependent mount command for dependent mounting via the npm tool.

In some embodiments, the dependency list 523 may be further included in the second user interface 520. The dependency list 523 may list information of all the installed dependencies, such as the names and/or versions of the dependencies. Therefore, the installation condition of the dependence can be checked and confirmed by the developer.

Still further, according to some embodiments of the present disclosure, an operation column 5231 may also be included in the dependency list 523. The operation column 5231 is used for receiving an update operation or a delete operation of a user on a dependency shown in the dependency list, and facilitates management of the dependency by a developer, for example, updating a dependent version, or deleting an unnecessary dependency or a low-level dependency, and the like.

The embodiment of the present disclosure can provide a visualization management of the dependency through the dependency list 523, and compared with a non-visualization situation in the dependency installation process in the prior art, the embodiment of the present disclosure can effectively provide a dependency management function, and improve the front-end development efficiency.

FIG. 6 schematically shows a user interaction interface diagram of a code generation phase according to an embodiment of the present disclosure.

As shown in fig. 6, the user interaction interface 600 includes a first user interaction interface 610 and a second user interaction interface 620 of the code generation phase.

In this embodiment, the first user interaction interface 610 is located on the left side of the interface, wherein the first user interaction interface 610 has a project creation button, a dependent installation button, a code generation button, and a persistent deployment button exposed therein. Wherein the code generation button is in a selected state in the first user interaction interface 610, and correspondingly the second user interaction interface 620 with the code generation phase is shown on the right side of the user interaction interface 600.

According to an embodiment of the present disclosure, the second user interaction interface 620 of the code generation phase may include a component selection area 621 and a page splicing area 622, wherein at least one form component (e.g., form component) is integrated in the component selection area 621.

Therefore, when the task development in the code generation stage is performed in operation S230, the form component selected by the user in the component selection area 621 may be dragged to the page splicing area 620 through the drag operation on the form component, so as to be combined into a page style. And then after the design of the page style is finished, generating a service code of the front-end development task based on the designed page style according to the user instruction.

The component selection area 621 and the page splicing area 622 can use a code generation function (for example, a code generator) developed by Electron, and can help developers to quickly design webpages, improve the reuse rate of common codes, and improve the front-end development efficiency.

Of course, it will be appreciated that the contents of the second user interaction interface 620 during the code generation phase of FIG. 6 are merely exemplary. In some embodiments, a code development environment may be provided in the second user interaction interface 620 of the code generation phase, which may include tools such as a code editor, compiler, debugger, and/or graphical user interface, for code editing and debugging by a developer as needed.

FIG. 7 schematically shows a schematic view of a user interaction interface for a continuous deployment phase according to an embodiment of the present disclosure.

As shown in FIG. 7, the user interaction interface 700 includes a second user interaction interface 720 of the first user interaction interface 710 for the deployment phase.

In this embodiment, the first user interaction interface 710 is located on the left side of the interface, wherein the first user interaction interface 710 has a project creation button, a dependent installation button, a code generation button, and a persistent deployment button exposed therein. Wherein the generation persistence button is in a selected state in the first user interaction interface 710, and correspondingly the second user interaction interface 720 with a persistent deployment phase is shown on the right side of the user interaction interface 700.

The second user interface 720 for the continuous deployment phase may include a deployment information configuration control 721 and a one-key deployment button 722. Deployment information configuration controls 721 may include, for example, a file selection area, an environment selection drop-down box, or a branch selection drop-down box, where different controls are used to set different dimensions of configuration information.

Therefore, in operation S230, when task development is performed in the continuous deployment phase, the user deployment configuration of the front-end development task by the user may be received through the deployment information configuration control 721, and then in response to the user operating the one-key deployment button 722, the continuous deployment platform is invoked to deploy the service code of the front-end development task to the server according to the user deployment configuration.

According to some embodiments of the present disclosure, the continuous deployment platform may read code from a remote repository while deploying the code. Therefore, before the continuous deployment stage, after the business code development of the front-end development task is completed, a local distributed version controller Git tool can be called to push the business code of the front-end development task to a remote warehouse. In one embodiment, submission of code to a remote repository may be triggered at the same time that code generation is complete during the code generation phase. In other embodiments, a code submission phase may be added between the code generation phase and the continued deployment phase, and then the developer is prompted to submit the code during the code submission phase. Therefore, after the user operates the one-key deployment button 722, a code deployment interface provided by the continuous deployment platform is called, so that the business code of the front-end development task is read from the remote warehouse through the continuous deployment platform, packaged and deployed to the server.

According to an embodiment of the present disclosure, the deployment progress information may also be presented to the user during the deployment process in the second user interface 720.

FIG. 8 schematically illustrates a user interaction timing diagram in a front-end development method according to another embodiment of the disclosure.

With reference to fig. 8, according to the embodiment of the present disclosure, an automation tool 801 for front-end task full-flow development may be developed based on Electron technology to implement the front-end development method of the embodiment of the present disclosure. The automation tool 801 may integrate four core function modules, namely, project creation, dependent installation, code generation, and persistent deployment. Developers can complete the whole development process full life cycle automatic management through the visual operation in the automatic tool 801, the development process complexity is reduced, various tools do not need to be switched, and the development efficiency is greatly improved.

Specifically, the user interaction timing diagram of the automation tool 801 shown in FIG. 8 may include steps S1-S10. The user interaction interfaces in the automation tool 801 in the stages of project creation, dependent installation, code generation and continuous deployment may refer to fig. 4-7.

First, in step S1, a file directory initialization item is selected. The developer clicks the left menu bar create item button and the right interface appears with a file directory selection area and three buttons of create item, copy item, clone item (see fig. 4). The first step automation tool 801 selects the root directory of the new project to be generated by Electron calls to the local file system and the second step creates the new project by one of the three buttons create project, copy project, clone project.

Creating a project, copying a project, cloning a project are three different ways of creating a new project. The new project creating button is clicked, new project configuration information popup can appear, project names, project descriptions and the like can be input, project templates of different styles can be selected, the determined automation tool 801 is clicked to call a scaffold tool integrated in the tool to execute a project creating command, and a new project is generated under the file directory selected in the first step. Clicking a copy button, displaying an item catalog selection popup, selecting an item to be copied, and after clicking to determine, reading and copying the item to a file in the local file catalog selected in the first step by the automation tool 801 through an Electron to serve as a new item. Clicking to clone a new project can generate a cloned project information popup, inputting the address and branch name of a remote warehouse connected through a Git tool in the project, clicking to determine, the automation tool 801 can call the Git tool installed locally and globally to execute a code cloning command, and pulling a corresponding code to a file directory selected in the first step to serve as the new project.

Then, in step S2, when the item is initialized, the user may be fed back information that the item is initialized.

Next, in step S3, the dependency is installed. After the item initialization is completed, the left menu bar dependency installation button is clicked, and the right interface has a file directory selection area, a one-click installation button and a dependency list (refer to fig. 5). The developer may use the automation tool 801 to select items to install on the dependencies by invoking the local file system via Electron. Then click the one-click install button, the automation utility 801 invokes the npm utility for local global install, executes the npm intoll dependent install command, and performs the dependent install on the project.

The dependency list is a dependency management tool provided by the automation tool 801. After the item dependency is installed by one key, all installed operation dependencies and development dependencies are displayed in a dependency list, and an operation bar is arranged on the right side of the dependency list. Dependence management can be performed through the operation bar, if a certain version of the installed dependence is selected and clicked for installation, the automation tool 801 executes an npm intoll xxx @ version dependence installation command, updates the version of the installed dependence, or clicks a delete button, the automation tool 801 executes an npm unintulall command, and deletes the dependence.

Then, in step S4, the information that the dependent installation is completed is fed back to the user.

Next, at step S5, depending on the installation, the project may be opened directly in the automation tool 801 for code development. The automation tool 801 may provide a code generator, click the left menu bar code generator button, and the right interface presents a component selection area and a page stitching area (see FIG. 6). The automatic tool 801 code generator integrates simple Form components realized by Electron, developers can drag the components to a page splicing area in a dragging mode to combine the components into a page style which is required to be developed, finally, a code generation button is clicked, a file selector is popped up, a code storage path is selected, a determination button is clicked, and then service codes which can be directly used by the developers are generated under a corresponding directory.

Then, in step S6, it is determined that the code development is completed based on the confirmation operation of the developer.

Next, at step S7, the code is submitted to the remote repository. After the code is developed, the Git command is executed by a command line tool integrated by the automation tool 801, and the code is submitted to a remote repository.

Then, in step S8, the information that the code was submitted is fed back to the user.

Next, in step S9, deployment continues. After the code is submitted, the left menu bar continuous deployment button is clicked, and the right interface has a file selection area, an environment selection drop-down box, a branch selection drop-down box and a one-key deployment button (refer to fig. 7). The developer can use the automation tool 801 to call the local file system through the Electron to select a project to be deployed, select an environment and a branch, click one-key deployment, and the automation tool 801 calls a code deployment API provided by the continuous deployment platform, packages the code and uploads the code to the target server to complete the deployment operation. The persistent deployment platform may be, for example, a DOS platform. In the prior art, because the front-end development task is executed in different tools in a decentralized manner, developers generally do not have the right to log in the DOS platform for code deployment, and usually limited personnel need to be informed to log in the DOS platform for code packaging deployment, so that the efficiency is extremely low. In contrast, in the scheme of the application, the automation tool 801 calls the logic of the DOS platform to be encapsulated into the back-end logic, and developers can call the DOS platform to deploy codes through triggering operation in the automation tool 801, so that the deployment efficiency is improved.

Then, in step S10, after the deployment is completed, the automation tool 801 feeds back the specific deployment information of the developer, and the process ends.

The front-end development method of the embodiment of the disclosure can enable developers to realize full-flow visualization operation from project creation, dependency installation, code development, code packaging to continuous deployment in the automation tool 801.

Moreover, the operation flow of the front-end development task can be simplified through visual operation, and the operation complexity is reduced. Developers can obtain flow progress information in real time, research and development progress is controlled constantly, and automatic management of the whole life cycle of the research and development process is achieved.

Meanwhile, by providing functions of project cloning, dependence management, code generators and the like, the project reusability is improved, the problem of incompatibility of dependent versions is solved, the development code amount is reduced, and the research and development efficiency is improved.

Fig. 9 schematically shows a block diagram of a front-end development apparatus 900 according to an embodiment of the present disclosure.

As shown in fig. 9, the front-end development apparatus 900 according to this embodiment may include a user interaction module 910 and a development module 920.

The user interaction module 910 may be used to provide a user interaction interface in the front-end development task, receive the interaction operation of the user, and feed back the result of the interaction operation to the user. According to an embodiment of the present disclosure, the user interaction module 910 may be used to perform operations S210, S220, and S240, for example.

Specifically, the user interaction module 910 may be configured to display a first user interaction interface, where the first user interaction interface includes M controls in one-to-one correspondence with M stages included in a full flow of the front-end development task, where the full flow of the front-end development task includes a whole flow from project creation of the front-end development task to deployment of a business code developed in the front-end development task to the server, where M is an integer greater than 1.

Further, the user interaction module 910 may be further configured to, in response to a selection operation on each control of the M controls, display a second user interaction interface of the current stage corresponding to the selected control, where the second user interaction interface of the current stage is used to guide the user to perform task development of the current stage.

Furthermore, the user interaction module 910 may be further configured to feed back, to the user, information of the completion of the development of the front-end development task after the development of all the tasks in the M phases is completed.

The development module 920 may be configured to perform task development of the current stage based on user interaction in the second user interaction interface of the current stage. According to an embodiment of the present disclosure, the development module 920 may perform, for example, operation S230.

According to some embodiments of the present disclosure, the M phases involved in the full flow of the front-end development task may include at least one of a project creation phase, a dependent installation phase, a code generation phase, or a persistent deployment phase. Accordingly, the development module 920 can include at least one of a project creation module 921, a dependency installation module 922, a code generator 923, or an on-going deployment module 924.

In the project creation phase, the second user interaction interface includes a catalog selection area, and a project initialization mode selection control (refer to fig. 4). The project creation module 921 may be configured to, in response to an operation by a user in the directory selection area, invoke the local file system to select a root directory for developing a project of the front-end development task; and responding to the operation that the user selects the project initialization mode from the project initialization mode selection control, and creating a new project for developing the front-end development task under the root directory according to the project initialization mode selected by the user.

In the dependent installation phase, the second user interface may include a file directory selection area and a dependent installation button (refer to fig. 5). The dependency installation module 922 may be used to: calling a local file system based on the operation of a user in the file directory selection area so that the user selects the dependence to be installed by using the local file system; and in response to user operation of the dependent install button, invoking the local package manager npm tool to execute the npm intall dependent install command for dependent installation via the npm tool.

According to another embodiment of the present disclosure, a dependency list is further included in the second user interface of the dependency installation phase (refer to fig. 5). The dependency installation module 922 may also be used to list information for all the dependencies that have been installed via a dependency list. According to another embodiment of the present disclosure, the dependency list further includes an action bar. The dependency installation module 922 can also be used to receive an update operation or a delete operation of a user on a dependency shown in the dependency list through the operation bar.

In the code generation phase, the second user interface includes a component selection area and a page splicing area (refer to fig. 6), wherein the component selection area is integrated with at least one form component. The code generator 923 is used for dragging the form components selected by the user in the component selection area to the page splicing area based on the dragging operation of the user on the form components in the code generation stage to combine the form components into a page style; and after the design of the page style is finished, generating a business code of the front-end development task based on the designed page style.

In the continuous deployment phase, the second user interface includes a deployment information configuration control and a one-key deployment button (refer to fig. 7). The persistent deployment module 924 may be configured to receive, via the deployment information configuration control, a user deployment configuration of the user for the front-end development task; and responding to a one-key deployment button operated by a user, and calling the continuous deployment platform to deploy the business codes of the front-end development tasks to the server according to the user deployment configuration.

According to other embodiments of the present disclosure, the development module 920 may further include a code sharing module. The code sharing module can be used for calling a local distributed version controller Git tool to push the service codes of the front-end development tasks to a remote warehouse before the continuous deployment stage and after the service codes of the front-end development tasks are developed. The persistent deployment module 924 may be configured to call a code deployment interface provided by the persistent deployment platform, so as to read the service code of the front-end development task from the remote repository through the persistent deployment platform, and package the service code and deploy the service code to the server.

According to the embodiment of the present disclosure, the front-end development apparatus 900 may be used to implement the front-end development method described with reference to fig. 2 to 8, provide a full-flow and automatic management platform for front-end development, reduce the complexity of the front-end development flow, and improve the front-end development efficiency without switching various tools by a user.

According to an embodiment of the present disclosure, any of the user interaction module 910, the project creation module 921, the dependency installation module 922, the code generator 923, the persistent deployment module 924, or the code sharing module may be combined into one module to be implemented, or any one of them may be split into a plurality of modules. Alternatively, at least part of the functionality of one or more of these modules may be combined with at least part of the functionality of the other modules and implemented in one module. According to an embodiment of the present disclosure, at least one of the user interaction module 910, the project creation module 921, the dependency installation module 922, the code generator 923, the persistent deployment module 924, or the code sharing module may be implemented at least in part as a hardware circuit, such as a Field Programmable Gate Array (FPGA), a Programmable Logic Array (PLA), a system on a chip, a system on a substrate, a system on a package, an Application Specific Integrated Circuit (ASIC), or by any other reasonable manner of integrating or packaging a circuit, or by any one of three implementations of software, hardware, and firmware, or by a suitable combination of any of them. Alternatively, at least one of the user interaction module 910, the project creation module 921, the dependent installation module 922, the code generator 923, the persistent deployment module 924, or the code sharing module may be implemented, at least in part, as a computer program module that, when executed, may perform a corresponding function.

Fig. 10 schematically shows a block diagram of an electronic device 1000 adapted to implement a front-end interaction method according to an embodiment of the present disclosure.

As shown in fig. 10, an electronic device 1000 according to an embodiment of the present disclosure includes a processor 1001 that can perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM)1002 or a program loaded from a storage section 1008 into a Random Access Memory (RAM) 1003. Processor 1001 may include, for example, a general purpose microprocessor (e.g., a CPU), an instruction set processor and/or associated chipset, and/or a special purpose microprocessor (e.g., an Application Specific Integrated Circuit (ASIC)), among others. The processor 1001 may also include onboard memory for caching purposes. The processor 1001 may include a single processing unit or multiple processing units for performing different actions of a method flow according to embodiments of the present disclosure.

In the RAM 1003, various programs and data necessary for the operation of the electronic apparatus 1000 are stored. The processor 1001, ROM 1002, and RAM 1003 are connected to each other by a bus 1004. The processor 1001 performs various operations of the method flow according to the embodiments of the present disclosure by executing programs in the ROM 1002 and/or the RAM 1003. Note that the programs may also be stored in one or more memories other than the ROM 1002 and the RAM 1003. The processor 1001 may also perform various operations of the method flows according to embodiments of the present disclosure by executing programs stored in the one or more memories.

Electronic device 1000 may also include an input/output (I/O) interface 1005, the input/output (I/O) interface 1005 also being connected to bus 1004, according to an embodiment of the present disclosure. Electronic device 1000 may also include one or more of the following components connected to I/O interface 1005: an input section 1006 including a keyboard, a mouse, and the like; an output section 1007 including a display such as a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, and a speaker; a storage portion 1008 including a hard disk and the like; and a communication section 1009 including a network interface card such as a LAN card, a modem, or the like. The communication section 1009 performs communication processing via a network such as the internet. The driver 1010 is also connected to the I/O interface 1005 as necessary. A removable medium 1011 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 1010 as necessary, so that a computer program read out therefrom is mounted into the storage section 1008 as necessary.

The present disclosure also provides a computer-readable storage medium, which may be contained in the apparatus/device/system described in the above embodiments; or may exist separately and not be assembled into the device/apparatus/system. The computer-readable storage medium carries one or more programs which, when executed, implement the method according to an embodiment of the disclosure.

According to embodiments of the present disclosure, the computer-readable storage medium may be a non-volatile computer-readable storage medium, which may include, for example but is not limited to: a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present disclosure, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. For example, according to embodiments of the present disclosure, a computer-readable storage medium may include the ROM 1002 and/or the RAM 1003 described above and/or one or more memories other than the ROM 1002 and the RAM 1003.

Embodiments of the present disclosure also include a computer program product comprising a computer program containing program code for performing the method illustrated in the flow chart. When the computer program product runs in a computer system, the program code is used for causing the computer system to realize the front-end development method provided by the embodiment of the disclosure.

The computer program performs the above-described functions defined in the system/apparatus of the embodiments of the present disclosure when executed by the processor 1001. The systems, apparatuses, modules, units, etc. described above may be implemented by computer program modules according to embodiments of the present disclosure.

In one embodiment, the computer program may be hosted on a tangible storage medium such as an optical storage device, a magnetic storage device, or the like. In another embodiment, the computer program may also be transmitted in the form of a signal on a network medium, distributed, downloaded and installed via the communication part 1009, and/or installed from the removable medium 1011. The computer program containing program code may be transmitted using any suitable network medium, including but not limited to: wireless, wired, etc., or any suitable combination of the foregoing.

In such an embodiment, the computer program may be downloaded and installed from a network through the communication part 1009 and/or installed from the removable medium 1011. The computer program performs the above-described functions defined in the system of the embodiment of the present disclosure when executed by the processor 1001. The systems, devices, apparatuses, modules, units, etc. described above may be implemented by computer program modules according to embodiments of the present disclosure.

In accordance with embodiments of the present disclosure, program code for executing computer programs provided by embodiments of the present disclosure may be written in any combination of one or more programming languages, and in particular, these computer programs may be implemented using high level procedural and/or object oriented programming languages, and/or assembly/machine languages. The programming language includes, but is not limited to, programming languages such as Java, C + +, python, the "C" language, or the like. The program code may execute entirely on the user computing device, partly on the user device, partly on a remote computing device, or entirely on the remote computing device or server. In the case of a remote computing device, the remote computing device may be connected to the user computing device through any kind of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or may be connected to an external computing device (e.g., through the internet using an internet service provider).

The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.

Those skilled in the art will appreciate that various combinations and/or combinations of features recited in the various embodiments and/or claims of the present disclosure can be made, even if such combinations or combinations are not expressly recited in the present disclosure. In particular, various combinations and/or combinations of the features recited in the various embodiments and/or claims of the present disclosure may be made without departing from the spirit or teaching of the present disclosure. All such combinations and/or associations are within the scope of the present disclosure.

The embodiments of the present disclosure have been described above. However, these examples are for illustrative purposes only and are not intended to limit the scope of the present disclosure. Although the embodiments are described separately above, this does not mean that the measures in the embodiments cannot be used in advantageous combination. The scope of the disclosure is defined by the appended claims and equivalents thereof. Various alternatives and modifications can be devised by those skilled in the art without departing from the scope of the present disclosure, and such alternatives and modifications are intended to be within the scope of the present disclosure.

Claims

1. A front-end development method, comprising:

displaying a first user interaction interface, wherein the first user interaction interface comprises M controls in one-to-one correspondence with M stages contained in a full flow of a front-end development task, the full flow of the front-end development task comprises a whole flow from project creation of the front-end development task to deployment of a business code developed in the front-end development task to a server, and M is an integer greater than 1;

responding to the selection operation of each control in the M controls, and displaying a second user interaction interface of the current stage corresponding to the selected control, wherein the second user interaction interface of the current stage is used for guiding a user to carry out task development of the current stage;

performing task development of the current stage based on user interaction operation in the second user interaction interface of the current stage; and

and after the tasks in the M stages are all developed, feeding back information of the development completion of the front-end development task to a user.

2. The method of claim 1, wherein the M phases include at least one of a project creation phase, a dependent installation phase, a code generation phase, or a persistent deployment phase.

3. The method of claim 2, wherein the method is implemented using Electron technology; then, the performing task development of the current stage based on the user interaction operation in the second user interaction interface of the current stage includes:

calling a third-party tool to perform task development of the current stage;

wherein,

when the current stage is the project creation stage, the third party tool comprises a locally installed scaffold tool;

when the current phase is the dependent installation phase, the third party tool comprises a package manager npm tool; or

When the current stage is the continuous deployment stage, the third-party tool comprises a continuous deployment platform.

4. The method of claim 2, wherein the second user interaction interface of the project creation phase comprises a catalog selection area, and a project initialization mode selection control; wherein, based on the user interaction operation in the second user interaction interface of the project creation phase, performing the task development of the project creation phase comprises:

in response to an operation of a user in the directory selection area, calling a local file system to select a root directory of a project for developing the front-end development task; and

and responding to the operation that the user selects the project initialization mode from the project initialization mode selection control, and creating a new project for developing the front-end development task under the root directory according to the project initialization mode selected by the user.

5. The method of claim 4, wherein the project initialization mode selection control comprises at least one of a create project button, a copy project button, or a clone project button; wherein creating a new project for developing the front-end development task under the root directory according to a project initialization manner selected by a user comprises:

when the user selects the create project button, calling a locally installed scaffold tool to create the new project;

when the user selects the copy item button, copying the local item file selected by the user to the root directory to be used as the new item; or

When the user selects the clone project button, a locally installed distributed version controller Git tool is called to pull service codes from a remote warehouse to the root directory to serve as the new project, wherein the service codes in the remote warehouse are the service codes of other front-end development tasks waiting to be deployed to a server.

6. The method of claim 2, wherein the second user interface of the dependent installation phase includes a file directory selection area and a dependent installation button; wherein, based on the user interaction operation in the second user interaction interface of the dependent installation phase, the task development of the dependent installation phase comprises:

calling a local file system based on the operation of a user in the file directory selection area so that the user selects the dependence needing to be installed by using the local file system; and

in response to user operation of the dependent install button, the local package manager npm tool is invoked to execute an npmintall dependent install command for dependent installation via the npm tool.

7. The method of claim 6, wherein the second user interface of the dependency installation phase further comprises a dependency list for listing information of all installed dependencies.

8. The method of claim 7, wherein the dependency list further comprises an operation bar for receiving a user update operation or a delete operation on a dependency shown in the dependency list.

9. The method of claim 2, wherein the second user interface of the code generation phase comprises a component selection area and a page stitching area, wherein the component selection area is integrated with at least one form component; wherein, based on the user interaction operation in the second user interaction interface of the code generation phase, the task development of the code generation phase comprises:

based on the dragging operation of the user on the form components, dragging the form components selected by the user in the component selection area to the page splicing area to form a page style; and

and after the design of the page style is finished, generating a service code of the front-end development task based on the designed page style.

10. The method of claim 2, wherein the second user interface of the continuous deployment phase comprises a deployment information configuration control and a one-key deployment button; wherein, based on the user interaction operation in the second user interaction interface of the continuous deployment phase, performing task development of the continuous deployment phase comprises:

receiving user deployment configuration of the front-end development task by a user through the deployment information configuration control; and

and responding to the operation of the one-key deployment button by the user, and calling a continuous deployment platform to deploy the business code of the front-end development task to the server according to the user deployment configuration.

11. The method of claim 10, wherein,

the method further comprises the following steps: before the continuous deployment stage, after the business code development of the front-end development task is completed, calling a local distributed version controller Git tool to push the business code of the front-end development task to a remote warehouse;

then, the invoking the continuous deployment platform to deploy the service code of the front-end development task to the server according to the user deployment configuration includes:

and calling a code deployment interface provided by the continuous deployment platform to read the service code of the front-end development task from the remote warehouse through the continuous deployment platform, and packaging and deploying the service code to a server.

12. The method of claim 10, wherein the deployment progress information is presented to a user during deployment.

13. A front-end development apparatus, comprising:

a user interaction module to:

responding to the selection operation of each control in the M controls, and displaying a second user interaction interface of the current stage corresponding to the selected control, wherein the second user interaction interface of the current stage is used for guiding a user to carry out task development of the current stage; and

after the tasks of the M stages are developed, feeding back information of the development completion of the front-end development task to a user;

and the development module is used for developing the task at the current stage based on the user interaction operation in the second user interaction interface at the current stage.

14. An electronic device, comprising:

one or more processors;

one or more memories for storing one or more programs,

wherein the one or more programs, when executed by the one or more processors, cause the one or more processors to perform the method of any of claims 1-12.

15. A computer readable storage medium having stored thereon executable instructions which, when executed by a processor, cause the processor to perform the method of any one of claims 1 to 12.