CN110968302B

CN110968302B - Front-end development method and device and electronic equipment

Info

Publication number: CN110968302B
Application number: CN201811141310.XA
Authority: CN
Inventors: 陈钦辉; 张哲�
Original assignee: Beijing Didi Infinity Technology and Development Co Ltd
Current assignee: Beijing Didi Infinity Technology and Development Co Ltd
Priority date: 2018-09-28
Filing date: 2018-09-28
Publication date: 2024-01-05
Anticipated expiration: 2038-09-28
Also published as: CN110968302A

Abstract

The embodiment of the invention provides a front-end development method, a front-end development device and electronic equipment, wherein the front-end development method comprises the following steps: running a tool carrier starting command, and displaying options corresponding to each engineering module in the tool carrier, wherein each engineering module corresponds to one functional unit of a front-end page to be developed; after the selection operation of the option of any target engineering module in each engineering module is obtained, monitoring whether a corresponding updating code exists on a page corresponding to the target engineering module, wherein the updating code is a local updating code or an online updating code; and if the target page exists, rendering and constructing the target page by using the updating code.

Description

Front-end development method and device and electronic equipment

Technical Field

The present invention relates to the field of computer technologies, and in particular, to a front end development method, a front end development device, and an electronic device.

Background

In front-end daily development, there are many projects, which involve packing, running, construction of codes, and other development commands normally used on a daily basis, and scaffolds, but these are often scattered in each project and have different implementations. There is a threshold for new people and old people to accept new projects, and the update and maintenance of the new people and old people are also a problem. In parallel development of a plurality of projects, repetitive operations with different behaviors are manually performed for a plurality of purposes.

Disclosure of Invention

Accordingly, an embodiment of the present invention is directed to a front-end development method, a front-end development device, and an electronic device.

In a first aspect, a front-end development method provided by an embodiment of the present invention includes:

running a tool carrier starting command, and displaying options corresponding to each engineering module in the tool carrier, wherein each engineering module corresponds to one functional unit of a front-end page to be developed;

after the selection operation of the option of any target engineering module in each engineering module is obtained, monitoring whether a corresponding updating code exists on a page corresponding to the target engineering module, wherein the updating code is a local updating code or an online updating code;

and if the target page exists, rendering and constructing the target page by using the updating code.

As an alternative embodiment, the step of rendering the build target page using the update code includes:

reading a page template;

and rendering the updating code into the page template to construct a target page.

As an optional implementation manner, the step of monitoring whether the corresponding page of the target engineering module has the corresponding update code includes:

intercepting an interconnected protocol between static resource networks in a page corresponding to the target engineering module;

Matching the protocol interconnected between the static resource networks with a configuration file of the front end of the target and a localized update field, and judging whether a field matched with the protocol interconnected between the static resource networks exists or not;

if so, searching whether available local updating codes exist in the local resources.

As an alternative embodiment, the step of searching whether available local update codes exist in the local resource includes:

and replacing a protocol interconnected between the static resource networks of the page template with a local static resource service address, and matching the local static resource service address with the configuration file of the target front end in the static resource proxy layer service to find a local updating code corresponding to the target engineering module.

and monitoring whether an online updating code corresponding to the target engineering module exists in the server.

Reading the packing configuration corresponding to the target engineering module;

and rendering the updated codes according to the packing configuration to construct a target page.

As an alternative embodiment, the names of the individual engineering modules are named using a preset naming rule.

As an alternative embodiment, before the step of rendering the build target page using the update code, the method includes:

if the local updating code and the online updating code are monitored, selecting one of the local updating code and the online updating code to be reserved as a reserved updating code according to a preset rule;

and using the reserved updating codes to cover another updating code.

As an optional implementation manner, the step of selecting one of the reservations as the reserved update code according to a preset rule includes:

acquiring a first time of the local update code and a second time of the online update code;

and comparing the first time with the second time, and selecting an update code with a shorter time interval than the current time as a reserved update code.

The local update code is selected as a reserved update code.

acquiring a distinguishing code of the local updating code and the online updating code;

displaying the distinguishing codes;

a selection operation is received to select to retain one of the update codes as the retained update code.

As an optional implementation manner, after the step of monitoring whether the corresponding page of the target engineering module has the corresponding update code, the method includes:

and if the local updating code exists, uploading the local updating code to a server.

As an alternative embodiment, after the step of uploading the local update code into a server, the method further comprises:

if the current online update code corresponding to the engineering module corresponding to the local update code exists in the server, acquiring and displaying the difference between the local update code and the current online update code;

receiving a selection operation of the local update code and the current online update code;

And reserving the local update code or the current online update code in the server according to the selection operation.

As an alternative embodiment, after the step of displaying options corresponding to each engineering module in the tool carrier by the running tool carrier start command, the method further includes:

operating the engineering subcommand to display a plurality of engineering templates;

receiving a selection operation for selecting the engineering templates to obtain a new engineering template;

providing a plurality of configuration references for configuring the newly-built engineering templates;

receiving configuration parameters input according to the configuration reference;

and configuring the newly-built engineering template according to the configuration parameters to obtain a newly-built engineering module.

As an alternative embodiment, the step of running the engineering subcommand and displaying the plurality of engineering templates includes:

after the engineering subcommand is operated, a target warehouse group is called through a designated interface, and all engineering templates under the target warehouse group are inquired;

displaying all the searched engineering templates.

Running a criteria sub-command to display a plurality of code templates;

receiving a selection operation of the plurality of code templates;

an object code template is provided for receiving the entered code in accordance with the selection operation.

As an alternative embodiment, after the step of receiving a selection operation of the plurality of code templates, the method further comprises:

judging whether a code configuration file corresponding to the target code template corresponding to the selection operation exists or not;

if not, creating a code configuration file corresponding to the target code template.

As an alternative embodiment, after the running tool carrier start command, the method further comprises:

displaying an identification code, wherein the identification code is used for being read by other terminals;

after detecting that the terminal reads the identification code, pushing the display interface of the tool carrier to the terminal.

receiving an input user account and a password;

and sending the user account and the password to a server to acquire related services interacted with the server.

In a second aspect, an embodiment of the present invention further provides a front-end development apparatus, including:

The starting module is used for running a tool carrier starting command, displaying options corresponding to each engineering module in the tool carrier, wherein each engineering module corresponds to one functional unit of a front-end page to be developed;

the monitoring module is used for monitoring whether a corresponding update code exists on a page corresponding to any target engineering module in the engineering modules after the selection operation of options of the target engineering module is acquired, wherein the update code is a local update code or an online update code;

and the updating module is used for rendering and constructing the target page by using the updating code if the updating code exists.

As an alternative embodiment, the updating module is further configured to:

reading a page template;

As an alternative embodiment, the monitoring module:

As an alternative embodiment, the monitoring module is further configured to:

As an alternative embodiment, the updating module is further configured to:

As an alternative embodiment, the apparatus comprises:

the selection module is used for selecting one of the local update codes and the online update codes to be reserved as a reserved update code according to a preset rule if the local update codes and the online update codes are monitored;

And the covering module is used for covering another updating code by using the reserved updating code.

As an alternative embodiment, the selection module is further configured to:

the local update code is selected as a reserved update code.

As an alternative embodiment, the selection module is further configured to:

displaying the distinguishing codes;

As an alternative embodiment, the apparatus comprises:

and the uploading module is used for uploading the local updating code to a server if the local updating code exists.

As an alternative embodiment, the device further comprises: and one module is selected for:

As an alternative embodiment, the device further comprises: the first newly-built module is used for:

As an alternative embodiment, the first newly created module is further configured to:

displaying all the searched engineering templates.

As an alternative embodiment, the device further comprises: providing a module for:

running a criteria sub-command to display a plurality of code templates;

Receiving a selection operation of the plurality of code templates;

As an alternative embodiment, the device further comprises: a creation module for:

As an alternative embodiment, the device further comprises: the pushing module is used for:

As an alternative embodiment, the device further comprises: a login module for:

receiving an input user account and a password;

In a third aspect, an embodiment of the present invention further provides an electronic device, including: the computer program comprises a memory for storing a computer program and a processor for reading and running the computer program from the memory to perform the above method.

In a fourth aspect, embodiments of the present invention also provide a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, performs the steps of the above-described method.

Compared with the prior art, the front-end development method, the front-end development device and the electronic equipment can be used for quickly constructing the page by monitoring whether the updated codes exist in the page corresponding to the engineering module, and each user does not need to process each group of updated codes respectively, so that the page construction efficiency can be improved.

In order to make the above objects, features and advantages of the present invention more comprehensible, embodiments accompanied with figures are described in detail below.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings that are needed in the embodiments will be briefly described below, it being understood that the following drawings only illustrate some embodiments of the present invention and therefore should not be considered as limiting the scope, and other related drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.

Fig. 1 is a schematic diagram of interaction between a server and an electronic device according to an embodiment of the present invention.

Fig. 2 is a block schematic diagram of an electronic device according to an embodiment of the present invention.

Fig. 3 is a schematic diagram of functional unit integration of a development application according to an embodiment of the present invention.

Fig. 4 is a flowchart of a front-end development method according to an embodiment of the present invention.

Fig. 5 is a partial flowchart of a front-end development method according to another embodiment of the present invention.

Fig. 6 is a partial flowchart of a front-end development method according to another embodiment of the present invention.

Fig. 7 is a partial flowchart of a front-end development method according to another embodiment of the present invention.

Fig. 8 is a schematic diagram of a functional module of a front-end development device according to an embodiment of the present invention.

Detailed Description

The following description of the embodiments of the present invention will be made clearly and completely with reference to the accompanying drawings, in which it is apparent that the embodiments described are only some embodiments of the present invention, but not all embodiments. The components of the embodiments of the present invention generally described and illustrated in the figures herein may be arranged and designed in a wide variety of different configurations. Thus, the following detailed description of the embodiments of the invention, as presented in the figures, is not intended to limit the scope of the invention, as claimed, but is merely representative of selected embodiments of the invention. All other embodiments, which can be made by a person skilled in the art without making any inventive effort, are intended to be within the scope of the present invention.

It should be noted that: like reference numerals and letters denote like items in the following figures, and thus once an item is defined in one figure, no further definition or explanation thereof is necessary in the following figures. Meanwhile, in the description of the present invention, the terms "first", "second", and the like are used only to distinguish the description, and are not to be construed as indicating or implying relative importance.

The inventor researches and discovers that in the front-end daily development, many projects exist, and all the projects involve the packing, running and construction of codes, other development commands which are normally used on every day, and some scaffolds, but the projects are scattered in each project and have different implementations, so that the whole technical stack of the whole team is not uniform, and the development flow is not uniform and clear. There is a threshold for new people and old people to accept new projects, and the update and maintenance of the new people and old people are also a problem. In parallel development of a plurality of projects, repetitive operations with different behaviors are manually performed for a plurality of purposes.

Based on the pain point scenes in development, the embodiment of the application can provide a tool with unified, efficient and localized development environment and development flow at the front end, and the tool integrates engineering visual display, page dynamic localized rendering, engineering intelligent dynamic packaging, one-key creation, updating, construction and pushing, and expandable template engineering initialization. The expandable template codes are initialized, packaging configuration scattered in each project and unified solutions for solving pain points are unified in a tool and maintained together, and unified development commands and development flows are output outwards. Based on the above description, the present application provides a number of embodiments to describe in more detail the solutions provided by the present application.

Example 1

The present embodiment provides an operating environment required for front-end development, and an electronic device for front-end development. The front-end development provided in this embodiment may be implemented locally using an electronic device; an online mode, i.e. a mode in which the electronic device interacts with the server, may also be used.

Fig. 1 is a schematic diagram illustrating interaction between an electronic device 100 and a server 200 according to an embodiment of the present invention. The server 200 is communicatively coupled to one or more electronic devices 100 for data communication or interaction via a network. The server 200 may be a web server, a database server, or the like. The electronic device 100 may be a personal computer (personal computer, PC), tablet, smart phone, personal digital assistant (personal digital assistant, PDA), or the like.

In this embodiment, the server 200 provides a service for an online development environment of the target front end. The electronic device 100 may log in the server 200 through a user account to obtain a service of an online development environment of a target front end provided by the server 200. In one embodiment, each user account may be correspondingly provided with a relevant authority, for example, the relevant authority may be a modification authority of a certain engineering module of the target front end. For example, the user account a of the electronic device 100 logs into the server 200 to obtain the service of the online development environment of the target front end. The authority of the user account A is the modification authority of the first engineering module. The electronic device 100 may perform the following operations on the related content in the first engineering module: uploading updated codes to the server 200, uploading function codes in the newly added first engineering module to the server 200, and the like, and performing code changing operation related to the first function module.

As shown in fig. 2, a block schematic diagram of the electronic device 100 is shown. The electronic device includes a front-end development device 110, a memory 111, a storage controller 112, a processor 113, a peripheral interface 114, an input-output unit 115, and a display unit 116. It will be appreciated by those of ordinary skill in the art that the configuration shown in fig. 2 is merely illustrative and is not limiting of the configuration of the electronic device 100. For example, electronic device 100 may also include more or fewer components than shown in FIG. 2, or have a different configuration than shown in FIG. 2.

The memory 111, the memory controller 112, the processor 113, the peripheral interface 114, the input/output unit 115 and the display unit 116 are electrically connected directly or indirectly to each other, so as to realize data transmission or interaction. For example, the components may be electrically connected to each other via one or more communication buses or signal lines. The front-end development device 110 includes at least one software function module that may be stored in the memory 111 in the form of software or firmware (firmware) or cured in an Operating System (OS) of the electronic apparatus 100. The processor 113 is configured to execute executable modules stored in a memory, such as software functional modules or computer programs included in the network line control device 110.

The Memory 111 may be, but is not limited to, a random access Memory (Random Access Memory, RAM), a Read Only Memory (ROM), a programmable Read Only Memory (Programmable Read-Only Memory, PROM), an erasable Read Only Memory (Erasable Programmable Read-Only Memory, EPROM), an electrically erasable Read Only Memory (Electric Erasable Programmable Read-Only Memory, EEPROM), etc. The memory 111 is configured to store a program, and the processor 113 executes the program after receiving an execution instruction, and a method executed by the electronic device 100 defined by the process disclosed in any embodiment of the present invention may be applied to the processor 113 or implemented by the processor 113.

The processor 113 may be an integrated circuit chip with signal processing capabilities. The processor 113 may be a general-purpose processor, including a central processing unit (Central Processing Unit, CPU for short), a network processor (Network Processor, NP for short), etc.; but also Digital Signal Processors (DSPs), application Specific Integrated Circuits (ASICs), field Programmable Gate Arrays (FPGAs) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components. The disclosed methods, steps, and logic blocks in the embodiments of the present invention may be implemented or performed. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like.

The peripheral interface 114 couples various input/output devices to the processor 113 and the memory 111. In some embodiments, the peripheral interface 114, the processor 113, and the memory controller 112 may be implemented in a single chip. In other examples, they may be implemented by separate chips.

The input-output unit 115 is used for providing input data to a user. The input/output unit 115 may be, but is not limited to, a mouse, a keyboard, and the like.

The display unit 116 provides an interactive interface (e.g., a user-operated interface) between the electronic device 100 and a user or is used to display image data to a user reference. In this embodiment, the display unit may be a liquid crystal display or a touch display. In the case of a touch display, the touch display may be a capacitive touch screen or a resistive touch screen, etc. supporting single-point and multi-point touch operations. Supporting single-point and multi-point touch operations means that the touch display can sense touch operations simultaneously generated from one or more positions on the touch display, and the sensed touch operations are passed to the processor for calculation and processing.

In this embodiment, a development application corresponding to the front-end development device 110 may be installed in the electronic apparatus 100. The development application is launched and a user interface for front-end development may be presented.

In this embodiment, the application may implement multiple functions in the front-end development process. As shown in fig. 3, fig. 3 is a schematic diagram of functional unit integration of a development application according to an embodiment of the present invention.

FIG. 3 illustrates a plurality of commands contained by the development application. The figure shows that the development application may provide a number of commands, including:

initializing a localized page and related code files according to an online page or a default;

star pull, obtaining update codes from a server to update local codes;

star push, uploading the locally updated codes to a server to update the server codes;

visualizing each engineering code, clicking to a page, and locally rendering the page, wherein static resources on which the page depends automatically find codes corresponding to local corresponding projects according to paths, and constructing the codes by using general packing configuration to output a target page;

star build, localized packing and outputting the compiled and output resource file to a relevant directory;

the star project is visualized, and a universal template project which can be used is selected for rapid construction of the project;

the star code, the visual optional template code, according to the configuration file data, begin to produce the personalized code segment.

By using the command, the relevant personnel for front-end development can be facilitated, the local development environment and development flow can be unified, and the development efficiency of the relevant personnel for front-end development is remarkably improved.

The development application program can be created, started, packed, constructed, updated and pushed according to different implementations of each engineering module at the front end. The development application program can uniformly realize, uniformly manage, uniformly expose, normalize and simplify the development flow. Further, the development application provides an exposed personalized configuration portal to meet the packaging configuration requirements of certain engineering personalities.

The development page may be subjected to at least two processes, a build process and a run process using the development application described above.

The construction process may include: engineering or code modules are constructed. As shown in FIG. 3, when constructing code modules, a generic code generator may be used to generate a code template, e.g., a template for a user to write code may be obtained by the handles engine. The handbars engine can be separated from javascript by html, and clearer codes can be written. When building engineering modules, a generic engineering generator in the diagram may be used to generate an engineering template, e.g., the engineering architecture of vue items may be generated using vue-cli in the diagram.

The running process may include loading a local resource service and a local page rendering service. The local resource service can provide a resource loading interface through a severmanager interface. The Severmanager interface may provide a plurality of package plug-ins, as shown in FIG. 3, and may include a plurality of weback-middleware plug-ins. Wherein the weback-middleware plug-in is used to reload the page. Wherein, the local resource service can also comprise a combo-server. The local resource service may further include a build file, which is used for storing data such as configuration rules. Among other things, the local page rendering services may include cmsgit and star cloud pages. Where the star cloud represents an example name of a page to be developed or updated.

It will be appreciated that the functional unit integration of the development application shown in fig. 3 is merely illustrative and not limiting of the development application.

The development application program in the embodiment can automatically find the local corresponding engineering module through standardization of engineering catalog storage and matching of the request resource paths, and perform unified packaging output so as to display each engineering module through visualization after one command is operated. Further, the engineering module can be developed, updated and other operations can be performed by clicking any engineering module, and no other switching cost exists. Compared with the prior art that when a plurality of engineering modules are developed in parallel aiming at the front end, corresponding engineering needs to be opened continuously and manually, engineering is started and engineering is constructed to switch each node or type in development, the development application program provided by the embodiment of the application program can avoid troublesome operation that each engineering module needs to be opened manually.

The development application in this embodiment may provide localized development and rendering. The development application provides a set of commands to create, update, push, render the localized code. When the method is used, the localization code can be constructed through a simple command provided by the development application program, clicking is carried out on any page, and the page is automatically and locally rendered in a localization editor. Compared with the prior team page rendering, the development application program provided by the application program is used for visually editing codes in a browser and performing page rendering by calling the back-end service, so that the codes are inconvenient to write in the browser in the whole process, the back-end rendering of the pages is inconvenient, and the development application program itself depends on the back-end rendering service and is inconvenient to troubleshoot.

The development application program in the embodiment can quickly construct the command of the engineering module, and the command is quickly created when the corresponding engineering template is selected in a visual mode. Further, the development application may provide an engineering template list comprising a plurality of engineering templates, wherein the engineering template list is expandable, dynamically updated. When the engineering template list has general engineering templates to be extracted, the general engineering templates are established under the corresponding warehouse and can be used by related users. By the development application program in the embodiment, the problem that in the prior art, a front-end development process always needs to create a plurality of new projects, and the project directory structures are different, and the technical stacks are different, non-standard and non-uniform can be effectively solved.

The development application in this embodiment can quickly build the quality of the code module. By means of visualization, the code templates corresponding to the selections are quickly created when the selections are received. Further, the development application may provide a code template list including a plurality of code templates. The code template list is extensible and dynamically updated. Further, the development application provided in the embodiments of the present application may provide for the front-end development to write some common code often, or may abstract, through configuration, and then generate these common code to develop efficiently.

Example two

Fig. 4 is a flowchart of a front-end development method according to an embodiment of the invention. The specific flow shown in fig. 4 will be described in detail.

Step S301, a tool carrier starting command is operated, and options corresponding to all engineering modules in the tool carrier are displayed.

In this embodiment, each engineering module corresponds to a functional unit of the front-end page to be developed.

Step S302, after obtaining the selection operation of the option of any target engineering module in the engineering modules, monitors whether the corresponding page of the target engineering module has a corresponding update code.

In this embodiment, the update code is a local update code or an online update code.

In this embodiment, each engineering module may include multiple HTML (HyperText Markup Language, chinese called hypertext markup language), and click on an HTML to enter a localized rendering page.

Whether localized resources are needed or not can be judged by intercepting static resource url in the page. If localized resources are needed to be used, a local corresponding project can be found according to a preset path to construct and output.

If the update code exists, step S303 is performed. If not, the process ends.

And step S303, rendering and constructing a target page by using the updated codes.

In this embodiment, the tool carrier may be visually displayed in a display interface in the electronic device.

The step S302 includes: reading a page template; and rendering the updating code into the page template to construct a target page.

The page template can be pre-stored in the electronic equipment, and is read from a path through the setting when the page template needs to be used.

In step S303, online rendering page logic may be adopted, a local general page template is read, and the local update code, including the code segment of css/js/html/node, is rendered to the page template to implement the construction of the target page.

The step S302 includes: intercepting an interconnected protocol between static resource networks in a page corresponding to the target engineering module; matching the protocol interconnected between the static resource networks with a configuration file of the front end of the target and a localized update field, and judging whether a field matched with the protocol interconnected between the static resource networks exists or not; if so, searching whether available local updating codes exist in the local resources.

In this embodiment, the engineering module that needs to use the local resource to update may be a localization update field in the configuration file of the target front end to preset, and for example, the localization update field may be represented as a uselooacl field.

Further, if the matching is successful, the local update code can be found according to the path corresponding to the field on the matching, so as to further update.

The step S302 includes: and replacing a protocol interconnected between the static resource networks of the page template with a local static resource service address, and matching the local static resource service address with the configuration file of the target front end in the static resource proxy layer service to find a local updating code corresponding to the target engineering module.

As an alternative embodiment, the step S302 includes: and monitoring whether an online updating code corresponding to the target engineering module exists in the server.

The online update code is obtained from a server prior to building the target page.

As an alternative embodiment, the step S303 includes: reading the packing configuration corresponding to the target engineering module; and rendering the updated codes according to the packing configuration to construct a target page.

As an alternative embodiment, the names of the individual engineering modules are named using a preset naming rule. The preset naming rule may be set in advance by a person skilled in the art when setting an application program that needs to be used in the front-end development method in this embodiment.

As an alternative embodiment, after the running tool carrier start command, the method further comprises: displaying an identification code, wherein the identification code is used for being read by other terminals; after detecting that the terminal reads the identification code, pushing the display interface of the tool carrier to the terminal.

The mobile device can facilitate the user to check each functional module on the mobile device, and provides convenience for the user.

Furthermore, the method in this embodiment may further operate the packaged resource output differently in the corresponding engineering catalog, unlike the above-mentioned construction packaging performed when constructing the target page, where the static resource may be output to the build folder, where the static resource provided when constructing the target page is exposed in the form of an interface call.

In this embodiment, the resource path prefix of the asynchronous loading corresponding to the engineering output needs to be dynamic, and because the page runs in different environments, the domain name may be different, so that the function of splicing with the global resource path domain name may be reserved in the process of packaging and constructing.

After the running operation is monitored, the corresponding updating codes can be actively searched to realize packaging output, and the rapid construction of the target page can be realized.

Example III

The front-end development method provided by the application can provide codes for updating all engineering modules together on line and off line, and update codes exist for one engineering module for a plurality of electronic devices, or update codes exist for the electronic devices in a background server and local electronic devices, and can be reserved, and the reserved update codes cover other update codes. The method can effectively realize the development of the front end in an online mode, and further improves the front end development.

Referring to fig. 5, the front-end development method in the present embodiment further includes the following steps based on each flow of the front-end development method provided in the second embodiment.

Step S401, if the local update code and the online update code are monitored, selecting one of the local update code and the online update code to be reserved as the reserved update code according to a preset rule.

Step S402, using the reserved update code to cover another update code.

In this embodiment, the local update code and the online update code may be codes updated for the same engineering module.

In this embodiment, the preset rule may be a rule for selecting the latest update code; rules for selecting the update code selected by the user; it may also be an update code or the like that selects the electronic device currently operated by the user. Several optional preset rules are described in detail below.

The step S401 may be implemented by: acquiring a first time of the local update code and a second time of the online update code; and comparing the first time with the second time, and selecting an update code with a shorter time interval than the current time as a reserved update code.

For example, the first time of the local update code may be 10:25 today; second time of the online update code today 14:30. and if the online updating code is closer to the current time, reserving the online updating code and covering the local updating code.

The step S401 may be implemented by: the local update code is selected as a reserved update code.

The step S401 may be implemented by: acquiring a distinguishing code of the local updating code and the online updating code; displaying the distinguishing codes; a selection operation is received to select to retain one of the update codes as the retained update code.

The distinguishing codes of the local updating codes and the online updating codes can be displayed in the electronic equipment for reference of users, so that the users can compare the quality of the two versions according to the difference. Further, when the distinguishing code is actually the distinguishing code, a selection button can be displayed on a display interface of the electronic device, and after any button receives the clicking operation, the updating code corresponding to the button can be reserved.

When the update codes are arranged in the server and the electronic equipment, the confusion during use can be avoided by reserving one of the update codes, so that the front-end development on the line can be effectively implemented.

When the update codes of the same engineering module exist in the server and the electronic equipment, one of the update codes can be reserved in an alternative mode, and the other update code can be covered. Further, in the front-end development method in the embodiment of the present application, when the electronic device uploads the update code of an engineering module to the server, the above-mentioned step S401 and step S402 may be executed to implement the selection of the update code; the above-mentioned step S401 and step S402 may be executed to select the update code when the electronic device acquires the update code of a certain engineering module from the server.

The local updating code for updating a certain engineering module at the front end of the target exists in the electronic equipment, and the local updating code can be uploaded to a server, so that other electronic equipment can acquire the latest updating code conveniently, and the latest version of the front end of the target can be loaded.

Based on the above description, the front-end development method in the present embodiment includes: and if the local updating code exists, uploading the local updating code to a server.

In one embodiment, a push command may be provided in the development application to enable uploading of local update code into the server.

The front-end development method in this embodiment includes: if the current online update code corresponding to the engineering module corresponding to the local update code exists in the server, acquiring and displaying the difference between the local update code and the current online update code; receiving a selection operation of the local update code and the current online update code; and reserving the local update code or the current online update code in the server according to the selection operation.

In other embodiments, after the electronic device updates the local update code to the server, when an update code of an engineering module corresponding to the local update code exists in the server, another selection rule in step S401 and step S402 may be used to retain one of the update codes for retention.

The development method in this embodiment may further obtain an update code of a certain engineering module from the server, and when the update code of the engineering module also exists in the electronic device, other selection rules in step S401 and step S402 may be used, and one of the update codes may be reserved, and detailed descriptions of the foregoing steps S401 and S402 may be referred to herein for brevity.

In one embodiment, a pull command may be provided in the development application to enable acquisition of updated code in the server.

Further, after the running tool carrier start command, the front-end development method further includes: receiving an input user account and a password; and sending the user account and the password to a server to acquire related services interacted with the server.

In this embodiment, each user account is correspondingly provided with a part of rights, so that the electronic device can only operate the electronic device to obtain the rights corresponding to the user account.

By selecting and reserving the updating codes in the server and the updating codes of the electronic equipment, the problem that the same engineering module is wrong due to the fact that a plurality of electronic equipment update the same engineering module can be avoided, and therefore effective online development is achieved.

Example IV

Considering the uniformity of front-end development, different engineering patterns or code patterns can be prevented from being formed due to different use habits of different related personnel, and based on the fact, the embodiment can also provide a command for generating the engineering modules or code modules, and the engineering modules or code modules for development can be rapidly produced by using the engineering Cheng Moban or code templates. The method can effectively realize the development of the front end in a unified way, and further improves the development of the front end.

Referring to fig. 6, the present embodiment further includes the following steps based on each flow of the front-end development methods provided in the second and third embodiments.

In step S501, an engineering subcommand is run to display a plurality of engineering templates.

In one embodiment, the step S501 includes: after the engineering subcommand is operated, a target warehouse group is called through a designated interface, and all engineering templates under the target warehouse group are inquired; displaying all the searched engineering templates.

In detail, when the user runs the engineering subcommand, a remote gitlab warehouse group is called through an interface, all the general engineering templates under the remote gitlab warehouse group are queried, and then the names of all the engineering templates are listed. And calling a certain warehouse group of the remote gitlab through the interface to search all engineering targets, thereby ensuring the expandability and dynamic updating of the universal template list without releasing the tool of the invention.

In one embodiment, the run engineering subcommand may be a project command provided in the development application. Of course, the engineering subcommand may be other names, and those skilled in the art may set the names of the engineering subcommands according to personal habits.

In this embodiment, the display interface of the electronic device visually lists all the engineering templates. For example, all engineering templates may be displayed in the development application's interface. In one embodiment, all of the engineering templates may be displayed in a list. In another embodiment, all of the engineering templates may be displayed in the form of a plurality of buttons arranged side by side.

Step S502, receiving a selection operation for selecting the engineering templates to obtain a new engineering template.

Step S503 provides a plurality of configuration references for configuring the newly-built engineering templates.

Step S504, receiving configuration parameters input according to the configuration reference.

In an alternative embodiment, the configuration reference may be displayed in the form of a plurality of selectable page templates. The user may select among a plurality of selectable page templates.

In another alternative embodiment, the configuration reference may also be in the form of a question, e.g., "which template do you want to generate? Further, a plurality of options may also be provided on the basis of the question, for example, the options may include: route, vuex, multi-page, single page, etc. Of course, the options to be chosen may be more, and the above are merely illustrative.

And step S505, configuring the newly-built engineering template according to the configuration parameters to obtain a newly-built engineering module.

Further, a method for creating a code template is also provided in this embodiment. The method can effectively realize the development of the front end in a unified way and further perfect the front end development. Referring to fig. 7, the present embodiment further includes the following steps based on each flow of the front-end development methods provided in the second and third embodiments.

In step S601, a criteria subcommand is run to display a plurality of code templates.

In one embodiment, the operation criterion subcommand may be a code command provided in the development application. Of course, the criterion subcommand may be other names, and those skilled in the art may set the names of the criterion subcommand according to personal habits.

In this embodiment, the display interface of the electronic device visually lists all code templates. For example, all code templates may be displayed in the development application's interface. In one embodiment, all code templates may be displayed in a list. In another embodiment, all code templates may be displayed in the form of a plurality of buttons arranged side by side.

Step S602, receiving a selection operation of the plurality of code templates.

Step S603, providing an object code template for receiving the input code according to the selection operation.

After the step S602, the method further includes: judging whether a code configuration file corresponding to the target code template corresponding to the selection operation exists or not; if not, creating a code configuration file corresponding to the target code template.

When the user selects the corresponding code template, whether the code template has a star.code.json configuration file in the current catalog of the electronic equipment is judged, if no default is established, a perfect configuration is given for the user to modify. If yes, the file is directly read, and the corresponding generated code segment is output.

Example five

In response to the front-end development method described above, the present embodiment provides a front-end development device applied to an electronic apparatus usable for front-end development, and please refer to fig. 8, which is a schematic diagram of a functional module of the front-end development device shown in fig. 2 according to an embodiment of the present invention. The respective modules of the front-end development apparatus in this embodiment are configured to execute the respective steps in the above-described method embodiments. The front-end development device includes the following modules.

The starting module 701 is configured to run a tool carrier starting command, display options corresponding to each engineering module in the tool carrier, where each engineering module corresponds to a functional unit of a front-end page to be developed.

And the monitoring module 702 is configured to monitor whether a corresponding update code exists on a page corresponding to any target engineering module in the engineering modules after the selection operation of the option of the target engineering module is obtained, where the update code is a local update code or an online update code.

And the updating module 703 is used for rendering and constructing the target page by using the updating code if the target page exists.

In this embodiment, the update module is further configured to:

reading a page template;

In this embodiment, the monitoring module:

In this embodiment, the monitoring module is further configured to:

In this embodiment, the update module is further configured to:

In this embodiment, the names of the engineering modules are named by using a preset naming rule.

In this embodiment, the apparatus includes:

In this embodiment, the selecting module is further configured to:

the local update code is selected as a reserved update code.

In this embodiment, the selecting module is further configured to:

displaying the distinguishing codes;

In this embodiment, the apparatus includes:

In this embodiment, the apparatus further includes: and one module is selected for:

In this embodiment, the apparatus further includes: the first newly-built module is used for:

In this embodiment, the first new module is further configured to:

displaying all the searched engineering templates.

In this embodiment, the apparatus further includes: providing a module for:

running a criteria sub-command to display a plurality of code templates;

receiving a selection operation of the plurality of code templates;

In this embodiment, the apparatus further includes: a creation module for:

In this embodiment, the apparatus further includes: the pushing module is used for:

In this embodiment, the apparatus further includes: a login module for:

receiving an input user account and a password;

Further details regarding this embodiment may be further referred to the descriptions in embodiments one to four, and are not described here.

The front-end development device of the embodiment of the invention can realize the rapid construction of the page by monitoring whether the updated codes exist in the page corresponding to the engineering module, does not need to respectively process each group of updated codes by each user, and can improve the efficiency of page construction.

Embodiments of the present invention also provide a computer readable storage medium having stored thereon a computer program which, when executed by a processor, performs the steps of the above method.

In the several embodiments provided in this application, it should be understood that the disclosed apparatus and method may be implemented in other manners as well. The apparatus embodiments described above are merely illustrative, for example, of the flowcharts and block diagrams in the figures that illustrate the architecture, functionality, and operation of possible implementations of apparatus, methods and computer program products according to various embodiments of the present invention. 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 and/or flowchart illustration, and combinations of blocks in the block diagrams and/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.

In addition, functional modules in the embodiments of the present invention may be integrated together to form a single part, or each module may exist alone, or two or more modules may be integrated to form a single part.

The functions, if implemented in the form of software functional modules and sold or used as a stand-alone product, may be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention may be embodied essentially or in a part contributing to the prior art or in a part of the technical solution, in the form of a software product stored in a storage medium, comprising several instructions for causing a computer device (which may be a personal computer, a server, a network device, etc.) to perform all or part of the steps of the method according to the embodiments of the present invention. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a random access Memory (RAM, random Access Memory), a magnetic disk, or an optical disk, or other various media capable of storing program codes. It is noted that relational terms such as first and second, and the like are used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Moreover, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.

The above description is only of the preferred embodiments of the present invention and is not intended to limit the present invention, but various modifications and variations can be made to the present invention by those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention should be included in the protection scope of the present invention. It should be noted that: like reference numerals and letters denote like items in the following figures, and thus once an item is defined in one figure, no further definition or explanation thereof is necessary in the following figures.

The foregoing is merely illustrative of the present invention, and the present invention is not limited thereto, and any person skilled in the art will readily recognize that variations or substitutions are within the scope of the present invention. Therefore, the protection scope of the invention is subject to the protection scope of the claims.

Claims

1. A front-end development method, comprising:

if so, rendering and constructing a target page by using the updating code, wherein the method comprises the following steps: reading a page template; rendering the updating code into the page template to construct a target page, wherein the page template is prestored, and when the updating code is required to be used, the page template is read from a set path;

the step of monitoring whether the corresponding page of the target engineering module has a corresponding update code comprises the following steps:

if so, replacing the protocol interconnected between the static resource networks of the page template with a local static resource service address, and matching the local static resource service address with the configuration file of the target front end in the static resource agent layer service to find a local update code corresponding to the target engineering module.

2. The front-end development method of claim 1, wherein the step of monitoring whether the corresponding page of the target engineering module has the corresponding update code comprises:

3. The front-end development method of claim 1, wherein the rendering build target page using the update code comprises:

4. The front-end development method of claim 1, wherein the names of the respective engineering modules are named using a preset naming rule.

5. The front-end development method of claim 1, wherein prior to the step of rendering a build target page using the update code, the method comprises:

and using the reserved updating codes to cover another updating code.

6. The front-end development method of claim 5, wherein the step of selecting one of the reservations as the reserved update code according to a preset rule comprises:

7. The front-end development method of claim 5, wherein the step of selecting one of the reservations as the reserved update code according to a preset rule comprises:

the local update code is selected as a reserved update code.

8. The front-end development method of claim 5, wherein the step of selecting one of the reservations as the reserved update code according to a preset rule comprises:

displaying the distinguishing codes;

9. The front-end development method of claim 1, wherein after the step of monitoring whether the corresponding update code exists on the corresponding page of the target engineering module, the method comprises:

10. The front-end development method of claim 9, wherein after the step of uploading the local update code into a server, the method further comprises:

11. The front-end development method of claim 1, wherein after the step of displaying options corresponding to respective engineering modules in the tool carrier in the run tool carrier start command, the method further comprises:

12. The front-end development method of claim 11, wherein the step of running engineering subcommands to display a plurality of engineering templates comprises:

displaying all the searched engineering templates.

13. The front-end development method of claim 11, wherein after the step of displaying options corresponding to respective engineering modules in the tool carrier in the run tool carrier start command, the method further comprises:

running a criteria sub-command to display a plurality of code templates;

receiving a selection operation of the plurality of code templates;

14. The front-end development method of claim 13, wherein after the step of receiving a selection operation for the plurality of code templates, the method further comprises:

15. The front-end development method of claim 1, wherein after the runtime carrier launch command, the method further comprises:

16. The front-end development method of claim 1, wherein after the runtime carrier launch command, the method further comprises:

receiving an input user account and a password;

17. A front-end development device, comprising:

The updating module is used for rendering and constructing a target page by using the updating code if the updating code exists; the updating module is also used for reading the page template; rendering the updating code into the page template to construct a target page, wherein the page template is prestored, and when the updating code is required to be used, the page template is read from a set path;

wherein, the monitoring module is specifically used for:

if the static resource service address exists, the protocol of interconnection between the static resource networks of the page template is replaced by the local static resource service address, and in the static resource agent layer service, the local static resource service address is matched with the configuration file of the target front end, so that the local update code corresponding to the target engineering module is found.

18. The front-end development device of claim 17, wherein the monitoring module is specifically configured to:

19. The front-end development device of claim 17, wherein the update module is specifically configured to:

20. The head-end development device of claim 17, wherein the names of the respective engineering modules are named using a preset naming convention.

21. The front-end development device of claim 17, wherein the device further comprises:

22. The front-end development device of claim 21, wherein the selection module is specifically configured to:

23. The front-end development device of claim 21, wherein the selection module is specifically configured to:

the local update code is selected as a reserved update code.

24. The front-end development device of claim 21, wherein the selection module is specifically configured to:

displaying the distinguishing codes;

25. The front-end development device of claim 17, wherein the device further comprises:

26. The front-end development device of claim 25, wherein the device further comprises: and one module is selected for:

27. The front-end development device of claim 17, wherein the device further comprises: the first newly-built module is used for:

28. The front-end development device of claim 27, wherein the first new modeling block is specifically configured to:

displaying all the searched engineering templates.

29. The front-end development device of claim 27, wherein the device further comprises: providing a module for:

running a criteria sub-command to display a plurality of code templates;

Receiving a selection operation of the plurality of code templates;

30. The front-end development device of claim 29, wherein the device further comprises: a creation module for:

31. The front-end development device of claim 17, wherein the device further comprises: the pushing module is used for:

32. The front-end development device of claim 17, wherein the device further comprises: a login module for:

receiving an input user account and a password;

33. An electronic device, comprising: a memory for storing a computer program and a processor for reading and running the computer program from the memory to perform the method of any one of claims 1 to 16.

34. A computer readable storage medium having stored thereon a computer program, characterized in that the computer program when executed by a processor performs the steps of the method of any of the preceding claims 1-16.