CN112527288A - Visual system prototype design method, system and storage medium capable of generating codes - Google Patents
Visual system prototype design method, system and storage medium capable of generating codes Download PDFInfo
- Publication number
- CN112527288A CN112527288A CN202110182065.2A CN202110182065A CN112527288A CN 112527288 A CN112527288 A CN 112527288A CN 202110182065 A CN202110182065 A CN 202110182065A CN 112527288 A CN112527288 A CN 112527288A
- Authority
- CN
- China
- Prior art keywords
- component
- components
- code
- parent
- node
- 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.)
- Granted
Links
Images
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/36—Software reuse
-
- 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/34—Graphical or visual programming
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention provides a visual system prototype design method capable of generating codes, wherein a system prototype comprises a plurality of components, and the method comprises the following steps: determining the component attributes of the components and the hierarchical relationship among the components according to page operation; determining a code generation model according to the code label of each component and the component attribute; determining a component code block according to the component attribute of each component, the code generation model and the basic code segment; and outputting the whole component codes according to the hierarchical relation and each component code block. The scheme enables a user to visually design a prototype, effectively generates an editable code on the basis of component development, realizes the reproduction of a basic code and saves the workload of the user.
Description
Technical Field
The embodiment of the invention relates to computer technology, in particular to a visualization system prototype design method, a visualization system prototype design system and a storage medium capable of generating codes.
Background
With the rapid development of computer technology and the continuous improvement of human requirements, the functions of software design become more and more complex. Market competition and personalized requirements of different customers lead the development period of the software to be continuously shortened, which puts strict requirements on the development of the software. Software development needs to write a large amount of source codes, however, the traditional manual coding mode is time-consuming and labor-consuming, the reliability of the codes cannot be guaranteed, developers need to put a large amount of effort into tedious code writing instead of the framework design and the logic design of the software, and therefore the development efficiency of the software is greatly reduced.
At present, the way of improving the efficiency of the development stage is to use a code reuse technology and a code automatic generation technology, the use threshold of the existing code reuse and automatic generation technology is high, the existing code reuse and automatic generation technology is difficult to operate by non-professionals, and a large amount of manual configuration and intervention are needed during use.
Disclosure of Invention
The embodiment of the invention provides a visual system prototype design method, a visual system prototype design system and a storage medium capable of generating codes, wherein the visual system prototype design method, the visual system prototype design system and the storage medium are used for performing prototype design through component editing to obtain editable codes for continuous development.
In a first aspect, an embodiment of the present invention provides a visualization system prototyping method capable of generating a code, where a system prototype includes a plurality of components, the visualization system prototyping method including:
determining the component attributes of the components and the hierarchical relationship among the components according to page operation;
determining a code generation model according to the code label of each component and the component attribute;
determining each component code block according to the component attribute of each component, the code generation model and the basic code segment;
and outputting the whole component codes according to the hierarchical relation and each component code block.
In some alternative embodiments, the components include special components that are processed by a special component processor and general components that are processed by a common processor.
In some optional embodiments, determining the component attributes of the components and the hierarchical relationship between the components according to the page operation includes:
determining the component attributes of the components and the hierarchical relationship among the components according to page operation and nested constraint rules;
generating a first component tree according to the hierarchical relation;
generating a visual graph layer tree according to the first component tree;
the hierarchical relationship among the components comprises a first parent-child relationship and a first brother relationship, the components belonging to the first parent-child relationship are first parent-child components, and the components belonging to the first brother relationship are first brother components.
In some optional embodiments, a first parent component in the first parent-child component performs information transfer with the first child component through a data stream, and a first child component in the first parent-child component performs information transfer with the first parent component through an event.
In some optional embodiments, determining the code generation model according to the code labels and the hierarchical relationship of the components includes:
determining a second component tree inside each component according to the component attribute of the component;
the second component tree comprises a second parent-child relationship and a second brother relationship, wherein the components belonging to the second parent-child relationship are second parent-child components, and the components belonging to the second brother relationship are second brother components;
and respectively nesting the code labels of the second sub-components in the second parent-sub-components into the code labels of the corresponding second parent-components to generate the code generation model of the corresponding components.
In some optional embodiments, outputting the whole component code according to the hierarchical relationship and each component code block includes:
starting to traverse downwards from a root node of the first component tree, judging whether a current node has a child node, and if so, continuing to traverse downwards;
if the child node does not exist, starting from the endmost child node or child nodes, executing the following steps:
s1: acquiring a component code block of a current child node;
s2: acquiring a component code block of a current parent node corresponding to a current child node;
s3: wrapping the component code block of the current child node with the component code block of the current parent node to generate a combined code block, and using the combined code block as the component code block of the current parent node again;
s4: judging whether the current father node is the root node or not;
s5: if not, taking the current father node as the current child node again, and returning to execute the step S1;
s6: and if so, outputting the component code block of the current father node as the whole component code.
In some optional embodiments, one or more cache nodes are selected from the nodes of the first component tree, and when the cache nodes are used as parent nodes, the component code blocks of all corresponding sub-components are selected.
In a second aspect, an embodiment of the present invention further provides a visualization system prototyping system capable of generating code, including:
the component processing module is used for determining the component attributes of the components and the hierarchical relationship among the components according to the page operation;
the first data processing module is used for determining a code generation model according to the code labels and the component attributes of the components;
the second data processing module is used for determining each component code block according to the component attribute of each component, the code generation model and the basic code segment;
and the code generation module is used for outputting the whole component codes according to the hierarchical relation and each component code block.
In some optional embodiments, the system further comprises:
the attribute panel module is used for modifying the component attributes of the components;
the data storage module is used for storing the process information of user operation and design components and storing a data dictionary to design the components;
and the layer tree module is used for displaying and editing the structure of the first component tree.
In a third aspect, the present invention also provides a computer-readable storage medium, which includes instructions that, when executed on a computer, cause the computer to execute the visualization system prototyping method capable of generating codes as described above.
The technical scheme has the following beneficial effects:
1. by the method, the system and the storage medium for designing the visual system prototype capable of generating the code, which are provided by the embodiment of the invention, developers can visually design the system prototype, and can effectively generate the editable code on the basis of component development, so that the reproduction of the basic code is completed, and the workload of the developers is greatly saved. And defining the hierarchical relationship of father and son among the components through the component tree, generating a visual graph layer tree of a corresponding structure according to the component tree, and directly carrying out visual editing on the corresponding component tree by a user through a mode of generating the graph layer tree.
2. The visual system prototype design method capable of generating codes provided by the embodiment of the invention effectively improves the processing performance of the assembly during modification by designing the cache nodes.
3. The prototype designed by the user and the generated overall component code can automatically adapt to the resolution of the mainstream, and automatically zoom to complete the self-adaptation of the page.
4. The visualization system prototype design system capable of generating codes provided by the embodiment of the invention can realize query and export of a data dictionary and effectively and conveniently support transplantation and reuse of a data source. No difference of 99% between the design state and the preview state can be achieved in the design process.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.
FIG. 1 is a flow diagram illustrating a visualization system prototyping method by which code may be generated in accordance with one embodiment of the present invention;
FIG. 2 is a flow chart of determining component attributes of components and hierarchical relationships between components according to page operations in the visualization system prototyping method for generating code shown in FIG. 1;
FIG. 3 is a partial structural diagram illustrating a first component tree and a second component tree according to one embodiment of the invention;
FIG. 4 is a flow chart of the visual system prototyping method for the generative code shown in FIG. 1 for outputting the whole component code according to the hierarchical relationship and each component code block;
FIG. 5 is a partial structural diagram illustrating a first component tree according to another embodiment of the present invention;
FIG. 6 is a partial structural diagram illustrating a first component tree according to yet another embodiment of the present invention;
FIG. 7 is a schematic diagram illustrating the structure of a visualization system prototyping system that may generate code in accordance with one embodiment of the present invention;
FIG. 8 is a schematic structural diagram illustrating a visualization system prototyping system capable of generating code in accordance with another embodiment of the present invention;
FIG. 9 is a data processing flow diagram illustrating a visualization system prototyping system that may generate code in accordance with one embodiment of the present invention;
FIG. 10 is an architecture diagram illustrating a visualization system prototyping system in which code may be generated in accordance with one embodiment of the present invention;
FIG. 11 is a block diagram illustrating an exemplary hardware architecture of a computing device that may implement a visualization system prototyping method of the generatable code in accordance with an embodiment of the present invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
A system prototype needs to contain different components, and a component can also be contained in different system prototypes, which provides conditions for reuse of components (i.e., reuse of code). The components are used as the expression mode of the system, the system is not only visual, but also can be used as a carrier for displaying information during the prototype operation of the system, in addition, the system prototype design based on the components can lead developers to put the most efforts on the design of the system rather than boring code writing, and the quality of the designed software is improved.
For better understanding of the present invention, the method, system and storage medium for prototyping a visualization system capable of generating code according to the embodiment of the present invention are described in detail below with reference to fig. 1 to 5. It should be noted that these examples are not intended to limit the scope of the present disclosure.
FIG. 1 is a flow diagram illustrating a visualization system prototyping method by which code may be generated in accordance with one embodiment of the present invention.
As shown in fig. 1, the method 100 for prototyping a visualization system capable of generating code in the embodiment of the present invention includes steps S110 to S140.
Step S110: and determining the component attributes of the components and the hierarchical relationship among the components according to the page operation. The page operations may include dragging the component, modifying the property of the component, copying the component, deleting the component, and dragging the hierarchy tree. The component properties may include structural properties of the component, including, for example, the shape, color, style, etc. of the component, as well as functional properties, including, for example, the executable function of the component. Specifically, for example, in the design of the component properties of the button component, the design of the structural properties may include the size of the shape of the button component, and the design of the functional properties may include the response event after clicking the button component.
Alternatively, in one embodiment of the invention, the components may include special components that are processed by a special component processor and general components that are processed by a common processor, which is a software processor.
Specifically, the special component may include, for example, a pop-up box, a step bar, and the like, and the design processing procedure of the special component does not reuse a common processor, but is designed in the pop-up virtual panel by the corresponding special processor processing, for example, the pop-up box. The general components are processed by the common processor, and the common processor mainly judges whether the current general components can be dragged to the current position or not and stores the general components to the data storage center in the structure of the first component tree.
Optionally, in an embodiment of the present invention, as shown in fig. 2, step S110 may specifically include:
s111: determining the component attributes of the components and the hierarchical relationship among the components according to page operation and nested constraint rules;
s112: generating a first component tree according to the hierarchical relation;
s113: a visualization graph layer tree is generated from the first component tree.
The hierarchical relationship among the components may include a first parent-child relationship and a first sibling relationship, where the components belonging to the first parent-child relationship are first parent-child components, and the components belonging to the first sibling relationship are first sibling components.
Specifically, the component attributes of the components and the hierarchical relationship between the components may be determined according to the requirements of the components and corresponding different nesting constraint rules. The hierarchical relationship between the input box component and the form component is established according to the page operation of the user, such as dragging one input box component to the form component, or dragging one input box component directly to the page, and the two input box components can be represented in different forms. Different components correspond to different nested constraint rules, e.g., a button component cannot be dragged into a component in an input box. According to the design requirements of a user and the characteristics of the components, the component attributes of the components are designed, such as click response of a design button component, options of a drop-down box component and the like, and the components are rendered into the components according to the designed component attributes. The nested constraint rule may specifically include: page components can drag into all components, form components can drag into input boxes, drop down boxes, switches, time selections, radio buttons, check boxes, form groups, custom form items, and the like. The form component can only drag into the form entry. The layout column component may drag into the layout row. The folded panel assembly can be dragged into a panel item, which can be dragged into any assembly. The tab component can drag in tab items, and the tab item component can drag in any component. The pop-up box can be dragged into any component. A step bar component can drag into a step item, which can drag into any component. The card assembly may drag in picture, button, title, text assembly. The components such as an input box, a pull-down box, a switch, time selection and the like are dragged into the form component to be displayed in the form of the form component, and the components are independently dropped into other components. The component property design may also include design of appearance style, shape size, etc. of the component.
The components form a first component tree according to the hierarchical relationship determined by the user. In the first component tree, each node may include multiple children and/or multiple siblings, and each child may also include multiple children and/or multiple siblings. Each node may include a parent node in addition to the root node. Each node location includes a corresponding component, each component including a corresponding component code block.
And generating a visual layer tree structure according to the tree structure of the first component tree, wherein the layer tree corresponds to the structure of the first component tree one to one and is used for displaying the logic structure among the components of the first component tree, and a user can edit the layer tree in modes of dragging and the like so as to change the logic structure among the components in the corresponding first component tree. By generating the graph-level tree, the user can directly perform visual editing on the first component tree.
Optionally, in an embodiment of the present invention, a first parent component in the first parent-child component performs information transfer with the first child component through a data stream, and a first child component in the first parent-child component performs information transfer with the first parent component through an event. The parent component and the sub-components transmit information by using a data stream and an event, so that the problem of variable pollution can be effectively avoided, for example, two different components transmit name values to respective sub-components at the same time, and the two name values cannot influence each other.
Specifically, a first parent component in the first parent-child component performs information transfer with the first child component through a data stream, for example, a certain data on the first parent component is changed, and a receiver of the first child component receives a response, for example, a prop receiver, and reflects the response into the first child component. In this embodiment, the value transfer from the parent component to the child component is preferably performed via a data stream, such as: inputName = "name" >, the subcomponent will receive the inputName attribute, and the subcomponent will pass the value to the parent component, preferably via an event, such as a this. $ exit ('child ByValue', this. child Value) in the subcomponent to pass the value to the parent component. The first sub-component in the first parent-sub-component performs information transfer with the first parent-component through an event, for example, the first sub-component responds to the first parent-component in the form of an event when listening to a certain behavior. Transferring values from a child component to a parent component can only be done through events, such as transferring values from a child component to a parent component using this. In this embodiment, the parent component and the child component need to communicate, and if the communication is performed by using global variables or the like, the variables may be polluted, which is not beneficial to management.
Step S120: and determining a code generation model according to the code label of each component and the component attribute.
Optionally, in an embodiment of the present invention, step S120 may specifically include:
and determining a second component tree inside each component according to the component attribute of the component.
The second component tree includes a second parent-child relationship and a second brother relationship, the components belonging to the second parent-child relationship are second parent-child components, and the components belonging to the second brother relationship are second brother components.
And respectively nesting the code labels of the second sub-components in the second parent-sub-components into the code labels of the corresponding second parent-components to generate the code generation model of the corresponding components.
Specifically, in one embodiment of the present invention, as shown in fig. 3, which is a partial structure 200 of a first component tree, each component may further include a second component tree inside each component according to the component attributes, for example, component 202 and component 203 are first sub-components of component 201, component 204 and component 205 are first sub-components of component 202, and component 206 is a first sub-component of component 203. Together, component 201, component 202, component 203, component 204, component 205, and component 206 generate a first component tree 200. Wherein, the component 203 may further include a second component tree, and the component 2032 is a second sub-component of the component 2031. The code label of the second sub-component 2032 in the second component tree is nested within the code label of the corresponding second parent component 2031 according to the hierarchical relationship in the second component tree, generating a code generation model corresponding to the component 203. For example, the code label of the table component can be set to < A > </A >, and the code label of the table item component can be set to < B > </B >, then the code generation model of the table component can be < A > < B > </B > </A > according to the hierarchical relationship between the table component and the table item component, and then the code generation model of the simple table component is generated by adding the corresponding label attribute.
Step S130: and determining each component code block according to the component attribute of each component, the code generation model and the basic code segment.
Specifically, all the components are stored in the structure of the second component tree, each component may further include a basic code segment, and then a model is generated according to the component attributes configured for each component and the generated code, where the basic code segment is stored in the corresponding code generation model according to the component attributes, and a final component code block of each component is generated.
Step S140: and outputting the whole component codes according to the hierarchical relation and each component code block.
Optionally, in an embodiment of the present invention, as shown in fig. 4, step S140 may specifically include:
and starting to traverse downwards from the root node of the first component tree, judging whether the current node has a child node, and if so, continuing to traverse downwards.
If the current node has no child node, starting from the endmost child node or child nodes, executing the following steps:
s1: acquiring a component code block of a current child node; the number of current child nodes may be one or more;
s2: acquiring a component code block of a current parent node corresponding to a current child node;
s3: wrapping the component code block of the current child node with the component code block of the current father node to generate a combined code block, and using the combined code block as the component code block of the current father node again; in this embodiment, the combined code block generated in step S3 may replace the component code block of the parent node acquired in step S2, which is equivalent to performing an update operation on the component code block of the current parent node;
s4: judging whether the current father node is a root node or not;
s5: if the current parent node is not the root node, it indicates that the current parent node has a parent node at a previous level, the current parent node is regarded as the current child node again, and the step S1 is executed. That is, the current parent node belongs to the current child node in the next loop execution process (S1-S5) with respect to the parent node of the previous hierarchy; in the next loop execution process, the identity or role of the parent node in the previous loop execution process is switched to the child node, and accordingly, the component code block (combined code block) of the parent node in the previous loop execution process is determined to belong to the component code block of the child node.
S6: and if the node is the root node, outputting the component code block of the current parent node as the whole component code.
Specifically, a child component code block of the endmost child node is obtained first, then a parent component code block of the parent node corresponding to the child node is obtained, then the child component code block is wrapped by the parent component code block, and upward circulation is performed in sequence until the child component code block of the child node is wrapped by the component code block of the root node, and the whole component code is output.
As shown in fig. 5, which is a partial structure 300 of the first component tree, a traversal is performed from the root node to the bottom, if the current node has a child node, the child component code block of the component corresponding to the child node is determined first, if the child node has a child node, the traversal is continued from the bottom to the end node of the first component tree, and if the child node has a child node, the traversal is continued from the end node to the end node, and the end node is started, for example, the schematic structure of fig. 5, the child component code block 304 of the end child node in the graph is obtained first, the child component code block 303 of the parent node corresponding to the child node is obtained again, and the child component code block 304 is wrapped with the parent component code block 303, the formed combined code block 3031 is re-used as the parent component code block of the corresponding parent node, whether the current parent node is the root node is determined, if the current parent node is not the root node, the traversal is continued to the parent component code block 302 of the parent node corresponding to the parent node, and continuously wrapping the child component code block 3031 of the child node thereof with the newly acquired parent component code block 302 to generate a new combined code block 3021, taking the new combined code block 3021 as the parent component code block of the parent node, judging whether the current parent node is the root node again, if not, determining the parent component code block 301 thereof upwards, wrapping the child component code block 3021 with the parent component code block 301 to generate a new combined code block 3011, taking the combined code block 3011 again as the parent component code block of the parent node, and sequentially circulating upwards until judging that the current parent node is the root node, for example, in fig. 5, and if the node corresponding to the parent component code block 3011 is the root node, outputting the parent component code block 3011 as the editable whole component code for user editing.
Optionally, in an embodiment of the present invention, one or more cache nodes are selected from the nodes of the first component tree, and are used for caching the component code blocks of the corresponding first sub-component when the cache node is used as a parent node. Specifically, one or more representative nodes are selected from the nodes of the first component tree and set as cache nodes. Optionally, some nodes with the most frequent changes and container nodes may be selected as cache nodes through collection and analysis according to an actual design process. And caching the component code blocks corresponding to all the child nodes of the cache node in the cache node. When other nodes are modified, the cache node provides the component code blocks of the node and all the sub-nodes below the node, so that the component code block information of the sub-nodes below the cache node does not need to be repeatedly traversed. Optionally, in an embodiment of the present invention, as shown in fig. 6, a schematic diagram of a partial structure 400 of the first component tree is shown, wherein the node B402, the node C403, the node D404, the node E405, the node F406, and the node G407 are child nodes of a previous node respectively. If the first component tree has generated an entire component code and the a node 401 and the D node 404 are selected as cache nodes, respectively, the D node 404 caches the component code blocks of the D node 404, the E node 405, the F node 406, and the G node 407 at the same time. When modifying the component attribute of the node B402, since the component code blocks corresponding to the child nodes after the node D404 are all cached in the node D404, the modification of the entire component code of the first component tree can be completed only by traversing three layers of the node B402, the node C403 and the node D404, which greatly improves the efficiency of modifying the entire component code.
Optionally, since the component attributes of each node in the component attributes of the nodes of the first component tree do not need to be changed, the code view needs to be re-rendered, the component attributes of some nodes only need to be modified on the presentation, for example, the color of the header in the table component is modified, and the color attribute setting needs to be correspondingly added on the table label, but the detection of the component attribute in the design process does not need to generate the code of the entire first component tree, so that the modification is only needed in the presentation interface. Meanwhile, the prototype designed by the user and the generated overall component code can be automatically adapted to the resolution of the mainstream and automatically scaled.
FIG. 7 illustrates a schematic structural diagram of a visualization system prototyping system 500 that can generate code in accordance with one embodiment of the present invention. The system 500 is suitable for a visualization system prototyping method that can generate code as described above, including:
the component processing module 501 is configured to determine component attributes of each component and a hierarchical relationship between the components according to the page operation. Specifically, the component processing module 501 may be used to process general components and special components, respectively, and the component processing module 501 may include special component processors and a common processor, wherein the special components are processed by the corresponding special component processors, and the general components are processed by the common processor. The common processor is mainly used for judging whether the current general component can be dragged to the current position or not and storing the current general component in the data storage center in the structure of the first component tree.
The first data processing module 502 is configured to determine a code generation model according to the code tags of the components and the component attributes.
And the second data processing module 503 is configured to determine each component code block according to the component attribute of each component, the code generation model, and the basic code segment.
And the code generation module 504 is used for outputting the whole component codes according to the hierarchical relation and each component code block. Specifically, the code generation module 504 recursively generates the whole component code information according to the component information processed by the first data processing module 502 and the second data processing module 503 and the first parent-child relationship of the components thereof, and can be directly used for user editing.
Optionally, in an embodiment of the present invention, as shown in fig. 8, the visualization system prototyping system 500 capable of generating code further includes:
and the property panel module 505 is used for modifying the component properties of the component. Specifically, each component may include editable component properties for modification by a user, and the editable component properties in the property panel module 505 may include text, a selection box, a slider, a data editor, and the like. The properties of the several basic editable components can be packaged in combination or independently into usable components according to different scenes.
And the data storage module 506 is used for storing the process information of the user operation and the design component and can store and utilize a data dictionary derived by other systems to be directly used as a data source for designing the component. In particular, the data storage module 506 may be a storage module by vuex (state management mode) to ensure bidirectional binding of data. The data storage module 506 stores the results of the component processing, and records the parent-child hierarchical relationship of the components, the dragging data of the components of the current design page, the hierarchical relationship of the components, the operation steps, the path of the current components, the copied path and the like, so as to render the page and the important data. Meanwhile, the data storage module 506 also has a data dictionary storage function, and can directly derive a data dictionary from other systems and directly serve as a data source for designing the components.
And the layer tree module 507 is configured to display and edit a structure of the first component tree. Specifically, the layer tree module 507 generates a whole layer tree structure according to data of the data storage module 506, the layer tree corresponds to a structure of a first component tree in the data storage module 506 one by one, the data in the layer tree module 507 and the data in the data storage module 506 are bidirectionally bound, a user can affect the data in the data storage module 506 while operating the layer tree, the modules relate to bidirectional binding of component transmission value data, for example, a certain data in the layer tree is modified, the modification action is simultaneously transmitted to the data storage module 506, and the layer tree can be edited by dragging and the like, so that a logical structure between components in the corresponding first component tree is changed. Therefore, the user can edit and modify the first component tree through the component processing module 501 and/or the layer tree module 507, respectively, and the modified view at any end can be re-rendered.
Fig. 9 is a data processing flow diagram of a visualization system prototyping system 500 capable of generating codes according to an embodiment of the present invention, which edits component attributes and hierarchical relationships of components according to operations of a user on a page, and processes data generated in an editing process through a data processing module, where the data processing module may include a first data processing module 502 and a second data processing module 503, which are configured to convert actual operations of the user into data, monitor dragging, double-clicking and keyboard of the user, and represent all valid operations as js objects, and all processing processes are performed at a front end. The component is processed by the component processing module 501, when the component is processed, whether the component is a special component is judged, if the component is the special component, the component is processed by the special component processor, if the component is not the special component, the component is processed by the common processor, and the processed process data is stored by the data storage module 506. Specifically, the storage module is mainly made by vuex (state management mode) to ensure bidirectional binding of data. On one hand, the edited component data is generated by the visualization system prototyping method capable of generating code according to the embodiment of the invention, and the whole component code is generated by the code generating module 504 and used for page rendering, wherein the generated whole component code can be directly used for user editing and modification. On the other hand, through the visual interface, the layer data can be directly loaded by using the layer tree module 507 and the component attributes of the components can be edited by using the attribute panel module 505 for page rendering.
FIG. 10 shows an architectural diagram of a visualization system prototyping system 500 from which code may be generated in accordance with one embodiment of the present invention. The visualization system prototyping system 500 that may generate code may include an application layer, a service layer, and a data layer. The application layer is located at the front end, the service layer and the data layer are located at the rear end, and the application layer and the data layer are in data communication with the service layer respectively. The visualization system prototype design method capable of generating the codes can be applied to an application layer. The application layer may include an edit panel module, a management module, a generation module, and other application modules. The editing panel module may include an attribute panel, a layer panel, a component panel and a resource panel, and may edit the component attributes of the system prototype, and design the system prototype in a manner of a layer tree and a component. The components can be selected through the resource panel, and particularly, the resource panel can comprise a data dictionary which can be derived from other systems and can be directly used as a prototype data resource. The management module may include state management, event management, style management, and routing management. The generation module may include version compatibility, code generation, and page rendering. The designed system prototype can be converted into directly editable code through the code generation function. The user can realize the design and modification of the system prototype by editing and modifying the generated code. The page rendering function is used for realizing prototype generation of the designed system prototype. Other application modules may include background management, preview services, and document services. The preview service is used for realizing the preview of the design state of the designed system prototype, and the preview state can reach 99% of the design state.
The service layer can comprise a security authentication module, a data access module, a permission management module and a cache management module, and is mainly used for operation, maintenance and service of developers for the front end of the application layer at the back end. The data access module can be used for storing and managing data of a user design process, and providing a data interface for an application layer for access and interaction.
The data layer can comprise databases such as MySQL, Redis, MongoDB, Minion and the like, and provides data support for the service layer.
The visual system prototype design method capable of generating codes effectively improves the processing performance of the assembly during modification by designing the cache nodes.
According to the embodiment of the invention, the hierarchical relationship of father and son and brothers among the components is defined through the component tree, the visual graph layer tree of the corresponding structure is generated according to the component tree, and a user can directly visually edit the corresponding component tree in a mode of generating the graph layer tree.
The visual system prototype design method capable of generating the codes, provided by the embodiment of the invention, can enable a user to carry out prototype design in a design interface through dragging the component, and can directly export the codes capable of being developed, so that approximately 60% of code development is replaced, editable codes are effectively generated, reproduction of basic codes is completed, and the workload of developers is greatly saved.
The embodiment of the invention is based on page modularization, and has self-adaptive characteristic when the packaging assembly with self-adaptive characteristic is designed and dragged on the design canvas.
The visual system prototype design system capable of generating codes provided by the embodiment of the invention can realize query and export of a data dictionary, effectively and conveniently supports transplantation and reuse of a data source, and a user can download a zip development code package through a prototype design website and export the zip development code package in the visual system prototype design system capable of generating codes provided by the embodiment of the invention. And no difference of 99% between the design state and the preview state can be achieved in the design process.
The embodiment of the present invention further provides a computer-readable storage medium, which is located in the electronic device 600 shown in fig. 11, where the electronic device 600 includes one or more processors 601, a communication interface 602, a computer-readable storage medium 603, and a communication bus 604, where the processors 601, the communication interface 602, and the computer-readable storage medium 603 complete communication with each other through the communication bus 604.
A computer-readable storage medium 603 for storing a computer program;
the processor 601 is configured to implement the steps of the visualization system prototyping method capable of generating the codes when executing the program stored in the computer-readable storage medium 603.
The computer-readable storage medium may include a Random Access Memory (RAM) and may also include a Non-Volatile Memory (NVM), such as at least one disk Memory. Optionally, the memory may also be at least one memory device located remotely from the processor.
The Processor may be a general-purpose Processor, including a Central Processing Unit (CPU), a Network Processor (NP), and the like; but also Digital Signal Processors (DSPs), Application Specific Integrated Circuits (ASICs), Field Programmable Gate Arrays (FPGAs) or other Programmable logic devices, discrete Gate or transistor logic devices, discrete hardware components.
It is noted that, herein, relational terms such as first and second, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other identical elements in a process, method, article, or apparatus that comprises the element.
All the embodiments in the present specification are described in a related manner, and the same and similar parts among the embodiments may be referred to each other, and each embodiment focuses on the differences from the other embodiments. In particular, as for the device, the electronic device and the readable storage medium embodiments, since they are substantially similar to the method embodiments, the description is simple, and the relevant points can be referred to the partial description of the method embodiments.
The above description is only for the preferred embodiment of the present invention, and is not intended to limit the scope of the present invention. Any modification, equivalent replacement, or improvement made within the spirit and principle of the present invention shall fall within the protection scope of the present invention.
Claims (10)
1. A visualization system prototyping method capable of generating code, said system prototyping comprising a plurality of components, said visualization system prototyping method comprising:
determining the component attributes of the components and the hierarchical relationship among the components according to page operation;
determining a code generation model according to the code label of each component and the component attribute;
determining each component code block according to the component attribute of each component, the code generation model and the basic code segment;
and outputting the whole component code according to the hierarchical relation and each component code block.
2. The visual system prototyping method of the producible code of claim 1 wherein said components comprise special components and general components, said special components being handled by a special component handler and said general components being handled by a common handler.
3. The visual system prototyping method of claim 1 wherein said determining component attributes for each component and hierarchical relationships between said components based on page operations comprises:
determining the component attribute of each component and the hierarchical relationship among the components according to page operation and nested constraint rules;
generating a first component tree according to the hierarchical relation;
generating a visualized graph layer tree according to the first component tree;
the hierarchical relationship among the components comprises a first parent-child relationship and a first brother relationship, the components belonging to the first parent-child relationship are first parent-child components, and the components belonging to the first brother relationship are first brother components.
4. The visual system prototyping method as set forth in claim 3,
and the first child assembly in the first parent-child assembly carries out information transmission with the first parent assembly through an event.
5. The visual system prototyping method of any one of claims 1-4 in which said determining a code generation model from the code tags of each of said components and said component attributes comprises:
determining a second component tree inside each component according to the component attributes of the components;
the second component tree comprises a second parent-child relationship and a second brother relationship, the components belonging to the second parent-child relationship are second parent-child components, and the components belonging to the second brother relationship are second brother components;
and respectively nesting the code labels of the second sub-components in the second parent-sub-components in the code labels of the corresponding second parent-components to generate a code generation model corresponding to the components.
6. The visual system prototyping method of claim 3 wherein said outputting of unitary component code from said hierarchical relationship and each of said component code blocks comprises:
starting to traverse downwards from the root node of the first component tree, judging whether a current node has a child node, and if so, continuing to traverse downwards; if the child node does not exist, starting from the endmost child node or child nodes, executing the following steps:
s1: acquiring a component code block of a current child node;
s2: acquiring a component code block of a current parent node corresponding to a current child node;
s3: wrapping the component code block of the current child node with the component code block of the current parent node to generate a combined code block, and using the combined code block as the component code block of the current parent node again;
s4: judging whether the current father node is the root node or not;
s5: if not, taking the current father node as the current child node again, and returning to execute the step S1;
s6: and if so, outputting the component code block of the current father node as the whole component code.
7. The visual system prototyping method of the producible code of claim 4, wherein one or more cache nodes are selected from the nodes of said first component tree for caching the component code blocks of all the corresponding sub-components when said cache nodes are used as parent nodes.
8. A visualization system prototyping system capable of generating code comprising:
the component processing module is used for determining the component attributes of the components and the hierarchical relationship among the components according to page operation;
the first data processing module is used for determining a code generation model according to the code label of each component and the component attribute;
the second data processing module is used for determining each component code block according to the component attribute of each component, the code generation model and the basic code segment;
and the code generation module is used for outputting the whole component code according to the hierarchical relation and each component code block.
9. The visual system prototyping system of claim 8 wherein said system further comprises:
the attribute panel module is used for modifying the component attributes of the components;
a data storage module for storing process information of user operations and designing the component, and for storing a data dictionary to design the component;
and the layer tree module is used for displaying and editing the structure of the first component tree.
10. A computer-readable storage medium having stored thereon a computer program, the computer-readable storage medium comprising instructions which, when run on a computer, cause the computer to perform the method of prototyping a visualization system from which code is generatable according to any one of claims 1-7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110182065.2A CN112527288B (en) | 2021-02-10 | 2021-02-10 | Visual system prototype design method, system and storage medium capable of generating codes |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110182065.2A CN112527288B (en) | 2021-02-10 | 2021-02-10 | Visual system prototype design method, system and storage medium capable of generating codes |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112527288A true CN112527288A (en) | 2021-03-19 |
| CN112527288B CN112527288B (en) | 2021-05-14 |
Family
ID=74975629
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110182065.2A Active CN112527288B (en) | 2021-02-10 | 2021-02-10 | Visual system prototype design method, system and storage medium capable of generating codes |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112527288B (en) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113672227A (en) * | 2021-08-30 | 2021-11-19 | 北京爱奇艺科技有限公司 | User interface code generation method and device, electronic equipment and storage medium |
| CN114237600A (en) * | 2021-12-20 | 2022-03-25 | 北京字节跳动网络技术有限公司 | Code generation method, device and equipment of front-end page and storage medium |
| CN114296583A (en) * | 2021-12-27 | 2022-04-08 | 浪潮云信息技术股份公司 | Combined display method of data visualization large-screen layer |
| CN114741055A (en) * | 2022-04-14 | 2022-07-12 | 北京沃东天骏信息技术有限公司 | Component state management method and device |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20190012155A1 (en) * | 2016-02-22 | 2019-01-10 | Karlsruhe Institute Of Technology | Computer system and method for parallel program code optimization and deployment |
| CN109343845A (en) * | 2018-08-14 | 2019-02-15 | 北京奇艺世纪科技有限公司 | A kind of code file generation method and device |
| CN109828756A (en) * | 2018-12-14 | 2019-05-31 | 深圳壹账通智能科技有限公司 | The method and electronic device of the code of insurance page are generated based on wechat small routine |
| CN111966336A (en) * | 2020-07-24 | 2020-11-20 | 苏州浪潮智能科技有限公司 | Page generation method and device based on VUE and visual graphic operation |
-
2021
- 2021-02-10 CN CN202110182065.2A patent/CN112527288B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20190012155A1 (en) * | 2016-02-22 | 2019-01-10 | Karlsruhe Institute Of Technology | Computer system and method for parallel program code optimization and deployment |
| CN109343845A (en) * | 2018-08-14 | 2019-02-15 | 北京奇艺世纪科技有限公司 | A kind of code file generation method and device |
| CN109828756A (en) * | 2018-12-14 | 2019-05-31 | 深圳壹账通智能科技有限公司 | The method and electronic device of the code of insurance page are generated based on wechat small routine |
| CN111966336A (en) * | 2020-07-24 | 2020-11-20 | 苏州浪潮智能科技有限公司 | Page generation method and device based on VUE and visual graphic operation |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113672227A (en) * | 2021-08-30 | 2021-11-19 | 北京爱奇艺科技有限公司 | User interface code generation method and device, electronic equipment and storage medium |
| CN113672227B (en) * | 2021-08-30 | 2024-04-23 | 北京爱奇艺科技有限公司 | User interface code generation method and device, electronic equipment and storage medium |
| CN114237600A (en) * | 2021-12-20 | 2022-03-25 | 北京字节跳动网络技术有限公司 | Code generation method, device and equipment of front-end page and storage medium |
| CN114237600B (en) * | 2021-12-20 | 2023-08-11 | 抖音视界有限公司 | Method, device, equipment and storage medium for generating code of front page |
| CN114296583A (en) * | 2021-12-27 | 2022-04-08 | 浪潮云信息技术股份公司 | Combined display method of data visualization large-screen layer |
| CN114741055A (en) * | 2022-04-14 | 2022-07-12 | 北京沃东天骏信息技术有限公司 | Component state management method and device |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112527288B (en) | 2021-05-14 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112527288B (en) | Visual system prototype design method, system and storage medium capable of generating codes | |
| CN109614424B (en) | Page layout generation method, device, computing equipment and medium | |
| CN109408764B (en) | Page area dividing method, device, computing equipment and medium | |
| JP5063890B2 (en) | System that facilitates object model design | |
| US9716632B2 (en) | Interactive layered visualization of a layered software architecture | |
| CN106843844B (en) | Display device of custom view | |
| US8839192B2 (en) | System and method for presentation of cross organizational applications | |
| CN110020307A (en) | A kind of method for drafting and device of client's end-view | |
| CN104823158B (en) | Method and system for simplified knowledge engineering | |
| WO2015196784A1 (en) | Visual software modeling method based on software meta-view for constructing software view | |
| CN108563431B (en) | Software development method and device, computer-readable storage medium and electronic equipment | |
| CN112711418B (en) | Front-end interface layout method and device for multiple components, electronic equipment and storage medium | |
| JP7373563B2 (en) | Systems and methods for creating and processing configurable applications for website building systems | |
| US11556702B2 (en) | Orchestration of crud operations for a hierarchical web service data model in a spreadsheet | |
| US10776351B2 (en) | Automatic core data service view generator | |
| JPH11513151A (en) | How to generate a multimedia presentation | |
| CN116627418B (en) | Multi-level form interface visual generation method and device based on recursion algorithm | |
| US20220129118A1 (en) | Stateful widget container management for interactive designs | |
| CN117035081B (en) | Construction method and device of multi-element multi-mode knowledge graph | |
| US20080313561A1 (en) | Techniques for representing and organizing user interface data | |
| US10896161B2 (en) | Integrated computing environment for managing and presenting design iterations | |
| US20240037325A1 (en) | Ability to add non-direct ancestor columns in child spreadsheets | |
| Freeman | Pro jQuery 2.0 | |
| CN111949267B (en) | UI front end generation method and device | |
| CN117521608A (en) | Form control method, device, equipment and storage medium |
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 |