CN115951875A - Solution method and system for mutual conversion between DSL language and Vue code - Google Patents
Solution method and system for mutual conversion between DSL language and Vue code Download PDFInfo
- Publication number
- CN115951875A CN115951875A CN202211695041.8A CN202211695041A CN115951875A CN 115951875 A CN115951875 A CN 115951875A CN 202211695041 A CN202211695041 A CN 202211695041A CN 115951875 A CN115951875 A CN 115951875A
- Authority
- CN
- China
- Prior art keywords
- code
- vue
- dsl
- page
- dsl language
- 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
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Stored Programmes (AREA)
Abstract
The invention discloses a method and a system for realizing mutual conversion between DSL (digital subscriber line) language and Vue (virtual channel) codes, belonging to the technical field of low codes. The invention solves the problems that forms with special styles are needed and customized components with complex events need to be bound, achieves the goal of flexibly supporting individual secondary development, and assists users to quickly develop and debug the secondary development without packaging and compiling; in the scenes of complex data processing, personalized interaction events, special page elements and the like, a user can meet the service requirement by writing a JavaScript code block; and further, the secondary development flexibility and the expansibility of a low-code platform are improved.
Description
Technical Field
The invention relates to the technical field of low codes, in particular to a method and a system for realizing interconversion between a DSL language and a Vue code.
Background
In order to support the integrated cooperation of cloud network production intelligent scheduling, cloud network one-point service agile response and cloud network management, the capability of quickly constructing a flow, a form, a rule and a report is realized through an operation scheduling low-code platform. The supporting period of new scene and stock scene optimization is realized, real agile development is realized, and the period is shortened from month to day and from week to day.
Aiming at the problems of slow response and poor expansibility of the conventional low-code platform in response to the personalized requirements of the user, the page design is rigid. Meanwhile, the components which need forms with special styles and complex events to be bound cannot be achieved, so that the usability of the whole low-code platform is reduced, more importantly, after the user carries out secondary development on codes generated based on visual design, how to switch back to a dragged designer to continue dragging type design without influencing other functions is a problem to be solved urgently. Therefore, a solution and a system for mutual conversion between DSL language and Vue code are provided.
Disclosure of Invention
The technical problem to be solved by the invention is as follows: how to solve the problems that a form with a special style exists in the existing low-code platform, a customized component needing to bind complex events and a component which does not exist in the platform are required to be quickly developed and released for dragging and using and the like, and provides a solution for mutual conversion between a DSL language and a Vue code.
The invention solves the technical problems through the following technical scheme, and comprises the following steps:
s1: visual page design
The method comprises the following steps that visual page design is carried out by utilizing various designers, and a user finishes low-code development by dragging components and configuring component parameters in the designers;
s2: generating DSL language packages
The method comprises the steps that visual configuration of scenes is carried out on a page by a user, DSL languages corresponding to service logic description are generated, and a DSL language package of each scene is obtained after the DSL languages are sorted and packaged by a low-code platform;
s3: parsing DSL packets to compile Vue code
Analyzing the DSL language package by using a low-code DSL syntactic parser and compiling to generate a Vue code of the page;
s4: reverse compilation of Vue codes into DSL language packages
The user carries out secondary development on the generated Vue code, and the low-code platform inserts the code of the secondary development of the user into the generated Vue code in the step S3 and decompiles the code into a DSL language package;
s5: generating a running State Page and previewing
And generating a page Vue code and a form component rule through a DSL parser, and rendering a form page in real time by combining service instance data.
Furthermore, in the step S1, the multiple designers are respectively a model designer, a form designer, a flow designer and a rule designer; the model designer is used for designing a base table model, the form designer is used for designing forms of an information input type, a detail display type and an information query type in a scene, and the process designer is used for designing a main process and a sub-process of the scene and simultaneously supporting the setting of branch conditions and participants for links; the rule designer is used for designing form display interaction and link component display rules.
Furthermore, in the step S1, the model design is a table design in a database, the form design includes a form, a button and a popup window design, the process design includes a manual link and an automatic link design, and the rule design includes form display interaction and link component display rule design.
Further, in step S2, the DSL language is in JSON format or XML format in the low-code platform.
Further, in step S3, the low-code DSL parser generates three sections of codes, namely template, script and Style, corresponding to Vue by using Vue syntax; and meanwhile, providing a Vue code online editor for a user to edit Script and Style partial codes, wherein the Vue code online editor provides a code checking function and a page preview function.
Further, in step S4, the DSL language package is generated by back-compiling the Script and Style partial codes into JSON or XML, respectively.
Furthermore, in step S5, the rule refers to abstracting a general judgment model by using a rule idea and a conditional branch judgment idea in development, and freely combining the judged structural control and conditional element; and calculating an expression value by combining the example data to realize the display judgment of the form component.
Furthermore, in the step S5, by manipulating the attribute of the dom element in the form, the state of the form element is switched by using the watch, the computed attribute and the v-if instruction provided by Vue, so as to implement dynamic rendering of the form page.
The invention also provides a solution system for mutual conversion between the DSL language and the Vue code, which utilizes the solution method to perform the mutual conversion between the DSL language and the Vue code and comprises the following steps:
the design module is used for carrying out visual page design by utilizing various designers, and a user finishes low code development by dragging components and configuring component parameters in the designers;
the generating module is used for carrying out scene visual configuration on a page by a user, generating a DSL language corresponding to the service logic description, and obtaining a DSL language package of each scene after the DSL language package is sorted and packaged by a low-code platform;
the compiling module is used for analyzing the DSL language packet by using the low-code DSL syntactic parser and compiling the Vue code of the generated page;
the decompilation module is used for carrying out secondary development on the generated Vue code by the user, and the low-code platform inserts the code of the secondary development of the user into the generated Vue code in the step S3 and decompilates the code into a DSL language package;
and the preview module is used for generating a page Vue code and a form component rule through a DSL parser and rendering a form page in real time by combining service instance data.
Compared with the prior art, the invention has the following advantages: the DSL language and Vue code interconversion solution solves the problems that a form with a special style is needed and a customized component with a complex event needs to be bound, achieves the aim of flexibly supporting personalized secondary development, and helps a user to quickly develop and debug for the secondary development without packaging and compiling; in scenes such as complex data processing, personalized interaction events, special page elements and the like, a user can meet business requirements by writing JavaScript code blocks; and further, the secondary development flexibility and the expansibility of a low-code platform are improved.
Drawings
Fig. 1 is a schematic flow chart of a solution for interconversion between DSL language and Vue code according to an embodiment of the present invention;
FIG. 2 is a flowchart illustrating a solution for dragging a Vue code component into a designer according to a second embodiment of the present invention.
Detailed Description
The following examples are given for the detailed implementation and specific operation of the present invention, but the scope of the present invention is not limited to the following examples.
As shown in fig. 1, the present embodiment provides a technical solution: a solution for interconversion between DSL language and Vue code, comprising the steps of:
s1: visual page design
The method comprises the following steps that a plurality of designers are utilized to carry out visual page design, wherein the visual page design comprises a model designer, a form designer, a flow designer, a rule designer and the like, and a user finishes low-code development by dragging components in the designers, configuring component parameters and the like;
s2: generating DSL language packages
The low code design state carries out visual configuration of scenes on a page by a user to generate a DSL language corresponding to the service logic description, and the DSL language package of each scene is obtained after the DSL language package is sorted and packaged by a low code platform;
s3: parsing DSL packets compiling Vue code
Analyzing the DSL language package by using a low-code DSL syntax parser, compiling and generating a Vue code of a page, editing the Vue code in a Vue code online editor by a user, and supporting the functions of real-time preview and code detection;
s4: reverse compilation of Vue code into DSL language packages and presentation in low code design state
The user carries out secondary development on the generated Vue code, and the secondarily developed code can also be decompiled into a DSL language packet;
s5: generating a running State Page and previewing
And the running state generates a page Vue code and a form component rule through a DSL parser, and dynamically renders a form page in real time by combining service instance data.
In the step S1, the model design is a table design in a database, the form design includes a form, a button, and a popup window design, the process design includes a manual link and an automatic link design, and the rule design includes rule configuration such as form display interaction and link component display.
In said step S2, the DSL language is a domain specific language, which in a low code platform is in JSON format or XML format.
In the present embodiment, both the JSON format and the XML format are one data format.
In step S3, the low-code DSL parser generates three sections of codes, template, script and Style, which respectively correspond to Vue, by using Vue syntax, for self-research; and meanwhile, a Vue code online editor is provided, so that a user can edit Script and Style partial codes, and the Vue code online editor provides a code checking function and a page preview function, so that the user can develop and preview effects.
In step S4, the DSL language package is generated by inverse-compiling the Script and Style partial codes into JSON format or XML format, respectively.
In the step S5, the rule refers to abstracting a general judgment model by using a rule idea and a conditional branch judgment idea in development, and performing free combination on the judged structural control and conditional element; calculating an expression value by combining the example data to realize the display judgment of the form component and the like; and by controlling the attribute of the dom element in the form, switching the state of the form element by using the watch attribute, the computed attribute and the v-if instruction provided by the Vue, and realizing dynamic rendering of the form page.
The present embodiment further provides a system for mutual conversion between a DSL language and a Vue code, where the mutual conversion between the DSL language and the Vue code is performed by using the foregoing method, and the method includes:
the visual design module is used for providing a plurality of designers in a low-code design state, namely a model designer, a form designer, a flow designer and a rule designer, wherein the model designer can design a base table model; the form designer can design forms of an information input type, a detail display type and an information query type in a scene; the flow designer can design a main flow and a sub-flow of a scene and simultaneously support setting of branch conditions and participants for links; the rule designer can design the rules of form display interaction and link component display; the visual design yields JSON or XML which conforms to the low-code DSL syntax;
the DSL compiling module is used for compiling JSON or XML generated by user visual design to generate a Vue code;
the Vue code editing module is used for providing a Vue code online editor for a user to develop codes online for the second time and providing the functions of code detection and real-time preview;
the Vue code decompilation module is used for decompilating the Vue code generated by the DSL compiling module and the code developed by the user for the second time into a JSON format to generate a DSL language package;
and the preview module is used for generating the running state page and previewing the running state page.
Example two
As shown in FIG. 2, the present embodiment provides a solution for dragging a Vue code component into a designer, comprising the following steps:
step S1, locally developing a Vue code component:
and developing a Vue file which conforms to the specification of the low-code platform in the local editor, uploading the Vue file to the low-code platform, and generating JSON codes of the DSL specification by a decompiler.
S2, dragging the Vue component into a canvas:
and dragging the Vue component by the user, acquiring the Vue file uploaded by the user by the low-code platform through calling the API to acquire the JSON code, and displaying the JSON code back to the canvas of the designer.
Step S3, previewing a page:
and a preview button is clicked to preview a designed page, and the low-code DSL compiler mounts a Vue code component on the page by using a Vue.
In step S2, the API refers to a uniform specification interface provided by the low-code platform, and the returned data is the relevant configuration information of the Vue component.
Component refers to the way the native dynamic registration component is provided by the Vue front-end framework in said step S3.
It should be noted that, in the above system embodiment, each included unit is only divided according to functional logic, but is not limited to the above division as long as the corresponding function can be implemented; in addition, specific names of the functional units are only for convenience of distinguishing from each other, and are not used for limiting the protection scope of the present invention.
In addition, it is understood by those skilled in the art that all or part of the steps in the method for implementing the embodiments described above may be implemented by a program instructing associated hardware, and the corresponding program may be stored in a computer-readable storage medium.
To sum up, the solution and the system for interconversion between DSL language and Vue code in the above embodiment solve the problems of requiring a form of a special style and requiring a customized component for binding a complex event, achieve the goal of flexibly supporting personalized secondary development, and enable a user to quickly perform secondary development and debugging without packaging and compiling; in scenes such as complex data processing, personalized interaction events, special page elements and the like, a user can meet business requirements by writing JavaScript code blocks; and further, the secondary development flexibility and the expansibility of a low-code platform are improved.
Although embodiments of the present invention have been shown and described above, it is understood that the above embodiments are exemplary and should not be construed as limiting the present invention, and that variations, modifications, substitutions and alterations can be made to the above embodiments by those of ordinary skill in the art within the scope of the present invention.
Claims (9)
1. A DSL language and Vue code interconversion solution, comprising the steps of:
s1: visual page design
The method comprises the following steps that visual page design is carried out by utilizing various designers, and a user finishes low-code development by dragging components and configuring component parameters in the designers;
s2: generating DSL language packs
The method comprises the steps that visual configuration of scenes is carried out on a page by a user, DSL languages corresponding to service logic description are generated, and a DSL language package of each scene is obtained after the DSL languages are sorted and packaged by a low-code platform;
s3: parsing DSL packets compiling Vue code
Analyzing the DSL language package by using a low-code DSL syntactic parser and compiling to generate a Vue code of the page;
s4: reverse compilation of Vue codes into DSL language packages
The user carries out secondary development on the generated Vue code, and the low-code platform inserts the code of the secondary development of the user into the generated Vue code in the step S3 and decompilates the code into a DSL language package;
s5: generating a running state page and previewing
And generating a page Vue code and a form component rule through a DSL parser, and rendering a form page in real time by combining service instance data.
2. The DSL language and Vue code interconversion solution of claim 1, wherein: in the step S1, the multiple designers are respectively a model designer, a form designer, a flow designer and a rule designer; the system comprises a model designer, a form designer, a flow designer and a flow analysis system, wherein the model designer is used for designing a base table model, the form designer is used for designing forms of information input type, detail display type and information query type in a scene, and the flow designer is used for designing a main flow and a sub flow of the scene and simultaneously supporting the setting of branch conditions and participants for links; the rule designer is used for designing form display interaction and link component display rules.
3. The DSL language and Vue code interconversion solution of claim 2, wherein: in the step S1, the model design is a table design in a database, the form design includes a form, a button and a popup window design, the process design includes a manual link and an automatic link design, and the rule design includes form display interaction and link component display rule design.
4. A DSL language to Vue code interconversion solution according to claim 3, wherein: in step S2, the DSL language is in JSON format or XML format in the low-code platform.
5. The DSL language and Vue code interconversion solution of claim 4, wherein: in the step S3, the low-code DSL parser generates three sections of codes, template, script and Style, which respectively generate Vue by using Vue syntax; and meanwhile, providing a Vue code online editor for a user to edit Script and Style partial codes, wherein the Vue code online editor provides a code checking function and a page preview function.
6. The DSL language and Vue code interconversion solution of claim 5, wherein: in step S4, the DSL language package is generated by back-compiling the Script and Style partial codes into JSON or XML, respectively.
7. The DSL language and Vue code interconversion solution of claim 6, wherein: in the step S5, the rule refers to abstracting a general judgment model by using a rule idea and a conditional branch judgment idea in development, and performing free combination on the judged structural control and conditional element; and calculating an expression value by combining the example data to realize the display judgment of the form component.
8. The DSL language and Vue code interconversion solution of claim 7, wherein: in the step S5, by manipulating the attribute of the dom element in the form, the state of the form element is switched by using the watch, the computed attribute and the v-if instruction provided by Vue, so as to implement dynamic rendering of the form page.
9. A solution system for interconversion between DSL language and Vue code, wherein the solution method according to any of claims 1 to 8 is used for interconversion between DSL language and Vue code, and comprises:
the design module is used for carrying out visual page design by utilizing various designers, and a user finishes low code development by dragging components and configuring component parameters in the designers;
the generating module is used for carrying out scene visual configuration on a page by a user, generating a DSL language corresponding to the service logic description, and obtaining a DSL language package of each scene after the DSL language package is sorted and packaged by a low-code platform;
the compiling module is used for analyzing the DSL language packet by using the low-code DSL syntactic parser and compiling the Vue code of the generated page;
the decompilation module is used for carrying out secondary development on the generated Vue code by the user, and the low-code platform inserts the code of the secondary development of the user into the generated Vue code in the step S3 and decompilates the code into a DSL language package;
and the preview module is used for generating a page Vue code and a form component rule through a DSL parser and rendering a form page in real time by combining service instance data.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211695041.8A CN115951875A (en) | 2022-12-28 | 2022-12-28 | Solution method and system for mutual conversion between DSL language and Vue code |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211695041.8A CN115951875A (en) | 2022-12-28 | 2022-12-28 | Solution method and system for mutual conversion between DSL language and Vue code |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115951875A true CN115951875A (en) | 2023-04-11 |
Family
ID=87282093
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211695041.8A Pending CN115951875A (en) | 2022-12-28 | 2022-12-28 | Solution method and system for mutual conversion between DSL language and Vue code |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115951875A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116126348A (en) * | 2023-04-17 | 2023-05-16 | 函子科技(杭州)有限公司 | File compiling method for low-code application program of real-time preview |
| CN117785160A (en) * | 2024-02-28 | 2024-03-29 | 浩鲸云计算科技股份有限公司 | Behavior logic development and debugging method, system and device for low-code application |
-
2022
- 2022-12-28 CN CN202211695041.8A patent/CN115951875A/en active Pending
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116126348A (en) * | 2023-04-17 | 2023-05-16 | 函子科技(杭州)有限公司 | File compiling method for low-code application program of real-time preview |
| CN117785160A (en) * | 2024-02-28 | 2024-03-29 | 浩鲸云计算科技股份有限公司 | Behavior logic development and debugging method, system and device for low-code application |
| CN117785160B (en) * | 2024-02-28 | 2024-05-14 | 浩鲸云计算科技股份有限公司 | Behavior logic development and debugging method, system and device for low-code application |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN115951875A (en) | Solution method and system for mutual conversion between DSL language and Vue code | |
| CN107193545B (en) | Component-oriented multi-language collaborative development device, method and system | |
| CN109062567B (en) | B/S structure-based information management system rapid development platform | |
| CN108491205A (en) | A kind of front end web development methods and system based on component tree | |
| CN111488145B (en) | Micro-service code generation system and method based on service domain data model library | |
| CN102096588B (en) | Control-containing page establishing method | |
| US20060206856A1 (en) | System and method for software application development in a portal environment | |
| US20170286068A1 (en) | Development support system | |
| CN102495735A (en) | Web end UI (user interface) component application frame system | |
| CN104793961A (en) | Quick JavaWeb development method and system using native Web codes | |
| CN104679488A (en) | Flow path customized development platform and method | |
| CN109189380A (en) | Algorithm integration frame and method | |
| CN113268227A (en) | Zero-code visualization software development platform and development method | |
| CN109783083A (en) | WEB application development approach and its system | |
| KR20220132457A (en) | User interface platform developing system and method with source complier | |
| CN113900636A (en) | Self-service channel business process development system and development method thereof | |
| JP5626333B2 (en) | Program creation support apparatus, program, and information system | |
| CN114610280A (en) | Visual form design method and system realized in low-code mode | |
| CN107577521A (en) | A kind of virtual resource management method and device | |
| CN114564199A (en) | Method, device and equipment for generating use page and readable storage medium | |
| CN100437476C (en) | Processing of a compileable computer program | |
| CN101303663A (en) | Simulation test method for digital set-top box software development | |
| CN116909553A (en) | Page online development and local compiling operation system | |
| CN112181399A (en) | Method for generating front-end code based on data analysis construction model | |
| CN115718619A (en) | Visual control logic arrangement method, equipment and 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 |