CN113485706A - DSL-based multi-technology stack front-end code generation method and device - Google Patents
DSL-based multi-technology stack front-end code generation method and deviceDownload PDFInfo
- Publication number
- CN113485706A CN113485706ACN202110755865.9ACN202110755865ACN113485706ACN 113485706 ACN113485706 ACN 113485706ACN 202110755865 ACN202110755865 ACN 202110755865ACN 113485706 ACN113485706 ACN 113485706A
- Authority
- CN
- China
- Prior art keywords
- dsl
- code
- profile
- end code
- technology
- 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.)
- Pending
Links
Images
Classifications
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; 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
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44505—Configuring for program initiating, e.g. using registry, configuration files
- G06F9/4451—User profiles; Roaming
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Document Processing Apparatus (AREA)
Abstract
Description
Technical Field
The application can be used in the field of finance, and particularly relates to a method and a device for generating multi-technology stack front-end codes based on DSL.
Background
Generally, tools for generating front-end codes through visual dragging are provided for designers to use, the conventional front-end code generation tools are only suitable for a certain technology stack, for example, the tool is only suitable for Vue but not suitable for reach, so that the application range is limited, the designers cannot use code generation tools under different technology stacks when providing services for developers of other technology stacks, and a generation method capable of translating the codes into various technology stack native codes is urgently needed in order to expand the application range of the tools.
Disclosure of Invention
The method and the device can be used in the technical field of the generation of the front-end code of the multi-technology stack based on the DSL in the financial field and can also be used in any field except the financial field. The invention realizes the effects of one-time development and multi-technology stack output, and solves the problem of developing a plurality of sets of technology stack codes for one page layout. A user can directly translate the native codes corresponding to the multi-technology stacks by only finishing page drawing in the editing and previewing module, and a large amount of manpower can be saved when the same type of pages need to be developed under the multi-technology stacks. Meanwhile, if other technology stacks need to be supported, only the corresponding translation modules need to be added independently, and the future compatibility requirement can be met.
In order to solve the technical problems, the invention provides the following technical scheme:
in a first aspect, the present invention provides a DSL-based multi-technology stack front-end code generation method, including:
generating a DSL configuration file according to the editing operation of a user on a page;
traversing the DSL profile to determine code segments in the DSL profile;
and generating a stack front-end code according to the code segment.
In one embodiment, said traversing said DSL profile to determine code segments in said DSL profile comprises:
traversing child nodes in the DSL profile, identifying components in the DSL profile;
judging whether the components contain layout components or not;
if yes, traversing sub-components in the layout component to determine code fragments in the sub-components;
if not, the DSL profile is traversed to determine code segments in the DSL profile.
In an embodiment, the generating a stack front-end code according to the code fragment includes:
splicing the code segments to generate the stack front-end code.
In an embodiment, the generating the DSL profile according to the user editing operation on the page includes:
receiving the editing operation of a user on a page;
converting the editing operation into native codes corresponding to a plurality of technology stacks;
generating the DSL profile according to the native code.
In a second aspect, the present invention provides a DSL-based multi-technology stack front-end code generation apparatus, including:
the configuration file generation module is used for generating a DSL configuration file according to the editing operation of a user on a page;
a code segment determination module to traverse the DSL profile to determine code segments in the DSL profile;
and the front-end code generating module is used for generating a stack front-end code according to the code segment.
In one embodiment, the code segment determining module includes:
a child node traversal unit, configured to traverse child nodes in the DSL profile, and identify components in the DSL profile;
the judging unit is used for judging whether the components contain layout components or not;
a sub-component code fragment determining unit, configured to traverse sub-components in the layout component to determine code fragments in the sub-components if the sub-components are included;
a code segment determining unit, configured to traverse the DSL profile to determine a code segment in the DSL profile if not contained.
In one embodiment, the front-end code generation module includes:
and the code segment splicing unit is used for splicing the code segments to generate the stack front-end code.
In one embodiment, the configuration file generation module includes:
the editing operation receiving unit is used for receiving the editing operation of a user on the page;
the editing operation conversion unit is used for converting the editing operation into native codes corresponding to a plurality of technology stacks;
a profile generation unit to generate the DSL profile according to the native code.
In a third aspect, the present invention provides an electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor implements the steps of the DSL-based multi-technology stack front-end code generation method when executing the program.
In a fourth aspect, the present invention provides a computer readable storage medium having stored thereon a computer program which, when executed by a processor, performs the steps of a DSL-based multi-technology stack front-end code generation method.
As can be seen from the foregoing description, an embodiment of the present invention provides a method and an apparatus for generating a front-end code of a multi-technology stack based on DSL, where a DSL configuration file is first generated according to a user editing operation on a page; traversing the DSL profile to determine code segments in the DSL profile; and finally, generating a stack front-end code according to the code segment. The invention realizes the effects of one-time development and multi-technology stack output, and solves the problem of developing a plurality of sets of technology stack codes for one page layout. A user can directly translate the native codes corresponding to the multi-technology stacks by only finishing page drawing in the editing and previewing module, and a large amount of manpower can be saved when the same type of pages need to be developed under the multi-technology stacks. On the other hand, if other technology stacks need to be supported, only the corresponding translation modules need to be added separately, and the future compatibility requirement can be met.
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 introduced below, and it is obvious that the drawings in the following description are some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to these drawings without creative efforts.
Fig. 1 is a schematic flow chart of a DSL-based multi-technology stack front-end code generation method according to an embodiment of the present invention;
FIG. 2 is a flowchart illustrating step 200 according to an embodiment of the present invention;
FIG. 3 is a flowchart illustrating step 300 according to an embodiment of the present invention;
FIG. 4 is a flowchart illustrating step 100 according to an embodiment of the present invention;
figure 5 is a block diagram of a DSL-based multi-technology stack front-end code generation system in an embodiment of the present invention;
fig. 6 is a flow chart illustrating a DSL-based multi-technology stack front-end code generation method according to an embodiment of the present invention;
FIG. 7 is a diagram illustrating a correspondence between technology stacks and translation modules according to an embodiment of the present invention;
FIG. 8 is a block diagram illustrating a translation module according to an embodiment of the present invention;
FIG. 9 is a flowchart illustrating a code translation process according to an embodiment of the present invention;
figure 10 is a block diagram of a DSL-based multi-technology stack front-end code generation apparatus in an embodiment of the present invention;
FIG. 11 is a block diagram of the codesegment determining module 20 according to an embodiment of the present invention;
FIG. 12 is a block diagram of the front-endcode generation module 30 according to an embodiment of the present invention;
FIG. 13 is a block diagram of the configurationfile generation module 10 according to an embodiment of the present invention;
fig. 14 is a schematic structural diagram of an electronic device in an embodiment of the invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present invention clearer, 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 some, but not all, embodiments of the present invention. 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.
As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
It should be noted that the terms "comprises" and "comprising," and any variations thereof, in the description and claims of this application and the above-described drawings, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements expressly listed, but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.
It should be noted that the embodiments and features of the embodiments in the present application may be combined with each other without conflict. The present application will be described in detail below with reference to the embodiments with reference to the attached drawings.
An embodiment of the present invention provides a specific implementation of a DSL-based multi-technology stack front-end code generation method, and referring to fig. 1, the method specifically includes the following steps:
step 100: and generating the DSL configuration file according to the editing operation of the user on the page.
It is understood that DSL (Domain specific language) domain specific languages. DSL is intended to solve the difficulty of demand collection caused by the inconsistency of language models between users and builders at the early stage of system (including hardware systems and software systems) construction. To take a specific example: in the process of building a security trading system, there are many specialized financial terms and processes in the trading campaign of securities. To create a software solution for the trading process now, the developer/builder must know about the securities trading activity, which objects are involved, what the rules and constraints between them are. Then the domain expert (here, the security exchange expert) is asked to describe the activities involved in the security exchange activity. But domain experts are accustomed to using the industry terminology they are skilled in using and cannot understand by solution builders. If the solution's model builder were to understand the transaction activity, it would have to have the domain expert interpret in a natural language that both parties can understand. During this interpretation, the solution's model builder understands the domain knowledge. The language used by both parties in this process is called the "common language".
The common language is called the basis used by the solution model builder to express the vocabulary in the solution. The builder corresponds the common languages to the model, namely module names in the program, entity names in the data model and objects in the test case. In the above description, it can be seen that in the process of requirement collection, if a model is to be successfully constructed, a "common language" that both domain experts and builders (i.e., general domain analysts/business analysts) can understand is required. However, the creation process of the common language is not guaranteed, and it cannot be guaranteed that the information obtained in the collection process completely describes all business rules and activities in the field activity. The completeness of the description is guaranteed to a certain extent if domain experts can be made to describe all activities and rules in the domain by simple programming. DSL has been proposed to solve this problem.
DSL differs from general programming languages as follows: DSL for non-programmers, domain experts; DSL has a higher level of abstraction, not involving details of similar data structures; DSL has limited expressiveness, describing only models in this area, while general programming languages can describe arbitrary models.
Step 200: traversing the DSL profile to determine code segments in the DSL profile;
specifically, the entire configuration file is traversed in a depth-first traversal. (because the configuration file is a multi-layer nested structure, the relationship between nodes can be a sibling relationship or a parent-child relationship, and the depth-first meaning that when the current node contains a child node, the child node is preferentially traversed rather than the sibling node, so that the nested information of the node can be preferentially accessed to cooperate with the recognition and translation process of the layout component and the child component).
Step 300: generating a stack front-end code according to the code segment;
it is understood that a technology stack generally refers to combining N technologies with each other (N >1) as an organic whole to achieve a certain purpose or function. The experience of mastering these techniques and the use of them in combination can also be referred to. For example: a medical management system is developed, html + css + javascript + jquery + springmvc + hibernate + spring + linux + mysql and the like are used, and the technologies can be called as a technology stack. Specifically, the code fragments instep 300 are assembled into stack front-end code.
As can be seen from the foregoing description, an embodiment of the present invention provides a method for generating a front-end code of a multi-technology stack based on DSL, where a DSL configuration file is first generated according to a user editing operation on a page; traversing the DSL profile to determine code segments in the DSL profile; and finally, generating a stack front-end code according to the code segment. In summary, the present invention provides a method capable of translating native codes of multiple technology stacks, which can directly translate native codes of multiple technology stacks only by designing a page layout, thereby achieving the effect of "one-time design and multiple technology stack output", and solving the problem that the use of tools of the same type is limited by corresponding technology stacks.
In one embodiment, referring to fig. 2,step 200 comprises:
step 201: traversing child nodes in the DSL profile, identifying components in the DSL profile;
step 202: judging whether the components contain layout components or not;
step 203: if yes, traversing sub-components in the layout component to determine code fragments in the sub-components;
step 204: if not, the DSL profile is traversed to determine code segments in the DSL profile.
Insteps 201 to 204, since some components in the UI (User Interface) component library are layout components, such as forms and cards, and such components may include other UI components, when a layout component is encountered (the configuration information of the layout component in the configuration file is different from the single-layer structure of a common component, and the layout component necessarily includes sub-components, so that the judgment basis for identifying the layout component is whether sub-component description information is included in the configuration file), after the code of the layout component itself is generated, the sub-components thereof are traversed, and after the entire configuration file is traversed in a loop, the generated code fragments are finally combined in a summary manner.
In one embodiment, referring to FIG. 3,step 300 comprises:
step 301: splicing the code segments to generate the stack front-end code.
In one embodiment, referring to fig. 4,step 100 comprises:
step 101: receiving the editing operation of a user on a page;
step 102: converting the editing operation into native codes corresponding to a plurality of technology stacks;
step 103: generating the DSL profile according to the native code.
Insteps 101 to 103, first, the editing operation of the user on the page is converted into editing the DSL configuration file, the page layout information is converted into the form of the configuration file, then, the configuration file describing the page is translated into the native code corresponding to each technology stack, and finally, the DSL configuration file is generated according to the native code.
In a specific embodiment, the present invention further provides a specific embodiment of a DSL-based multi-technology stack front-end code generation method.
In this embodiment, there is also provided a DSL-based multi-technology stack front-end code generation system, referring to fig. 5, including: the system comprises an editing preview module, a translation module, a DSL module and a code display and preview module, and specifically comprises:
the editing preview module is communicated with the translation module through the DSL module, the editing preview module converts the page editing operation of a user into the editing of a DSL configuration file, the page layout information is converted into the form of the configuration file, the translation module is responsible for translating the configuration file describing the page into the native codes corresponding to each technology stack, the code display and preview module is responsible for displaying the translated codes and rendering the codes into a preview page, and the user exports the code file to be used in a project after confirming the effect.
Referring to fig. 6, based on the DSL-based multi-technology stack front-end code generation system, the DSL-based multi-technology stack front-end code generation method provided in this embodiment includes the following steps:
s1: and generating the DSL configuration file according to the editing operation of the user on the page.
Fig. 7 is a function of each technology stack in the translation tool, and assuming that there are three target technology stacks ABC translated by the user, the present tool selects one of the technology stacks (in fig. 7, selection a is taken as an example) to implement the edit preview module, that is, the user uses the code of the technology stack a to display when editing and previewing the page effect. After the editing is completed, the DSL configuration file describing the page is obtained, and the configuration file is translated into native code under the corresponding technology stack by different translation modules.
The DSL profile description of a page element, usually in the form of an object, contains the element type and associated attributes. Taking the button as an example, the following object descriptions will be adopted:
where tag indicates the page element type (button in the example), type indicates the button style type, disable indicates whether the button is available, size indicates the button size, and loading indicates whether the display is loading.
The translation module is used for translating the DSL configuration file into a native code of a corresponding technology stack. Fig. 8 is a structural diagram of the translation module, where the tag identification module and the component attribute generation module are used to identify which component in the technology stack corresponds to the object of the configuration file, and convert the description of the element in the configuration file into the attribute of the corresponding component in the corresponding technology stack, the html generation module is used to splice out the html part of the final code, the js generation module is used to generate a corresponding js code when there is data and logic need in a page element, and the code integration unit is used to assemble the html and js codes into a final code file.
S2: traversing the DSL profile to determine code segments in the DSL profile.
A tag identification module:
in the description information of each component in the configuration file, there is an attribute called tag, which indicates the type of the currently described component, for example, the tag of the button is button. For different component libraries, the tag recognition module maintains a tag dictionary of each component library, for example, a component with tag being Button in a configuration file, a corresponding component tag name being el-Button in an element-ui component library under the Vue technology stack, and a corresponding component tag name being Button in an ant-design component library under the React technology stack. Through the tag identification module, the components in the configuration file are associated with the corresponding components of each component library, and meanwhile, a corresponding generation method is specified for the subsequent component attribute generation.
A component attribute generation module:
after the corresponding relation between the configuration file and the components of the component library is confirmed through the tag identification module, different components respectively have own attribute conversion methods, and attribute descriptions adapted to different component libraries are generated through the conversion methods. Similarly, taking the button as an example, the attribute describing the size of the button in the configuration file is "size", the value can be three items, namely small, middle and large, after the button conversion of the element-ui component library, the attribute name is size, the value is converted into three items, namely mini, medium and null (default is null), and in ant-design, the attribute size is converted, but the value is converted into three items, namely small, default and large.
html and js generation module
The Html generation module generates a complete Html text corresponding to the component by combining the component label and the attribute, taking the button as an example, the Html text of the button component corresponding to the configuration file { "tag": button "," size ": small", "label": cancel "} is converted into:
<el-button size＝”mini”>cancel</el-button>
and the html text converted into the corresponding button component in the ant-design is as follows:
<Button size＝”small”>cancel</Button>
if relevant data is needed in other components, for example, the form component must have initialized form data, the necessary data part is generated through a js generation module and is referred in the html text.
A code integration unit:
taking an Vue technology stack as an example, a component file is composed of template, script and style, and the code integration unit is used for wrapping the plurality of fragments generated in the above steps in corresponding labels (html is wrapped in the template label, js is wrapped in the script label, and style is empty by default) and splicing into a complete Vue component file.
S3: and generating a stack front-end code according to the code segment.
Fig. 9 is a processing flow chart of code translation, and after the corresponding translation module takes the configuration file, the entire configuration file is traversed in a depth-first traversal mode (since the configuration file is a multi-layer nested structure, the relationship between nodes may be a sibling relationship or a parent-child relationship, and depth-first means that when the current node includes a child node, the child node is preferentially traversed rather than a sibling node, so that it can be ensured that the nested information of the node is preferentially accessed to cooperate with the recognition and translation processes of the layout component and the child component). Because some components in the UI component library are layout components, such as forms and cards, and such components may include other UI components, when a layout component is encountered (the configuration information of the layout component in the configuration file is different from the single-layer structure of a common component, and the layout component necessarily includes a sub-component, the decision criterion for identifying the layout component is whether sub-component description information is included in the configuration file), after the code of the layout component itself is generated, the sub-components thereof are traversed, and after the entire configuration file is traversed in a circulating manner, the generated code fragments are finally combined in a gathering manner.
As can be seen from the foregoing description, an embodiment of the present invention provides a method for generating a front-end code of a multi-technology stack based on DSL, where a DSL configuration file is first generated according to a user editing operation on a page; traversing the DSL profile to determine code segments in the DSL profile; and finally, generating a stack front-end code according to the code segment. The method for generating the front-end code of the multi-technology stack based on the DSL realizes that the page layout is described by using the syntax irrelevant to the technology stack by defining a set of specific languages (DSL) in the field for describing the page layout, the specific languages exist in the form of a configuration file, the DSL description is translated into the native code of the multi-technology stack by a translation module, and the DSL description can be translated into the native code of the corresponding technology stack by different translation modules after the page design is completed.
Based on the same inventive concept, the present application further provides a DSL-based multi-technology stack front-end code generation apparatus, which can be used to implement the methods described in the foregoing embodiments, such as the following embodiments. Because the principle of the DSL-based multi-technology stack front-end code generation apparatus for solving the problem is similar to that of the DSL-based multi-technology stack front-end code generation method, the implementation of the DSL-based multi-technology stack front-end code generation apparatus may refer to the implementation of the DSL-based multi-technology stack front-end code generation method, and repeated details are not described herein. As used hereinafter, the term "unit" or "module" may be a combination of software and/or hardware that implements a predetermined function. While the system described in the embodiments below is preferably implemented in software, implementations in hardware, or a combination of software and hardware are also possible and contemplated.
An embodiment of the present invention provides a specific implementation manner of a DSL-based multi-technology stack front-end code generation apparatus capable of implementing a DSL-based multi-technology stack front-end code generation method, and referring to fig. 10, the DSL-based multi-technology stack front-end code generation apparatus specifically includes the following contents:
a configurationfile generating module 10, configured to generate a DSL configuration file according to a user editing operation on a page;
a codesegment determination module 20 configured to traverse the DSL profile to determine code segments in the DSL profile;
a front-endcode generating module 30, configured to generate a stack front-end code according to the code segment.
In one embodiment, referring to fig. 11, the codesegment determining module 20 includes:
a childnode traversal unit 201, configured to traverse child nodes in the DSL profile, and identify components in the DSL profile;
a determiningunit 202, configured to determine whether the component includes a layout component;
a sub-component codefragment determining unit 203, configured to traverse sub-components in the layout component to determine code fragments in the sub-components, if the sub-components contain the code fragments;
a codesegment determining unit 204, configured to traverse the DSL profile to determine a code segment in the DSL profile if not contained.
In one embodiment, referring to fig. 12, the front-endcode generation module 30 includes:
a codesegment splicing unit 301, configured to splice the code segments to generate the stack front-end code.
In an embodiment, referring to fig. 13, the configurationfile generating module 10 includes:
an editingoperation receiving unit 101, configured to receive an editing operation of a page by a user;
an editingoperation conversion unit 102, configured to convert the editing operation into native codes corresponding to multiple technology stacks;
aprofile generation unit 103, configured to generate the DSL profile according to the native code.
As can be seen from the foregoing description, an embodiment of the present invention provides a DSL-based multi-technology stack front-end code generation apparatus, which first generates a DSL configuration file according to a user editing operation on a page; traversing the DSL profile to determine code segments in the DSL profile; and finally, generating a stack front-end code according to the code segment. The invention realizes the effects of one-time development and multi-technology stack output, and solves the problem of developing a plurality of sets of technology stack codes for one page layout. A user can directly translate the native codes corresponding to the multi-technology stacks by only finishing page drawing in the editing and previewing module, and a large amount of manpower can be saved when the same type of pages need to be developed under the multi-technology stacks. On the other hand, if other technology stacks need to be supported, only the corresponding translation modules need to be added separately, and the future compatibility requirement can be met.
An embodiment of the present application further provides a specific implementation manner of an electronic device, which is capable of implementing all steps in the DSL-based multi-technology stack front-end code generation method in the foregoing embodiment, and referring to fig. 14, the electronic device specifically includes the following contents:
a processor (processor)1201, a memory (memory)1202, acommunication Interface 1203, and abus 1204;
theprocessor 1201, thememory 1202 and thecommunication interface 1203 complete communication with each other through thebus 1204; thecommunication interface 1203 is used for implementing information transmission between related devices such as server-side devices and client-side devices;
theprocessor 1201 is configured to invoke a computer program in thememory 1202, and the processor executes the computer program to implement all the steps in the DSL-based multi-technology stack front-end code generation method in the above embodiments, for example, to implement the following steps when the processor executes the computer program:
step 100: generating a DSL configuration file according to the editing operation of a user on a page;
step 200: traversing the DSL profile to determine code segments in the DSL profile;
step 300: and generating a stack front-end code according to the code segment.
Embodiments of the present application further provide a computer-readable storage medium capable of implementing all steps in the DSL-based multi-technology stack front-end code generation method in the foregoing embodiments, where the computer-readable storage medium stores thereon a computer program, and when the computer program is executed by a processor, the computer program implements all steps of the DSL-based multi-technology stack front-end code generation method in the foregoing embodiments, for example, when the processor executes the computer program, the processor implements the following steps:
step 100: generating a DSL configuration file according to the editing operation of a user on a page;
step 200: traversing the DSL profile to determine code segments in the DSL profile;
step 300: and generating a stack front-end code according to the code segment.
The embodiments in the present specification are described in a progressive manner, and the same and similar parts among the embodiments are referred to each other, and each embodiment focuses on the differences from the other embodiments. In particular, for the hardware + program class embodiment, since it is substantially similar to the method embodiment, the description is simple, and the relevant points can be referred to the partial description of the method embodiment.
The foregoing description has been directed to specific embodiments of this disclosure. Other embodiments are within the scope of the following claims. In some cases, the actions or steps recited in the claims may be performed in a different order than in the embodiments and still achieve desirable results. In addition, the processes depicted in the accompanying figures do not necessarily require the particular order shown, or sequential order, to achieve desirable results. In some embodiments, multitasking and parallel processing may also be possible or may be advantageous.
Although the present application provides method steps as in an embodiment or a flowchart, more or fewer steps may be included based on conventional or non-inventive labor. The order of steps recited in the embodiments is merely one manner of performing the steps in a multitude of orders and does not represent the only order of execution. When an actual apparatus or client product executes, it may execute sequentially or in parallel (e.g., in the context of parallel processors or multi-threaded processing) according to the embodiments or methods shown in the figures.
For convenience of description, the above devices are described as being divided into various modules by functions, and are described separately. Of course, in implementing the embodiments of the present description, the functions of each module may be implemented in one or more software and/or hardware, or a module implementing the same function may be implemented by a combination of multiple sub-modules or sub-units, and the like. The above-described embodiments of the apparatus are merely illustrative, and for example, the division of the units is only one logical division, and other divisions may be realized in practice, for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection through some interfaces, devices or units, and may be in an electrical, mechanical or other form.
Those skilled in the art will also appreciate that, in addition to implementing the controller as pure computer readable program code, the same functionality can be implemented by logically programming method steps such that the controller is in the form of logic gates, switches, application specific integrated circuits, programmable logic controllers, embedded microcontrollers and the like. Such a controller may therefore be considered as a hardware component, and the means included therein for performing the various functions may also be considered as a structure within the hardware component. Or even means for performing the functions may be regarded as being both a software module for performing the method and a structure within a hardware component.
In a typical configuration, a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.
The memory may include forms of volatile memory in a computer readable medium, Random Access Memory (RAM) and/or non-volatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM). Memory is an example of a computer-readable medium.
The embodiments of this specification may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. The described embodiments may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media including memory storage devices.
The embodiments in the present specification are described in a progressive manner, and the same and similar parts among the embodiments are referred to each other, and each embodiment focuses on the differences from the other embodiments. In particular, for the system embodiment, since it is substantially similar to the method embodiment, the description is simple, and for the relevant points, reference may be made to the partial description of the method embodiment. In the description herein, references to the description of the term "one embodiment," "some embodiments," "an example," "a specific example," or "some examples," etc., mean that a particular feature, structure, material, or characteristic described in connection with the embodiment or example is included in at least one embodiment or example of an embodiment of the specification. In this specification, the schematic representations of the terms used above are not necessarily intended to refer to the same embodiment or example. Furthermore, the particular features, structures, materials, or characteristics described may be combined in any suitable manner in any one or more embodiments or examples. Furthermore, various embodiments or examples and features of different embodiments or examples described in this specification can be combined and combined by one skilled in the art without contradiction.
The above description is only an example of the embodiments of the present disclosure, and is not intended to limit the embodiments of the present disclosure. Various modifications and variations to the embodiments described herein will be apparent to those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the embodiments of the present specification should be included in the scope of the claims of the embodiments of the present specification.
Claims (10)
1. A DSL-based multi-technology stack front-end code generation method, comprising:
generating a DSL configuration file according to the editing operation of a user on a page;
traversing the DSL profile to determine code segments in the DSL profile;
and generating a stack front-end code according to the code segment.
2. The DSL-based multi-technology stack front-end code generation method of claim 1 wherein traversing the DSL profile to determine code segments in the DSL profile comprises:
traversing child nodes in the DSL profile, identifying components in the DSL profile;
judging whether the components contain layout components or not;
if yes, traversing sub-components in the layout component to determine code fragments in the sub-components;
if not, the DSL profile is traversed to determine code segments in the DSL profile.
3. The DSL-based multi-technology stack front-end code generation method of claim 1 wherein said generating a stack front-end code from said code fragments comprises:
splicing the code segments to generate the stack front-end code.
4. The DSL-based multi-technology stack front-end code generation method of claim 1, wherein said generating a DSL profile from user page editing operations comprises:
receiving the editing operation of a user on a page;
converting the editing operation into native codes corresponding to a plurality of technology stacks;
generating the DSL profile according to the native code.
5. A DSL-based multi-technology stack front-end code generation apparatus, comprising:
the configuration file generation module is used for generating a DSL configuration file according to the editing operation of a user on a page;
a code segment determination module to traverse the DSL profile to determine code segments in the DSL profile;
and the front-end code generating module is used for generating a stack front-end code according to the code segment.
6. The DSL-based multi-technology stack front end code generation apparatus of claim 5 wherein the code segment determination module comprises:
a child node traversal unit, configured to traverse child nodes in the DSL profile, and identify components in the DSL profile;
the judging unit is used for judging whether the components contain layout components or not;
a sub-component code fragment determining unit, configured to traverse sub-components in the layout component to determine code fragments in the sub-components if the sub-components are included;
a code segment determining unit, configured to traverse the DSL profile to determine a code segment in the DSL profile if not contained.
7. The DSL-based multi-technology stack front-end code generation apparatus of claim 5 wherein the front-end code generation module comprises:
and the code segment splicing unit is used for splicing the code segments to generate the stack front-end code.
8. The DSL-based multi-technology stack front-end code generation apparatus of claim 5, wherein the profile generation module comprises:
the editing operation receiving unit is used for receiving the editing operation of a user on the page;
the editing operation conversion unit is used for converting the editing operation into native codes corresponding to a plurality of technology stacks;
a profile generation unit to generate the DSL profile according to the native code.
9. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor when executing the program performs the steps of the DSL-based multi-technology stack front-end code generation method of any of claims 1 to 4.
10. A computer readable storage medium having stored thereon a computer program, the computer program, when being executed by a processor, implementing the steps of the DSL-based multi-technology stack front-end code generation method of any of claims 1 to 4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110755865.9ACN113485706A (en) | 2021-07-05 | 2021-07-05 | DSL-based multi-technology stack front-end code generation method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110755865.9ACN113485706A (en) | 2021-07-05 | 2021-07-05 | DSL-based multi-technology stack front-end code generation method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113485706Atrue CN113485706A (en) | 2021-10-08 |
Family
ID=77939933
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110755865.9APendingCN113485706A (en) | 2021-07-05 | 2021-07-05 | DSL-based multi-technology stack front-end code generation method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113485706A (en) |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114090012A (en)* | 2021-11-23 | 2022-02-25 | 浩云科技股份有限公司 | Method, system, device and medium for generating TSX file based on DSL |
| CN114116049A (en)* | 2021-11-11 | 2022-03-01 | 北京沃东天骏信息技术有限公司 | Data processing method and device, electronic equipment and computer readable storage medium |
| CN114168139A (en)* | 2021-12-10 | 2022-03-11 | 中国建设银行股份有限公司 | Page generation method and device, electronic equipment and program product |
| CN114489607A (en)* | 2021-12-31 | 2022-05-13 | 瑞庭网络技术（上海）有限公司 | Cross-stack application processing and page rendering method, device, equipment and storage medium |
| CN114625444A (en)* | 2022-03-30 | 2022-06-14 | 北京有竹居网络技术有限公司 | Data processing method and device based on components |
| CN115202626A (en)* | 2022-06-23 | 2022-10-18 | 苏州卓力创智科技有限公司 | Low-code front-end development method supporting multi-technology stack components |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6990653B1 (en)* | 2000-05-18 | 2006-01-24 | Microsoft Corporation | Server-side code generation from a dynamic web page content file |
| CN110968299A (en)* | 2019-11-20 | 2020-04-07 | 北京工业大学 | Front-end engineering code generation method based on hand-drawn webpage image |
| CN112416363A (en)* | 2020-12-09 | 2021-02-26 | 锐捷网络股份有限公司 | Method and device for generating front-end and back-end CRUD codes |
| CN112965701A (en)* | 2021-02-08 | 2021-06-15 | 中国工商银行股份有限公司 | Front-end code generation method and device |
- 2021
- 2021-07-05CNCN202110755865.9Apatent/CN113485706A/enactivePending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6990653B1 (en)* | 2000-05-18 | 2006-01-24 | Microsoft Corporation | Server-side code generation from a dynamic web page content file |
| CN110968299A (en)* | 2019-11-20 | 2020-04-07 | 北京工业大学 | Front-end engineering code generation method based on hand-drawn webpage image |
| CN112416363A (en)* | 2020-12-09 | 2021-02-26 | 锐捷网络股份有限公司 | Method and device for generating front-end and back-end CRUD codes |
| CN112965701A (en)* | 2021-02-08 | 2021-06-15 | 中国工商银行股份有限公司 | Front-end code generation method and device |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114116049A (en)* | 2021-11-11 | 2022-03-01 | 北京沃东天骏信息技术有限公司 | Data processing method and device, electronic equipment and computer readable storage medium |
| CN114090012A (en)* | 2021-11-23 | 2022-02-25 | 浩云科技股份有限公司 | Method, system, device and medium for generating TSX file based on DSL |
| CN114168139A (en)* | 2021-12-10 | 2022-03-11 | 中国建设银行股份有限公司 | Page generation method and device, electronic equipment and program product |
| CN114168139B (en)* | 2021-12-10 | 2025-07-22 | 中国建设银行股份有限公司 | Page generation method, page generation device, electronic equipment and program product |
| CN114489607A (en)* | 2021-12-31 | 2022-05-13 | 瑞庭网络技术（上海）有限公司 | Cross-stack application processing and page rendering method, device, equipment and storage medium |
| CN114625444A (en)* | 2022-03-30 | 2022-06-14 | 北京有竹居网络技术有限公司 | Data processing method and device based on components |
| CN115202626A (en)* | 2022-06-23 | 2022-10-18 | 苏州卓力创智科技有限公司 | Low-code front-end development method supporting multi-technology stack components |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113485706A (en) | DSL-based multi-technology stack front-end code generation method and device | |
| Salay et al. | Managing requirements uncertainty with partial models | |
| US7865870B2 (en) | Automatic content completion of valid values for method argument variables | |
| US10977031B2 (en) | Method for a software development system | |
| US10572278B2 (en) | Smart controls for user interface design and implementation | |
| Degueule et al. | Safe model polymorphism for flexible modeling | |
| US20170300305A1 (en) | Executable guidance experiences based on implicitly generated guidance models | |
| Bettini et al. | Supporting safe metamodel evolution with edelta | |
| CN116755669A (en) | Low code development method and tool based on DSL language operation model | |
| Merkuryev | Design of UML models and their simulation using ARENA | |
| Gibbs et al. | A separation-based UI architecture with a DSL for role specialization | |
| Zhao et al. | Pattern-based design evolution using graph transformation | |
| Winter et al. | Formal information modelling for standardisation in the spatial domain | |
| Pepin et al. | An improved model facet method to support EA alignment | |
| Daniel et al. | Model-driven software development | |
| de Lange et al. | Collaborative wireframing for model-driven web engineering | |
| Valderas et al. | A transformational approach to produce web application prototypes from a web requirements model | |
| JP7011752B2 (en) | Navigation schema analysis and generation system and method | |
| US20240168727A1 (en) | Creation and automatic updating of a software application | |
| Shershakov | VTMine for Visio: A Graphical Tool for Modeling in Process Mining | |
| Hamdani et al. | A Novel Framework to Automatically Generate IFML Models From Plain Text Requirements | |
| WO2023128793A1 (en) | System and method for dynamically visualizing software elements | |
| Merlin et al. | Integrating the E4J editor to the JGOOSE tool. | |
| Kainz et al. | Automated model-to-metamodel transformations based on the concepts of deep instantiation | |
| Asadi et al. | Goal-oriented requirements and feature modeling for software product line engineering |
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 |