A visual construction method based on component factory

Abstract

The present invention provides a visual construction method based on component factory, constructs component storage service based on lightweight file service, and builds a sandbox system for online editing and debugging of components by adapting and driving multiple MVVM front-end frameworks, being compatible with the calling and rendering of various chart libraries, and standardizing the display configuration and data mounting process of components. It cooperates with the component publishing center to form a complete visual construction engine. The present invention not only solves the coordination between the generation environment and the use environment, and performs joint debugging and testing in real time, but also replaces the complex generation and packaging environment with a unified dynamic driving engine, is not limited to a specific front-end framework or chart library, improves the maintainability and scalability of the components, and greatly improves the work efficiency of front-end development. At the same time, the method can effectively reduce code coupling, and the unified configuration standards and data standards can greatly reduce the communication costs of the team.

Description

Technical Field

[0001] The present invention relates to the field of computer application technology, and in particular to a component factory-based visual construction method. Background Art

[0002] Currently, the development of web browser-side data large screens is mainly based on HTML5 technology, and the main technologies involved include:

[0003] The core components of HTML5 include HTML files, JavaScript files, and CSS files;

[0004] In order to quickly build various business pages, the mainstream method is to use MVVM technology frameworks such as Vue, React and Angular to uniformly encapsulate the three types of files;

[0005] Based on these frameworks, unify certain display rules and develop and integrate various visualization components;

[0006] Package the components and solidify them in the large-screen configuration tool, waiting to be called by the business layer.

[0007] Currently, most visual construction functions are constructed based on packaged components. The existing technology has the following problems:

[0008] Strong reliance on specific front-end frameworks (such as Vue or React) increases the cost of switching software architectures and makes long-term upgrades and maintenance difficult.

[0009] Strong reliance on specific chart libraries (such as ECharts) limits the component scalability of the data dashboard.

[0010] The component production process relies on a complex R&D environment and engineering packaging environment. The production environment is isolated from the user environment and cannot interact with each other. This makes development and debugging costs very high. The development-packaging-deployment-debugging process must be followed. In particular, packaging and deployment are usually not in the same environment, which increases operation and maintenance costs.

[0011] Without a flexible display and data system, it is impossible to cope with rapid business changes;

[0012] The main difficulties in solving the above problems are as follows:

[0013] (1) Combining the MVVM concept without relying on a specific MVVM framework, building a component library system based on HTML, JS, and CSS;

[0014] (2) Construct a display engine that is compatible with multiple front-end visualization libraries, such as Echarts, G2, Vis, mapbox, etc.;

[0015] (3) It does not rely on engineering packaging environments such as webpack, gulp, and vite, and the production environment can be directly linked with the user environment;

[0016] (4) Build a matrix data analysis engine for flexible business types;

[0017] (5) For flexible display configuration, it is necessary to build a configuration condition renderer to convert the configuration file into an artificial interface. Summary of the Invention

[0018] Purpose of the invention: The technical problem to be solved by the present invention is to address the deficiencies of the existing technology and provide a visual construction method based on a component factory, online editing of component code, what you see is what you get, compatibility with multiple frameworks and graphics libraries, meeting the flexible expansion of display configuration and data configuration, and real-time synchronization of component resources for the visualization large-screen configuration function, forming a pipeline for visualization large-screen configuration in a unified environment.

[0019] The method of the present invention comprises the following steps:

[0020] Step 1: Build component storage space based on file services;

[0021] Step 2: Generate component templates based on different front-end frameworks;

[0022] Step 3: parse the mapping between display configuration and data configuration;

[0023] Step 4: Preview and debug the component in real time. The component will first load the default data.

[0024] Step 5: After debugging is completed, save and hot-release the component.

[0025] Step 1 includes:

[0026] Build a file service based on but not limited to web services such as Nginx, and design a file storage processing method to process HTML files, Javascript files, CSS files, JSON files, thumbnails and component media folders as a component unit, and the file name uniformly uses the English reference name of the component.

[0027] Step 2 includes:

[0028] An online code writing function implemented by the following data construction and processing method is designed and constructed according to the following data processing requirements:

[0029] Based on but not limited to the Vue constructor, the component JS file is used as the main code entry point, and Vue methods, calculated properties, data, external parameters, and life cycles are encapsulated in a mixed manner, as well as 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 JSON file processing component;

[0030] Step 2 also includes: establishing a renderer, using the renderer to complete the encapsulation of the JS file, and the data processing method of the renderer includes: first reading the address of the component, reading the component's html file, js file and css file in sequence through HTTP request, and presenting and processing the html file, js file and css file online through the provided online text editor. After processing, the html file is processed into a display construction template of the component, the processed CSS file is loaded in advance, and the style data information is registered in the browser. Finally, the renderer reads the JS file data content and processes it together with the display construction template into an asynchronous display component, which can be displayed directly in the browser.

[0031] Step 3 includes:

[0032] The online configuration file writing function is designed to be implemented by the following data processing method and will be constructed according to the following data requirements:

[0033] For display configuration, a display renderer is built to handle the display control of the component: the component description file contains a props field to describe external display parameters, which is of array type. Each display configuration item is a JSON type data object. Each object includes the following fields: name, type, parameter name field in the external parameter of the corresponding component JS file, and the default value of the configuration. The type field is processed to determine the control form of the component attribute rendering during debugging. For example, a string will be rendered as a text input box.

[0034] In step 3, a data parser is built to process the data control of the component: For data configuration, the following data processing method is designed: the dataConfig field is included in the component's JSON file. The dataConfig field represents the internal structure of the data and is of type JSON object. The JSON object contains the following fields: display dimension mapping type for distinguishing external applications, default display dimension mapping config, and default original data data.

[0035] Step 4 includes:

[0036] For the constructed components, various parameter compliance verifications are performed before preview debugging. After passing the verification, the renderer is used to generate a sandbox space for component debugging. The sandbox space includes a component preview area and a component property operation area. The data processing method of the sandbox space is as follows:

[0037] All operation items in the component property operation area are processed according to the props field in the JSON file. The basis for conversion into specific controls is the type field of the configuration item: string is mapped to a text edit box, color is mapped to a color picker, slider is mapped to a drag control, enum is mapped to a drop-down selection box, boolean is mapped to a check box, and number is mapped to a value selection box.

[0038] In step 4, the component will load the dataConfig field in the data configuration by default, where config is the dimension mapper and data is the raw data in matrix format.

[0039] In step 4, a display editor is designed and implemented. The sandbox space uses the following data method for real-time rendering: whenever a control in the property operation area is operated and causes data changes, the changed value is transmitted to the component listener. After receiving the data, the listener determines whether it has changed compared with the previous data. If there is a change, the component will be notified to re-render according to the latest display properties.

[0040] In step 5, a canvas editor is designed and implemented, including:

[0041] Update the component file and save it to the file service through HTTP request. Save the component displayed in the preview area as a PNG format thumbnail through canvas and store it in the file service.

[0042] A component list is provided to the outside in the form of an interface. The list is in JSON format and the fields include component name, component thumbnail and component JS file address. External applications use the component JS file address and the renderer to directly process and generate components.

[0043] The method of the present invention has the following characteristics:

[0044] 1. Build a lightweight component center based on Nginx. All components will be stored and published to the center in the form of files, and can be included in code version management. The component library directory is organized in a tree form.

[0045] 2. Build basic file templates based on different front-end frameworks, and construct generation engines for different front-end frameworks to drive the loading and running of framework components such as Vue and React;

[0046] 3. Build an online file editor based on rich text technology, including HTML, CSS, JS and JSON, combined with a syntax sniffer to provide online code editing capabilities;

[0047] 4. Standardize component display configuration rules, design and implement component display controllers, convert configuration files into operable controls, automatically generate component display operation areas, and visually adjust component styles;

[0048] 5. Standardize component data rules, design and implement data parsers and drivers. The parsers are responsible for unified interpretation and loading of data, while the drivers replicate and monitor data changes and respond to human-computer interactions in real time.

[0049] 6. Build component adapters, compatible with multiple chart libraries, and construct a unified rendering controller;

[0050] 7. Design and implement component sandbox, create, edit and preview components at any time, and debug components online;

[0051] 8. Designed and implemented the hot publishing function of components. The data large screen construction function can directly call the real-time components of the component library to combine pages.

[0052] Compared with the prior art, the present invention has the following significant advantages:

[0053] 1. Compatible with a variety of popular front-end frameworks, with high scalability and high maintainability;

[0054] 2. Supports different types of front-end chart libraries, greatly improving the expansion space of the component library;

[0055] 3. Utilizing dynamic component loading technology, what you see is what you get, eliminating the need for production environment packaging. This improves flexibility while significantly reducing component library operation and maintenance costs.

[0056] 4. Support real-time and visualization of display configuration through component display controller;

[0057] 5. Support parsing for different data types, with flexible data field mapping mechanism and supporting functions; BRIEF DESCRIPTION OF THE DRAWINGS

[0058] The present invention will be further described below in conjunction with the accompanying drawings and specific embodiments, and the above and / or other advantages of the present invention will become more apparent.

[0059] Figure 1 It is a design architecture diagram of the present invention.

[0060] Figure 2 It is a flow chart of the use of the present invention. DETAILED DESCRIPTION

[0061] The method of the present invention comprises the following steps:

[0062] Step 1: Build component storage space based on file services;

[0063] Step 2: Generate component templates based on different front-end frameworks;

[0064] Step 3: parse the mapping between display configuration and data configuration;

[0065] Step 4: Preview and debug the component in real time. The component will first load the default data.

[0066] Step 5: After debugging is completed, save and hot-release the component.

[0067] Step 1 includes:

[0068] Build a file service based on but not limited to web services such as Nginx, and design a file storage processing method to process HTML files, Javascript files, CSS files, JSON files, thumbnails and component media folders as a component unit, and the file name uniformly uses the English reference name of the component.

[0069] Step 2 includes:

[0070] An online code writing function implemented by the following data construction and processing method is designed and constructed according to the following data processing requirements:

[0071] Based on but not limited to the Vue constructor, the component JS file is used as the main code entry point, and Vue methods, calculated properties, data, external parameters, and life cycles are encapsulated in a mixed manner, as well as 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 JSON file processing component;

[0072] Step 2 also includes: establishing a renderer, using the renderer to complete the encapsulation of the JS file, and the data processing method of the renderer includes: first reading the address of the component, reading the component's html file, js file and css file in sequence through HTTP request, and presenting and processing the html file, js file and css file online through the provided online text editor. After processing, the html file is processed into a display construction template of the component, the processed CSS file is loaded in advance, and the style data information is registered in the browser. Finally, the renderer reads the JS file data content and processes it together with the display construction template into an asynchronous display component, which can be displayed directly in the browser.

[0073] Step 3 includes:

[0074] The online configuration file writing function is designed to be implemented by the following data processing method and will be constructed according to the following data requirements:

[0075] For display configuration, a display renderer is built to handle the display control of the component: the component description file contains a props field to describe external display parameters, which is of array type. Each display configuration item is a JSON type data object. Each object includes the following fields: name, type, parameter name field in the external parameter of the corresponding component JS file, and the default value of the configuration. The type field is processed to determine the control form of the component attribute rendering during debugging. For example, a string will be rendered as a text input box.

[0076] In step 3, a data parser is built to process the data control of the component: For data configuration, the following data processing method is designed: the dataConfig field is included in the component's JSON file. The dataConfig field represents the internal structure of the data and is of type JSON object. The JSON object contains the following fields: display dimension mapping type for distinguishing external applications, default display dimension mapping config, and default original data data.

[0077] Step 4 includes:

[0078] For the constructed components, various parameter compliance verifications are performed before preview debugging. After passing the verification, the renderer is used to generate a sandbox space for component debugging. The sandbox space includes a component preview area and a component property operation area. The data processing method of the sandbox space is as follows:

[0079] All operation items in the component property operation area are processed according to the props field in the JSON file. The basis for conversion into specific controls is the type field of the configuration item: string is mapped to a text edit box, color is mapped to a color picker, slider is mapped to a drag control, enum is mapped to a drop-down selection box, boolean is mapped to a check box, and number is mapped to a value selection box.

[0080] In step 4, the component will load the dataConfig field in the data configuration by default, where config is the dimension mapper and data is the raw data in matrix format.

[0081] In step 4, a display editor is designed and implemented. The sandbox space uses the following data method for real-time rendering: whenever a control in the property operation area is operated and causes data changes, the changed value is transmitted to the component listener. After receiving the data, the listener determines whether it has changed compared with the previous data. If there is a change, the component will be notified to re-render according to the latest display properties.

[0082] In step 5, a canvas editor is designed and implemented, including:

[0083] Update the component file and save it to the file service through HTTP request. Save the component displayed in the preview area as a PNG format thumbnail through canvas and store it in the file service.

[0084] A component list is provided to the outside in the form of an interface. The list is in JSON format and the fields include component name, component thumbnail and component JS file address. External applications use the component JS file address and the renderer to directly process and generate components.

[0085] Example

[0086] like Figure 1 As shown, 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 based on but not limited to Nginx, and the data storage is implemented based on but not limited to MySQL; the directory structure of the file is stored in the data storage and presented in a tree structure.

[0087] Relying on but not limited to the Vue framework, an MVVM framework adaptation driver layer is built, which can read, parse and load HTML, JS and CSS files. The driver layer can read the file data in the corresponding address of the storage service through http request to complete the loading of Vue files.

[0088] Through dynamic application <script>标签的方式引入第三方库，支持echarts、mapbox、vis、G2等库文件的引用，以支持下文提到的显示组件能够基于第三方库进行实施；

[0089] 构建一个在线文本编辑器，编辑器能够识别和读写html、js、css、json等后缀的文件，对关键语法进行高亮，提供一定程度的语法纠错能力。该文本编辑器能够支持使用者在网页上对显示组件的相关代码和配置文件进行编辑处理；

[0090] 构建一种数据解析器和显示渲染器。

[0091] 数据解析器规则：在组件的描述文件中(一般为JSON文件)包含dataConfig字段用来描述数据内部结构，类型为JSON对象，JSON对象包含的字段包括：用于区分外部应用的显示维度映射type、默认的显示维度映射config、默认的原始数据data，data中必须包含字段名和字段数据。数据解析器将读取原始数据data，根据config和type对数据进行拆解和业务重构。例如type为"010101”时，代表一种折线图，包含x轴和y轴，data为[{A:3,B:2},{A:5,B:4}]，config为{x:A,y:B}，这种情况下，数据解析器将会把data中所有A字段的数据映射到折线图的X轴上，所有B字段的数据映射到折线图的Y轴上。type为系统内置字段，种类可以根据可视化的需求不断扩展，采用6位十进制进行编码,前两位用于表示可视化类型的一级分类，包括图形类、表格类、地理类、文本类等，中间两位用于表示二级可视化分类，例如在图形类下，有折线图、饼图、柱状图、热力图等；最后两位表示三级可视化分类，例如在图形-折线图下，可以有标准折线图、双Y轴折线图、堆叠折线图等。

[0092] 显示渲染器规则：在组件的描述文件中(一般为JSON文件)包含props字段用来描述外部显示参数，类型为数组，其中的每个显示配置项为一个JSON类型的数据对象，每个对象包括如下字段：名称name、类型type、对应组件JS文件外部传参中的参数名field、配置的默认值default。显示渲染器将根据不同的type类型，生成对应的控制器，方便使用者调试。例如使用者定义了一个显示对象为{name:’标题颜色’,type:’Color’,default:‘#FFFFFF’}，这将被显示渲染器处理为一个<input>标签插入到web页面中，该input标签的类型为颜色选择器，默认颜色为白色。其他支持渲染的type如下表1所示(类型可以扩展，不限于该表格)：

[0093] 表1

[0094] type(类型)网页渲染出的控件类型string文本输入控件number数字输入控件color颜色选择控件slider滑动选择控件enum下拉选择框booleancheck勾选框

[0095] 构建一种显示编辑器，编辑器的生成逻辑参照显示渲染器中的配置文件，会在网页上生成独立的显示区域，用于控制可视化结果的调试。每当一个显示属性被操作导致数据变化后，将变化后的数值传输给组件的监听器，监听器收到数据后判断与之前的数据相比是否变化，如果有变化，将会通知组件根据最新的显示属性进行重新渲染。

[0096] 构建一种画布编辑器，画布为可视化组件的背景，通过绑定一个颜色选择器来支持画布调整颜色和透明度，给组件的可视化有更理想的背景参照。

[0097] 如图1、图2所示，本发明方法的使用流程包括以下步骤：

[0098] Step1：使用者创建组件目录作为自己的工作空间；

[0099] Step2：使用者填写组件中英文名称，本发明会创建好组件空间，包括HTML文件、Javascript文件、CSS文件、JSON文件、缩略图和组件媒体文件夹，打开组件编辑面板供使用者进行在线开发；

[0100] Step3：使用者编写组件的HTML文件、Javascript文件、CSS文件和JSON文件，并根据自身需求上传一些媒体文件到组件媒体文件夹；使用者根据不同的MVVM前端框架进行代码编写，以基于Vue组件为例，使用者以vue渲染引擎作为组件JS文件的主代码模板，以混合的方式封装Vue中的methods、computed、data、props以及各生命周期，HTML文件编写组件的template部分，CSS文件编写组件的样式类，可以完全以Vue的编写方式编写该组件；

[0101] Step4：使用者需要按照如下标准编写组件中的JSON文件：对于显示配置，在组件的JSON文件中定义props字段，类型为数组，其中的每个配置项为一个JSON对象，每个对象包括如下字段：name(名称)、type(类型)、field(对应组件JS文件props中的传参名)和default(该配置的默认值)。其中type字段决定了组件在调试时该属性会以什么控件形式渲染；

[0102] 对于数据配置：在组件的JSON文件中定义dataConfig字段，类型为JSON对象，该对象包含的主要字段有type(用于区分外部应用的维度映射)、config(默认的维度映射)和data(默认的原始数据)

[0103] Step5：使用者在组件编写完成后，进行合规性验证，验证通过后会打开组件调试沙盒，通过沙盒中的组件预览区和组件属性操作区对组件进行预览和调试；

[0104] Step6：使用者在预览组件时，可以生成组件的预览图片，并最终将组件的各个文件进行保存。

[0105] 具体实现中，本申请提供计算机存储介质以及对应的数据处理单元，其中，该计算机存储介质能够存储计算机程序，所述计算机程序通过数据处理单元执行时可运行本发明提供的一种基于组件工厂的可视化构造方法的发明内容以及各实施例中的部分或全部步骤。所述的存储介质可为磁碟、光盘、只读存储记忆体(read-only memory，ROM)或随机存储记忆体(random access memory，RAM)等。

[0106] 本领域的技术人员可以清楚地了解到本发明实施例中的技术方案可借助计算机程序以及其对应的通用硬件平台的方式来实现。基于这样的理解，本发明实施例中的技术方案本质上或者说对现有技术做出贡献的部分可以以计算机程序即软件产品的形式体现出来，该计算机程序软件产品可以存储在存储介质中，包括若干指令用以使得一台包含数据处理单元的设备(可以是个人计算机，服务器，单片机。MUU或者网络设备等)执行本发明各个实施例或者实施例的某些部分所述的方法。

[0107] 本发明提供了一种基于组件工厂的可视化构造方法，具体实现该技术方案的方法和途径很多，以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。本实施例中未明确的各组成部分均可用现有技术加以实现。< / script>

Claims

1. A visual construction method based on component factory, characterized in that: The following steps are involved: Step 1: Build component storage space based on file services; Step 2: Generate component templates based on different front-end frameworks; Step 2 includes: Based on the Vue constructor, the component JS file is used as the main code entry point, and Vue methods, calculated properties, data, external parameters, and life cycles are encapsulated in a mixed manner, as well as 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 JSON file processing component; Establish a renderer and use it to encapsulate the JS file. The data processing method of the renderer includes: first reading the component address, reading the component's HTML file, JS file, and CSS file in sequence through HTTP requests, presenting and processing the HTML file, JS file, and CSS file online through the provided online text editor, processing the HTML file into the component's display construction template after processing, loading the processed CSS file in advance, and registering the style data information with the browser. Finally, the renderer reads the JS file data content and processes it together with the display construction template into an asynchronous display component that can be displayed directly in the browser; Step 3: parse the mapping between display configuration and data configuration; In step 3, for display configuration, a display renderer is built to handle the display control of the component: the component description file contains a props field to describe external display parameters. The type is an array, and each display configuration item is a JSON data object. Each object includes the following fields: name, type, parameter name field in the external parameter of the corresponding component JS file, and the default value of the configuration. The type field is processed to determine the control form of the component attribute rendering during debugging; In step 3, a data parser is built to handle component data control: For data configuration, the component's JSON file contains a dataConfig field. The dataConfig field represents the internal structure of the data and is a JSON object. The JSON object contains the following fields: display dimension mapping type for distinguishing external applications, default display dimension mapping config, and default raw data data; Step 4: Preview and debug the component in real time. The component will first load the default data. Step 5: After debugging is completed, save and hot-release the component.

2. The method according to claim 1, wherein Step 1 includes: Based on the web service, HTML files, Javascript files, CSS files, JSON files, thumbnails and component media folders are processed into a component unit, and the file name is uniformly the English reference name of the component.

3. The method according to claim 2, wherein Step 4 includes: For the constructed components, various parameter compliance verifications are performed before preview debugging. After passing the verification, the renderer is used to generate a sandbox space for component debugging. The sandbox space includes a component preview area and a component property operation area. The data processing method of the sandbox space is as follows: All operation items in the component property operation area are processed according to the props field in the JSON file. The basis for conversion into specific controls is the type field of the configuration item: string is mapped to a text edit box, color is mapped to a color picker, slider is mapped to a drag control, enum is mapped to a drop-down selection box, boolean is mapped to a check box, and number is mapped to a numeric selection box.

4. The method according to claim 3, wherein In step 4, the component will load the dataConfig field in the data configuration by default, where config is the dimension mapper and data is the raw data in matrix format.

5. The method according to claim 4, wherein A display editor is designed and implemented. In step 4, the sandbox space uses the following data method for real-time rendering: whenever a control in the property operation area is operated and causes data changes, the changed value is transmitted to the component listener. After receiving the data, the listener determines whether it has changed compared with the previous data. If there is a change, the component will be notified to re-render according to the latest display properties.

6. The method according to claim 5, wherein Step 5 includes: Update the component file and save it to the file service through HTTP request. Save the component displayed in the preview area as a PNG format thumbnail through canvas and store it in the file service. A component list is provided to the outside in the form of an interface. The list is in JSON format and the fields include component name, component thumbnail and component JS file address. External applications use the component JS file address and the renderer to directly process and generate components.

Images