CN110362309B - Front-end project development method, device, equipment and computer readable storage medium - Google Patents
Front-end project development method, device, equipment and computer readable storage medium Download PDFInfo
- Publication number
- CN110362309B CN110362309B CN201910669861.1A CN201910669861A CN110362309B CN 110362309 B CN110362309 B CN 110362309B CN 201910669861 A CN201910669861 A CN 201910669861A CN 110362309 B CN110362309 B CN 110362309B
- Authority
- CN
- China
- Prior art keywords
- module
- target
- event
- project development
- end project
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Abstract
The invention relates to the technical field of financial science (Fintech), and discloses a front-end project development method, which comprises the following steps: when a front-end project development request is received, acquiring event information corresponding to the front-end project development request; defining target modules according to the event information, constructing module data of each target module and storing the module data; injecting an event triggering method and/or a target monitoring event for each target module according to the target event information corresponding to each target module; and carrying out module integration according to the module data of each target module, the event triggering method and/or the target monitoring event to obtain a front-end code corresponding to the front-end project development request. The invention also discloses a front-end project development device, equipment and a computer readable storage medium. The invention organizes the codes in a module mode, so that the codes are simpler and more convenient for the maintenance of the development operation and maintenance personnel, and the module data are independently created and stored, thereby facilitating the data management.
Description
Technical Field
The present invention relates to the field of financial technology (Fintech), and in particular, to a front-end project development method, apparatus, device, and computer-readable storage medium.
Background
With the rapid development of internet technology, especially internet financial technology (fittech), more and more technologies (big data, distributed, blockchain, artificial intelligence, etc.) are applied in the financial field.
Taking front-end project development in a financial institution as an example, there are two main front-end project development modes currently, namely, a module data state management process provided by Redux (Redux is a container of a predictable state for JavaScript applications and an application data stream framework) through a module state manager, wherein the module data state management process provided by Redux is as follows: triggering an operation event on a user interaction interface, updating data storage according to the triggered operation event, thereby updating a data state, and finally updating the user interaction interface, wherein in the first mode, a single data source is generally adopted by Redux, only a pure function can be used for modifying the data state, different views in the user interaction interface need to depend on the same data state, if components corresponding to the views in the user interaction interface share the state, unidirectional data flow is destroyed, and the front-end project development mode is inconvenient in data management; mode two, through the state manager of the components of the Vue (the Vue is a set of progressive frames used for constructing the user interface) and the Vuex (the Vuex is a state management mode specially developed for the Vue. Js application program), the Vue provides a view in response, and the Vuex is managed in a global single-case mode by extracting the sharing state of the components, so that the use difficulty in the mode is high, and the code is very tedious and difficult to maintain.
Disclosure of Invention
The invention provides a front-end project development method, a device, equipment and a computer readable storage medium, and aims to solve the technical problems that code data management is inconvenient and code is tedious and difficult to maintain in the current front-end project development mode.
In order to achieve the above object, the present invention provides a front-end project development method, which includes the steps of:
when a front-end project development request is received, acquiring event information corresponding to the front-end project development request;
defining target modules according to the event information, constructing module data of each target module and storing the module data;
injecting an event triggering method and/or a target monitoring event for each target module according to the target event information corresponding to each target module;
and carrying out module integration according to the module data of each target module, the event triggering method and/or the target monitoring event to obtain a front-end code corresponding to the front-end project development request.
Optionally, the step of defining a target module according to the event information includes:
comparing the event information with preset information of each definition module in a preset module set, and judging whether target preset information matched with the event information exists or not;
if no target preset information matched with the event information exists, outputting a module setting interface comprising the event information so as to enable a developer to select target event information from the event information;
and receiving target event information selected based on the module setting interface, and generating a target module corresponding to the target event information.
Optionally, after the step of comparing the event information with preset information of each definition module in the preset module set to determine whether there is target preset information matched with the event information, the method includes:
and if the target preset information matched with the event information exists, taking the custom module corresponding to the target preset information as a target module.
Optionally, the step of constructing module data of each target module includes:
calling a preset Fesx construction function, and encapsulating Vue.set through the preset Fesx construction function to form a data storage area of each target module;
and constructing module data of each target module through the preset Fesx constructor, and storing the module data into the data storage area corresponding to the target module.
Optionally, the step of injecting an event triggering method and/or a target monitoring event for each target module according to the target event information corresponding to each target module includes:
traversing target event information corresponding to each target module through a preset event monitoring manager;
if the target event information contains trigger configuration information, an event trigger method corresponding to the trigger configuration information is injected into the target module;
if the target event information contains monitoring configuration information, a target monitoring event corresponding to the monitoring configuration information is injected into the target module.
Optionally, the step of performing module integration according to the module data, the event triggering method and/or the target monitoring event of each target module to obtain a front end code corresponding to the front end project development request includes:
associating the module data, the event triggering method and/or the target monitoring event of each target module as a module index of the target module;
and adding the module index into a preset module catalog, traversing the preset module catalog, and loading the target module according to the module index to obtain a front-end code corresponding to the front-end project development request.
In addition, in order to achieve the above object, the present invention also provides a front-end project development apparatus including:
the request receiving module is used for acquiring event information corresponding to the front-end project development request when the front-end project development request is received;
the definition construction module is used for defining target modules according to the event information, constructing module data of each target module and storing the module data;
the information injection module is used for injecting an event triggering method and/or a target monitoring event for each target module according to the target event information corresponding to each target module;
and the project integration module is used for carrying out module integration according to the module data, the event triggering method and/or the target monitoring event of each target module to obtain a front-end code corresponding to the front-end project development request.
Optionally, the definition building module includes:
the comparison judging unit is used for comparing the event information with the preset information of each definition module in the preset module set and judging whether target preset information matched with the event information exists or not;
the interface output unit is used for outputting a module setting interface comprising the event information if the target preset information matched with the event information does not exist, so that a developer can select the target event information from the event information;
and the module definition unit is used for receiving the target event information selected based on the module setting interface and generating a target module corresponding to the target event information.
Optionally, the definition building module includes:
and the matching determining unit is used for taking the custom module corresponding to the target preset information as a target module if the target preset information matched with the event information exists.
Optionally, the definition building module includes:
the construction area unit is used for calling a preset Fesx construction function, and encapsulating Vue.set through the preset Fesx construction function to form a data storage area of each target module;
and the construction data unit is used for constructing module data of each target module through the preset Fesx constructor and storing the module data into the data storage area corresponding to the target module.
Optionally, the information injection module includes:
the information traversing unit is used for traversing the target event information corresponding to each target module through a preset event monitoring manager;
the method injection unit is used for injecting an event triggering method corresponding to the triggering configuration information for the target module if the triggering configuration information is contained in the target event information;
and the event injection unit is used for injecting a target monitoring event corresponding to the monitoring configuration information for the target module if the target event information contains the monitoring configuration information.
Optionally, the project integration module includes:
the information association unit is used for associating the module data, the event triggering method and/or the target monitoring event of each target module as a module index of the target module;
and the traversal loading unit is used for adding the module index into a preset module catalog, traversing the preset module catalog, and loading the target module according to the module index to obtain a front-end code corresponding to the front-end project development request.
In addition, to achieve the above object, the present invention also provides a front-end project development apparatus including: the system comprises a memory, a processor and a front-end project development program which is stored in the memory and can run on the processor, wherein the front-end project development program realizes the steps of the front-end project development method when being executed by the processor.
In addition, in order to achieve the above object, the present invention also provides a computer-readable storage medium having stored thereon a front-end project development program which, when executed by a processor, implements the steps of the front-end project development method described above.
The invention provides a front-end project development method, a device, equipment and a computer readable storage medium. In the embodiment of the invention, when front-end project development equipment receives a front-end project development request, event information corresponding to the front-end project development request is acquired; defining a target module according to event information, constructing module data of the target module and storing the module data, and then injecting an event triggering method and/or a target monitoring event for the target module by front-end project development equipment according to the target event information corresponding to the target module so as to obtain a front-end code corresponding to a front-end project development request by integrating each target module.
Drawings
FIG. 1 is a schematic diagram of a device architecture of a hardware operating environment according to an embodiment of the present invention;
FIG. 2 is a flowchart of a first embodiment of a front-end project development method according to the present invention;
FIG. 3 is a schematic diagram of a first embodiment of a front-end project development method according to the present invention;
fig. 4 is a schematic diagram of functional modules of an embodiment of the front-end project development apparatus of the present invention.
The achievement of the objects, functional features and advantages of the present invention will be further described with reference to the accompanying drawings, in conjunction with the embodiments.
Detailed Description
It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the scope of the invention.
Referring to fig. 1, fig. 1 is a schematic device structure of a hardware running environment according to an embodiment of the present invention.
The front-end project development equipment of the embodiment of the invention can be a server or a terminal corresponding to a developer; as shown in fig. 1, the front-end project development apparatus may include: a processor 1001, such as a CPU, a network interface 1004, a user interface 1003, a memory 1005, a communication bus 1002. Wherein the communication bus 1002 is used to enable connected communication between these components. The user interface 1003 may include a Display, an input unit such as a Keyboard (Keyboard), and the optional user interface 1003 may further include a standard wired interface, a wireless interface. The network interface 1004 may optionally include a standard wired interface, a wireless interface (e.g., WI-FI interface). The memory 1005 may be a high-speed RAM memory or a stable memory (non-volatile memory), such as a disk memory. The memory 1005 may also optionally be a storage device separate from the processor 1001 described above.
It will be appreciated by those skilled in the art that the device structure shown in fig. 1 is not limiting of the device and may include more or fewer components than shown, or may combine certain components, or a different arrangement of components.
As shown in fig. 1, as a computer readable storage medium (a computer readable storage medium is also called a computer storage medium, a computer medium, a readable storage medium, or a direct call medium, etc.), an operating system, a network communication module, a user interface module, and a front end project development corresponding computer program may be included in a memory 1005 of the computer readable storage medium may be a nonvolatile readable storage medium such as a RAM, a magnetic disk, an optical disk, or the like.
In the device shown in fig. 1, the network interface 1004 is mainly used for connecting to an error code server, and is in data communication with the error code server; the user interface 1003 is mainly used for connecting a client and communicating data with the client; and the processor 1001 may be used to call a front-end project development corresponding computer program stored in the memory 1005 and perform operations in the front-end project development method described below.
The method implemented when the front-end project development program running on the processor is executed may refer to the following embodiments of the front-end project development method of the present invention.
Based on the hardware structure, the embodiment of the front-end project development method is provided.
Referring to fig. 2, fig. 2 is a flow chart of a first embodiment of a front-end project development method according to the present invention, where the method includes:
step S10, when a front-end project development request is received, event information corresponding to the front-end project development request is acquired.
In this embodiment, the front-end project development method is applied to a front-end project development device, and the front-end project development device performs front-end code development according to front-end project development requirements, specifically:
the front-end project development device receives the front-end project development request, in this embodiment, the triggering manner of the front-end project development request is not particularly limited, that is, the front-end project development request may be actively triggered by a user, for example, a front-end developer builds a front-end project development environment on the front-end project development device, and writes a front-end code to actively trigger the front-end project development request; in addition, the front-end project development request may also be automatically triggered by the front-end project development device, for example, when the front-end project development device detects that the front-end project development environment is built, the front-end project development request is automatically triggered.
When the front-end project development device receives the front-end project development request, the front-end project development device acquires event information corresponding to the front-end project development request, wherein the event information comprises trigger events, monitoring events, trigger configuration information, monitoring configuration information and the like related to a front-end interface, the trigger configuration information comprises but is not limited to trigger event names, event trigger conditions, event trigger time and the like, and the monitoring configuration information comprises but is not limited to monitoring event names, monitoring response strategies and the like.
In this embodiment, a front-end project development method is described as an example of application to a financial institution (the financial institution includes a banking institution, an insurance institution, a securities institution, etc.), a banking institution developer is a login interface developed by the xxx banking institution, a developer triggers a front-end project development request on a front-end project development device, the front-end project development device acquires event information corresponding to the front-end project development request, and in a specific scenario of developing the login interface by the xxx banking institution, the event information includes a registration event, a login event, a verification event, and the like.
In this embodiment, the front-end project development device defines a target module according to event information, organizes codes in a module manner, and in this embodiment, a series of components and logic combinations are disposed in the module, and the module can provide an interface for other modules to call, so that there is no strong dependence between the modules, and high cohesion and low coupling of logic are achieved, and specifically, the method includes:
and step S20, defining target modules according to the event information, constructing module data of each target module and storing the module data.
The front-end project development device defines a target Module (a Module is a Vue component that can be independently operated) according to the event information, and the manner in which the front-end project development device defines the target Module according to the event information is not particularly limited, for example, a Module definition rule is preset in the front-end project development device, and the front-end project development device defines the target Module according to the preset Module definition rule and the event information; for example: the method comprises the steps that a preset module definition rule is a rule that events correspond to modules one by one, a front-end project development device sets module identifiers of the modules and obtains event identifiers in event information, and the front-end project development device forms the module identifiers and the event identifiers into a character string: the 'modulename. Eventname' and assigns the string to the target module to define the target module.
In addition, the target module may be defined according to a trigger event (dispatches) and a monitor event (events) associated with the module, and specifically, the front-end project development device outputs a prompt including event information to prompt a developer to define the module identifier (the module identifier refers to the identification information of the unique identification module, the module identifier may be a module name or a module number) of the module according to the event information, and the trigger event (dispatches) and the monitor event (events) associated with the module, and the front-end project development device processes the module identifier, the trigger event and the monitor event defined by the front-end developer according to a preset format, that is, the front-end project development device converts the module identifier, the trigger event and the monitor event into a unified format to complete the definition of the target module.
It can be understood that, in this embodiment, the number of modules of the target module defined according to the event information is not specifically limited, and the number of triggering events and the number of listening events related to one target module are not specifically limited, that is, the number of dispatches is an array, and the dispatches includes all events that can be triggered by the module, and each format is a character string of 'modulenname.eventname' composed of a module name and an event name; the number of events is an array, and the events comprise all events which can be monitored by the module, and each item of event is a character string of an event name; in addition, the module should also contain component items and other necessary legal vue component items.
After the definition of the target modules is completed, the front-end project development equipment constructs a data storage area of each target module and module data of each target module, and then the front-end project development equipment stores the module data of each target module into the data storage area corresponding to the target module; in the embodiment, the front-end project development equipment establishes the module data of the target module and stores the module data independently aiming at the single target module, thereby facilitating the management of the module data.
In this embodiment, the front-end project development device defines target modules according to event information, and data states of the target modules are communicated with each other through dispatch and event. Batch processing module file injection required dispatch method and event monitoring through preset demand and environment (demand) characteristics, so as to complete the cohesive function and external communication of the module, namely,
step S30, according to the target event information corresponding to each target module, an event triggering method and/or a target monitoring event are/is injected for each target module.
The front-end project development equipment injects an event triggering method and/or a target monitoring event for the target module according to the target event information corresponding to the target module, and specifically comprises the following steps:
step a1, traversing target event information corresponding to each target module through a preset event monitoring manager;
step a2, if the target event information contains trigger configuration information, injecting an event trigger method corresponding to the trigger configuration information for the target module;
and a step a3 of injecting a target monitoring event corresponding to the monitoring configuration information for the target module if the target event information contains the monitoring configuration information.
In this embodiment, the front-end project development device presets an event monitor manager, where the event monitor manager refers to a tool function implemented by an observer mode of event monitor management, and the preset event monitor manager may be an event monitor manager provided in an instance of Vue, or an event monitor manager implementing a subscription and release type implemented by the observer mode.
The front-end project development equipment traverses the target event information corresponding to each target module through a preset event monitoring manager; if the target event information contains trigger configuration information, the front-end project development equipment injects an event trigger method corresponding to the trigger configuration information for the target module; if the target event information contains monitoring configuration information, the front-end project development equipment injects a target monitoring event corresponding to the monitoring configuration information into the target module.
Referring to fig. 3, in this embodiment, each target module defines a trigger event and a monitor event, and the front-end project development device establishes an association relationship between the trigger event and the monitor event through an EventBus (a preset event monitor manager), that is, the EventBus traverses target event information corresponding to each target template, and if the target event information has trigger configuration information, the front-end project development device injects a dispatch method through the EventBus; if the target event information has monitoring configuration information, the front-end project development equipment circularly injects monitoring events through an on method provided by EventBus; in this embodiment, after the event triggering method and/or the target monitoring event is injected into the target module through the EventBus, the association relationship between the triggering event and the monitoring event corresponding to each target module is established.
For example, event Bus injects account information input Event for the target module 1; event Bus is used for injecting account login Event for the target module 2; the Event Bus is used for injecting account information verification events for the target module 3; when the target module 1 monitors an account information input Event, the target module 1 calls the target module 3 to execute an account information verification Event, and when the account information verification passes, the target module 3 calls the target module 2 to execute an account login Event, and in the embodiment, a triggering Event and/or a monitoring Event is injected into the target module through an Event Bus so as to establish an association relation between the triggering Event and the monitoring Event.
It can be understood that the front-end project development device in this embodiment may also inject the dispatch method into all modules by a mix-in (mix) method, and inject Fesx to manage Module data. Each Module defines supported Events monitoring event attributes by defining supported dispatch attributes, so that data state change and data state sharing of the standard Module are restrained, and the generation mode of the target Module is more flexible.
And step S40, carrying out module integration according to the module data, the event triggering method and/or the target monitoring event of each target module to obtain a front-end code corresponding to the front-end project development request.
Specifically, the method comprises the following steps:
step b1, associating the module data, the event triggering method and/or the target monitoring event of each target module as a module index of the target module;
and b2, adding the module index into a preset module catalog, traversing the preset module catalog, and loading the target module according to the module index to obtain a front-end code corresponding to the front-end project development request.
In this embodiment, a module directory is preset in the front-end project development device, where the preset module directory is used to store module indexes of each target module, so as to facilitate calling and integration of each target module; the front-end project development equipment associates the module data, the event triggering method and/or the target monitoring event of each target module to be used as a module index of the target module; the front-end project development equipment adds the module indexes into a preset module catalog, traverses the preset module catalog to determine target modules corresponding to the module indexes in the preset module catalog, loads code segments in the corresponding target modules according to the module indexes, and splices the code segments of the corresponding target modules to obtain front-end codes corresponding to the front-end project development requests.
In this embodiment, when receiving a front-end project development request, the front-end project development device acquires event information corresponding to the front-end project development request; defining a target module according to event information, constructing module data of the target module and storing the module data, and then injecting an event triggering method and/or a target monitoring event for the target module by front-end project development equipment according to the target event information corresponding to the target module so as to obtain a front-end code corresponding to a front-end project development request by integrating each target module.
The front-end project development method in the embodiment is applied to the financial field, so that the front-end code in the financial field is simpler, and development or maintenance of operation and maintenance personnel is convenient.
Further, based on the first embodiment of the front-end project development method of the present invention, a second embodiment of the front-end project development method of the present invention is proposed.
The embodiment is a specific implementation manner of step S20 in the first embodiment, including:
comparing the event information with preset information of each definition module in a preset module set, and judging whether target preset information matched with the event information exists or not;
if the target preset information matched with the event information does not exist, outputting a module setting interface for a developer to define a target module based on the module setting interface; receiving a module identifier and event information input based on the module setting interface, and generating a target module corresponding to the module identifier and the event information;
and if the target preset information matched with the event information exists, taking the custom module corresponding to the target preset information as a target module.
The front-end project development equipment compares event information with preset information of each definition module in the preset module set, and judges whether target preset information matched with the event information exists or not, wherein the target preset information matched with the event information refers to: the module name, the triggering event and the monitoring event in the event information are identical to the module name, the triggering event and the monitoring event in the preset information.
If the target preset information matched with the event information does not exist, the front-end project development equipment judges that the modules of the same type are not defined in the earlier stage, and the front-end project development equipment outputs a module setting interface for a developer to define a target module based on the module setting interface; the front-end project development equipment receives the module identification and the event information input based on the module setting interface, and generates a target module corresponding to the module identification and the event information.
If the target preset information matched with the event information exists, the front-end project development equipment judges that the modules of the same type are defined in the earlier stage, and the front-end project development equipment takes the custom module corresponding to the target preset information as a target module.
In this embodiment, after the front-end project development device acquires the event information corresponding to the front-end project development request, the front-end project development device first determines whether the modules of the same type are defined in the early stage according to the event information, and if so, the front-end project development device does not need to repeatedly define the modules, so that on one hand, the working efficiency of developers is reduced, on the other hand, the multiplexing of the modules is realized, and the development efficiency of the front-end project is effectively improved.
In addition, it may be understood that the event information in this embodiment may correspond to one or more target modules, and the front-end project development device may determine, according to a comparison result of the event information and preset information of each definition module in the preset module set, the number of target modules specifically required to be defined.
Further, based on the above-described embodiments of the front-end project development method of the present invention, a third embodiment of the front-end project development method of the present invention is proposed.
The embodiment is a specific implementation manner of step S20 in the first embodiment, including:
calling a preset Fesx construction function, and encapsulating Vue.set through the preset Fesx construction function to form a data storage area of each target module;
and constructing module data of each target module through the preset Fesx constructor, and storing the module data into the data storage area corresponding to the target module.
In this embodiment, the front-end project development device presets a Fesx constructor, which is a tool function for providing a data state implemented by packaging vue.set, and the front-end project development device calls the preset Fesx constructor, packages vue.set through the preset Fesx constructor, and forms a data storage area of the target module; then, the front-end project development equipment builds module data of a target module through a preset Fesx constructor, namely, the Fesx constructor contains a new command, creates an empty object as a returned object instance through the new command in the Fesx constructor, then points a prototype of the empty object to a prototype attribute of the constructor, assigns the empty object to the this keyword in the interior of the function, and starts executing internal codes of the Fesx constructor; a return statement is arranged in the Fesx constructor, an object follows the return statement, an object designated by the return statement is returned after the new command is executed, and the front-end project development equipment takes the object designated by the return statement as module data of a target module; the front-end project development device saves the module data to the data storage area.
In this embodiment, the front-end project development device sets a data storage area of module data for each target module, and stores the module data of each target module in the data storage area, so that the module data of the modules are independent of each other, and effective management of the module data is facilitated.
Referring to fig. 4, fig. 4 is a schematic diagram of functional modules of an embodiment of a front-end project development apparatus according to the present invention, the front-end project development apparatus includes:
the request receiving module 10 is configured to obtain event information corresponding to a front-end project development request when the front-end project development request is received;
a definition construction module 20, configured to define target modules according to the event information, construct module data of each of the target modules, and store the module data;
the information injection module 30 is configured to inject an event triggering method and/or a target monitoring event for each target module according to target event information corresponding to each target module;
and the project integration module 40 is configured to perform module integration according to the module data, the event triggering method, and/or the target monitoring event of each target module, so as to obtain a front end code corresponding to the front end project development request.
In one embodiment, the definition building module 20 includes:
the comparison judging unit is used for comparing the event information with the preset information of each definition module in the preset module set and judging whether target preset information matched with the event information exists or not;
the interface output unit is used for outputting a module setting interface comprising the event information if the target preset information matched with the event information does not exist, so that a developer can select the target event information from the event information;
and the module definition unit is used for receiving the target event information selected based on the module setting interface and generating a target module corresponding to the target event information.
In one embodiment, the definition building module 20 includes:
and the matching determining unit is used for taking the custom module corresponding to the target preset information as a target module if the target preset information matched with the event information exists.
In one embodiment, the definition building module 20 includes:
the construction area unit is used for calling a preset Fesx construction function, and encapsulating Vue.set through the preset Fesx construction function to form a data storage area of each target module;
and the construction data unit is used for constructing module data of each target module through the preset Fesx constructor and storing the module data into the data storage area corresponding to the target module.
In one embodiment, the information injection module 30 includes:
the information traversing unit is used for traversing the target event information corresponding to each target module through a preset event monitoring manager;
the method injection unit is used for injecting an event triggering method corresponding to the triggering configuration information for the target module if the triggering configuration information is contained in the target event information;
and the event injection unit is used for injecting a target monitoring event corresponding to the monitoring configuration information for the target module if the target event information contains the monitoring configuration information.
In one embodiment, the project integration module 40 includes:
the information association unit is used for associating the module data, the event triggering method and/or the target monitoring event of each target module as a module index of the target module;
and the traversal loading unit is used for adding the module index into a preset module catalog, traversing the preset module catalog, and loading the target module according to the module index to obtain a front-end code corresponding to the front-end project development request.
The functional modules of the front-end project development device implement the embodiments of the front-end project development method of the present invention, and are not described herein.
It should be noted that, in this document, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or system 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 system. 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 system that comprises the element.
The foregoing embodiment numbers of the present invention are merely for the purpose of description, and do not represent the advantages or disadvantages of the embodiments.
From the above description of the embodiments, it will be clear to those skilled in the art that the above-described embodiment method may be implemented by means of software plus a necessary general hardware platform, but of course may also be implemented by means of hardware, but in many cases the former is a preferred embodiment. Based on such understanding, the technical solution of the present invention may be embodied essentially or in a part contributing to the prior art in the form of a software product stored in a storage medium (e.g. ROM/RAM, magnetic disk, optical disk) as described above, comprising instructions for causing a terminal device (which may be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to perform the method according to the embodiments of the present invention.
The foregoing description is only of the preferred embodiments of the present invention, and is not intended to limit the scope of the invention, but rather is intended to cover any equivalents of the structures or equivalent processes disclosed herein or in the alternative, which may be employed directly or indirectly in other related arts.
Claims (10)
1. The front-end project development method is characterized by comprising the following steps of:
when a front-end project development request is received, acquiring event information corresponding to the front-end project development request;
defining target modules according to the event information, constructing module data of each target module, storing the module data into a data storage area corresponding to the target module, and communicating data states among the target modules;
injecting an event triggering method and/or a target monitoring event for each target module according to the target event information corresponding to each target module;
and carrying out module integration according to the module data of each target module, the event triggering method and/or the target monitoring event to obtain a front-end code corresponding to the front-end project development request.
2. The front-end project development method of claim 1, wherein the step of defining a target module according to the event information comprises:
comparing the event information with preset information of each definition module in a preset module set, and judging whether target preset information matched with the event information exists or not;
if no target preset information matched with the event information exists, outputting a module setting interface comprising the event information so as to enable a developer to select target event information from the event information;
and receiving target event information selected based on the module setting interface, and generating a target module corresponding to the target event information.
3. The front-end project development method according to claim 2, wherein the step of comparing the event information with preset information of each definition module in a preset module set to determine whether there is target preset information matching the event information, comprises:
and if the target preset information matched with the event information exists, taking the custom module corresponding to the target preset information as a target module.
4. The front-end project development method of claim 1, wherein the step of constructing and storing module data of each of the target modules comprises:
calling a preset Fesx construction function, and encapsulating Vue.set through the preset Fesx construction function to form a data storage area of each target module;
and constructing module data of each target module through the preset Fesx constructor, and storing the module data into the data storage area corresponding to the target module.
5. The front-end project development method according to claim 1, wherein the step of injecting the event triggering method and/or the target listening event for each target module according to the target event information corresponding to each target module comprises:
traversing target event information corresponding to each target module through a preset event monitoring manager;
if the target event information contains trigger configuration information, an event trigger method corresponding to the trigger configuration information is injected into the target module;
if the target event information contains monitoring configuration information, a target monitoring event corresponding to the monitoring configuration information is injected into the target module.
6. The front-end project development method according to any one of claims 1 to 5, wherein the step of obtaining the front-end code corresponding to the front-end project development request by performing module integration according to the module data, the event triggering method, and/or the target listening event of each of the target modules includes:
associating the module data, the event triggering method and/or the target monitoring event of each target module as a module index of the target module;
and adding the module index into a preset module catalog, traversing the preset module catalog, and loading the target module according to the module index to obtain a front-end code corresponding to the front-end project development request.
7. A front-end project development device, comprising:
the request receiving module is used for acquiring event information corresponding to the front-end project development request when the front-end project development request is received;
the definition construction module is used for defining target modules according to the event information, constructing module data of each target module and storing the module data into a data storage area corresponding to the target module, wherein the data states of the target modules can be communicated;
the information injection module is used for injecting an event triggering method and/or a target monitoring event for each target module according to the target event information corresponding to each target module;
and the project integration module is used for carrying out module integration according to the module data, the event triggering method and/or the target monitoring event of each target module to obtain a front-end code corresponding to the front-end project development request.
8. The front-end project development apparatus of claim 7, wherein the definition building module comprises:
the comparison judging unit is used for comparing the event information with the preset information of each definition module in the preset module set and judging whether target preset information matched with the event information exists or not;
the interface output unit is used for outputting a module setting interface comprising the event information if the target preset information matched with the event information does not exist, so that a developer can select the target event information from the event information;
and the module definition unit is used for receiving the target event information selected based on the module setting interface and generating a target module corresponding to the target event information.
9. A front-end project development apparatus, characterized in that the front-end project development apparatus comprises: a memory, a processor, and a front-end project development program stored on the memory and executable on the processor, which when executed by the processor, implements the steps of the front-end project development method of any one of claims 1 to 6.
10. A computer-readable storage medium, wherein a front-end project development program is stored on the computer-readable storage medium, which when executed by a processor, implements the steps of the front-end project development method according to any one of claims 1 to 6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910669861.1A CN110362309B (en) | 2019-07-23 | 2019-07-23 | Front-end project development method, device, equipment and computer readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910669861.1A CN110362309B (en) | 2019-07-23 | 2019-07-23 | Front-end project development method, device, equipment and computer readable storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110362309A CN110362309A (en) | 2019-10-22 |
| CN110362309B true CN110362309B (en) | 2023-09-08 |
Family
ID=68220097
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910669861.1A Active CN110362309B (en) | 2019-07-23 | 2019-07-23 | Front-end project development method, device, equipment and computer readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110362309B (en) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113064676A (en) * | 2020-12-29 | 2021-07-02 | 上海金融期货信息技术有限公司 | Method for remote component sharing mechanism during front-end operation based on JS entrance |
| CN116107778B (en) * | 2023-04-13 | 2023-07-11 | 深圳复临科技有限公司 | Front-end event response realization method, device, terminal equipment and readable storage medium |
Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102654831A (en) * | 2011-03-04 | 2012-09-05 | 百度在线网络技术（北京）有限公司 | Device and method for intensively controlling WEB page event and state |
| CN107291523A (en) * | 2017-08-01 | 2017-10-24 | 北京亚鸿世纪科技发展有限公司 | A kind of web front end message bus system |
| CN107704243A (en) * | 2017-10-19 | 2018-02-16 | 用友网络科技股份有限公司 | Construction method and device, the computer equipment and storage medium of front-end interface |
| CN108009030A (en) * | 2017-12-04 | 2018-05-08 | 北京三快在线科技有限公司 | Communication means and device and computing device |
| CN108228253A (en) * | 2017-12-29 | 2018-06-29 | 武汉璞华大数据技术有限公司 | A kind of APP construction methods and system |
| CN108733375A (en) * | 2018-05-29 | 2018-11-02 | 厦门白山耘科技有限公司 | Web front-end configuration melts forwarding method, device, storage medium and computer equipment |
| CN109032568A (en) * | 2018-07-13 | 2018-12-18 | 孟智平 | Generation method, terminal device and the storage medium of programmed logic |
| EP3435228A1 (en) * | 2017-07-28 | 2019-01-30 | Sap Se | Merging applications |
| CN109408055A (en) * | 2018-10-10 | 2019-03-01 | 苏州好玩友网络科技有限公司 | Cross-platform GUI touch event analytic method under Unity environment |
| US10223176B1 (en) * | 2017-10-13 | 2019-03-05 | Amazon Technologies, Inc. | Event handler nodes for visual scripting |
| CN109725901A (en) * | 2018-05-31 | 2019-05-07 | 中国平安人寿保险股份有限公司 | Development approach, device, equipment and the computer storage medium of front-end code |
Family Cites Families (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9384005B2 (en) * | 2009-08-27 | 2016-07-05 | Adobe Systems Incorporated | Systems and methods for dynamic configuration of client-side development environments through use of application servers |
| EP3115898B1 (en) * | 2015-07-06 | 2022-06-15 | Intuilab | Method for generating user-level events for an application |
| KR101747032B1 (en) * | 2016-04-21 | 2017-06-14 | 한국과학기술원 | Modular controller in software defined networking environment and operating method thereof |
| US20190034209A1 (en) * | 2017-07-28 | 2019-01-31 | Sap Se | Building and using behavior-based applications |
-
2019
- 2019-07-23 CN CN201910669861.1A patent/CN110362309B/en active Active
Patent Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102654831A (en) * | 2011-03-04 | 2012-09-05 | 百度在线网络技术（北京）有限公司 | Device and method for intensively controlling WEB page event and state |
| EP3435228A1 (en) * | 2017-07-28 | 2019-01-30 | Sap Se | Merging applications |
| CN107291523A (en) * | 2017-08-01 | 2017-10-24 | 北京亚鸿世纪科技发展有限公司 | A kind of web front end message bus system |
| US10223176B1 (en) * | 2017-10-13 | 2019-03-05 | Amazon Technologies, Inc. | Event handler nodes for visual scripting |
| CN107704243A (en) * | 2017-10-19 | 2018-02-16 | 用友网络科技股份有限公司 | Construction method and device, the computer equipment and storage medium of front-end interface |
| CN108009030A (en) * | 2017-12-04 | 2018-05-08 | 北京三快在线科技有限公司 | Communication means and device and computing device |
| CN108228253A (en) * | 2017-12-29 | 2018-06-29 | 武汉璞华大数据技术有限公司 | A kind of APP construction methods and system |
| CN108733375A (en) * | 2018-05-29 | 2018-11-02 | 厦门白山耘科技有限公司 | Web front-end configuration melts forwarding method, device, storage medium and computer equipment |
| CN109725901A (en) * | 2018-05-31 | 2019-05-07 | 中国平安人寿保险股份有限公司 | Development approach, device, equipment and the computer storage medium of front-end code |
| CN109032568A (en) * | 2018-07-13 | 2018-12-18 | 孟智平 | Generation method, terminal device and the storage medium of programmed logic |
| CN109408055A (en) * | 2018-10-10 | 2019-03-01 | 苏州好玩友网络科技有限公司 | Cross-platform GUI touch event analytic method under Unity environment |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110362309A (en) | 2019-10-22 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20120159421A1 (en) | System and Method for Exclusion of Inconsistent Objects from Lifecycle Management Processes | |
| US8024721B2 (en) | System and method for implementing a safe framework | |
| CN111142933B (en) | Workflow generation method and device, computer equipment and storage medium | |
| CN110362309B (en) | Front-end project development method, device, equipment and computer readable storage medium | |
| US10282690B1 (en) | Mainframe workflow manager system and method | |
| CN111026634A (en) | Interface automation test system, method, device and storage medium | |
| US8782470B2 (en) | Generation of test data for web service-based test automation and semi-automated test data categorization | |
| CN113867600A (en) | Development method and device for processing streaming data and computer equipment | |
| CN111443901A (en) | Business expansion method and device based on Java reflection | |
| CN112256318A (en) | Construction method and equipment for dependent product | |
| CN115794213A (en) | Configurable object management method, device and equipment based on embedded system | |
| CN111259042B (en) | Dynamic query method and system | |
| US20110302217A1 (en) | Semantic user interface data assembling | |
| CN111949529A (en) | System debugging method and device, computer equipment and storage medium | |
| CN109408212B (en) | Task scheduling component construction method and device, storage medium and server | |
| CN115373886A (en) | Service group container shutdown method, device, computer equipment and storage medium | |
| CN115729590A (en) | Service deployment method, device, equipment and computer readable storage medium | |
| CN114296789A (en) | Business processing method, device, equipment and storage medium based on full-flow configuration | |
| CN114490694A (en) | Business rule processing method and device, server and storage medium | |
| CN111124386B (en) | Animation event processing method, device, equipment and storage medium based on Unity | |
| CN110336693B (en) | Method, device, equipment and storage medium for managing network block equipment | |
| CN111736921A (en) | Service configuration method, device, equipment and computer readable storage medium | |
| CN112564979A (en) | Execution method and device for construction task, computer equipment and storage medium | |
| CN113032004A (en) | Method, apparatus and program product for managing development jobs in a development environment | |
| US20130067500A1 (en) | Legacy application integration within a bundle framework |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |