Visual generation system and method for Vue component based on JSON (JavaScript Object Notation) configuration

Abstract

The invention provides a visual generation system and method for a Vue component based on JSON configuration. A data report page with complete functions is quickly generated in a configuration mode. The system comprises a JSON Schema configuration analysis module, a component library, a component rendering module, a data interaction module and an event processing module. A JSON configuration file is analyzed, the legality and integrity of the configuration file are verified through JSON Schema, corresponding components in a component library are dynamically loaded through Webpack, attributes are set, and rendering and layout of the components are achieved through a component rendering module. And the data interaction module is responsible for processing interaction between the component and back-end data and processing an event triggered by the component through the event bus and the event processing module. The method comprises the steps of creating a JSON configuration file, analyzing the configuration file, dynamically loading components, performing data interaction, processing events, dynamically updating page display and the like.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of front-end software development, and in particular to a JSON configuration-based Vue component visual generation system and method. BACKGROUND

[0002] In recent years, front-end development technology has been constantly innovating with the rapid development of the Internet, and front-end frameworks have flourished, among which Vue has been particularly popular among front-end developers. In the traditional Vue project development process, the construction of the front-end interface usually requires front-end engineers to write a large amount of repetitive code to create encapsulated components, among which tables, forms, and other components are used very frequently. Currently, for the development of tables and forms, the following problems exist: On the one hand, there is repeated development, and each table and form creation requires developers to write a large amount of repetitive code.

[0003] On the other hand, it is difficult to maintain, and when the interface needs to be modified or adjusted, such as modifying form fields or changing table columns, multiple code modifications are required, which can easily introduce errors and is not conducive to subsequent maintenance.

[0004] Secondly, there is a lack of flexibility and poor extensibility, and if new functions or components are to be added, significant changes to the existing code are often required, making it difficult to flexibly respond to changes in demand.

[0005] In addition, the code styles and quality written by different developers vary greatly, which brings communication costs and code integration difficulties to team collaborative development.

[0006] Therefore, there is a lack of a solution that can reduce repetitive code writing, improve development efficiency, and improve project maintainability. SUMMARY

[0007] To solve the above technical problems, the present application provides a JSON configuration-based Vue component visual generation system and method to realize rapid development and flexible configuration of the front-end interface.

[0008] To achieve the above purpose, the technical solution adopted by the present application is as follows: a JSON configuration-based Vue component visual generation system, comprising: A JSON Schema configuration parsing module is used to parse the JSON configuration file, use JSON Schema to verify the legality and integrity of the configuration file, and extract page layout, component type, component attribute, data interaction, and other information.

[0009] A component library includes Vue components, such as form components (input boxes, selection boxes, date selectors, etc.), table components, button components, etc., each component having explicit attributes and methods.

[0010] Component Rendering Module: Based on the information extracted by the JSON configuration parsing module, the corresponding components are dynamically loaded from the component library using Webpack, and the properties and event handling functions of the components are set to realize the rendering and layout of the components.

[0011] Data Interaction Module: Responsible for handling the interaction between Vue components and backend data, including data acquisition, submission, update, and other operations, supporting data transmission through AJAX requests or other data communication methods.

[0012] Event Handling Module: Used to handle events triggered by Vue components, such as form submission events, button click events, etc., and perform corresponding operations such as data validation, page jump, etc. according to predefined event handling logic.

[0013] Further, the JSON configuration file includes the following configuration information: Page Layout Information: Defines the overall structure and partition of the page, such as query form area, table display area, bottom form area, etc. Component Type Information: Specifies the types of Vue components used in each area, such as input box, selection box, date selector, table column, etc. Component Property Information: Sets the specific properties of Vue components, such as initial value, display text, style, whether required, whether clearable, etc. Data Interaction Rule Information: Configures the API address, request parameters, and data format for the interaction between Vue components and backend data. Event Handling Logic Information: Defines the processing function and operation process when the event triggered by the Vue component.

[0014] Further, the component rendering module includes: Component Loading Unit: Loads the corresponding Vue components from the component library according to the parsed component type information; Property Setting Unit: Configures the properties of the loaded Vue components according to the Vue component property information, including data binding, style setting, and default value setting; Layout Construction Unit: Arranges the Vue components according to the page layout information to form the visual structure of the page.

[0015] Further, the data interaction module includes: Request Sending Unit: Sends data requests to the backend according to the API address and parameters in the data interaction rules; Data Processing Unit: Receives the data returned by the backend, performs data format conversion and data validation processing, and binds the processed data to the corresponding Vue components; A data updating unit sends a data updating request to the backend according to preset data updating rules when data of the Vue component changes.

[0016] Further, the event processing module comprises: An event listening unit listens to various events triggered by the Vue component, such as click events, input events, submission events, etc. A logic execution unit executes corresponding operations according to predefined event processing logic, such as calling the data interaction module for data submission, updating the page state, displaying prompt information, etc. A callback processing unit processes the callback function after event processing, and performs subsequent page updating or user feedback operations according to the callback result.

[0017] The application further discloses a JSON configuration-based Vue component visual generation method, comprising the following steps: S1, a user creates a JSON configuration file to define the layout, component type, component attribute, and data interaction rule information of a page. S2, a JSON configuration parsing module reads and parses the JSON configuration file to extract page-related configuration information. S3, a component rendering module dynamically loads corresponding Vue components from a component library according to the parsed configuration information, sets the attributes and event processing functions of the Vue components, and realizes the rendering and layout of the Vue components. S4, a data interaction module sends a data request to obtain data according to the configured API address and parameters, and binds the data to the Vue component for display. S5, when a user interacts with the Vue component, an event processing module executes corresponding operations according to predefined event processing logic, such as triggering data submission and updating page data. S6, the display of the page is dynamically updated according to the user's operation and the result of data interaction, realizing real-time interaction and dynamic changes of the page.

[0018] Further, in the step of S4, the data interaction module sends a data request to obtain data, further comprising the following processing: Pretreatment of request parameters, including data type conversion and parameter verification. Dynamic adjustment of request parameters according to the state of the Vue component or user operation. Error handling and exception capture on the returned data to ensure the reliability of data binding.

[0019] Further, in the step of S6, the display of the page is dynamically updated according to the user's operation and the result of data interaction, specifically comprising: Listen to the changes of Vue component data or state; According to the changed data, the affected Vue component is re-rendered; Adjust the page layout to adapt to the changes of data, and keep the page beautiful and usable.

[0020] The present invention has the following beneficial effects compared with the prior art: 1. Improve development efficiency and reduce development cost A set of strict JSON Schema is used to verify the legality and integrity of the configuration file, which solves the technical problem of page white screen caused by configuration error. Developers do not need to write a large amount of Vue template code, component registration and property binding code, but only need to make simple JSON configuration to quickly generate a functional and complete data report page. The front-end development is changed from "coding" to "configuration", which greatly shortens the development cycle and reduces the demand for human and time cost.

[0021] 2. Realize the flexibility and configurability of components The JSON configuration protocol of the present invention not only defines the static properties of the components, but also defines the dynamic interaction relationship (such as data linkage, event response) and complex data mapping rules between components. Users can realize page component replacement, interaction logic change and data source switching by modifying the configuration file, which enhances the flexibility and configurability of the application.

[0022] 3. Greatly reduce the maintenance complexity and cost In the traditional development method or simple component library method, the logic is scattered in the template, script and style, which is difficult to maintain. The present invention separates the concerns, centrally manages the changeable UI and interaction logic, and has obvious maintenance advantage. When the interface or logic needs to be modified, there is no need to locate and modify in thousands of lines of code, but only need to update the JSON configuration. This greatly reduces the maintenance threshold and long-term cost of the application.

[0023] 4. Effectively reduce the technical threshold and promote division of labor and cooperation Backend developers or product managers who are not familiar with Vue technology can also participate in the construction and adjustment of the front-end page by understanding and modifying the JSON configuration file, so that team members can cooperate more efficiently. The present invention realizes that non-professional front-end personnel can also participate in the development of application interface through declarative configuration language. BRIEF DESCRIPTION OF DRAWINGS

[0024] Figure 1 The architecture diagram of the JSON configuration-based Vue component visual generation system of the embodiment of the present invention is shown.

[0025] Figure 2A flowchart of a JSON configuration-based Vue component visualization generation method of an embodiment of the present application is shown. DETAILED DESCRIPTION

[0026] To make the objectives, technical solutions and advantages of the present application clearer, the present application is further explained below in connection with the drawings and descriptions.

[0027] The technical features of the JSON configuration-based Vue component visualization generation system architecture of the present embodiment include: 1. Configuration-driven development: the entire report page is defined by a JSON Schema structure configuration. It is not only used to store the JSON data structure, but also used to verify whether the JSON data conforms to a specific format and rule; 2. Dynamic form generation: supports multiple form control types, including select, date time range, input, button, import / export functions, etc.

[0028] 3. Unified data interaction: used to uniformly process the data submission logic of the "add" or "edit" operation. According to whether it is "add" or "edit", the request interface (URL and parameters) is dynamically selected, a POST request is sent to save the data, and the table data is refreshed after success. A general add / change operation process is implemented, embodying the design idea of "logical reuse". By modifying the configuration file, the page component replacement, interaction logic change and data source switching are realized, enhancing the flexibility and configurability of the application.

[0029] JSON configuration file definition: defines the layout and behavior of the data display page, including query form configuration (queryFormItems), table configuration (tableTitles), and bottom form configuration (formTitles): dynamically generates different types of forms. If queryFormItems and formTitles are completely identical, they can be extracted into a common configuration to reduce duplication.

[0030] As shown in Figure 1 , the JSON configuration file includes the following configuration information: Page layout information: defines the overall structure and partitions of the page, such as the query form area, table display area, and bottom form area. Component type information: specifies the types of Vue components used in each area, such as input box, selection box, date selector, table column, etc. Component attribute information: sets the specific attributes of the Vue component, such as the initial value, display text, style, whether it is required, whether it can be cleared, etc. Data interaction rule information, configure the API address, request parameters, and data format for Vue component data interaction with the backend. Event handling logic information, define the processing function and operation flow when the Vue component triggers an event.

[0031] For example, through declarative configuration, define a function module that supports querying by date and status, displaying name and date list, and supporting batch operations, emphasizing configuration-driven development, and improving maintainability and flexibility.

[0032] JSON Schema configuration parsing module: used to parse JSON configuration files, use JSON Schema to verify the legality and integrity of the configuration file, extract page layout, component type, component attribute, data interaction, etc.

[0033] Component library: includes Vue components such as form components (input box, selection box, date selector, etc.), table components, button components, etc., each component has clear attributes and methods.

[0034] Component rendering module includes: Component loading unit, according to the parsed component type information, load the corresponding Vue component from the component library; Property setting unit, according to the Vue component attribute information, configure the loaded Vue component attributes, including data binding, style setting, default value setting; Layout construction unit, according to the page layout information, arrange the Vue components to form the visual structure of the page.

[0035] Data interaction module includes: Request sending unit, according to the API address and parameters in the data interaction rule, send data request to the backend; Data processing unit, receive the data returned by the backend, perform data format conversion, data verification processing, and bind the processed data to the corresponding Vue component; Data update unit, when the data of the Vue component changes, according to the preset data update rule, send data update request to the backend.

[0036] Dynamic rendering process: 1. Initialize configuration: initialize request parameters according to Json dynamically; 2. Use Webpack form control rendering: dynamically load the data source of the selector; 3. Data submission processing: check if the required items are filled in, perform data conversion on special components (such as date table), uniformly call the add / edit interface to submit data, and prompt and refresh the table after success.

[0037] The event handling module includes: The event listener unit listens for various events triggered by Vue components, such as click events, input events, and submit events. The logic execution unit performs corresponding operations based on predefined event handling logic, such as calling the data interaction module to submit data, updating page status, and displaying prompt information. The callback handling unit processes the callback functions after event handling, and performs subsequent page updates or user feedback operations based on the callback results.

[0038] like Figure 2 As shown, the methods for visually generating Vue components based on JSON configuration include: S1, users create JSON configuration files to define the page layout, component types, component properties, and data interaction rules. S2, the JSON configuration parsing module reads and parses the JSON configuration file to extract page-related configuration information; S3, the component rendering module dynamically loads the corresponding Vue components from the component library based on the parsed configuration information, and sets the properties and event handlers of the Vue components to realize the rendering and layout of the Vue components; the properties of Vue components include the component type, display text, initial value, style, etc. S4, the data interaction module sends a data request to obtain data based on the configured API address and parameters, and then binds the data to the Vue component for display; Preprocess the request parameters, including data type conversion and parameter validation; Dynamically adjust request parameters based on the state of Vue components or user actions; Error handling and exception handling are performed on the returned data to ensure the reliability of data binding.

[0039] S5: When a user interacts with a Vue component, the event handling module executes corresponding operations based on predefined event handling logic, such as triggering data submission or updating page data. S6 dynamically updates the page display based on user actions and data interaction results, enabling real-time page interaction and dynamic changes.

[0040] Listen for changes in the data or state of a Vue component; Re-render the affected Vue components based on the changed data; Adjust the page layout to adapt to changes in data, while maintaining the page's aesthetics and usability.

[0041] The above embodiments are merely illustrative of the technical concept of the present invention and should not be construed as limiting the scope of protection of the present invention. Any modifications made to the technical solution based on the technical concept proposed in this invention shall fall within the scope of protection of this invention.

Claims

1. A Vue component visualization generation system based on JSON configuration, characterized in that, include: The JSON Schema configuration parsing module is used to parse JSON configuration files, use JSON Schema to verify the legality and completeness of the configuration files, and extract page layout, component type, component attributes, and data interaction rule information. The component library includes Vue components, which include form components, table components, and button components; Vue components have properties and methods. The component rendering module uses the information extracted by the JSON configuration parsing module to dynamically load Vue components from the component library using Webpack, and sets the properties and event handling functions of the Vue components to achieve the rendering and layout of the Vue components. The data interaction module is responsible for handling the interaction between Vue components and backend data, including data acquisition, modification, and deletion operations, and supports data transmission via AJAX requests; The event handling module is used to handle events triggered by components and perform corresponding operations according to predefined event handling logic.

2. The Vue component visualization generation system based on JSON configuration according to claim 1, characterized in that, The JSON configuration file includes the following configuration information: Page layout information defines the overall structure and sections of the page; Component type information, specifying the types of Vue components used in each region; Component property information, setting specific properties of Vue components; Data interaction rules information, configuring the API address, request parameters, and data format for Vue components to interact with the backend data; Event handling logic information defines the handling functions and operation flow when a Vue component triggers an event.

3. The Vue component visualization generation system based on JSON configuration according to claim 1, characterized in that, The component rendering module includes: The component loading unit loads the corresponding Vue component from the component library based on the parsed component type information; The property setting unit configures the properties of the loaded Vue component based on the Vue component's property information, including data binding, style settings, and default value settings. The layout building blocks arrange Vue components according to the page layout information to form the visual structure of the page.

4. The Vue component visualization generation system based on JSON configuration according to claim 1, characterized in that, The data interaction module includes: The request sending unit sends a data request to the backend based on the API address and parameters in the data interaction rules; The data processing unit receives data returned from the backend, performs data format conversion and data validation, and binds the processed data to the corresponding Vue components. The data update unit sends a data update request to the backend according to the preset data update rules when the data of a Vue component changes.

5. The Vue component visualization generation system based on JSON configuration according to claim 1, characterized in that, The event handling module includes: Event listener unit, listens for various events triggered by Vue components; The logic execution unit performs corresponding operations based on predefined event handling logic; The callback handling unit processes the callback functions after event handling, and performs subsequent page updates or user feedback operations based on the callback results.

6. A generation method for a Vue component visualization generation system based on JSON configuration, characterized in that, Includes the following steps: Users create JSON configuration files to define the page layout, component types, component properties, and data interaction rules. The JSON configuration parsing module reads and parses the JSON configuration file to extract page-related configuration information; The component rendering module dynamically loads the corresponding Vue components from the component library based on the parsed configuration information, and sets the properties and event handling functions of the Vue components to realize the rendering and layout of the Vue components; The data interaction module sends data requests to retrieve data based on the configured API address and parameters, and then binds the data to Vue components for display. When a user interacts with a Vue component, the event handling module performs the corresponding operation according to the predefined event handling logic; The page display is dynamically updated based on user actions and data interaction results, enabling real-time interaction and dynamic changes to the page.

7. The method for visually generating Vue components based on JSON configuration according to claim 6, characterized in that, The step of the data interaction module sending a data request to obtain data also includes the following processing: Preprocess the request parameters, including data type conversion and parameter validation; Dynamically adjust request parameters based on the state of Vue components or user actions; Error handling and exception handling are performed on the returned data to ensure the reliability of data binding.

8. The method for visually generating Vue components based on JSON configuration according to claim 6, characterized in that, The steps for dynamically updating the page display based on user actions and data interaction results specifically include: Listen for changes in the data or state of a Vue component; Re-render the affected Vue components based on the changed data; Adjust the page layout to adapt to changes in data, while maintaining the page's aesthetics and usability.

Images