CN115422481A - Visual construction method based on component factory - Google Patents
Visual construction method based on component factory Download PDFInfo
- Publication number
- CN115422481A CN115422481A CN202210904647.1A CN202210904647A CN115422481A CN 115422481 A CN115422481 A CN 115422481A CN 202210904647 A CN202210904647 A CN 202210904647A CN 115422481 A CN115422481 A CN 115422481A
- Authority
- CN
- China
- Prior art keywords
- component
- file
- data
- display
- field
- 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
- 238000010276 construction Methods 0.000 title claims abstract description 22
- 230000000007 visual effect Effects 0.000 title claims abstract description 14
- 238000000034 method Methods 0.000 claims abstract description 49
- 244000035744 Hura crepitans Species 0.000 claims abstract description 15
- 230000008569 process Effects 0.000 claims abstract description 11
- 238000004806 packaging method and process Methods 0.000 claims abstract description 8
- 238000009877 rendering Methods 0.000 claims abstract description 6
- 238000012545 processing Methods 0.000 claims description 29
- 238000003672 processing method Methods 0.000 claims description 11
- 238000012795 verification Methods 0.000 claims description 8
- 238000013507 mapping Methods 0.000 claims description 7
- 230000008859 change Effects 0.000 claims description 5
- 238000004364 calculation method Methods 0.000 claims description 3
- 238000011161 development Methods 0.000 abstract description 4
- 238000010586 diagram Methods 0.000 abstract description 3
- 238000004891 communication Methods 0.000 abstract 1
- 230000008878 coupling Effects 0.000 abstract 1
- 238000010168 coupling process Methods 0.000 abstract 1
- 238000005859 coupling reaction Methods 0.000 abstract 1
- 239000000306 component Substances 0.000 description 142
- 230000006870 function Effects 0.000 description 10
- 238000012800 visualization Methods 0.000 description 8
- 238000004590 computer program Methods 0.000 description 5
- 238000004519 manufacturing process Methods 0.000 description 5
- 238000005516 engineering process Methods 0.000 description 4
- 238000012423 maintenance Methods 0.000 description 3
- OLDXRTOEUPVZKB-UHFFFAOYSA-N B1CCCC1 Chemical compound B1CCCC1 OLDXRTOEUPVZKB-UHFFFAOYSA-N 0.000 description 2
- 238000013500 data storage Methods 0.000 description 2
- 208000026817 47,XYY syndrome Diseases 0.000 description 1
- 230000006978 adaptation Effects 0.000 description 1
- 238000004458 analytical method Methods 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 238000004883 computer application Methods 0.000 description 1
- 239000008358 core component Substances 0.000 description 1
- 238000012937 correction Methods 0.000 description 1
- 238000007405 data analysis Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000007812 deficiency Effects 0.000 description 1
- 230000001419 dependent effect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000007726 management method Methods 0.000 description 1
- 239000011159 matrix material Substances 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000012856 packing Methods 0.000 description 1
- 238000012827 research and development Methods 0.000 description 1
- 230000001360 synchronised effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
- G06Q50/00—Information and communication technology [ICT] specially adapted for implementation of business processes of specific business sectors, e.g. utilities or tourism
- G06Q50/04—Manufacturing
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Databases & Information Systems (AREA)
- General Physics & Mathematics (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- Business, Economics & Management (AREA)
- Data Mining & Analysis (AREA)
- Primary Health Care (AREA)
- Strategic Management (AREA)
- Tourism & Hospitality (AREA)
- Marketing (AREA)
- General Business, Economics & Management (AREA)
- Human Resources & Organizations (AREA)
- General Health & Medical Sciences (AREA)
- Economics (AREA)
- Health & Medical Sciences (AREA)
- Manufacturing & Machinery (AREA)
- Debugging And Monitoring (AREA)
Abstract
The invention provides a visual construction method based on a component factory, which constructs a component storage service based on a lightweight file service, constructs a sandbox system for online editing and debugging of components by adaptively driving various MVVM front-end frameworks, being compatible with calling and rendering of various chart libraries, displaying configuration of standardized components, data mounting processes and the like, and forms a complete visual construction engine by matching with a component publishing center. The invention not only solves the problem of the cooperation of the generation environment and the use environment, carries out joint debugging joint test in real time, replaces the complex generation and packaging environment with the uniform dynamic driving engine, is not limited to a specific front-end frame or a diagram library, improves the maintainability and the expandability of the assembly and greatly improves the working efficiency of front-end development; meanwhile, the method can effectively reduce the code coupling, and the unified configuration standard and the data standard can greatly reduce the communication cost of the team.
Description
Technical Field
The invention relates to the technical field of computer application, in particular to a visual construction method based on a component factory.
Background
At present, the development of a large data screen at a Web browser end is mainly based on an HTML5 technology, and mainly relates to the following technologies:
the core component of HTML5 comprises an HTML file, a JavaScript file, a CSS file and the like;
in order to quickly construct various service pages, the mainstream method is to uniformly package three types of files by adopting MVVM technical frameworks such as Vue, read and Angular;
based on the frameworks, unifying certain display rules, and developing and integrating various visual components;
and packaging the components, solidifying the packaged components into a large-screen configuration tool, and waiting to be called by a service layer.
At present, most of visualization construction functions are constructed based on packaged components, and the following problems exist according to the prior art:
strong dependence on a specific front-end framework (e.g., vue or fact), which increases the cost of software architecture switching, makes it difficult to permanently upgrade maintenance;
strongly dependent on a specific chart library (e.g., ECharts), this deficiency limits the component expansion capability of large data screens;
the production process of the component depends on a heavy research and development environment and an engineering packaging environment, the production environment is isolated from a use environment and cannot interact with the use environment, so that the development and debugging cost is high, a development-packaging-deployment-debugging path must be followed, and particularly, the packaging and deployment are not generally in one environment, and the operation and maintenance cost is high;
a flexible and variable display system and a data system do not exist, and rapid changes of services cannot be dealt with;
the main difficulties for solving the above problems are as follows:
(1) Combining an MVVM idea, but not depending on a specific MVVM frame, and constructing a component library system based on HTML, JS and CSS;
(2) Constructing a display engine compatible with a plurality of front-end visual display libraries, such as Echarts, G2, vis, mapbox and the like;
(3) The method does not depend on engineering packaging environments such as webpack, gulp, vite and the like, and the production environment can be directly linked with the use environment;
(4) Constructing a matrix type data analysis engine facing to flexible service types;
(5) The flexible display configuration needs to construct a configuration condition renderer and convert the configuration file into a manufacturing interface.
Disclosure of Invention
The invention aims to: aiming at the defects of the prior art, the invention provides a visual construction method based on a component factory, which is used for editing component codes on line, and is compatible with various frames and graphic libraries, so that flexible expansion of display configuration and data configuration is met, functions of the visual large-screen configuration are synchronized in real time, and a visual large-screen configuration assembly line under a unified environment is formed.
The method comprises the following steps:
step1, constructing a component storage space based on file service;
step2, generating component templates according to different front-end frames;
step3, analyzing the mapping of the display configuration and the data configuration;
step4, previewing and debugging the component in real time, wherein the component preferentially loads default data;
and 5, storing and thermally releasing the components after debugging is finished.
The step1 comprises the following steps:
the file storage processing method is designed based on Nginx and other web services, an HTML file, a Javascript file, a CSS file, a JSON file, a thumbnail and a component media folder are processed into a component unit, and file names are uniformly referred by English of components.
The step2 comprises the following steps:
an online code writing function realized by the following data construction processing method is designed and can be constructed according to the following data processing requirements:
encapsulating methods, calculation properties, data, external references and various life cycles in Vue, a display construction part of an HTML file processing component, style classes of a CSS file processing component and display control properties of a JOSN file processing component in a mixed manner based on but not limited to a Vue constructor by using a component JS file as a main code entry;
the step2 further comprises: establishing a renderer, and finishing packaging of the JS file by using the renderer, wherein the data processing mode of the renderer comprises the following steps: the method comprises the steps of firstly reading an address of a component, sequentially reading an html file, a JS file and a CSS file of the component through an HTTP request, presenting and processing the html file, the JS file and the CSS file on line through a provided on-line text editor, processing the html file into a display construction template of the component after processing is completed, loading a processed CSS file in advance, registering style data information into a browser, reading data content of the JS file by a renderer, processing the JS file and the display construction template into asynchronous display components, and directly displaying the JS file in the browser.
The step3 comprises the following steps:
an online configuration file writing function realized by the following data processing method is designed and constructed according to the following data requirements:
for the display configuration, a display renderer is constructed to process the display control of the component: the method comprises the following steps of including a tips field in a description file of a component for describing external display parameters, wherein the type is an array, each display configuration item is a JSON type data object, and each object comprises the following fields: the name, the type, the parameter name field in the external reference of the corresponding component JS file and the configured default value default are processed, the type field is processed, and the control form of attribute rendering of the component during debugging is determined, for example, string is rendered into a text input box.
In step3, a data parser is constructed to process the data control of the components: for data configuration, the following data processing method is designed: the method comprises the following steps of containing a dataConfig field in a JSON file of a component, wherein the dataConfig field represents a data internal structure and is of a JSON object type, and fields contained in the JSON object comprise: a display dimension map type for distinguishing an external application, a default display dimension map config, and default raw data.
Step4 comprises the following steps:
and for the constructed component, performing compliance verification of various parameters before preview debugging, and after the verification is passed, generating a sandbox space for component debugging by using the renderer, wherein the sandbox space comprises a component preview area and a component attribute operation area, and the data processing method of the sandbox space comprises the following steps:
all operation items in the component attribute operation area are processed according to the props field in the JSON file and are converted into a type (type) field of a specific control according to a configuration item: string is mapped to a text edit box, color is mapped to a color selector, slider is mapped to a dragging control, enum is mapped to a pull-down selection box, borolan is mapped to a check box, and number is mapped to a numerical value selection box;
in step4, the component defaults to load the dataConfig field in the data configuration, where config is the dimension mapper and data is the matrix-type raw data.
In step4, a display editor is designed and realized, and the sandbox space is rendered in real time by adopting the following data method: and transmitting the changed numerical value to a monitor of the component every time when a certain control of the attribute operation area is operated to cause data change, judging whether the data is changed compared with the previous data after the data is received by the monitor, and informing the component to re-render according to the latest display attribute if the data is changed.
In step5, a canvas editor is designed and implemented, comprising:
updating and storing the component file into a file service through an HTTP request, storing the component displayed in the preview area into a png-format thumbnail through canvas, and storing the thumbnail and the png-format thumbnail into the file service;
and externally providing a component list in an interface form, wherein the list is in a JSON format, a field comprises a component name, a component thumbnail and a component JS file address, and the external application applies the renderer through the component JS file address to directly process and generate the component.
The method of the invention has the following characteristics:
1. constructing a lightweight component center based on Nginx, storing and publishing all components to the center in a file form, incorporating code version management, and organizing a component library directory in a tree form;
2. constructing basic file templates based on different front-end frameworks, constructing and generating engines respectively aiming at the different front-end frameworks, and driving loading and running of frame components such as Vue and reach;
3. constructing an online file editor based on rich text technology, wherein the online file editor comprises HTML, CSS, JS and JSON, and provides an online code editing function by combining a syntax sniffer;
4. standardizing a component display configuration rule, designing a component display controller, converting a configuration file into an operable control, automatically generating a component display operation area, and visually adjusting a component style;
5. standardizing component data rules, designing and realizing a data parser and a driver, wherein the parser is responsible for uniformly interpreting and loading data, and the driver copies and monitors the change of the data and responds to human-computer interaction in real time;
6. constructing a component adapter, being compatible with various chart libraries and constructing a uniform rendering controller;
7. designing and realizing a component sandbox, creating, editing and previewing components at any time, and debugging the components on line;
8. the hot release function of the components is designed and realized, and the data large screen construction function can directly call the real-time components of the component library to combine the pages.
Compared with the prior art, the invention has the remarkable advantages that:
1. the method is compatible with various front-end popular frames, and has high expansibility and maintainability;
2. different types of front-end chart libraries are supported, and the expansion space of the component library is greatly improved;
3. the dynamic loading technology of the components is utilized, so what you see is what you get, the packing work of the production environment is not needed, the flexibility is improved, and meanwhile, the operation and maintenance cost of the component library is greatly reduced;
4. supporting real-time and visualization of display configurations through a component display controller;
5. the data field mapping method supports the analysis facing different data types, and has a flexible data field mapping mechanism and a matching function;
drawings
The foregoing and/or other advantages of the invention will become further apparent from the following detailed description of the invention when taken in conjunction with the accompanying drawings.
FIG. 1 is a design architecture diagram of the present invention.
Fig. 2 is a flow chart of the use of the present invention.
Detailed Description
The method comprises the following steps:
step1, constructing a component storage space based on file service;
step2, generating component templates according to different front-end frames;
step3, analyzing the mapping of the display configuration and the data configuration;
step4, previewing and debugging the component in real time, wherein the component preferentially loads default data;
and 5, storing and thermally releasing the components after debugging is finished.
The step1 comprises the following steps:
the file storage processing method is designed based on Nginx and other web services, an HTML file, a Javascript file, a CSS file, a JSON file, a thumbnail and a component media folder are processed into a component unit, and file names are uniformly referred by English of components.
The step2 comprises the following steps:
an online code writing function realized by the following data construction processing method is designed and can be constructed according to the following data processing requirements:
encapsulating methods, calculation properties, data, external references and various life cycles in Vue, a display construction part of an HTML file processing component, style classes of a CSS file processing component and display control properties of a JOSN file processing component in a mixed manner based on but not limited to a Vue constructor by using a component JS file as a main code entry;
the step2 further comprises: establishing a renderer, and finishing packaging of the JS file by using the renderer, wherein the data processing mode of the renderer comprises the following steps: the method comprises the steps of firstly reading an address of a component, sequentially reading an html file, a JS file and a CSS file of the component through an HTTP request, presenting and processing the html file, the JS file and the CSS file on line through a provided on-line text editor, processing the html file into a display construction template of the component after the processing is finished, loading a processed CSS file in advance, registering style data information into a browser, finally reading data content of the JS file by a renderer, processing the JS file and the display construction template into an asynchronous display component, and directly displaying the JS file in the browser.
The step3 comprises the following steps:
the online configuration file compiling function realized by the following data processing method is designed and constructed according to the following data requirements:
for the display configuration, a display renderer is constructed to process the display control of the component: the method comprises the following steps of including a tips field in a description file of a component for describing external display parameters, wherein the type is an array, each display configuration item is a JSON type data object, and each object comprises the following fields: the name, the type, the parameter name field in the external transmission parameter of the corresponding component JS file and the default value default of the configuration are processed, the type field is processed, and the control form of attribute rendering of the component during debugging is determined, for example, string is rendered as a text input box.
In step3, a data parser is constructed to process the data control of the components: for data configuration, the following data processing method is designed: the method comprises the following steps of containing a dataConfig field in a JSON file of a component, wherein the dataConfig field represents a data internal structure and is of a JSON object type, and fields contained in the JSON object comprise: a display dimension map type for distinguishing an external application, a default display dimension map config, and default raw data.
Step4 comprises the following steps:
and for the constructed component, performing compliance verification of various parameters before preview debugging, and after the verification is passed, generating a sandbox space for component debugging by using the renderer, wherein the sandbox space comprises a component preview area and a component attribute operation area, and the data processing method of the sandbox space comprises the following steps:
all operation items in the component attribute operation area are processed according to the props field in the JSON file and are converted into a type (type) field of a specific control according to a configuration item: string is mapped to a text edit box, color is mapped to a color selector, slider is mapped to a dragging control, enum is mapped to a pull-down selection box, borolan is mapped to a check box, and number is mapped to a numerical value selection box;
in step4, the component defaults to load the dataConfig field in the data configuration, where config is the dimension mapper and data is the matrix-type raw data.
In step4, a display editor is designed and realized, and the sandbox space is rendered in real time by adopting the following data method: and transmitting the changed numerical value to a monitor of the component every time when a certain control of the attribute operation area is operated to cause data change, judging whether the data is changed compared with the previous data after the data is received by the monitor, and informing the component to re-render according to the latest display attribute if the data is changed.
In step5, a canvas editor is designed and implemented, comprising:
updating and storing the component file into a file service through an HTTP request, and storing the component displayed in the preview area into a png-format thumbnail through a canvas mode and storing the thumbnail and the png-format thumbnail into the file service;
and externally providing a component list in an interface form, wherein the list is in a JSON format, a field comprises a component name, a component thumbnail and a component JS file address, and the external application applies the renderer through the component JS file address to directly process and generate the component.
Examples
As shown in fig. 1, the method of the present invention first constructs a storage service, including a file storage and a data storage, wherein the file storage is implemented and constructed depending on but not limited to Nginx, and the data storage is implemented and constructed depending on but not limited to MySQL; the directory structure of the files is stored in the data memory and presented in a tree structure.
By relying on but not limited to a Vue framework, an MVVM framework adaptation driving layer is built, html files, js files and css files can be read, analyzed and loaded, file data in a corresponding address of a storage service can be read through an http request by the driving layer, and loading of the Vue files is completed.
Introducing a third-party library by dynamically applying a < script > tag, and supporting the reference of library files such as echars, mapbox, vis, G2 and the like so as to support the implementation of the display component mentioned below based on the third-party library;
and constructing an online text editor, wherein the editor can recognize and read and write files of suffixes such as html, js, css, json and the like, highlight the key grammar and provide grammar error correction capability to a certain degree. The text editor can support a user to edit and process the related codes and the configuration files of the display components on the webpage;
a data parser and a display renderer are constructed.
Data parser rules: the dataConfig field is contained in a description file (generally, a JSON file) of a component to describe the internal structure of data, the type of the dataConfig field is a JSON object, and the fields contained in the JSON object include: a display dimension map type for distinguishing an external application, a default display dimension map config, and default raw data, which must include field names and field data. And reading the original data by the data analyzer, and performing disassembly and business reconstruction on the data according to config and type. For example, type "010101" represents a line graph with X and Y axes, data is [ { A:3, B }, { A:5, B. the type is a system built-in field, the type can be continuously expanded according to the visualization requirement, the coding is carried out by adopting 6-digit decimal system, the first two digits are used for representing the first-level classification of the visualization type, including a graph type, a table type, a geography type, a text type and the like, and the middle two digits are used for representing the second-level visualization classification, for example, under the graph type, a broken line graph, a pie graph, a bar graph, a thermodynamic diagram and the like are arranged; the last two bits represent three levels of visual classification, for example under a graph-line graph there may be a standard line graph, a double Y-axis line graph, a stacked line graph, etc.
Display renderer rule: the method comprises the following steps of containing a tips field in a description file (generally a JSON file) of a component for describing external display parameters, wherein the type is an array, each display configuration item is a data object of a JSON type, and each object comprises the following fields: name, type, parameter name field in external reference of the corresponding component JS file, and default of configuration. The display renderer generates corresponding controllers according to different type types, and a user can conveniently debug the controllers. For example, the user defines a display object as { name: 'title Color', type: 'Color', default: '# FFFFFF' }, which will be processed by the display renderer as an < input > tag inserted into the web page, the type of input tag being Color selector, the default Color being white. Other rendering-enabled types are shown in table 1 below (types can be extended, not limited to this table):
TABLE 1
| type (type) | Control type rendered by webpage |
| string | Text entry control |
| number | Digital input control |
| color | Color selection control |
| slider | Sliding selection control |
| enum | Pull-down selection box |
| boolean | check selecting frame |
A display editor is built, and the generation logic of the editor generates an independent display area on a webpage by referring to a configuration file in a display renderer for controlling the debugging of a visualization result. And transmitting the changed value to a monitor of the component when one display attribute is operated to cause data change, judging whether the data is changed compared with the previous data or not after the data is received by the monitor, and informing the component to re-render according to the latest display attribute if the data is changed.
A canvas editor is constructed, wherein the canvas is the background of a visual component, and a color selector is bound to support the canvas to adjust the color and the transparency, so that a more ideal background reference is provided for the visualization of the component.
As shown in fig. 1 and fig. 2, the usage flow of the method of the present invention includes the following steps:
step1: the user creates a component catalog as a working space of the user;
step2: the user fills in the Chinese and English names of the components, the invention can create a component space which comprises an HTML file, a Javascript file, a CSS file, a JSON file, a thumbnail and a component media folder, and an editing panel of the component is opened for the user to carry out online development;
step3: a user writes HTML files, javascript files, CSS files and JSON files of the components and uploads some media files to a component media folder according to the self requirement; the method comprises the steps that a user writes codes according to different MVVM front-end frameworks, for example, based on a Vue component, the user uses a Vue rendering engine as a main code template of a JS file of the component, and encapsulates methods, calculated, data, props and life cycles in Vue in a mixed mode, a template part of an HTML file writing component and a style class of a CSS file writing component can completely write the component in the Vue writing mode;
step4: the user needs to write the JSON file in the component according to the following standard: for display configuration, a tips field is defined in a JSON file of a component, the type is an array, each configuration item is a JSON object, and each object comprises the following fields: name, type, field (corresponding to the reference name in the JS file caps), and default for the configuration. Wherein the type field determines what control the property will be rendered in when the component is debugged;
for data configuration: defining dataConfig field in JSON file of component, the type is JSON object, the object contains main fields of type (dimension mapping for distinguishing external application), config (default dimension mapping) and data (default original data)
Step5: after the component is written, a user carries out compliance verification, the component debugging sandbox is opened after the verification is passed, and the component is previewed and debugged through the component previewing area and the component attribute operating area in the sandbox;
step6: when the user previews the component, the user can generate a preview picture of the component, and finally save each file of the component.
In a specific implementation, the present application provides a computer storage medium and a corresponding data processing unit, where the computer storage medium is capable of storing a computer program, and the computer program, when executed by the data processing unit, may execute the inventive content of the visualization construction method based on a component factory and some or all of the steps in each embodiment provided by the present invention. The storage medium may be a magnetic disk, an optical disk, a read-only memory (ROM), a Random Access Memory (RAM), or the like.
It is obvious to those skilled in the art that the technical solutions in the embodiments of the present invention can be implemented by means of a computer program and its corresponding general-purpose hardware platform. Based on such understanding, the technical solutions in the embodiments of the present invention may be essentially or partially implemented in the form of a computer program or a software product, where the computer program or the software product may be stored in a storage medium and include instructions for enabling a device (which may be a personal computer, a server, a single chip microcomputer, an MUU, or a network device) including a data processing unit to execute the method according to the embodiments or some parts of the embodiments of the present invention.
The present invention provides a visual construction method based on component factory, and the method and the way for implementing the technical solution are many, and the above description is only the preferred embodiment of the present invention, it should be noted that, for those skilled in the art, a plurality of modifications and embellishments can be made without departing from the principle of the present invention, and these should be regarded as the protection scope of the present invention. All the components not specified in this embodiment can be implemented by the prior art.
Claims (10)
1. A visual construction method based on a component factory is characterized by comprising the following steps:
step1, constructing a component storage space based on file service;
step2, generating component templates according to different front-end frames;
step3, analyzing the mapping of the display configuration and the data configuration;
step4, previewing and debugging the component in real time, wherein the component preferentially loads default data;
and 5, storing and thermally releasing the components after debugging is finished.
2. The method of claim 1, wherein step1 comprises:
based on web services, HTML files, javascript files, CSS files, JSON files, thumbnails and component media folders are processed into a component unit, and the file names are uniformly referred by English of components.
3. The method of claim 2, wherein step2 comprises:
based on the Vue constructor, the method, calculation properties, data, external references and respective life cycles in Vue, the display construction part of the HTML file processing component, the style class of the CSS file processing component and the display control properties of the JOSN file processing component are encapsulated in a mixed manner using the component JS file as a main code entry.
4. The method of claim 3, wherein step2 further comprises:
establishing a renderer, and finishing packaging of the JS file by using the renderer, wherein the data processing mode of the renderer comprises the following steps: the method comprises the steps of firstly reading an address of a component, sequentially reading an html file, a JS file and a CSS file of the component through an HTTP request, presenting and processing the html file, the JS file and the CSS file on line through a provided on-line text editor, processing the html file into a display construction template of the component after processing is completed, loading a processed CSS file in advance, registering style data information into a browser, reading data content of the JS file by a renderer, processing the JS file and the display construction template into asynchronous display components, and directly displaying the JS file in the browser.
5. The method of claim 4, wherein in step3, for the display configuration, a display renderer is constructed to process the display control of the component: the method comprises the following steps that a tips field is contained in a description file of a component to describe external display parameters, the type is an array, each display configuration item is a JSON type data object, and each object comprises the following fields: the name, the type, the parameter name field in the external reference of the corresponding component JS file and the configured default value default are processed, the type field is processed, and the control form of attribute rendering of the component during debugging is determined.
6. The method of claim 5, wherein in step3, a data parser is constructed to process the data controls of the components: for data configuration, a dataConfig field is contained in a JSON file of a component, the dataConfig field represents an internal structure of data, the type of the dataConfig field is a JSON object, and fields contained in the JSON object include: a display dimension map type for distinguishing an external application, a default display dimension map config, and default raw data.
7. The method of claim 6, wherein step4 comprises:
and for the constructed component, performing compliance verification of various parameters before preview debugging, and after the verification is passed, generating a sandbox space for component debugging by using the renderer, wherein the sandbox space comprises a component preview area and a component attribute operation area, and the data processing method of the sandbox space comprises the following steps:
all operation items of the component attribute operation area are processed according to the tips field in the JSON file and are converted into a type field of a specific control according to a configuration item: string is mapped to a text edit box, color is mapped to a color selector, slider is mapped to a dragging control, enum is mapped to a drop-down selection box, borolean is mapped to a check box, and number is mapped to a numerical selection box.
8. The method of claim 7 wherein in step4, the component defaults to loading the dataConfig field in the data configuration, wherein config is the dimension mapper and data is the matrixed raw data.
9. The method of claim 8, wherein a display editor is designed and implemented, and in step4, the sandboxed space is rendered in real time using the following data method: and transmitting the changed numerical value to a monitor of the component every time when a control of the attribute operation area is operated to cause data change, judging whether the data is changed compared with the previous data after the data is received by the monitor, and informing the component to re-render according to the latest display attribute if the data is changed.
10. The method of claim 9, wherein step5 comprises:
updating and storing the component file into a file service through an HTTP request, storing the component displayed in the preview area into a png-format thumbnail through canvas, and storing the thumbnail and the png-format thumbnail into the file service;
and externally providing a component list in an interface form, wherein the list is in a JSON format, a field comprises a component name, a component thumbnail and a component JS file address, and the external application applies the renderer through the component JS file address to directly process and generate the component.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210904647.1A CN115422481A (en) | 2022-07-29 | 2022-07-29 | Visual construction method based on component factory |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210904647.1A CN115422481A (en) | 2022-07-29 | 2022-07-29 | Visual construction method based on component factory |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115422481A true CN115422481A (en) | 2022-12-02 |
Family
ID=84197375
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210904647.1A Pending CN115422481A (en) | 2022-07-29 | 2022-07-29 | Visual construction method based on component factory |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115422481A (en) |
-
2022
- 2022-07-29 CN CN202210904647.1A patent/CN115422481A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110597506B (en) | Front-end application visualization development tool and use method | |
| CN112416339A (en) | Page development method and device and computer equipment | |
| US20080195626A1 (en) | Data Processing Device,Document Processing Device,Data Relay Device,Data Processing Method ,and Data Relay Method | |
| JP2008509477A (en) | Document processing and management method for reflecting changes in one expression of a document in another expression | |
| JPWO2006051905A1 (en) | Data processing apparatus and data processing method | |
| JP2012523644A (en) | Use of spreadsheet user interface with CPI simulation system flowsheet | |
| JP2009501984A (en) | Method of operating and monitoring a control device, corresponding operation / monitoring device, control device and machine comprising such a control device, method of using the method, and data storage medium | |
| GB2423387A (en) | Application-Generic Sequence Diagram Generator Driven by a Non-Proprietary Language | |
| JPWO2006051958A1 (en) | Information distribution system | |
| CN104798067A (en) | Web server system, dictionary system, dictionary call method, screen control display method, and demonstration application generation method | |
| JPWO2006051969A1 (en) | Document processing apparatus and document processing method | |
| CN102693238B (en) | Widget application process, system and multimedia terminal | |
| CN106407172A (en) | XML (Extensible Markup Language)-based report generating method | |
| US7111284B2 (en) | System and method for mapping structured document to structured data of program language and program for executing its method | |
| CN109885301A (en) | A kind of generation method of scalable vector graphics, device, storage medium and equipment | |
| CN115495069A (en) | Model-driven coal industry software flow implementation method, device and equipment | |
| US20070028164A1 (en) | Computer readable storage medium and document processing method | |
| CN114117645B (en) | Ship overall performance forecasting integrated application system | |
| CN111078217A (en) | Brain graph generation method, apparatus and computer-readable storage medium | |
| CN104063231A (en) | Test resource rapid access method based on HIT-TENA | |
| KR101552914B1 (en) | Web server application framework web application processing method using the framework and computer readable medium processing the method | |
| CN114564199A (en) | Method, device and equipment for generating use page and readable storage medium | |
| CN117785170A (en) | Low-code component processing method, device, medium and computing equipment | |
| CN117215556A (en) | Modularized page rapid construction method, system, equipment and medium | |
| JPWO2006046668A1 (en) | Document processing apparatus and document processing 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 |