CN110968302A

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

Info

Publication number: CN110968302A
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: 2020-04-07
Anticipated expiration: 2038-09-28
Also published as: CN110968302B

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: operating a tool carrier starting command, and displaying options corresponding to all engineering modules 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 all the engineering modules is acquired, monitoring whether a corresponding page of the target engineering module has a corresponding update code, wherein the update code is a local update code or an online update code; and if so, rendering and constructing a target page by using the updating code.

Description

Front-end development method and device and electronic equipment

Technical Field

The invention relates to the technical field of computers, in particular to a front-end development method and device and electronic equipment.

Background

In the front-end daily development, a plurality of projects are available, the projects involve packaging, running and constructing codes, development commands used by other daily developments and scaffolds, but the projects are scattered and have different implementations respectively. There is a certain threshold for new people and old people to accept new projects, and it is also a problem for updating and maintaining these. When a plurality of projects are developed in parallel, repetitive operations with different behaviors and multiple purposes are manually performed.

Disclosure of Invention

In view of the above, an object of the embodiments of the present invention is to provide a front-end development method and apparatus, and an electronic device.

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

operating a tool carrier starting command, and displaying options corresponding to all engineering modules 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 all the engineering modules is acquired, monitoring whether a corresponding page of the target engineering module has a corresponding update code, wherein the update code is a local update code or an online update code;

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

As an optional implementation manner, the step of using the update code to render the build target page includes:

reading a page template;

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

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

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

matching the protocol interconnected among the static resource networks with the configuration file and the localized updating field of the target front end, and judging whether the field matched with the protocol interconnected among the static resource networks exists or not;

if yes, whether usable local updating codes exist in the local resources is searched.

As an optional implementation manner, the step of searching whether there is a usable local update code in the local resource includes:

and replacing the protocol of interconnection 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 update code corresponding to the target engineering module.

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

reading the packaging configuration corresponding to the target engineering module;

and rendering the updating code according to the packaging configuration to construct a target page.

As an optional implementation manner, the names of the engineering modules are named by using a preset naming rule.

As an optional implementation, before the step of using the update code to render the build target page, the method includes:

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

overwriting another update code with the retained update code.

As an optional implementation manner, the step of selecting one of the reservations as the reservation 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 the update code with the time closer to the current time as the reserved update code.

selecting the local update code as a retained update code.

acquiring a difference code between the local update code and the online update code;

displaying the distinguishing code;

a selection operation is received that selects to retain one of the update codes as a 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 optional implementation, after the step of uploading the local update code to the server, the method further includes:

if the server has a current online update code corresponding to the engineering module corresponding to the local update code, acquiring and displaying a 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 updating code or the current online updating code in the server according to the selection operation.

As an optional implementation manner, after the step of displaying options corresponding to each engineering module in the tool carrier by executing a tool carrier start command, the method further includes:

running the project subcommand to display a plurality of project templates;

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

providing a plurality of configuration references for configuring the newly-built project template;

receiving configuration parameters input according to the configuration reference;

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

As an optional implementation, the step of running the project subcommand and displaying a plurality of project templates includes:

after the engineering subcommand is operated, calling a target warehouse group through a specified interface, and inquiring all engineering templates under the target warehouse group;

and displaying all the searched engineering templates.

executing a criteria subcommand to display a plurality of code templates;

receiving a selection operation of the plurality of code templates;

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

As an optional implementation, after the step of receiving the selection operation of the plurality of code templates, the method further includes:

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

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

As an optional implementation, after the running tool carrier start command, the method further includes:

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

and after the terminal is detected to read the identification code, pushing a 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 the related service 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 and displaying options corresponding to all engineering modules in the tool carrier, and 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 in a page corresponding to any target engineering module after the selection operation of the option of the target engineering module in each 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 a target page by using the updating code if the updating code exists.

As an optional implementation manner, the update module is further configured to:

reading a page template;

As an optional implementation, the monitoring module:

As an optional implementation, the monitoring module is further configured to:

As an alternative embodiment, the apparatus comprises:

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

an override module to override another update code using the retained update code.

As an optional implementation, the selection module is further configured to:

selecting the local update code as a retained update code.

As an optional implementation, the selection module is further configured to:

displaying the distinguishing code;

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 optional implementation, the apparatus further comprises: a module for:

As an optional implementation, the apparatus further comprises: a first newly-built module for:

running the project subcommand to display a plurality of project templates;

As an optional implementation, the first new modeling block is further configured to:

and displaying all the searched engineering templates.

As an optional implementation, the apparatus further comprises: providing a module for:

executing a criteria subcommand to display a plurality of code templates;

receiving a selection operation of the plurality of code templates;

As an optional implementation, the apparatus further comprises: a creation module to:

As an optional implementation, the apparatus further comprises: a push module to:

As an optional implementation, the apparatus further comprises: a login module to:

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 device comprises a memory and a processor, wherein the memory is used for storing a computer program, and the processor is used for reading and running the computer program from the memory so as to execute the method.

In a fourth aspect, the present invention further provides a computer-readable storage medium, on which a computer program is stored, where the computer program is executed by a processor to perform the steps of the above method.

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

In order to make the aforementioned objects, features and advantages of the present invention 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 needed to be used in the embodiments will be briefly described below, it should be understood that the following drawings only illustrate some embodiments of the present invention and therefore should not be considered as limiting the scope, and for those skilled in the art, other related drawings can be obtained according to the drawings without inventive efforts.

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

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

Fig. 3 is a schematic diagram illustrating functional unit integration for developing an 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 functional module diagram of a front-end development device according to an embodiment of the present invention.

Detailed Description

The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. The components of 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 present invention, 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 derived by a person skilled in the art from the embodiments of the present invention without making any creative effort, shall fall within the protection scope of the present invention.

It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, it need not be further defined and explained in subsequent figures. Meanwhile, in the description of the present invention, the terms "first", "second", and the like are used only for distinguishing the description, and are not to be construed as indicating or implying relative importance.

The inventor researches and discovers that in front-end daily development, a plurality of projects are available, the projects involve packaging, running and constructing codes, development commands used by other daily development and scaffolds, but the projects are scattered and have different implementations, so that the whole technical stack of the whole team is not uniform, and the development process is not uniform and ambiguous. There is a certain threshold for new people and old people to accept new projects, and it is also a problem for updating and maintaining these. When a plurality of projects are developed in parallel, repetitive operations with different behaviors and multiple purposes are manually performed.

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 visual engineering display, page dynamic localized rendering, intelligent engineering dynamic packaging, one-key creation, updating, construction, pushing and extensible template engineering initialization. The extensible template code is initialized, the packaging configuration scattered in each project and the unified solutions for solving the pain points are unified in a tool and maintained together, and a unified development command and a development flow are output externally. Based on the above description, the present application provides a number of examples to describe the approaches provided herein in more detail.

Example one

The embodiment provides the running environment required by the front-end development and the electronic equipment for the front-end development. The front-end development provided by the embodiment can be realized locally by using electronic equipment; the online mode can also be used, namely, the mode is realized by the way that the electronic equipment and the server perform data interaction.

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

In this embodiment, the server 200 provides services for an online development environment of a 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 an embodiment, each user account may be correspondingly provided with a related authority, for example, the related authority may be a modification authority for 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. And the permission of the user account A is the permission for changing the first engineering module. The electronic device 100 may perform the following operations on the relevant content in the first engineering module: and uploading updated codes to the server 200, uploading the function codes in the newly added first engineering module to the server 200, and the like.

Fig. 2 is a block diagram of the electronic device 100. The electronic device includes a front-end development apparatus 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 understood by those skilled in the art that the structure shown in fig. 2 is only an illustration and is not intended to limit the structure 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 to each other directly or indirectly 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 which can be stored in the memory 111 in the form of software or firmware (firmware) or solidified in an Operating System (OS) of the electronic device 100. The processor 113 is configured to execute an executable module stored in the memory, such as a software functional module or a computer program included in the network line control device 110.

The Memory 111 may be, but is not limited to, a Random Access Memory (RAM), a Read Only Memory (ROM), a Programmable Read-Only Memory (PROM), an Erasable Read-Only Memory (EPROM), an electrically Erasable Read-Only Memory (EEPROM), and the like. The memory 111 is configured to store a program, and the processor 113 executes the program after receiving an execution instruction, and the 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 having signal processing capabilities. The Processor 113 may be a general-purpose Processor, and includes a Central Processing Unit (CPU), a Network Processor (NP), and the like; but may also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field Programmable Gate Array (FPGA) or other programmable logic device, discrete gate or transistor logic device, discrete hardware components. The various methods, steps and logic blocks disclosed 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 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 separately from the individual chips.

The input/output unit 115 is used to provide 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 operation 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 display can be a capacitive touch screen or a resistive touch screen, which supports single-point and multi-point touch operations. The support of 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 sent to the processor for calculation and processing.

In this embodiment, the electronic device 100 may have a development application program corresponding to the front-end development device 110 installed therein. The development application is started and a user interface for front-end development can be presented.

In this embodiment, the application program 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 for developing an 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 can provide a number of commands, including:

a star clone initializes a localized page and related code files thereof according to the online page or defaults;

the star pull acquires the update code from the server to update the local code;

the star push uploads the locally updated code to the server to update the server code;

visualizing each engineering code, clicking a page, and locally rendering the page, wherein static resources depended on by the page automatically find codes corresponding to local corresponding engineering according to a path, and are constructed by using a universal packing configuration to output a target page;

the star build locally packages and outputs the compiled resource files to a relevant directory;

the star project is used for visually selecting available general template engineering to quickly construct the engineering;

and the star code is a visual selectable general template code, and starts to generate a personalized code segment according to the configuration file data.

By using the command, relevant personnel of front-end development can be facilitated to unify the local development environment and the development process, and the development efficiency of the relevant personnel of the front-end development is remarkably improved.

The development application program can be used for realizing creation, starting, packaging, construction, updating and pushing aiming at different engineering modules at the front end. The development application program can uniformly realize, uniformly manage, uniformly expose, standardize and simplify the development process. Further, the development application provides exposed personalization configuration entries to meet certain engineering personalization packaging configuration requirements.

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

The construction process may include: an engineering or code module is constructed. As shown in fig. 3, when building a code module, a general code generator may be used to generate a code template, for example, a template for a user to write code may be obtained by a handlebars engine. The handlebars engine can be separated from the javascript by html, and a clearer code can be written. When building an engineering module, a general engineering generator in the diagram can be used to generate an engineering template, for example, an engineering architecture of vue projects can be generated by 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. Among other things, the severmanager interface may provide multiple packaging plug-ins, which, as shown in FIG. 3, may include multiple webpack-midleware plug-ins. Wherein the webpack-midleware plug-in is used to reload pages. The local resource service may further include a combo-server. The local resource service may further include a build file for storing data such as configuration rules. The local page rendering service may include a cmsgit and a cloudlet page, among others. Where the cloudlet represents an example name of the 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 this embodiment can automatically find the local corresponding engineering module by normalizing the storage of the engineering catalog and matching the request resource path, and perform uniform packaging and output, so that after a command is run, each engineering module is visually displayed. Furthermore, the engineering module can be developed and updated by selecting to click any engineering module, and other switching costs are avoided. Compared with the prior art that when a plurality of engineering modules are developed in parallel by aiming at the front end, corresponding engineering needs to be continuously and manually opened, and the engineering is started and constructed to switch each node or type in development, the development application program provided by the embodiment of the application can avoid the troublesome operation that each engineering module needs to be manually opened.

The development application in this embodiment may provide localized development and rendering. The development application provides a set of commands for creating, updating, pushing, and rendering the localization code. When the system is used, a localization code can be constructed through a simple command provided by the development application program, a user can click into any page, and the page is automatically and locally rendered in a localization editor. The application program is a visual editing code in a browser compared with the existing team page rendering, page rendering is carried out by calling a rear-end service, in the whole process, code compiling in the browser is inconvenient, the rear-end page rendering is carried out, the development application program depends on the rear-end rendering service, and error troubleshooting and the like are inconvenient.

The development application program in this embodiment can quickly build a command of the engineering module, and through a visualization mode, when receiving a command of selecting a corresponding engineering template, the development application program is quickly created. Further, the development application may provide an engineering template list including a plurality of engineering templates, wherein the engineering template list is scalable and dynamically updated. And when the engineering template list has the universal engineering templates needing to be extracted and is established under the corresponding warehouse, the universal engineering templates can be used by related users. Through the development application program in the embodiment, the problem that new projects are required to be created in the front-end development process in the prior art, 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. Through a visualization mode, when receiving and selecting the corresponding code template, the code template is quickly created. Further, the development application may provide a code template list including a plurality of code templates. The list of code templates is scalable, dynamically updated. Further, the development application provided by the embodiment of the application may provide common codes that the front-end development often needs to write, or may be abstracted, configured, and then generate the common codes, so as to efficiently develop the development application.

Example two

Please refer to fig. 4, which is a flowchart illustrating a front-end development method according to an embodiment of the present invention. The specific flow shown in fig. 4 will be described in detail below.

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 one functional unit of the front-end page to be developed.

Step S302, after the selection operation of the option of any target engineering module in the engineering modules is obtained, monitoring whether the page corresponding to 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 a plurality of HTML (HyperText markup language, chinese name: HyperText markup language), and the localized rendering page is entered by clicking a certain HTML.

Whether the localized resources need to be used can be judged by intercepting the static resource url in the page. If the localized resources need to be used, the local corresponding engineering can be found according to the preset path, and the construction and the output are carried out.

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

Step S303, using the update code to render and construct a target page.

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 to the page template to construct a target page.

The page template may be pre-stored in the electronic device, and when the page template needs to be used, the page template is read from a set path.

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

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

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

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

The step S302 includes: and replacing the protocol of interconnection 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 update code corresponding to the target engineering module.

As an optional implementation manner, the step S302 includes: and monitoring whether the server has an online updating code corresponding to the target engineering module.

And acquiring the online updating code from a server before the target page is constructed.

As an optional implementation manner, the step S303 includes: reading the packaging configuration corresponding to the target engineering module; and rendering the updating code according to the packaging configuration to construct a target page.

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

As an optional implementation, after the running tool carrier start command, the method further includes: displaying an identification code, wherein the identification code is used for being read by other terminals; and after the terminal is detected to read the identification code, pushing a display interface of the tool carrier to the terminal.

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

Further, the method in this embodiment may also output and operate the packaged resources differently in the corresponding engineering directories, and at this time, may output the static resources to the build folder, where the static resources provided for building the target page are exposed in the form of an interface call, unlike the building and packaging performed when the target page is built.

In this embodiment, the resource path prefix loaded asynchronously corresponding to the engineering output needs to be dynamic, and since the page runs in different environments and the domain names may be different, a function of domain name concatenation with the global resource path may be reserved in the packing and constructing process.

After the operation is monitored, the corresponding updating code can be actively searched to realize packaging output, and the target page can be quickly constructed.

EXAMPLE III

Considering that a plurality of electronic devices can develop the same front end, the front end development method provided by the application can provide codes for updating all the engineering modules online and offline, update codes exist for all the engineering modules of the plurality of electronic devices, or update codes exist for all the electronic devices in the background server and the local electronic devices, and one of the codes can be selected and reserved, and the reserved update codes cover other update codes. The mode 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 the flows 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, one of the local update code and the online update code is selected and reserved as a reserved update code according to a preset rule.

Step S402, another updating code is covered by the reserved updating 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; or a rule for selecting an update code selected by a user; it may also be to select an update code or the like of 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 the update code with the time closer to the current time as the reserved update code.

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

The step S401 may be implemented by: selecting the local update code as a retained update code.

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

The difference codes of the local update codes and the online update codes can be displayed in the electronic equipment for reference of a user, so that the user can compare the local update codes with the online update codes according to the difference between the two versions. Further, when the difference code is actually the difference code, a selection button may be displayed on a display interface of the electronic device, and after any button receives a click operation, an update code corresponding to the button may be retained.

When the server and the electronic equipment both have updating codes, the confusion in use can be avoided by reserving one of the updating codes, so that the on-line front-end development is effectively implemented.

When the server and the electronic device both have update codes for the same engineering module, one of the update codes can be retained in an alternative mode, and the other update code is overwritten. Further, in the front-end development method in this embodiment of the application, when the electronic device uploads the update code of an engineering module to the server, the foregoing step S401 and step S402 may be executed to implement selection of the update code; when the electronic device obtains the update code of a certain engineering module from the server, the above-mentioned step S401 and step S402 may be executed to realize the selection of the update code.

The electronic device has the local update code for updating a certain engineering module of the target front end, and the local update code can be uploaded to a server, so that other electronic devices can conveniently acquire the latest update code, and the target front end of the latest version 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 set in the development application to upload the local update code to the server.

The front-end development method in the embodiment includes: if the server has a current online update code corresponding to the engineering module corresponding to the local update code, acquiring and displaying a 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 updating code or the current online updating 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, one of the update codes may be retained for retention by using other selection rules in step S401 and step S402.

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, the other selection rules in step S401 and step S402 may be used to retain one of the update codes, which may specifically refer to the relevant description in step S401 and step S402, and is not described herein again.

In one embodiment, a pull command may be set in the development application to achieve the acquisition of the update code in the server.

Further, after the running tool carrier starts the 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 the related service interacted with the server.

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

By selecting and reserving the updating codes in the server and the updating codes of the electronic equipment, the condition that the same engineering module has errors due to the fact that the same engineering module is updated by a plurality of pieces of electronic equipment can be avoided, and therefore effective online development is achieved.

Example four

Considering the uniformity of front-end development, the method avoids different engineering styles or code styles caused by different use habits of different related personnel, and based on the method, the embodiment can also provide a command for generating the engineering module or the code module, so that the engineering module or the code module for development can be quickly produced by using the engineering template or the code template. The mode can effectively realize the development of the front end in a unified mode, and further improve the front end development.

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

Step S501, the project subcommand is operated to display a plurality of project templates.

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

In detail, when the user runs the engineering subcommand, a certain warehouse group of the remote gitlab is called through the interface, all the universal engineering templates under the warehouse group are inquired, and then the names of all the engineering templates are listed. And a certain warehouse group of the remote gitlab is called through an interface to search all engineering targets, so that the more expansibility and dynamic update of the universal template list are ensured, and the tool of the invention is not required to be released.

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 name of the engineering subcommand according to personal habits.

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

Step S502, receiving the selection operation of selecting the plurality of project templates to obtain a new project template.

Step S503, providing a plurality of configuration references for configuring the newly-built project template.

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

In an alternative embodiment, the configuration reference may be a form display showing 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, for example, "what ever do you want to generate? ", further, multiple 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 are still more, and the above are only illustrative.

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

Further, the present embodiment also provides a method for creating a code template. The componentized code template can be obtained through the following steps, and the mode can effectively realize the development of the front end in a unified mode, so that the front end development is further improved. Referring to fig. 7, the present embodiment further includes the following steps based on the flows of the front-end development methods provided in the second embodiment and the third embodiment.

In step S601, a criterion subcommand is executed to display a plurality of code templates.

In one embodiment, the run criteria subcommand may be a code command set in the development application. Of course, the standard subcommand may be other names, and those skilled in the art can set the name of the standard subcommand according to personal habits.

In this embodiment, the display interface of the electronic device visually lists all the code templates. For example, all code templates may be displayed in the interface of the development application. 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 on 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; and if not, creating a code configuration file corresponding to the target code template.

And when the user selects the corresponding code template, judging whether the code template has a configuration file of star. And if so, directly reading the file and outputting the correspondingly generated code segment.

EXAMPLE five

Corresponding to the foregoing front-end development method, this embodiment provides a front-end development apparatus applied to an electronic device capable of being used for front-end development, and please refer to fig. 8, which is a functional module diagram of the front-end development apparatus shown in fig. 2 according to an embodiment of the present invention. Each module of the front-end development apparatus in this embodiment is configured to execute each step in the above method embodiments. The front-end development device comprises the following modules.

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

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

And an updating module 703, configured to use the update code to render and construct a target page if the update code 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 selection module is further configured to:

selecting the local update code as a retained update code.

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

displaying the distinguishing code;

In this embodiment, the apparatus includes:

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

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

running the project subcommand to display a plurality of project templates;

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

and displaying all the searched engineering templates.

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

executing a criteria subcommand 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 to:

In this embodiment, the apparatus further includes: a push module to:

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

receiving an input user account and a password;

For other details of this embodiment, reference may be further made to the descriptions of the first to fourth embodiments, which are not repeated herein.

The front-end development device of the embodiment of the invention can realize that the page is quickly constructed by monitoring whether the updated codes exist in the page corresponding to the engineering module, and each user does not need to respectively process each group of updated codes, thereby improving the efficiency of constructing the page.

An embodiment of the present invention further provides a computer-readable storage medium, where a computer program is stored on the computer-readable storage medium, and when the computer program is executed by a processor, the computer program performs the steps of the method.

In the embodiments provided in the present application, it should be understood that the disclosed apparatus and method can be implemented in other ways. The apparatus embodiments described above are merely illustrative, and for example, the flowchart and block diagrams in the figures 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, the functional modules in the embodiments of the present invention may be integrated together to form an independent part, or each module may exist separately, or two or more modules may be integrated to form an independent 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 such understanding, the technical solution of the present invention may be embodied in the form of a software product, which is stored in a storage medium and includes instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute 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), a magnetic disk or an optical disk, and other various media capable of storing program codes. It is noted that, herein, relational terms such as first and second, and the like may be 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. Also, 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 an … …" does not exclude the presence of other identical elements in a process, method, article, or apparatus that comprises the element.

The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention, and various modifications and changes may be made by those skilled in the art. Any modification, equivalent replacement, or improvement 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 numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, it need not be further defined and explained in subsequent figures.

The above description is only for the specific embodiments of the present invention, but the scope of the present invention is not limited thereto, and any person skilled in the art can easily conceive of the changes or substitutions within the technical scope of the present invention, and all the changes or substitutions should be covered within the scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.

Claims

1. A front-end development method, comprising:

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

2. The front-end development method of claim 1, wherein said step of using said updated code for rendering build target pages comprises:

reading a page template;

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

4. The front-end development method of claim 3, wherein the step of finding whether usable local update code exists in the local resource comprises:

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

6. The front-end development method of claim 1, wherein said step of using said updated code for rendering build target pages comprises:

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

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

overwriting another update code with the retained update code.

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

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

selecting the local update code as a retained update code.

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

displaying the distinguishing code;

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

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

14. The front-end development method according to claim 1, wherein after the step of executing a tool carrier initiation command to display options corresponding to each engineering module in the tool carrier, the method further comprises:

running the project subcommand to display a plurality of project templates;

15. The front-end development method of claim 14, wherein said step of executing an engineering subcommand, displaying a plurality of engineering templates, comprises:

and displaying all the searched engineering templates.

16. The front-end development method of claim 14, wherein after the step of running a tool carrier initiation command to display options corresponding to each engineering module in the tool carrier, the method further comprises:

executing a criteria subcommand to display a plurality of code templates;

receiving a selection operation of the plurality of code templates;

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

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

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

receiving an input user account and a password;

20. A front-end development apparatus, comprising:

21. The front-end development device of claim 20, wherein the update module is further to:

reading a page template;

22. The front-end development device of claim 21, wherein the monitoring module:

23. The front-end development device of claim 22, wherein the monitoring module:

24. The front-end development device of claim 20 or 21, wherein the monitoring module is further configured to:

25. The front-end development device of claim 20, wherein the update module is further to:

26. The front-end development arrangement according to claim 20, wherein the names of the individual engineering modules are named using preset naming rules.

27. The front-end development apparatus of claim 20, wherein the apparatus comprises:

28. The front-end development device of claim 27, wherein the selection module is further to:

29. The front-end development device of claim 27, wherein the selection module is further to:

selecting the local update code as a retained update code.

30. The front-end development device of claim 27, wherein the selection module is further to:

displaying the distinguishing code;

31. The front-end development apparatus of claim 20, wherein the apparatus comprises:

32. The front-end development apparatus of claim 31, wherein the apparatus further comprises: a module for:

33. The front-end development apparatus of claim 20, wherein the apparatus further comprises: a first newly-built module for:

running the project subcommand to display a plurality of project templates;

34. The front-end development apparatus of claim 33, wherein the first build module is further configured to:

and displaying all the searched engineering templates.

35. The front-end development apparatus of claim 33, wherein the apparatus further comprises: providing a module for:

executing a criteria subcommand to display a plurality of code templates;

receiving a selection operation of the plurality of code templates;

36. The front-end development apparatus of claim 35, wherein the apparatus further comprises: a creation module to:

37. The front-end development apparatus of claim 20, wherein the apparatus further comprises: a push module to:

38. The front-end development apparatus of claim 20, wherein the apparatus further comprises: a login module to:

receiving an input user account and a password;

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

40. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out the steps of the method according to any one of claims 1 to 19.