CN112685036A - Front-end code generation method and device, computer equipment and storage medium - Google Patents
Front-end code generation method and device, computer equipment and storage medium Download PDFInfo
- Publication number
- CN112685036A CN112685036A CN202110042851.2A CN202110042851A CN112685036A CN 112685036 A CN112685036 A CN 112685036A CN 202110042851 A CN202110042851 A CN 202110042851A CN 112685036 A CN112685036 A CN 112685036A
- Authority
- CN
- China
- Prior art keywords
- node
- end code
- target
- instruction
- logic
- 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.)
- Withdrawn
Links
- 238000000034 method Methods 0.000 title claims abstract description 261
- 238000010276 construction Methods 0.000 claims abstract description 23
- 230000008569 process Effects 0.000 claims description 212
- 238000010586 diagram Methods 0.000 claims description 38
- 238000012545 processing Methods 0.000 claims description 33
- 230000006870 function Effects 0.000 claims description 32
- 230000002776 aggregation Effects 0.000 claims description 12
- 238000004220 aggregation Methods 0.000 claims description 12
- 230000004044 response Effects 0.000 claims description 9
- 230000000694 effects Effects 0.000 claims description 4
- 238000011161 development Methods 0.000 abstract description 22
- 230000000007 visual effect Effects 0.000 abstract description 9
- 238000004891 communication Methods 0.000 description 7
- 238000012546 transfer Methods 0.000 description 4
- 238000004590 computer program Methods 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000006978 adaptation Effects 0.000 description 1
- 238000013473 artificial intelligence Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000013497 data interchange Methods 0.000 description 1
- 239000000284 extract Substances 0.000 description 1
- 238000005111 flow chemistry technique Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000007726 management method Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Images
Landscapes
- Stored Programmes (AREA)
Abstract
The disclosure discloses a front-end code generation method and device, computer equipment and a storage medium, and belongs to the technical field of front-end development. The method comprises the following steps: and displaying a flow chart construction interface, constructing a target logic flow chart in a flow chart display area based on the configuration instruction, acquiring flow description information by reading the target logic flow chart, and generating an executable code file according to the flow description information. Through constructing a visual logic flow chart, configuring each flow node in the flow chart, generating an executable file after configuration, and realizing the abstraction of front-end code logic, thereby enabling each front-end code to be arranged and combined to realize the configurability of the logic flow, solving the problem of poor applicability caused by large granularity of the configurable front-end code, improving the multiplexing efficiency of the front-end code, and further improving the efficiency of front-end development.
Description
Technical Field
The present disclosure relates to the field of front-end development technologies, and in particular, to a front-end code generation method and apparatus, a computer device, and a storage medium.
Background
At present, in the process of front-end page development, developers who write front-end codes corresponding to different front-end pages may be different, and the front-end codes produced by different developers are different, and even the problem of writing quality may occur, so that the front-end codes need to be reused in the development process.
In the related art, during the development of the enterprise front end, similar business processing logic may exist in different business projects, and the similar business processing logic is usually extracted and multiplexed by using a front end component or npm (Node Package Manager) Package of the front end Package.
However, in the solution in the related art, in the process of practical application, the front-end component or npm package of the front-end package extracts the logic for describing the overall operation flow of the page, which results in that the front-end component or npm package can be invoked to implement multiplexing only when a similar overall business logic flow occurs in the process of page development, thereby resulting in poor applicability and reducing the efficiency of front-end page development.
Disclosure of Invention
The present disclosure provides a front-end code generation method, apparatus, computer device, and storage medium. The technical scheme is as follows:
in one aspect, a front-end code generation method is provided, and the method includes:
displaying a flow chart construction interface, wherein the flow chart construction interface comprises a flow node selection area and a flow chart display area; the process node selection area is used for displaying each process node; the flow node indicates a front-end code segment for implementing a specified function;
constructing a target logic flow chart in the flow chart display area based on a configuration instruction; the configuration instruction comprises a selection instruction, an editing instruction and a connection instruction; the selection instruction is used for selecting a target process node in the process node selection area; the editing instruction is used for editing the node attribute of the target flow node in the flow diagram display area; the connecting instruction is used for connecting each target process node in the process diagram display area;
acquiring process description information by reading the target logic flow chart; the process description information is used for indicating the node attribute corresponding to the target process node and the processing logic of each target process node contained in the target logic flow chart;
and generating an executable code file according to the flow description information.
In one possible implementation manner, in response to the flow nodes including a first type of flow nodes and a second type of flow nodes; the first type of flow node indicates a configurable front-end code segment; the second type of flow node indicates an unconfigurable front-end code segment;
generating an executable code file according to the process description information, wherein the executable code file comprises:
acquiring a program instance corresponding to the node attribute, adding the program instance into the front-end code segment corresponding to the first type of process node, and generating the configured front-end code segment;
acquiring the front-end code segment corresponding to the second type of process node;
arranging said front-end code segments and said configured front-end code segments according to said processing logic to generate an executable code file.
In a possible implementation manner, the obtaining the process description information by reading the target logic flowchart includes:
and acquiring the target process node contained in the target logic flow chart, the node attribute corresponding to the first type of process node and the processing logic according to the process description information.
In one possible implementation manner, the process nodes include a control node, an active node, and a custom node;
the first type of flow nodes comprise the active nodes and the custom nodes; the second type of process node comprises the control node;
the control node indicates a front-end code segment for controlling a flow, the active node indicates the front-end code segment for defining a specified logical function, and the custom node indicates the front-end code segment for performing a specified operation.
In one possible implementation, in response to the active node corresponding to a front-end code segment having specified start front-end code content, specified end front-end code content, and configurable front-end code content therein;
adding the program instance corresponding to the acquired node attribute into the front-end code segment corresponding to the first type of process node to generate the configured front-end code segment, wherein the method comprises the following steps:
determining the configurable front-end code content corresponding to the active node according to the node attribute;
generating the configured front-end code segment according to the start front-end code content, the end front-end code content and the configurable front-end code content.
In one possible implementation, the control nodes include a branch node, a parallel node, an aggregation node, a loop node, a start node, and an end node;
the branch node is used for judging and guiding the flow to the specified branch according to the judgment result;
the parallel nodes are used for starting to execute at least two active nodes at the same time;
the aggregation node is used for determining to end the parallel task being executed;
the loop node is used for defining loop logic;
the starting node is used for indicating the starting of the logic flow;
the end node is used for indicating the end of the logic flow.
In one possible implementation, the method further includes:
and uploading the executable code file to a logic multiplexing platform, wherein the logic multiplexing platform is a network platform for a user to download or upload the executable code file.
In one aspect, an apparatus for generating front-end codes is provided, the apparatus comprising:
the interface display module is used for displaying a flow chart construction interface, and the flow chart construction interface comprises a flow node selection area and a flow chart display area; the process node selection area is used for displaying each process node; the flow node indicates a front-end code segment for implementing a specified function;
the flow chart building module is used for building a target logic flow chart in the flow chart display area based on a configuration instruction; the configuration instruction comprises a selection instruction, an editing instruction and a connection instruction; the selection instruction is used for selecting a target process node in the process node selection area; the editing instruction is used for editing the node attribute of the target flow node in the flow diagram display area; the connecting instruction is used for connecting each target process node in the process diagram display area;
the information acquisition module is used for acquiring the flow description information by reading the target logic flow chart; the process description information is used for indicating the node attribute corresponding to the target process node and the processing logic of each target process node contained in the target logic flow chart;
and the file generation module is used for generating an executable code file according to the flow description information.
In one possible implementation manner, in response to the flow nodes including a first type of flow nodes and a second type of flow nodes; the first type of flow node indicates a configurable front-end code segment; the second type of flow node indicates an unconfigurable front-end code segment;
the file generation module comprises:
the code generation submodule is used for acquiring a program instance corresponding to the node attribute, adding the program instance into the front-end code segment corresponding to the first type of process node, and generating the configured front-end code segment;
the code acquisition submodule is used for acquiring the front-end code segment corresponding to the second type of process node;
and the file generation submodule is used for arranging the front-end code segments and the configured front-end code segments according to the processing logic to generate an executable code file.
In a possible implementation manner, the information obtaining module includes:
and the information acquisition submodule is used for acquiring the target process nodes contained in the target logic flow chart, the node attributes corresponding to the first type of process nodes and the processing logic according to the process description information.
In one possible implementation manner, the process nodes include a control node, an active node, and a custom node;
the first type of flow nodes comprise the active nodes and the custom nodes; the second type of process node comprises the control node;
the control node indicates a front-end code segment for controlling a flow, the active node indicates the front-end code segment for defining a specified logical function, and the custom node indicates the front-end code segment for performing a specified operation.
In one possible implementation, in response to the active node corresponding to a front-end code segment having specified start front-end code content, specified end front-end code content, and configurable front-end code content therein;
the code generation submodule comprises:
a content determining unit, configured to determine the configurable front-end code content corresponding to the active node according to the node attribute;
a code generating unit for generating the configured front-end code segment according to the start front-end code content, the end front-end code content and the configurable front-end code content.
In one possible implementation, the control nodes include a branch node, a parallel node, an aggregation node, a loop node, a start node, and an end node;
the branch node is used for judging and guiding the flow to the specified branch according to the judgment result;
the parallel nodes are used for starting to execute at least two active nodes at the same time;
the aggregation node is used for determining to end the parallel task being executed;
the loop node is used for defining loop logic;
the starting node is used for indicating the starting of the logic flow;
the end node is used for indicating the end of the logic flow.
In one possible implementation, the apparatus further includes:
and the file uploading module is used for uploading the executable code file to a logic multiplexing platform, and the logic multiplexing platform is a network platform for a user to download or upload the executable code file.
In another aspect, a computer device is provided, which includes a processor and a memory, where at least one instruction, at least one program, a set of codes, or a set of instructions is stored in the memory, and the at least one instruction, the at least one program, the set of codes, or the set of instructions is loaded and executed by the processor to implement the front-end code generating method.
In yet another aspect, a computer-readable storage medium is provided, in which at least one instruction, at least one program, a set of codes, or a set of instructions is stored, which is loaded and executed by a processor to implement the above front-end code generation method.
According to one aspect of the present application, a computer program product is provided that includes computer instructions stored in a computer readable storage medium. The processor of the computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions to cause the computer device to perform the front-end code generation method provided in the various alternative implementations of the above-described aspects.
The technical scheme provided by the embodiment of the disclosure can have the following beneficial effects:
the computer equipment configures each process node in the flow chart by constructing a visual logic flow chart, generates an executable file after configuration, and realizes the abstraction of the front-end code logic, so that each front-end code is arranged and combined to realize the configurability of the logic flow, the problem of poor applicability caused by large granularity of the configurable front-end code is solved, the multiplexing efficiency of the front-end code is improved, and the efficiency of front-end development is improved.
It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and together with the description, serve to explain the principles of the disclosure.
FIG. 1 is a schematic diagram illustrating a front-end code generation system in accordance with an exemplary embodiment;
FIG. 2 is a flow diagram illustrating a front-end code generation method in accordance with an exemplary embodiment;
FIG. 3 is a flow diagram illustrating a front-end code generation method in accordance with an exemplary embodiment;
FIG. 4 is a schematic diagram of a flow chart building interface involved in the embodiment shown in FIG. 3;
FIG. 5 is a flow chart of a front end code generation use involved in the embodiment shown in FIG. 3;
FIG. 6 is a flow diagram illustrating an executor performing front-end code generation in accordance with an exemplary embodiment;
FIG. 7 is a block diagram illustrating a front-end code generation apparatus in accordance with an exemplary embodiment;
FIG. 8 is a schematic diagram illustrating a configuration of a computer device, according to an example embodiment.
Detailed Description
Reference will now be made in detail to the exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, like numbers in different drawings represent the same or similar elements unless otherwise indicated. The implementations described in the exemplary embodiments below are not intended to represent all implementations consistent with the present disclosure. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the present disclosure, as detailed in the appended claims.
It is to be understood that reference herein to "a number" means one or more and "a plurality" means two or more. "and/or" describes the association relationship of the associated objects, meaning that there may be three relationships, e.g., a and/or B, which may mean: a exists alone, A and B exist simultaneously, and B exists alone. The character "/" generally indicates that the former and latter associated objects are in an "or" relationship.
For convenience of understanding, terms referred to in the embodiments of the present disclosure are explained below.
1) Front end development
Front-end development is a process of creating a front-end interface such as a Web page or an APP (Application) and presenting the front-end interface to a user, and user interface interaction of internet products can be realized through HTML (Hyper Text Markup Language), CSS (Cascading Style Sheet), JavaScript (transliteration scripting Language) and various derived technologies, frameworks and solutions.
2) Bag management platform (npm)
npm is a package hosting platform under nodejs (operating environment), which is used to host data packages and can be applied in Web front-end development for uploading or downloading data packages.
FIG. 1 is a schematic diagram illustrating a front-end code generation system in accordance with an exemplary embodiment. The front-end code generation system includes a terminal 110 and a server 120.
The developer inputs configuration information on the terminal 110, wherein the configuration information includes a target process node, a node attribute and a processing logic, a front-end code segment corresponding to the target process node is acquired through the server 120, the server configures the target process node according to the processing logic and the node attribute, and a process of generating a reusable front-end code file for a requirement is realized in the front-end code generation system.
The server 120 may include a memory, which may be used to store the front-end code segments corresponding to the flow nodes, or the front-end code segments corresponding to the flow nodes may also be stored in a code repository.
Developers can upload, download and modify front-end codes in the code warehouse, the process of reusing the front-end codes is realized, and the process of updating the front-end codes through the mutual cooperation modification is carried out.
The terminal 110 may perform data transmission with the server 120 through a wired or wireless network.
The server 120 may be a server, or may be a server cluster composed of several servers, or may include one or more virtualization platforms, or may be a cloud computing service center.
The server 120 may be an independent physical server, a server cluster or a distributed system formed by a plurality of physical servers, or a cloud server providing basic cloud computing services such as a cloud service, a cloud database, cloud computing, a cloud function, cloud storage, a web service, cloud communication, a middleware service, a domain name service, a security service, a CDN (Content Delivery Network), a big data and artificial intelligence platform. The terminal may be, but is not limited to, a smart phone, a tablet computer, a laptop computer, a desktop computer, a smart speaker, a smart watch, and the like. The terminal and the server may be directly or indirectly connected through wired or wireless communication, and the application is not limited herein.
Optionally, the wired or wireless networks described above use standard communication techniques and/or protocols. The Network is typically the Internet, but may be any Network including, but not limited to, any combination of Local Area Networks (LANs), Metropolitan Area Networks (MANs), Wide Area Networks (WANs), mobile, wireless networks, private networks, or virtual private networks. In some embodiments, data exchanged over a network is represented using techniques and/or formats including Hypertext Mark-up Language (HTML), Extensible Markup Language (XML), and the like. All or some of the links may also be encrypted using conventional encryption techniques such as Secure Socket Layer (SSL), Transport Layer Security (TLS), Virtual Private Network (VPN), Internet Protocol Security (IPsec). In other embodiments, custom and/or dedicated data communication techniques may also be used in place of, or in addition to, the data communication techniques described above.
In order to standardize the effect of flow processing logic and logic multiplexing and to promote the process of the platform. In the previous enterprise front-end development, if similar business processing logics exist in different business projects, no matter the front-end packaged components or npm packages, the corresponding granularity is large and is not suitable for specific front-end code processing logics, so that an original method such as copying or rewriting is generally adopted to code in different projects, and the front-end codes produced by different developers are different in size and cannot control the writing quality. And the modification cost is high when the related unified business process is changed, and secondary development is needed for each change, which can induce subsequent risks and waste manpower. Abstraction of common code logic and permutation and combination of unit functions which can be developed by a developer can be realized by the front-end code generation system as shown in fig. 1. The multiplexing of logic code is implemented at a smaller granularity.
FIG. 2 is a flow diagram illustrating a front-end code generation method in accordance with an exemplary embodiment. The front-end code generation method can be applied to computer equipment, and can be used for automatically extracting the front-end components conforming to the configuration information in the project, automatically generating the executable files corresponding to the front-end components and publishing the executable files corresponding to the front-end components on the shared platform, so that the purpose of generating the configured front-end codes is achieved. As shown in fig. 3, the front-end code generation method may include the steps of:
in step 201, a flow chart construction interface is displayed, wherein the flow chart construction interface comprises a flow node selection area and a flow chart display area; the process node selection area is used for displaying each process node; the flow node indicates a front-end code segment for implementing the specified function.
In the embodiment of the disclosure, a flow chart construction interface can be displayed on a terminal in a front-end code generation system, and a developer can perform relevant operations on the flow chart construction interface to achieve the purpose of flow chart construction.
The flow chart construction interface comprises a flow node selection area and a flow chart display area; the process node selection area is used for displaying each process node; the flow node indicates a front-end code segment for implementing the specified function.
The flow node is formed by abstracting a front-end code segment for realizing a specified function.
In a possible implementation manner, the process nodes are displayed in a node selection area in the flow chart construction interface, the process nodes are divided into different node types according to different functions of the process nodes, and the process nodes are displayed in the node selection area according to the node types.
In addition, the flow diagram display area may display each flow node selected by the developer and a connection status of each flow node, where the connection status is used to indicate an execution sequence of each flow node.
In step 202, based on the configuration instruction, the flow chart shows the area building target logic flow chart; the configuration instruction comprises a selection instruction, an editing instruction and a connection instruction; the selection instruction is used for selecting a target process node in the process node selection area; the editing instruction is used for editing the node attribute of the target flow node in the flow chart display area; the connection instructions are used for connecting each target process node in the process diagram display area.
In the embodiment of the present disclosure, the computer device selects a target process node from the node selection area according to the received configuration instruction and the received selection instruction, where the target process node is displayed in the process diagram display area, edits a node attribute of the target process node according to an editing instruction in the process diagram display area, determines a connection relationship between the target process nodes according to the connection instruction, and finally displays a constructed target logic process diagram in the process diagram display area.
Wherein, the target flow node is the flow node designated to be selected in the selection instruction.
Illustratively, the configuration instruction is configured by a developer, and in the process of constructing the target logic flow chart, the developer determines the flow node as the target flow node by dragging the flow node in the node selection area to the flow chart display area, or directly selects the flow node and simultaneously displays the selected flow node as the target flow node in the flow chart display area. By selecting the target process nodes in the process diagram display area, the node attributes corresponding to the selected target process nodes can be edited, and the target process nodes are connected through the connection instruction.
In step 203, obtaining flow description information by reading the target logic flow chart; the process description information is used for indicating the node attributes corresponding to the target process nodes contained in the target logic flow diagram and the processing logic of each target process node.
In the embodiment of the present disclosure, the computer device reads, by acquiring the target logic flowchart that is completed by the construction, the target process node information, the connection relationship, and the configured node attribute included in the target logic flowchart as the process description information.
The process description information may instruct the computer device to load a target front-end code segment corresponding to the target process node, and may enable the computer device to obtain a front-end code execution sequence of the target process node.
In step 204, an executable code file is generated based on the flow description information.
In the embodiment of the present disclosure, according to the process description information, the computer device loads the configured target process node according to the processing logic of the obtained target process node, and obtains the front-end code segment corresponding to the configured target process node, and obtains the executable code file corresponding to the target logic flowchart.
In summary, the front-end code generation method provided in the embodiments of the present disclosure. Through the scheme, the computer equipment configures each process node in the flow chart by constructing the visual logic flow chart, generates the configured executable file, realizes the abstraction of the front-end code logic, so that each front-end code is arranged and combined to realize the configurability of the logic flow, the problem of poor applicability caused by large granularity of the configurable front-end code is solved, the multiplexing efficiency of the front-end code is improved, and the efficiency of front-end development is improved.
FIG. 3 is a flow diagram illustrating a front-end code generation method in accordance with another illustrative embodiment. The front-end code generation method can be applied to computer equipment, and can be used for automatically extracting the front-end components which accord with the configuration information in the project to generate corresponding executable files and publishing the executable files corresponding to the front-end components on a sharing platform, so that the purpose of sharing the front-end components is realized. As shown in fig. 3, the front-end component sharing method may include the following steps:
in step 301, a flowchart build interface is presented.
The flow chart construction interface comprises a flow node selection area and a flow chart display area; the process node selection area is used for displaying each process node; the flow node indicates a front-end code segment for implementing the specified function.
In one possible implementation manner, the node selection area in the flow chart construction interface displays each flow node according to the classification of the node type.
The process nodes are classified according to the node types and comprise control nodes, active nodes and user-defined nodes.
The control node indicates a front-end code segment for controlling the flow, the active node indicates a front-end code segment for defining the specified logic function, and the custom node indicates a front-end code segment for executing the specified operation.
In addition, the control nodes include a branch node, a parallel node, an aggregation node, a loop node, a start node, and an end node. The branch node is used for judging and guiding the flow to the specified branch according to the judgment result; the parallel nodes are used for starting to execute at least two active nodes at the same time; the aggregation node is used for determining to end the parallel task being executed; the circulation node is used for defining circulation logic; the starting node is used for indicating the starting of the logic flow; the end node is used for indicating the end of the logic flow.
In one possible implementation, the active node stores in the form of npm packets. The active nodes have a fixed input and output structure and have configurable node attributes.
For example, the active node may be used to implement an HTTP (Hyper Text Transfer Protocol) request.
In one possible implementation manner, the custom node is used to describe a designated operation in the logic flow, and implement the transfer between the flow nodes.
Illustratively, fig. 4 is a schematic diagram of a flowchart building interface according to an embodiment of the present disclosure. As shown in fig. 4, the left area in the flowchart building interface 40 is a node selection area 41, and the right area is a flowchart presentation area 42. The node selection area 41 includes a process node selection control 411 and a node type selection control 412. The flow chart display area 42 includes a target logic flow chart constructed by the start node 421, the active node 422, the parallel node 423, the branch node 424, the aggregation node 425, and the end node 426 selected by the flow node selection control 411. Wherein the connection arrows between the flow nodes may be connected by selecting two flow nodes in the flow diagram presentation area 42.
In one possible implementation, the process node constructs the target logical flow graph by describing a data structure in JSON (lightweight data interchange) format. The data structure in the JSON format includes three pieces of information, nodes, flow, and flow entry.
The nodes are used for describing information of each process node used in the target logic flow diagram, the nodes are data stored by key-value pairs, the key of a node object is a unique identifier of each process node instance, and the value of the node object comprises the type and the version of the process node and node attributes configured to the process node by a user. The flow is used for describing the sequence between the flow nodes and can be a series relation between the flow nodes, each key value of the flow object can be a unique identifier of one flow node instance, and the value of the flow object is a unique identifier of a subsequent node of the flow node. And flowEntry is used to describe the entry to the target logic flow diagram.
In one possible implementation, each process node is visually edited by the process node editor and then displayed in the node selection area.
In step 302, based on the configuration instructions, the flowchart shows the region build target logic flowchart.
In the embodiment of the present disclosure, based on the configuration instruction, the computer device constructs, in the flowchart display area, a target logic flowchart constructed after selecting the target flowchart node, configuring the flowchart node, and connecting the flowchart nodes.
The configuration instruction comprises a selection instruction, an editing instruction and a connection instruction; the selection instruction is used for selecting a target process node in the process node selection area; the editing instruction is used for editing the node attribute of the target flow node in the flow chart display area; the connection instructions are used for connecting each target process node in the process diagram display area.
In one possible implementation, the first type of flow node indicates a configurable front-end code segment; the second class of flow nodes indicates non-configurable front-end code segments.
The first type of process nodes can comprise active nodes and self-defined nodes; the second type of flow node may comprise a control node.
In a possible implementation manner, the user-defined node performs node creation and node configuration in the node selection area, creates and configures the user-defined node according to the editing configuration content input by the developer, and displays the user-defined node in the node selection area for selection after the user-defined node is created.
In step 303, the flow description information is obtained by reading the target logic flow diagram.
In an embodiment of the present disclosure, a computer device reads, via an executor, flow description information produced by a node editor according to a target logical flow graph.
In a possible implementation manner, the computer device obtains the target process node, the node attribute corresponding to the first type of process node, and the processing logic included in the target logic flow chart according to the process description information.
Wherein the executor is a finite state machine for executing each front-end code segment retrieved according to the processing logic. The executor may be used in javascript related code, and the processing logic is configured to indicate a connection relationship between flow nodes.
In step 304, an executable code file is generated based on the flow description information.
In the embodiment of the present disclosure, the computer device generates a corresponding executable file according to the target process node, the node attribute corresponding to the first type of process node, and the processing logic.
In a possible implementation manner, the computer device obtains a program instance corresponding to the node attribute, adds the program instance to a front-end code segment corresponding to the first type of flow node, and generates a configured front-end code segment.
The computer device may obtain the front-end code segment resource corresponding to the target process node according to the identifier of the target process node in the process description information.
In one possible implementation, in response to an active node having specified start front-end code content, specified end front-end code content, and configurable front-end code content in a front-end code segment; the computer equipment determines configurable front-end code content corresponding to the active node according to the node attribute; and generating configured front-end code segments according to the starting front-end code content, the ending front-end code content and the configurable front-end code content.
In another possible implementation manner, the computer device acquires the front-end code segment corresponding to the second type of process node.
The second type of process node may be a control node, and the computer device obtains an identifier of the control node, determines a node type of the control node, and obtains a fixed front-end code segment corresponding to the control node from the cache.
In one possible implementation, the computer device arranges the front-end code segments and the configured front-end code segments according to the processing logic to generate the executable code file.
The computer device can arrange the fixed front-end code segments corresponding to the acquired control nodes and the configured front-end code segments corresponding to the control nodes and the custom nodes according to the connection relation among the process nodes to form front-end codes of a specified execution sequence, and an actuator generates an executable code file.
For example, fig. 5 is a flow chart of front-end code generation and use according to an embodiment of the present disclosure. As shown in fig. 5, in the process of front-end page development, firstly, the computer device registers a development active node through a node editor (S51), then determines a required function unit according to the front-end page requirement being developed (S52), the computer device obtains a corresponding configuration instruction according to the required function unit, constructs a visual configuration logic flow diagram on a flow diagram construction interface through the node editor (S53), configures node attributes of the active node according to the editing instruction through the visual active node (S54), the executor reads the flow configuration information produced by the flow editor, loads relevant remote node resources, obtains flow description information including target flow nodes, configuration node attributes and flow node processing logic (S55), and the computer device generates a front-end code corresponding to the logic flow diagram through the execution of the executor, the corresponding executable code file is obtained (S56), and the executable code file is used directly in front-end page development to implement the required functions (S57).
In step 305, the executable code file is uploaded to the logical multiplexing platform.
In embodiments of the present disclosure, a computer device uploads an executable code file and corresponding flow description information to a logic multiplexing platform.
The logic multiplexing platform is a network platform for users to download or upload executable code files.
When a developer develops a front-end page, when a certain function needs to be realized, the developer can search each flow description information on the logic multiplexing platform, find an executable code file conforming to the corresponding function, download the executable code file and directly use the executable code file in the front-end page development to realize the corresponding function.
In a possible implementation manner, the logic multiplexing platform displays a visual logic flow diagram corresponding to the executable code file, so that developers can find the required executable code file quickly and accurately.
In summary, the front-end code generation method provided in the embodiments of the present disclosure. Through the scheme, the computer equipment configures each process node in the flow chart by constructing the visual logic flow chart, generates the configured executable file, realizes the abstraction of the front-end code logic, so that each front-end code is arranged and combined to realize the configurability of the logic flow, the problem of poor applicability caused by large granularity of the configurable front-end code is solved, the multiplexing efficiency of the front-end code is improved, and the efficiency of front-end development is improved.
FIG. 6 is a flow diagram illustrating an executor performing front-end code generation according to an exemplary embodiment. The executor executing the front-end code generation service may be executed by a computer device. As shown in fig. 6, the executor executing the front-end code generation service may include: the computer device initializes the executor (S61). Then, the computer apparatus reads the node configuration of each flow node in the target logical flow graph (S62). The flow configuration of the processing logic in the target logic flowchart is read (S63). The computer apparatus acquires an entry flow node, i.e., a start node among the control nodes (S64). It is then determined whether the current flow node is an entry node (S65). If the current process node is not the entry node, reading the flow data of the previous process node (S66), and reading the program instance of the previous process node (S67), then the computer device reads the current process node again, or if the current process node is the entry node, directly reading the current process node (S68), then determining whether the current process node is initialized (S69), if the current process node is not initialized, initializing the process node (S610), then determining the node type of the process node (S611), if the node type of the process node is determined to be a self-defined node, generating a corresponding execution function from the front-end code (S612), if the node type of the process node is determined to be an active node, obtaining the execution function of the node (S613), if the node type of the process node is determined to be a control node or after the execution function of the node is obtained, acquiring a trigger condition corresponding to the flow node (S614), if the flow node determines that initialization has been performed, reading a corresponding instance program from a cache (S615), and then determining whether triggering is currently possible (S616).
If the computer device determines that the trigger is possible, then it determines whether the flow node is a control node (S617), and if not, the computer device calculates an attribute value of the node (S618), then executes a node function corresponding to the attribute value (S619), and then determines an execution result of the executor.
If the execution is successful, the flow data is saved, the data of the current node is controlled to be transmitted to the next node (S620), and then whether the next process node exists is judged (S621).
If the node type is the aggregation node, the process of the same level as the node type is removed (S624), and the current process is upgraded to the parent process (S625). If the node type is judged to be a parallel node, the peer flow including the node is eliminated (S626), then a plurality of executor instances are created in a copying mode (S627), and then an executor is initialized (S61) to circulate the steps.
If the triggering is not possible at present, the current process is destroyed directly (S629), and then the current process is ended (S630). It is determined whether there is a peer process (S628), and if not, the process is terminated, and if so, the process proceeds to the peer process (S631).
If the execution fails, the current flow is directly destroyed (S629), and then the current flow is ended (S630). It is determined whether there is a peer process (S628), and if not, the process is terminated, and if so, the process proceeds to the peer process (S631).
If it is determined that the next node does not exist, the current process is directly destroyed (S629), and then the current process is ended (S630). It is determined whether there is a peer process (S628), and if not, the process is terminated, and if so, the process proceeds to the peer process (S631).
In summary, the front-end code generation method provided in the embodiments of the present disclosure. Through the scheme, the computer equipment configures each process node in the flow chart by constructing the visual logic flow chart, generates the configured executable file, realizes the abstraction of the front-end code logic, so that each front-end code is arranged and combined to realize the configurability of the logic flow, the problem of poor applicability caused by large granularity of the configurable front-end code is solved, the multiplexing efficiency of the front-end code is improved, and the efficiency of front-end development is improved.
Fig. 7 is a block diagram illustrating a front-end code generating apparatus according to an exemplary embodiment, and as shown in fig. 7, the front-end component sharing apparatus may be implemented as all or part of a computer device in hardware or a combination of hardware and software to perform all or part of the steps of the method shown in the corresponding embodiment of fig. 2 or fig. 3. The front-end code generating apparatus may include:
an interface display module 710, configured to display a flow chart construction interface, where the flow chart construction interface includes a flow node selection area and a flow chart display area; the process node selection area is used for displaying each process node; the flow node indicates a front-end code segment for implementing a specified function;
a flow chart construction module 720, configured to construct a target logic flow chart in the flow chart display area based on the configuration instruction; the configuration instruction comprises a selection instruction, an editing instruction and a connection instruction; the selection instruction is used for selecting a target process node in the process node selection area; the editing instruction is used for editing the node attribute of the target flow node in the flow diagram display area; the connecting instruction is used for connecting each target process node in the process diagram display area;
an information obtaining module 730, configured to obtain the process description information by reading the target logic flowchart; the process description information is used for indicating the node attribute corresponding to the target process node and the processing logic of each target process node contained in the target logic flow chart;
the file generating module 740 is configured to generate an executable code file according to the flow description information.
In one possible implementation manner, in response to the flow nodes including a first type of flow nodes and a second type of flow nodes; the first type of flow node indicates a configurable front-end code segment; the second type of flow node indicates an unconfigurable front-end code segment;
the file generating module 740 includes:
the code generation submodule is used for acquiring a program instance corresponding to the node attribute, adding the program instance into the front-end code segment corresponding to the first type of process node, and generating the configured front-end code segment;
the code acquisition submodule is used for acquiring the front-end code segment corresponding to the second type of process node;
and the file generation submodule is used for arranging the front-end code segments and the configured front-end code segments according to the processing logic to generate an executable code file.
In a possible implementation manner, the information obtaining module 730 includes:
and the information acquisition submodule is used for acquiring the target process nodes contained in the target logic flow chart, the node attributes corresponding to the first type of process nodes and the processing logic according to the process description information.
In one possible implementation manner, the process nodes include a control node, an active node, and a custom node;
the first type of flow nodes comprise the active nodes and the custom nodes; the second type of process node comprises the control node;
the control node indicates a front-end code segment for controlling a flow, the active node indicates the front-end code segment for defining a specified logical function, and the custom node indicates the front-end code segment for performing a specified operation.
In one possible implementation, in response to the active node corresponding to a front-end code segment having specified start front-end code content, specified end front-end code content, and configurable front-end code content therein;
the code generation submodule comprises:
a content determining unit, configured to determine the configurable front-end code content corresponding to the active node according to the node attribute;
a code generating unit for generating the configured front-end code segment according to the start front-end code content, the end front-end code content and the configurable front-end code content.
In one possible implementation, the control nodes include a branch node, a parallel node, an aggregation node, a loop node, a start node, and an end node;
the branch node is used for judging and guiding the flow to the specified branch according to the judgment result;
the parallel nodes are used for starting to execute at least two active nodes at the same time;
the aggregation node is used for determining to end the parallel task being executed;
the loop node is used for defining loop logic;
the starting node is used for indicating the starting of the logic flow;
the end node is used for indicating the end of the logic flow.
In one possible implementation, the apparatus further includes:
and the file uploading module is used for uploading the executable code file to a logic multiplexing platform, and the logic multiplexing platform is a network platform for a user to download or upload the executable code file.
In summary, the front-end code generation method provided in the embodiments of the present disclosure. Through the scheme, the computer equipment configures each process node in the flow chart by constructing the visual logic flow chart, generates the configured executable file, realizes the abstraction of the front-end code logic, so that each front-end code is arranged and combined to realize the configurability of the logic flow, the problem of poor applicability caused by large granularity of the configurable front-end code is solved, the multiplexing efficiency of the front-end code is improved, and the efficiency of front-end development is improved.
It should be noted that, when the apparatus provided in the foregoing embodiment implements the functions thereof, only the division of the above functional modules is illustrated, and in practical applications, the above functions may be distributed by different functional modules according to actual needs, that is, the content structure of the device is divided into different functional modules, so as to complete all or part of the functions described above.
With regard to the apparatus in the above-described embodiment, the specific manner in which each module performs the operation has been described in detail in the embodiment related to the method, and will not be elaborated here.
FIG. 8 is a schematic diagram illustrating a configuration of a computer device, according to an example embodiment. The computer apparatus 800 includes a Central Processing Unit (CPU) 801, a system Memory 804 including a Random Access Memory (RAM) 802 and a Read-Only Memory (ROM) 803, and a system bus 805 connecting the system Memory 804 and the CPU 801. The computer device 800 also includes a basic Input/Output system (I/O system) 806, which facilitates transfer of information between devices within the computer device, and a mass storage device 807 for storing an operating system 813, application programs 814, and other program modules 815.
The basic input/output system 806 includes a display 808 for displaying information and an input device 809 such as a mouse, keyboard, etc. for user input of information. Wherein the display 808 and the input device 809 are connected to the central processing unit 801 through an input output controller 810 connected to the system bus 805. The basic input/output system 806 may also include an input/output controller 810 for receiving and processing input from a number of other devices, such as a keyboard, mouse, or electronic stylus. Similarly, input-output controller 810 also provides output to a display screen, a printer, or other type of output device.
The mass storage device 807 is connected to the central processing unit 801 through a mass storage controller (not shown) connected to the system bus 805. The mass storage device 807 and its associated computer device-readable media provide non-volatile storage for the computer device 800. That is, the mass storage device 807 may include a computer device readable medium (not shown) such as a hard disk or Compact Disc-Only Memory (CD-ROM) drive.
Without loss of generality, the computer device readable media may comprise computer device storage media and communication media. Computer device storage media includes volatile and nonvolatile, removable and non-removable media implemented in any method or technology for storage of information such as computer device readable instructions, data structures, program modules or other data. Computer device storage media includes RAM, ROM, Erasable Programmable Read-Only Memory (EPROM), Electrically Erasable Programmable Read-Only Memory (EEPROM), CD-ROM, Digital Video Disk (DVD), or other optical, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices. Of course, those skilled in the art will appreciate that the computer device storage media is not limited to the foregoing. The system memory 804 and mass storage 807 described above may be collectively referred to as memory.
The computer device 800 may also operate as a remote computer device connected to a network through a network, such as the internet, in accordance with various embodiments of the present disclosure. That is, the computer device 800 may be connected to the network 812 through the network interface unit 811 coupled to the system bus 805, or may be connected to other types of networks or remote computer device systems (not shown) using the network interface unit 811.
The memory further includes one or more programs, the one or more programs are stored in the memory, and the central processing unit 801 executes the one or more programs to implement all or part of the steps of the method shown in fig. 2 or fig. 3.
Those skilled in the art will recognize that, in one or more of the examples described above, the functions described in embodiments of the disclosure may be implemented in hardware, software, firmware, or any combination thereof. When implemented in software, the functions may be stored on or transmitted over as one or more instructions or code on a computer-device-readable medium. Computer device readable media includes both computer device storage media and communication media including any medium that facilitates transfer of a computer device program from one place to another. A storage media may be any available media that can be accessed by a general purpose or special purpose computer device.
The embodiment of the present disclosure further provides a computer device storage medium, which is used for storing computer device software instructions for the testing apparatus, and includes a program designed for executing the front-end code generating method.
According to an aspect of the present disclosure, there is provided a computer program product or computer program comprising computer instructions stored in a computer readable storage medium. The processor of the computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions to cause the computer device to perform the front-end code generation method provided in the various alternative implementations of the above-described aspects.
Other embodiments of the disclosure will be apparent to those skilled in the art from consideration of the specification and practice of the disclosure disclosed herein. This disclosure is intended to cover any variations, uses, or adaptations of the disclosure following, in general, the principles of the disclosure and including such departures from the present disclosure as come within known or customary practice within the art to which the disclosure pertains. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the disclosure being indicated by the following claims.
It will be understood that the present disclosure is not limited to the precise arrangements described above and shown in the drawings and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.
Claims (10)
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110042851.2A CN112685036A (en) | 2021-01-13 | 2021-01-13 | Front-end code generation method and device, computer equipment and storage medium |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110042851.2A CN112685036A (en) | 2021-01-13 | 2021-01-13 | Front-end code generation method and device, computer equipment and storage medium |
Publications (1)
Publication Number | Publication Date |
---|---|
CN112685036A true CN112685036A (en) | 2021-04-20 |
Family
ID=75457731
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110042851.2A Withdrawn CN112685036A (en) | 2021-01-13 | 2021-01-13 | Front-end code generation method and device, computer equipment and storage medium |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112685036A (en) |
Cited By (14)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113253977A (en) * | 2021-07-13 | 2021-08-13 | 天聚地合(苏州)数据股份有限公司 | Code file generation method, electronic device and computer-readable storage medium |
CN113867712A (en) * | 2021-08-25 | 2021-12-31 | 广州三七网络科技有限公司 | Game code generation method and device, computer equipment and storage medium |
CN113867716A (en) * | 2021-09-29 | 2021-12-31 | 上海众言网络科技有限公司 | Automatic code generation method and device for application function development |
CN113900638A (en) * | 2021-11-23 | 2022-01-07 | 重庆允成互联网科技有限公司 | Visual trigger configuration method and storage medium |
CN113946330A (en) * | 2021-10-19 | 2022-01-18 | 杭州海牛智能信息科技有限公司 | Modular framework platform convenient to develop and maintain |
CN113946562A (en) * | 2021-10-14 | 2022-01-18 | 国云科技股份有限公司 | Visual design platform of data collaboration chain |
CN114595919A (en) * | 2021-12-28 | 2022-06-07 | 南京星云数字技术有限公司 | Business process orchestration method, apparatus, computer equipment and storage medium |
CN114675820A (en) * | 2022-04-12 | 2022-06-28 | 京东科技信息技术有限公司 | Service arrangement data processing method and device, electronic equipment and storage medium |
CN114968454A (en) * | 2022-04-28 | 2022-08-30 | 杭州灵伴科技有限公司 | Process arrangement, display method, head-mounted display device and computer-readable medium |
CN115048104A (en) * | 2022-06-15 | 2022-09-13 | 中国工商银行股份有限公司 | Code generation method and device based on syntax tree and electronic equipment |
CN116009847A (en) * | 2023-02-16 | 2023-04-25 | 上海伯俊软件科技有限公司 | Code generation method, device, electronic equipment and storage medium |
CN116991383A (en) * | 2023-06-29 | 2023-11-03 | 广州市扬海数码科技有限公司 | Visual flow designer of ERP system and design method |
CN117215559A (en) * | 2023-11-08 | 2023-12-12 | 深圳市升立德科技有限公司 | Execution method, device, equipment and medium for visual programming |
CN119987848A (en) * | 2025-04-15 | 2025-05-13 | 成都赢瑞科技有限公司 | Code generation method and system based on timing driven flow chart |
Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110286896A (en) * | 2019-06-28 | 2019-09-27 | 百度在线网络技术(北京)有限公司 | Visual editing method, device, device and storage medium |
CN111427561A (en) * | 2020-03-26 | 2020-07-17 | 中国建设银行股份有限公司 | Service code generation method and device, computer equipment and storage medium |
-
2021
- 2021-01-13 CN CN202110042851.2A patent/CN112685036A/en not_active Withdrawn
Patent Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110286896A (en) * | 2019-06-28 | 2019-09-27 | 百度在线网络技术(北京)有限公司 | Visual editing method, device, device and storage medium |
CN111427561A (en) * | 2020-03-26 | 2020-07-17 | 中国建设银行股份有限公司 | Service code generation method and device, computer equipment and storage medium |
Cited By (17)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113253977A (en) * | 2021-07-13 | 2021-08-13 | 天聚地合(苏州)数据股份有限公司 | Code file generation method, electronic device and computer-readable storage medium |
CN113867712A (en) * | 2021-08-25 | 2021-12-31 | 广州三七网络科技有限公司 | Game code generation method and device, computer equipment and storage medium |
CN113867716A (en) * | 2021-09-29 | 2021-12-31 | 上海众言网络科技有限公司 | Automatic code generation method and device for application function development |
CN113946562A (en) * | 2021-10-14 | 2022-01-18 | 国云科技股份有限公司 | Visual design platform of data collaboration chain |
CN113946330A (en) * | 2021-10-19 | 2022-01-18 | 杭州海牛智能信息科技有限公司 | Modular framework platform convenient to develop and maintain |
CN113900638A (en) * | 2021-11-23 | 2022-01-07 | 重庆允成互联网科技有限公司 | Visual trigger configuration method and storage medium |
CN114595919A (en) * | 2021-12-28 | 2022-06-07 | 南京星云数字技术有限公司 | Business process orchestration method, apparatus, computer equipment and storage medium |
CN114675820A (en) * | 2022-04-12 | 2022-06-28 | 京东科技信息技术有限公司 | Service arrangement data processing method and device, electronic equipment and storage medium |
CN114968454A (en) * | 2022-04-28 | 2022-08-30 | 杭州灵伴科技有限公司 | Process arrangement, display method, head-mounted display device and computer-readable medium |
CN114968454B (en) * | 2022-04-28 | 2024-04-12 | 杭州灵伴科技有限公司 | Flow arrangement, display method, head-mounted display device, and computer-readable medium |
CN115048104A (en) * | 2022-06-15 | 2022-09-13 | 中国工商银行股份有限公司 | Code generation method and device based on syntax tree and electronic equipment |
CN115048104B (en) * | 2022-06-15 | 2025-06-27 | 中国工商银行股份有限公司 | Code generation method based on syntax tree, device and electronic device |
CN116009847A (en) * | 2023-02-16 | 2023-04-25 | 上海伯俊软件科技有限公司 | Code generation method, device, electronic equipment and storage medium |
CN116991383A (en) * | 2023-06-29 | 2023-11-03 | 广州市扬海数码科技有限公司 | Visual flow designer of ERP system and design method |
CN116991383B (en) * | 2023-06-29 | 2023-12-26 | 广州市扬海数码科技有限公司 | Visual flow designer of ERP system and design method |
CN117215559A (en) * | 2023-11-08 | 2023-12-12 | 深圳市升立德科技有限公司 | Execution method, device, equipment and medium for visual programming |
CN119987848A (en) * | 2025-04-15 | 2025-05-13 | 成都赢瑞科技有限公司 | Code generation method and system based on timing driven flow chart |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN112685036A (en) | Front-end code generation method and device, computer equipment and storage medium | |
US10705942B1 (en) | Simulated testing of API | |
Loope | Managing infrastructure with puppet: configuration management at scale | |
US20170083292A1 (en) | Visual content development | |
CN110532020A (en) | A kind of data processing method of micro services layout, apparatus and system | |
US20130262986A1 (en) | Systems, Methods, and Media for Managing Editable Previews of Webpages | |
US20180081702A1 (en) | Pre/post deployment customization | |
WO2023273118A1 (en) | Resource publishing method and apparatus, and computer device and computer-readable storage medium | |
CN111694565A (en) | Data visualization application development method and system | |
Konshin | Next. js Quick Start Guide: Server-side rendering done right | |
US20150317405A1 (en) | Web Page Variation | |
Saito et al. | DevOps with Kubernetes: accelerating software delivery with container orchestrators | |
Meijer et al. | Ansible: Up and Running: Automating Configuration Management and Deployment the Easy Way | |
KR101552914B1 (en) | Web server application framework web application processing method using the framework and computer readable medium processing the method | |
CN113204341A (en) | Page generation method, device and medium | |
Manases et al. | Automation of Network Traffic Monitoring using Docker images of Snort3, Grafana and a custom API | |
EP4394593A1 (en) | Skin changing method and apparatus for display interface, vehicle and storage medium | |
US10802810B2 (en) | Consuming persistent library bundles | |
Block et al. | Managing Kubernetes Resources Using Helm | |
US9612805B2 (en) | Rapid mobile app generator | |
CN116962807A (en) | Video rendering method, device, equipment and storage medium | |
CN116521285A (en) | Application trial method and device, electronic equipment and storage medium | |
Stoneman | Docker on Windows: From 101 to production with Docker on Windows | |
Stoneman | Learn Docker in a month of lunches | |
Aurdal | VisualBox. A Generic Data Integration and Visualization Tool |
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 | ||
WW01 | Invention patent application withdrawn after publication |
Application publication date: 20210420 |
|
WW01 | Invention patent application withdrawn after publication |