CN110825364B - Application template configuration method based on tree structure - Google Patents
Application template configuration method based on tree structure Download PDFInfo
- Publication number
- CN110825364B CN110825364B CN201911065291.1A CN201911065291A CN110825364B CN 110825364 B CN110825364 B CN 110825364B CN 201911065291 A CN201911065291 A CN 201911065291A CN 110825364 B CN110825364 B CN 110825364B
- Authority
- CN
- China
- Prior art keywords
- configuration
- tree
- data
- class
- format
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 38
- 238000010586 diagram Methods 0.000 claims abstract description 36
- 238000006243 chemical reaction Methods 0.000 claims abstract description 9
- 238000004458 analytical method Methods 0.000 claims description 3
- 238000007405 data analysis Methods 0.000 claims description 3
- 230000008569 process Effects 0.000 claims description 3
- 125000004122 cyclic group Chemical group 0.000 claims 1
- 230000009286 beneficial effect Effects 0.000 description 2
- 230000007547 defect Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 241000380131 Ammophila arenaria Species 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
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/31—Programming languages or programming paradigms
- G06F8/315—Object-oriented languages
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR 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
-
- 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
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computing Systems (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
- Stored Programmes (AREA)
Abstract
The invention particularly relates to an application template configuration method based on a tree structure. The Tree structure-based application template configuration method is based on an Angular language and a ng-zorro-anti framework, comprises two classes of Json2Tree and Tree2Json, firstly converts a YAML format file into a JSON format, traverses a configuration item in the JSON format, draws a Tree diagram, and guides a user to conduct template configuration in a Tree diagram mode so as to enable the user to support editing, saving and format conversion, and forbids the user to modify the name of the configuration item. According to the tree structure-based application template configuration method, configuration errors can be prevented by prohibiting a user from modifying the names of configuration items; the hierarchical structure of the configuration is displayed more clearly through the tree structure, so that a user can browse and search configuration items conveniently; by using different color labels to distinguish data types, the user can conveniently check the validity of configuration parameters; the method can also realize the mutual conversion among different format files, provide more modes for the user to configure the template, and improve the flexibility.
Description
Technical Field
The invention relates to the technical fields of UI design and front-end interaction, in particular to an application template configuration method based on a tree structure.
Background
Currently, a common configuration for application templates based on the Kubernetes Helm standard is to add source files to the code editor. However, editing the configuration file by using the editor has the defects of troublesome viewing, easy error editing, random addition and deletion of configuration items and the like, and causes difficulty for understanding and configuration of non-professional personnel.
It is highly desirable to provide a relatively friendly way of interaction for the user.
Based on the above situation, the invention provides an application template configuration method based on a tree structure. The template configuration mode of the tree structure based on the Angular is provided, more modes are provided for a user to configure the template through the mutual conversion of three data structures of yaml, json and a tree diagram, and the flexibility is improved.
Disclosure of Invention
The invention provides a simple and efficient tree structure-based application template configuration method for overcoming the defects of the prior art.
The invention is realized by the following technical scheme:
the application template configuration method based on the tree structure is characterized by comprising the following steps of: based on the Angular language and the ng-zorro-anti framework, the YAML format file is converted into a JSON format firstly, the JSON format configuration items are traversed and drawn into a Tree diagram, and then a user is guided to conduct template configuration in a Tree diagram mode, so that the template configuration supports editing, storage and format conversion, but the user is forbidden to modify the configuration item names.
The JSON2Tree class analyzes the YAML configuration file to generate JSON format data, traverses the JSON format data, judges the data type and parent-child relationship of each node, and further analyzes the JSON format data into a node (nodes) array required by the ng-zorro-anti frame to create a Tree structure.
Drawing the YAML file into a tree diagram, wherein the specific steps are as follows:
firstly, using js-YAML tools provided by NPM toolkits to convert application template configuration files conforming to YAML format specifications into JSON format data, and introducing JSON2Tree class into the JSON format data;
secondly, executing an analysis method provided by json2Tree class, and analyzing again to generate a data format required by drawing the Tree diagram, so as to generate a node (nodes) array required by the Tree diagram in the ng-zorro-anti frame;
thirdly, traversing conf parameters in a JSON format in JSON2Tree class, and outputting traversing results of the JSON2Tree class as Tree-shaped primitive data;
and fourthly, adding different CSS classes to the data types, and distinguishing and displaying the different data types by using the different CSS classes.
In the third step, when the parameter data type is an array, the parameter data type is required to be converted into character string display; when the parameter data type is an object, the json2Tree class is required to be transmitted again for recursive traversal; the tree node that eventually appears in the traversal result contains a field indicating its data type.
The tree diagram supports display of notes in the configuration file, reading and storage of data types such as array objects and the like, judgment loading and distinguishing display of different data types.
When the tree graph configuration is saved, the tree2Json class traverses the tree graph nodes, processes the parent nodes and the leaf nodes respectively, stores the configuration items of the value array or the object in a deserialization mode, converts the configuration items into JSON format data finally, converts tools provided by the NPM tool kit into YAML format data, and submits and installs the configuration items.
The method comprises the following specific steps:
firstly, obtaining tree diagram configuration by a getTreeNodes method of a ng-zorro-anti component;
secondly, transmitting tree2JSON class into the obtained tree diagram configuration, and performing data analysis as tree diagram configuration metadata to convert the tree diagram configuration metadata into a JSON format;
thirdly, circularly traversing an array containing tree graph nodes in the tree2Json class;
fourth, distinguishing the father node and the leaf node; for the leaf node, directly reading configuration parameters and recording the configuration parameters into a parent configuration item of the leaf node; and (3) carrying out recursive query on the father node by a findLeaves method of tree2Json class again until the leaf node is found.
The tree graph is configured into an array returned by the getTreeNodes method, and the array comprises father and child nodes of the tree graph.
In the fourth step, when the configuration parameter value in the node is boolean, numerical, or an array (the storage mode in the node is unified as a character type), the configuration parameter value is processed separately and converted into a corresponding data type.
The beneficial effects of the invention are as follows: the tree structure-based application template configuration method is concise in display and simple in operation, and configuration errors can be prevented by prohibiting a user from modifying the names of configuration items; the hierarchical structure of the configuration is displayed more clearly through the tree structure, so that a user can browse and search configuration items conveniently; by using different color labels to distinguish data types, the user can conveniently check the validity of configuration parameters; the method can also realize the mutual conversion among different format files, provide more modes for the user to configure the template, and improve the flexibility.
Drawings
Fig. 1 is a schematic flow chart of the json2Tree class of the present invention for drawing YAML format files into Tree diagrams.
Detailed Description
In order to make the technical problems, technical schemes and beneficial effects to be solved more clear, the invention is described in detail below with reference to the embodiments. It should be noted that the specific embodiments described herein are for the purpose of illustrating the invention only and are not to be construed as limiting the invention.
The Tree structure-based application template configuration method is based on an Angular language and a ng-zorro-anti framework, comprises two classes of Json2Tree and Tree2Json, firstly converts a YAML format file into a JSON format, traverses a configuration item in the JSON format, draws a Tree diagram, and guides a user to conduct template configuration in a Tree diagram mode so as to enable the user to support editing, saving and format conversion, and forbids the user to modify the name of the configuration item.
The JSON2Tree class analyzes the YAML configuration file to generate JSON format data, traverses the JSON format data, judges the data type and parent-child relationship of each node, and further analyzes the JSON format data into a node (nodes) array required by the ng-zorro-anti frame to create a Tree structure.
Drawing the YAML file into a tree diagram, wherein the specific steps are as follows:
firstly, using js-YAML tools provided by NPM toolkits to convert application template configuration files conforming to YAML format specifications into JSON format data, and introducing JSON2Tree class into the JSON format data;
secondly, executing an analysis method provided by json2Tree class, and analyzing again to generate a data format required by drawing the Tree diagram, so as to generate a node (nodes) array required by the Tree diagram in the ng-zorro-anti frame;
thirdly, traversing conf parameters in a JSON format in JSON2Tree class, and outputting traversing results of the JSON2Tree class as Tree-shaped primitive data;
and fourthly, adding different CSS classes to the data types, and distinguishing and displaying the different data types by using the different CSS classes.
For example, a general string is shown as green, null as blue, etc.
In the third step, when the parameter data type is an array, the parameter data type is required to be converted into character string display; when the parameter data type is an object, the json2Tree class is required to be transmitted again for recursive traversal; the tree node that eventually appears in the traversal result contains a field indicating its data type.
The tree diagram supports display of notes in the configuration file, reading and storage of data types such as array objects and the like, judgment loading and distinguishing display of different data types.
When the tree graph configuration is saved, the tree2Json class traverses the tree graph nodes, processes the parent nodes and the leaf nodes respectively, stores the configuration items of the value array or the object in a deserialization mode, converts the configuration items into JSON format data finally, converts tools provided by the NPM tool kit into YAML format data, and submits and installs the configuration items.
The method comprises the following specific steps:
firstly, obtaining tree diagram configuration by a getTreeNodes method of a ng-zorro-anti component;
secondly, transmitting tree2JSON class into the obtained tree diagram configuration, and performing data analysis as tree diagram configuration metadata to convert the tree diagram configuration metadata into a JSON format;
thirdly, circularly traversing an array containing tree graph nodes in the tree2Json class;
fourth, distinguishing the father node and the leaf node; for the leaf node, directly reading configuration parameters and recording the configuration parameters into a parent configuration item of the leaf node; and (3) carrying out recursive query on the father node by a findLeaves method of tree2Json class again until the leaf node is found.
The tree graph is configured into an array returned by the getTreeNodes method, and the array comprises father and child nodes of the tree graph.
In the fourth step, when the configuration parameter value in the node is boolean, numerical, or an array (the storage mode in the node is unified as a character type), the configuration parameter value is processed separately and converted into a corresponding data type.
Compared with the prior art, the tree structure-based application template configuration method has the following characteristics:
a) The YAML and JSON format mutual conversion method provided by the npm tool is packaged, the YAML and JSON format mutual conversion method is integrated, and a tool kit is introduced during development, so that the use is convenient;
b) The configuration file in the YAML format is converted into a tree diagram form, the hierarchical structure is clear, different data types are clear at a glance, and null value prompt, annotation and the like are supported;
c) The name (key) of the configuration item can be set as read-only, and functions of prohibiting adding of new configuration items and the like are set, so that a fault-tolerant mechanism is provided for professional and non-professional operation and maintenance personnel, the change range of the configuration file is limited, and configuration errors are avoided;
d) The configuration parameters for providing options can be directly selected in the tree diagram through a drop-down list, and a user does not need to manually input and set the configuration parameters according to comments in the YAML file, so that the operation cost of the user is reduced.
The above examples are only one of the specific embodiments of the present invention, and the ordinary changes and substitutions made by those skilled in the art within the scope of the technical solution of the present invention should be included in the scope of the present invention.
Claims (7)
1. The application template configuration method based on the tree structure is characterized by comprising the following steps of: based on an Angular language and a ng-zorro-anti framework, the method comprises two classes of Json2Tree and Tree2Json, firstly converting a YAML format file into a JSON format, traversing configuration items in the JSON format, drawing a Tree diagram, and guiding a user to perform template configuration in a Tree diagram mode so as to enable the user to support editing, saving and format conversion, but prohibiting the user from modifying the names of the configuration items;
the JSON2Tree class analyzes the YAML configuration file to generate JSON format data, traverses the JSON format data, judges the data type and father-son relationship of each node, and further analyzes the JSON data into a node array required by the ng-zorro-anti frame to create a Tree structure;
drawing the YAML file into a tree diagram, wherein the specific steps are as follows:
firstly, using js-YAML tools provided by NPM toolkits to convert application template configuration files conforming to YAML format specifications into JSON format data, and introducing JSON2Tree class into the JSON format data;
secondly, executing an analysis method provided by json2Tree class, and analyzing again to generate a data format required by drawing the Tree diagram, so as to generate a node array required by the Tree diagram in the ng-zorro-anti frame;
thirdly, traversing conf parameters in a JSON format in JSON2Tree class, and outputting traversing results of the JSON2Tree class as Tree-shaped primitive data;
and fourthly, adding different CSS classes to the data types, and distinguishing and displaying the different data types by using the different CSS classes.
2. The tree structure-based application template configuration method according to claim 1, wherein: in the third step, when the parameter data type is an array, the parameter data type is required to be converted into character string display; when the parameter data type is an object, the json2Tree class is required to be transmitted again for recursive traversal; the tree node that eventually appears in the traversal result contains a field indicating its data type.
3. The tree structure-based application template configuration method according to claim 2, wherein: the tree diagram supports display of notes in the configuration file, reading and storing of array object data types, judgment loading and distinguishing display of different data types.
4. The tree structure-based application template configuration method according to claim 1, wherein: when the tree graph configuration is saved, the tree2Json class traverses the tree graph nodes, processes the parent nodes and the leaf nodes respectively, stores the configuration items of the value array or the object in a deserialization mode, converts the configuration items into JSON format data finally, converts tools provided by the NPM tool kit into YAML format data, and submits and installs the configuration items.
5. The tree structure-based application template configuration method according to claim 4, wherein the specific steps are as follows:
(1) Obtaining tree diagram configuration through a getTreeNodes method of a ng-zorro-anti component;
(2) The tree2JSON class is transmitted into the obtained tree diagram configuration and is used as tree diagram configuration metadata to perform data analysis, and the tree diagram configuration metadata is converted into a JSON format;
(3) In tree2Json class, performing cyclic traversal on an array containing tree graph nodes;
(4) Distinguishing the father node and the leaf node; for the leaf node, directly reading configuration parameters and recording the configuration parameters into a parent configuration item of the leaf node; and (3) carrying out recursive query on the father node by a findLeaves method of tree2Json class again until the leaf node is found.
6. The tree structure based application template configuration method according to claim 5, wherein: the tree graph is configured into an array returned by the getTreeNodes method, and the array comprises father and child nodes of the tree graph.
7. The tree structure based application template configuration method according to claim 5, wherein: in the step (4), when the configuration parameter value in the node is boolean, numerical or array, the configuration parameter value is processed separately and converted into a corresponding data type.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911065291.1A CN110825364B (en) | 2019-11-04 | 2019-11-04 | Application template configuration method based on tree structure |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911065291.1A CN110825364B (en) | 2019-11-04 | 2019-11-04 | Application template configuration method based on tree structure |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110825364A CN110825364A (en) | 2020-02-21 |
| CN110825364B true CN110825364B (en) | 2023-11-07 |
Family
ID=69552661
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911065291.1A Active CN110825364B (en) | 2019-11-04 | 2019-11-04 | Application template configuration method based on tree structure |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110825364B (en) |
Families Citing this family (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112069129B (en) * | 2020-09-18 | 2024-01-19 | 浪潮云信息技术股份公司 | Configuration file format conversion method, device and medium based on domestic CPU |
| CN112286628B (en) * | 2020-10-19 | 2022-05-17 | 烽火通信科技股份有限公司 | System for unifying nanotube Kubernetes heterogeneous applications and operation method |
| CN112379946A (en) * | 2020-11-27 | 2021-02-19 | 平安普惠企业管理有限公司 | Template configuration method and device based on YAML and computer equipment |
| CN112395845A (en) * | 2020-11-30 | 2021-02-23 | 政采云有限公司 | Dynamic form rendering method and related components |
| CN113010473B (en) * | 2021-03-05 | 2023-02-28 | 山东英信计算机技术有限公司 | Method and equipment for editing YAML file |
| CN116127936B (en) * | 2023-04-04 | 2023-08-01 | 深圳市城市交通规划设计研究中心股份有限公司 | Method for compiling engineering unit matrix diagram, electronic equipment and storage medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102867059A (en) * | 2012-09-19 | 2013-01-09 | 浪潮(北京)电子信息产业有限公司 | Method and system for processing data in treelike structures |
| EP3037958A1 (en) * | 2014-12-24 | 2016-06-29 | SAP Portals Israel, Ltd. | Declarative user interface representation conversion via hierarchical templates |
| US10044522B1 (en) * | 2012-08-21 | 2018-08-07 | Amazon Technologies Inc. | Tree-oriented configuration management service |
| CN110110297A (en) * | 2019-04-22 | 2019-08-09 | 无线生活（杭州）信息科技有限公司 | A kind of XSD document generating method and device based on JSON configuration |
Family Cites Families (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9977817B2 (en) * | 2014-10-20 | 2018-05-22 | Conduent Business Services, Llc | Matching co-referring entities from serialized data for schema inference |
| US9864740B2 (en) * | 2015-02-05 | 2018-01-09 | Ciena Corporation | Methods and systems for creating and applying a template driven element adapter |
| US10346143B2 (en) * | 2017-06-21 | 2019-07-09 | Ca, Inc. | Systems and methods for transforming service definitions in a multi-service containerized application |
| US11055353B2 (en) * | 2018-01-31 | 2021-07-06 | Salesforce.Com, Inc. | Typeahead and autocomplete for natural language queries |
-
2019
- 2019-11-04 CN CN201911065291.1A patent/CN110825364B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10044522B1 (en) * | 2012-08-21 | 2018-08-07 | Amazon Technologies Inc. | Tree-oriented configuration management service |
| CN102867059A (en) * | 2012-09-19 | 2013-01-09 | 浪潮(北京)电子信息产业有限公司 | Method and system for processing data in treelike structures |
| EP3037958A1 (en) * | 2014-12-24 | 2016-06-29 | SAP Portals Israel, Ltd. | Declarative user interface representation conversion via hierarchical templates |
| CN110110297A (en) * | 2019-04-22 | 2019-08-09 | 无线生活（杭州）信息科技有限公司 | A kind of XSD document generating method and device based on JSON configuration |
Non-Patent Citations (2)
| Title |
|---|
| 基于JSON的数据交换技术应用研究;徐宝磊;罗江;潘刚;;软件导刊(第10期);全文 * |
| 徐宝磊 ; 罗江 ; 潘刚 ; .基于JSON的数据交换技术应用研究.软件导刊.2020,(第10期),全文. * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110825364A (en) | 2020-02-21 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110825364B (en) | Application template configuration method based on tree structure | |
| US10311078B2 (en) | Identifying and formatting data for data migration | |
| Lin et al. | DSMDiff: a differentiation tool for domain-specific models | |
| US7581206B2 (en) | Systems and methods for creating and providing templates in a single file | |
| US11526656B2 (en) | Logical, recursive definition of data transformations | |
| US7979793B2 (en) | Graphical creation of a document conversion template | |
| US7552418B2 (en) | Systems and methods for creating and providing templates in a single file | |
| US9760347B2 (en) | Method and system to identify GUI objects for non-markup-language-presented applications | |
| US20120166480A1 (en) | Xpath-based selection assistance of gui elements during manual test script authoring for xml-based applications | |
| US10614126B2 (en) | Textual query editor for graph databases that performs semantic analysis using extracted information | |
| US20080228782A1 (en) | Apparatus, Method, and Computer Program Product for Creating Hierarchical Dictionary | |
| WO2010057434A1 (en) | Method and device for generating control object libraries | |
| US20170154019A1 (en) | Template-driven transformation systems and methods | |
| CN110968294B (en) | Business domain model establishing system and method | |
| CN112083919B (en) | Target service code generation method and device based on YAML template | |
| US10691434B2 (en) | System and method for converting a first programming language application to a second programming language application | |
| US8661336B2 (en) | Mapping an object type to a document type | |
| US9082104B2 (en) | Method and apparatus for managing system specifications | |
| US10896161B2 (en) | Integrated computing environment for managing and presenting design iterations | |
| CN114911466B (en) | Data quality control system of acquisition terminal | |
| US20200257507A1 (en) | Integration of workflow and logical data objects using visual programming | |
| CN112631585B (en) | XML-based rapid parameter interface configuration method | |
| US20050177788A1 (en) | Text to XML transformer and method | |
| CN112817585A (en) | Cocos2dx UI interface building method based on Unity editor | |
| CN108073395A (en) | A kind of production programmed method |
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 | ||
| CB02 | Change of applicant information |
Address after: 250100 building S02, Inspur Science Park, No. 1036, Inspur Road, high tech Zone, Jinan, Shandong Applicant after: Inspur cloud Information Technology Co.,Ltd. Address before: 250100 No. 1036 Tidal Road, Jinan High-tech Zone, Shandong Province, S01 Building, Tidal Science Park Applicant before: Tidal Cloud Information Technology Co.,Ltd. |
|
| CB02 | Change of applicant information | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |