Event component implementation method and system
By parsing the jsonSchema field data generated by the backend and rendering the UI components, using the event center to process interactive events, and executing business logic through the field logic file, the problem of inefficient dynamic form development in the existing technology is solved, achieving higher maintainability and user experience.
Patent Information
- Application Number
- CN202411582487.9
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-11-07
- Publication Date
- 2025-03-18
AI Technical Summary
Under the vue2 and vue-jsonSchema frameworks, when developers create dynamic forms, existing technologies are difficult to meet changing business needs, resulting in code coupling, logical inflation, inefficient development, increased communication costs and testing difficulties.
By obtaining the jsonSchema field data generated by the backend, the front-end form component parses and renders the UI component, uses the event center to process UI interaction events, and executes business logic through the field logic file, and finally updates the UI component status.
Reduces the complexity of event components, improves reuse, improves development efficiency and system maintainability, and improves user experience and testing convenience.
Smart Images
Figure CN119645392A_ABST
Abstract
Description
Technical Field
[0001] The present application belongs to the field of computer technology, and in particular, relates to an event component implementation method and system. Background Art
[0002] In the framework of vue2 and vue-jsonSchema, developers can create dynamic forms, declare the required UI components in JSON format, and perform customized development. The field object returned by the backend determines the display status of the form field, such as required, disabled or hidden, and complex form fields that require multiple fields to be displayed. For fields with special logic, there will be a corresponding field function logic file, which contains business logic code to control the interaction of form fields.
[0003] However, as business needs grow, this customized UI component approach around a single field may not be able to meet changing needs, because they often lead to code coupling, logic bloat, inefficient development, increased communication costs, and difficult testing.
[0004] Therefore, a new technical solution is needed to improve the maintainability of event components, reduce code redundancy, speed up development, and simplify the testing process. Summary of the invention
[0005] Based on this, it is necessary to provide an event component implementation method and system to solve the above technical problems.
[0006] In a first aspect, the present application provides an event component implementation method, including:
[0007] According to business requirements, the JSON Schema field data generated by the backend is obtained, wherein the JSON Schema field data includes the structure information, field type information, and validation rule information of the form;
[0008] According to the jsonSchema field data generated by the backend, the front-end form component parses and renders the UI component to obtain the UI interaction event;
[0009] Using the UI component, through the event center, the UI interaction event is thrown and processed to obtain the processing result;
[0010] Using the field logic file, monitoring the processing result, and executing the business logic of the processing result to obtain the execution result;
[0011] According to the execution result, the UI component status is updated.
[0012] In some practicable methods, the step of obtaining jsonSchema field data generated by the backend according to business requirements includes:
[0013] Build predefined business rules and data models;
[0014] Processing the business requirements using the predefined business rules and data model to obtain a business data structure;
[0015] The business data structure is transformed using the backend to obtain the jsonSchema field data generated by the backend.
[0016] In some practicable ways, the step of parsing the jsonSchema field data generated by the backend by the front-end form component and rendering the UI component to obtain the UI interaction event includes:
[0017] Utilize the form component of the front end to parse the jsonSchema field data to obtain a parsing result;
[0018] According to the analysis result, the UI component is configured, and the interactive page of the form component of the front end is rendered to obtain a UI interaction event;
[0019] Based on the UI interaction event, a backup data of the field configuration is returned by the backend.
[0020] In some practicable methods, the step of using the UI component to throw and process the UI interaction event through the event center to obtain the processing result includes:
[0021] Responding to the UI interaction event, triggering the UI component, obtaining the UI component triggering and throwing an event;
[0022] According to the event type of the event triggered and thrown by the UI component, the event center calls the corresponding callback function, sends the thrown event to the corresponding listener, and forms a processing result.
[0023] In some practicable manners, the step of using the field logic file to monitor the processing result and execute the business logic of the processing result to obtain the execution result includes:
[0024] The field logic file registers a listener in the event center to form a callback function;
[0025] When the callback function is triggered, the field logic file receives the processing result, and executes the business logic of the processing result to obtain the execution result.
[0026] In some practicable manners, the step of updating the UI component state according to the execution result includes:
[0027] The field logic file determines the UI component status that needs to be updated according to the execution result;
[0028] According to the UI component status that needs to be updated, the field logic file updates the UI component status by modifying the Vue data model.
[0029] In a second aspect, the present application provides an event component implementation system, which is applied to the aforementioned event component implementation method, and the system includes:
[0030] A generating unit, used to obtain jsonSchema field data generated by the back end according to business requirements, wherein the JSON Schema field data includes structure information, field type information, and validation rule information of the form;
[0031] A parsing unit, used for parsing the front-end form component according to the jsonSchema field data generated by the back-end, and rendering the UI component to obtain a UI interaction event;
[0032] A processing unit, used to use the UI component to throw and process the UI interaction event through the event center to obtain a processing result;
[0033] An execution unit, used to monitor the processing result by using the field logic file, and execute the business logic of the processing result to obtain an execution result;
[0034] The result unit is used to update the UI component state according to the execution result.
[0035] In a third aspect, the present application provides a computer device, including a memory and a processor, wherein the memory stores a computer program, and the processor implements the steps of the aforementioned event component implementation method when executing the computer program.
[0036] In a fourth aspect, the present application provides a computer storage medium having a computer program stored thereon, characterized in that the computer program implements the steps of the aforementioned event component implementation method when executed by a processor.
[0037] In a fifth aspect, the present application provides a computer program, which, when executed by a processor, implements the steps of the aforementioned event component implementation method.
[0038] Beneficial effects: The present application provides an event component implementation method, which obtains jsonSchema field data generated by the backend according to business needs, wherein the JSON Schema field data contains the structural information, field type information, and validation rule information of the form; the front-end form component parses the jsonSchema field data generated by the backend, and renders the UI component to obtain the UI interaction event; the UI component is used to throw and process the UI interaction event through the event center to obtain the processing result; the field logic file is used to monitor the processing result, and the business logic of the processing result is executed to obtain the execution result; the UI component status is updated according to the execution result. Through the above method, the complexity of the "event component" is reduced and the reuse degree is improved, which not only improves the development efficiency and the maintainability of the system, but also improves the experience and testing convenience. BRIEF DESCRIPTION OF THE DRAWINGS
[0039] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the conventional technology, the drawings required for use in the embodiments or the conventional technology descriptions are briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.
[0040] Figure 1 The present invention is a flowchart of an event component implementation method in one embodiment.
[0041] Figure 2 A logic diagram of an event component implementation method in one embodiment. DETAILED DESCRIPTION
[0042] In order to facilitate understanding of the present application, the present application will be described more fully below with reference to the relevant drawings. Embodiments of the present application are provided in the drawings. However, the present application can be implemented in many different forms and is not limited to the embodiments described herein. On the contrary, the purpose of providing these embodiments is to make the disclosure of the present application more thorough and comprehensive.
[0043] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by those skilled in the art to which this application belongs. The terms used herein in the specification of this application are only for the purpose of describing specific embodiments and are not intended to limit this application. The term "and / or" used herein includes any and all couplings of one or more related listed items.
[0044] It can be understood that the terms "first", "second", etc. used in the present application can be used in this article to describe various elements, but these elements are not limited by these terms. These terms are only used to distinguish the first element from another element.
[0045] Some terms involved in this application are explained below to facilitate understanding of this application:
[0046] Vue 2 refers to the second major version of Vue.js. Compared with Vue.js, Vue 2 has many new features and improvements, such as performance optimization, smaller bundle size, better component support, etc. Vue 2 has a huge community and rich ecosystem.
[0047] Vue-JSONSchema is a Vue.js-based library that allows developers to use JSON Schema to define the layout and validation rules of forms. JSON Schema is a JSON-based format for describing and validating JSON data structures. By combining JSON Schema with Vue.js, Vue-JSONSchema allows developers to quickly create dynamic forms that automatically render input fields and perform data validation based on JSON Schema.
[0048] UI components are used to create the interface of a web page or application. They can be any interface element such as buttons, input boxes, tables, pop-up windows, etc. By reusing these components, development efficiency and code maintainability can be improved.
[0049] jsonSchema is a specification for describing and validating JSON data structures. It provides a way to define the format, field types, and field requirements of JSON data.
[0050] Event Hub, an event hub is a design pattern for decoupled event communication between different components or modules. Through the event hub, a component can trigger an event, and other components that have subscribed to the event can respond.
[0051] Field logic files are usually used to define and manage the logic and behavior of different fields in an application. It can contain field validation rules, calculation logic, display and hide rules, etc. By centrally managing field logic, you can improve the maintainability and consistency of the code.
[0052] Vue responsiveness, Vue responsiveness is one of the core concepts in the Vue.js framework, which means that Vue automatically updates the DOM (Document Object Model) to reflect these changes by observing changes in data.
[0053] like Figure 1 As shown, in a first aspect, the present application provides an event component implementation method, the method comprising:
[0054] S100, according to business requirements, obtain the jsonSchema field data generated by the backend.
[0055] The JSON Schema field data includes the form's structure information, field type information, and validation rule information.
[0056] Specifically, obtaining the jsonSchema field data generated by the backend may include the following steps:
[0057] S101, construct predefined business rules and data models.
[0058] Specifically, the backend system predefines a set of business rules and data models. These rules and models are abstracted based on current or common business scenarios and data requirements, and they provide a basic framework for the backend to generate jsonSchema field data.
[0059] S102: Process the business requirements using the predefined business rules and data model to obtain a business data structure.
[0060] Specifically, the specific business requirements are matched with predefined business rules and data models. By processing these requirements, the back-end system can generate a business data structure. This structure is an intermediate product that converts specific business requirements into a data form that the system can understand.
[0061] S103, using the backend to transform the business data structure to obtain jsonSchema field data generated by the backend.
[0062] Specifically, the backend system converts the business data structure into jsonSchema field data. This conversion process maps the information in the business data structure to the standard format of jsonSchema so that the frontend can use this data to build and render forms.
[0063] It should be noted that the data model includes the structure, type, relationship, and how the data is stored and processed. In the process of generating jsonSchema field data, the data model can refer to entity structure, field attributes, and constraint rules.
[0064] Through predefined business rules and data models, the backend can automatically process business needs, reduce manual intervention, and improve efficiency. In addition, the predefined rules and data models help ensure the accuracy and consistency of the generated jsonSchema field data, reducing human errors. In other words, when business needs change, you only need to update the predefined rules and data models, and the backend can adapt to the new needs without rewriting the entire processing flow.
[0065] S200, according to the jsonSchema field data generated by the backend, the front-end form component parses and renders the UI component to obtain the UI interaction event.
[0066] Specifically, obtaining a UI interaction event may include the following steps:
[0067] S201, using the form component of the front end to parse the jsonSchema field data to obtain a parsing result.
[0068] Specifically, the front-end form component parses the jsonSchema field data sent by the back-end through built-in or third-party libraries (such as vue-jsonSchema). The parsing process includes understanding the structure of jsonSchema, extracting field information such as field name, type, required or not, validation rules, etc., and building an internal data structure for subsequent UI component configuration and rendering.
[0069] S202, configuring the UI component according to the analysis result, and rendering the interactive page of the form component on the front end to obtain a UI interaction event.
[0070] Specifically, when the parsing is complete, the front end will use the parsing results to configure the corresponding UI components. That is, the parsing results are used to set the correct properties for each field, such as the placeholder of the input box, the options of the drop-down menu, etc. Next, these UI components are rendered to the page, and users can see and interact with them, thereby generating UI interaction events such as input, click, etc.
[0071] S203, forming a backup data of the field configuration returned by the backend according to the UI interaction event.
[0072] Specifically, backup data itself does not directly affect the design or definition of business rules and data models, but it has an important impact on the application of business rules and data models at runtime. That is, backup data allows the front end to flexibly respond to changes in back-end data and dynamically update the display of UI components to ensure that the user interface always reflects the latest business needs and data status. Although backup data does not change the business rules and data models themselves, it ensures that these rules and models can be correctly executed on the front end. For example, if the business rules require that a field is required, the backup data will contain this information, and the front end can decide whether to allow the form to be submitted. Backup data also allows the front end to dynamically adjust the behavior of UI components during user interaction, such as enabling or disabling other fields based on input values, which are part of the business rules. If the backup data changes (for example, the back end updates the validation rules of the field), the front end can update the status of the UI components based on the new backup data, ensuring that changes in business rules and data models can be reflected in the user interface in a timely manner.
[0073] It should be noted that field configuration refers to the data structure that defines the form field attributes. These attributes may include the field's label, type, validation rules, initial value, whether it is required, etc.
[0074] Through the above method, the parsing and rendering process is automated, which reduces the workload of manual coding and improves development efficiency. The dynamically generated UI components can respond to user operations instantly and provide a smoother user experience. The front and back ends share the same data model (jsonSchema), which helps to maintain the consistency of data structure and validation rules.
[0075] For example, a user registration form is developed.
[0076] S201: The front-end form component receives the jsonSchema field data sent by the back-end, which defines fields such as username, password, and email. The front-end uses a parser to understand the properties of these fields and build an internal data structure.
[0077] S202: According to the parsing results, the front end creates a text input box for the username field, a password input box for the password field, and an email input box for the email field. These input boxes are added to the registration page, and the user can fill in the information. When the user fills in the form or clicks the submit button, the UI interaction event is triggered, and the front end can capture these events and perform corresponding processing, such as form validation or data submission.
[0078] S203, after rendering the UI components and capturing user interaction events, the front end will generate a backup data of the field configuration returned by the back end. For example, if the email field must contain a specific domain name, the front end can use the new rules in the backup data to update the validation logic of the email input box and immediately reflect this change to the user interface. In this way, even if the back end rules change when the user has opened the form, the front end can ensure that the user interface always reflects the latest business needs and data status.
[0079] S300, using the UI component, through the event center, throwing and processing the UI interaction event to obtain a processing result.
[0080] Among them, the UI component triggers an event after user interaction, the event is processed through the event center, and finally a processing result is generated.
[0081] Specifically, obtaining the processing result may include the following steps:
[0082] S301, responding to the UI interaction event, forming a trigger of the UI component, obtaining the UI component trigger and throwing an event.
[0083] Specifically, when a user interacts with a UI component (such as entering text, selecting an option in a drop-down menu, or clicking a button), the UI component responds to these interactions and triggers corresponding events. These events contain specific information about the interaction, such as the value entered, the button ID clicked, etc., and are thrown by the UI component.
[0084] S302, according to the event type of the event triggered and thrown by the UI component, the event center calls the corresponding callback function, sends the thrown event to the corresponding listener, and forms a processing result.
[0085] Specifically, after receiving the event thrown by the UI component, the event center searches for and calls the preset callback function according to the event type. These callback functions may contain verification logic, data processing, or other business logic. The event center sends the event to the corresponding listener, which executes the callback function and generates a processing result.
[0086] It should be noted that the event center maintains a list of event listeners, each of which subscribes to a specific event type. When the event center receives an event, it searches for listeners that subscribe to that event type and calls the corresponding callback function to pass the event data to them.
[0087] Through the above method, when the event center is used, the coupling between UI components and business logic is reduced, which improves the flexibility and maintainability of the system. New event types and callback functions can be added to the event center without modifying the existing UI component code, which improves the scalability of the system.
[0088] S400, using the field logic file, monitoring the processing result, and executing the business logic of the processing result to obtain the execution result.
[0089] Specifically, obtaining the execution result may include the following steps:
[0090] S401, the field logic file registers a listener in the event center to form a callback function.
[0091] Specifically, the field logic file implements the specific listener logic and registers the listener in the event center. The listener exists in the form of a callback function and will be triggered when the corresponding event occurs.
[0092] It should be noted that in step S401, the listener registered in the field logic file can be a listener of a synchronous event or a listener of an asynchronous event. These listeners (callback functions) are designed to respond to specific events, whether synchronous or asynchronous.
[0093] S402, when the callback function is triggered, the field logic file receives the processing result, and executes the business logic of the processing result to obtain the execution result.
[0094] Specifically, when the event center detects a UI interaction event, the callback function is triggered. In other words, the callback function in the field logic file is triggered and receives the relevant processing results. Then, the field logic file executes the business logic according to the processing results, which may include data validation, processing, conversion and other operations, and finally generates an execution result.
[0095] It should be noted that for synchronous events, the callback function executes the business logic immediately after the event occurs. This means that the execution of the business logic and the processing of the results are completed in the same execution stack without delay. For asynchronous events, the callback function may need to wait for an operation (such as a network request) to complete. In this case, the execution of the business logic is postponed to the callback after the asynchronous operation successfully completes, involving callback functions, Promises, or other asynchronous processing patterns.
[0096] It should also be noted that when a UI component triggers a synchronous event, the response function (callback function) in the field logic file will be executed immediately and process the business logic. Then, based on the result of the business logic, the state of the UI component needs to be updated, which is achieved through Vue's responsive system. When a UI component triggers an asynchronous event, the response function in the field logic file will be executed after the asynchronous operation is completed, and then the business logic will be executed in the callback function. After the business logic is executed, the state of the UI component also needs to be updated, which is also achieved through Vue's responsive system.
[0097] S500: Update the UI component status according to the execution result.
[0098] Specifically, updating the UI component state may include the following steps:
[0099] S501: The field logic file determines the UI component status that needs to be updated according to the execution result.
[0100] Specifically, the field logic file receives the execution results after the business logic processing, and analyzes these results to determine which UI component states need to be updated.
[0101] S502: According to the UI component status that needs to be updated, the field logic file updates the UI component status by modifying the Vue data model.
[0102] Specifically, the field logic file determines the UI component states that need to be updated, and these updates will be implemented by modifying the Vue data model. The Vue responsive system will detect changes in the data model and automatically update the DOM (Document Object Model) to ensure that the UI components display the correct state.
[0103] Through the above method, it is ensured that the field logic file not only determines the UI component status that needs to be updated based on the execution results, but also can effectively update these states through the Vue responsive system and provide feedback to the user when an exception or error occurs. This improves the robustness of the system and the user experience.
[0104] Example
[0105] like Figure 2 As shown, 1. The backend returns the jsonSchema field, and the field data is parsed through the vue-jsonSchema form component. When the field is configured with the corresponding customized UI component identifier; all the attributes of the field are added to the UI component and rendered on the form interaction interface; the above function description is a built-in function in the vue-jsonSchema form component.
[0106] 2. After the UI component is rendered, there is a backup data of the field configuration returned by the backend. By adjusting the field configuration of the backup data, the display of the form field UI component can be affected; this function is completed by the built-in function of the vue.js framework and the JsonSchema form component.
[0107] 3. When an interaction is triggered. For example, on a UI component, input text, click, or lose focus; when a control is triggered. Through the event notification method ($emit) on the Vue framework, an event is thrown in the following format:
[0108] $emit("success", {eventName: "blur", data: {}}, the event parameter has a fixed identification constant for obtaining notifications in the event center; then the parameters are processed in the event center method; the event type on the UI component is distinguished by eventName, and other parameters are placed on data according to the actual scenario requirements.
[0109] 4. Event center methods related to UI components, as methods for abstractly coordinating field configuration processing functions and listening to notifications, need to be designed to be unrelated to business logic; when event center methods focus on processing data notified by UI components, they can obtain field configuration properties and modify them. And they can affect field logic files through callbacks.
[0110] 5. When the field logic file imports the field UI component event center method, the event method corresponding to the required function will be obtained and listened in the field logic file.
[0111] 6. When a synchronous event is monitored and triggered from the UI component interaction, the business logic function code is executed in the response function of the monitored event, and the function processing of changing the field configuration is used from the UI component event center method according to business needs; the field UI component status is updated based on Vue responsiveness.
[0112] 7. When an asynchronous event is listened to and triggered from the UI component interaction, the business logic function code is executed in the successful trigger result of the asynchronous processing status through callback and Promise according to the characteristics of JavaScript, and the function processing of changing the field configuration is used from the UI component event center method according to business needs; the field UI component status is updated based on Vue responsiveness.
[0113] 8. Complete the above functional logic closed loop, business logic processing logic, UI component interaction processing logic, and compile these logic codes in the field logic file. By reusing the UI component event center method, the reuse of related UI component processing methods will be achieved and redundancy will be reduced.
[0114] In summary, the event component implementation method of the present application has the following advantages:
[0115] 1. When designing an "event component", you must first define and classify the implementation scope of the UI component, so that the UI component focuses on the functional scope; the developed UI component has boundaries in the scope of reusability. Reduce the complexity of the "event component" and improve reusability.
[0116] 2. When compiling new functions, developers focus on field logic files and complete the design of interaction logic code processing and corresponding business logic data code processing.
[0117] 3. Improve testability. Data can be simulated through the event center without modifying components to implement testing.
[0118] 4. Improve maintainability. When the "event component" is designed and developed, the changes and adjustments will improve the reusability of the component and eventually make it generalized to meet the business needs of the project. Visualization (UI component), interactive control management (UI component event center), logical function segmentation (field logic file).
[0119] In a second aspect, the present application provides an event component implementation system, which is applied to the aforementioned event component implementation method, and the system includes:
[0120] A generating unit, used to obtain jsonSchema field data generated by the back end according to business requirements, wherein the JSON Schema field data includes structure information, field type information, and validation rule information of the form;
[0121] A parsing unit, used for parsing the front-end form component according to the jsonSchema field data generated by the back-end, and rendering the UI component to obtain a UI interaction event;
[0122] A processing unit, used to use the UI component to throw and process the UI interaction event through the event center to obtain a processing result;
[0123] An execution unit, used to monitor the processing result by using the field logic file, and execute the business logic of the processing result to obtain an execution result;
[0124] The result unit is used to update the UI component state according to the execution result.
[0125] In a third aspect, the present application provides a computer device, including a memory and a processor, wherein the memory stores a computer program, and the processor implements the steps of the aforementioned event component implementation method when executing the computer program.
[0126] In a fourth aspect, the present application provides a computer storage medium having a computer program stored thereon, characterized in that the computer program implements the steps of the aforementioned event component implementation method when executed by a processor.
[0127] In a fifth aspect, the present application provides a computer program, which, when executed by a processor, implements the steps of the aforementioned event component implementation method.
[0128] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. As an illustration and not limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).
[0129] The various embodiments in the present disclosure are described in a progressive manner, and the same or similar parts between the various embodiments can be referenced to each other, and each embodiment focuses on the differences from other embodiments.
[0130] The protection scope of the present disclosure is not limited to the above-mentioned embodiments. Obviously, those skilled in the art can make various changes and modifications to the present disclosure without departing from the scope and spirit of the present disclosure. If these changes and modifications fall within the scope of the claims of the present disclosure and their equivalents, the intention of the present disclosure also includes these changes and modifications.
Claims
1. A method for implementing an event component, characterized in that the method include: According to business requirements, the JSON Schema field data generated by the backend is obtained, wherein the JSON Schema field data includes the structure information, field type information, and validation rule information of the form; According to the jsonSchema field data generated by the backend, the front-end form component parses and renders the UI component to obtain the UI interaction event; Using the UI component, through the event center, the UI interaction event is thrown and processed to obtain the processing result; Using the field logic file, monitoring the processing result, and executing the business logic of the processing result to obtain the execution result; According to the execution result, the UI component status is updated.
2. The event component implementation method according to claim 1, characterized in that: The step of obtaining the jsonSchema field data generated by the backend according to the business requirements includes: Build predefined business rules and data models; Processing the business requirements using the predefined business rules and data model to obtain a business data structure; The business data structure is transformed using the backend to obtain the jsonSchema field data generated by the backend.
3. The event component implementation method according to claim 1, characterized in that: The step of parsing the jsonSchema field data generated by the backend by the front-end form component and rendering the UI component to obtain the UI interaction event includes: Utilize the form component of the front end to parse the jsonSchema field data to obtain a parsing result; According to the analysis result, the UI component is configured, and the interactive page of the form component of the front end is rendered to obtain a UI interaction event; Based on the UI interaction event, a backup data of the field configuration is returned by the backend.
4. The event component implementation method according to claim 1, characterized in that: The step of using the UI component to throw and process the UI interaction event through the event center to obtain the processing result includes: Responding to the UI interaction event, triggering the UI component, obtaining the UI component triggering and throwing an event; According to the event type of the event triggered and thrown by the UI component, the event center calls the corresponding callback function, sends the thrown event to the corresponding listener, and forms a processing result.
5. The event component implementation method according to claim 1, characterized in that: The step of using the field logic file to monitor the processing result and execute the business logic of the processing result to obtain the execution result includes: The field logic file registers a listener in the event center to form a callback function; When the callback function is triggered, the field logic file receives the processing result, and executes the business logic of the processing result to obtain the execution result.
6. The event component implementation method according to claim 1, characterized in that: The step of updating the UI component state according to the execution result includes: The field logic file determines the UI component status that needs to be updated according to the execution result; According to the UI component status that needs to be updated, the field logic file updates the UI component status by modifying the Vue data model.
7. An event component implementation system, characterized in that: The event component implementation method applied to any one of claims 1 to 6, the system comprising: A generating unit, used to obtain jsonSchema field data generated by the backend according to business requirements, wherein the JSONSchema field data includes structure information, field type information, and validation rule information of the form; A parsing unit, used for parsing the front-end form component according to the jsonSchema field data generated by the back-end, and rendering the UI component to obtain a UI interaction event; A processing unit, used to use the UI component to throw and process the UI interaction event through the event center to obtain a processing result; An execution unit, used to monitor the processing result by using the field logic file, and execute the business logic of the processing result to obtain an execution result; The result unit is used to update the UI component state according to the execution result.
8. A computer device comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the steps of the event component implementation method described in any one of claims 1 to 6 are implemented.
9. A computer storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the event component implementation method described in any one of claims 1 to 6 are implemented.
10. A computer program, characterized in that When the computer program is executed by a processor, the steps of the event component implementation method described in any one of claims 1 to 6 are implemented.