Intelligent operation component system based on Vue

Abstract

The invention relates to the technical field of front-end development, in particular to a Vue-based intelligent operation component system, which comprises a processor, an operation definition module, an operation rendering module, a data processing module, a state management module and an operation management unit, and is characterized in that the operation definition module is connected with the processor, the operation rendering module is connected with the operation definition module, and the data processing module is connected with the state management module; the data processing module is connected with the operation rendering module and the processor, the state management module is connected with the data processing module and the processor, and the operation management unit is connected with the processor and the operation definition module; in this way, the technical problems that in Web front-end development in the prior art, interactive operation is scattered, styles are inconsistent, maintenance is difficult, and development efficiency is low are solved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of front-end development, and particularly relates to a Vue-based intelligent operation component system. BACKGROUND

[0002] In the current era of rapid digitalization, the speed of technological development is changing rapidly, and various software applications and Web systems are emerging like mushrooms after rain, penetrating every corner of people's life and work. From social media software and online video platforms frequently used in daily social entertainment, to office software and project management tools indispensable in the work scene, to online education platforms and knowledge management systems relied on in the learning process, digital products have become an important support for the operation of modern society.

[0003] However, the interactive operation implementation in the prior art Web front-end development is scattered, the styles are inconsistent, maintenance is difficult, and the development efficiency is low. SUMMARY

[0004] The present application aims to provide a Vue-based intelligent operation component system, which aims to solve the technical problems of scattered interactive operation implementation, inconsistent styles, difficult maintenance and low development efficiency in the prior art Web front-end development.

[0005] To achieve the above-mentioned purpose, a Vue-based intelligent operation component system is adopted, which comprises a processor, an operation definition module, an operation rendering module, a data processing module, a state management module and an operation management unit, the operation definition module is connected with the processor, the operation rendering module is connected with the operation definition module, the data processing module is connected with the operation rendering module and the processor, the state management module is connected with the data processing module and the processor, and the operation management unit is connected with the processor and the operation definition module.

[0006] The operation definition module is used to define the type, behavior and attribute configuration of the operation.

[0007] The operation rendering module is used to receive operation definition information from the operation definition module, and is used to create operation component instances, render the appearance of operation components and process user interaction events.

[0008] The data processing module is used to process data involved in the operation process, and transmit the processed data to the processor and the state management module.

[0009] The state management module is used to manage the state and life cycle of the operation component.

[0010] The operation management unit is used for display, grouping, and filtering logic of operation buttons in the operation definition module.

[0011] The operation rendering module includes a component creation mechanism, a component rendering logic, and a component interaction processing.

[0012] The component creation mechanism dynamically creates component instances using the createApp method of Vue.

[0013] The operation definition module defines the types of operations, including pop-up, drawer, page, and confirmation, defines the behaviors of operations, including confirmation, description, and details, and defines the attributes of operations, including basic, style, function, and condition.

[0014] The operation management unit includes an intelligent grouping module, a behavior recording module, and a behavior analysis engine.

[0015] The behavior recording module records user operation behaviors on operation buttons in real time and transmits recorded behavior data to the behavior analysis engine.

[0016] The operation management unit further includes an identity information verification module and a permission control module.

[0017] The state management module comprises a state storage submodule, a state updating mechanism and a state synchronization submodule, the state updating mechanism is used for realizing centralized management and updating of the state by using a Vuex state management library, the state in the state storage submodule is modified by defining mutations, and traceability and controllability of state change are ensured.

[0018] The data processing module is specifically operated as follows: data is converted, including processing nested fields, data formatting, using a regular expression and object mapping technology to realize conversion of complex nested fields to a flat structure, and calling an API to obtain or submit data.

[0019] The API calling to obtain or submit data is specifically as follows:

[0020] The request is sent through an HTTP client library, combined with an intelligent retry mechanism and detailed error handling logic, and the retry strategy is automatically adjusted according to different error types.

[0021] The Vue-based intelligent operation component system further comprises a data caching module connected with the data processing module.

[0022] The Vue-based intelligent operation component system in the application, in specific use, the processor as the core, responsible for coordinating the work of each module, ensuring accurate information transmission and processing. The operation definition module defines the type, behavior and attribute configuration of the operation, avoiding the problems caused by scattered definition. The operation rendering module creates and renders operation component instances according to operation definition information, processes user interaction events, and ensures the consistency of operation appearance and behavior. The data processing module processes data during operation to ensure data accuracy and effectiveness, providing data support for operation. The state management module manages the state and life cycle of the operation component, so that the component state change can be reflected on the interface in time, improving the user experience. The operation management unit manages the display, grouping and filtering logic of the operation button, improving the manageability and flexibility of the operation. Each module cooperates with each other to form an organic whole, which solves the technical problems of scattered implementation of interactive operation, inconsistent style, difficult maintenance and low development efficiency in the prior art of Web front-end development. BRIEF DESCRIPTION OF DRAWINGS

[0023] In order to more clearly illustrate the technical solutions in the embodiments of the application or the prior art, the following will briefly introduce the drawings needed to be used in the embodiments or prior art description. Obviously, the drawings in the following description are only some embodiments of the application, and for those skilled in the art, other drawings can also be obtained without creative labor on the basis of these drawings.

[0024] Figure 1 is a principle block diagram of a Vue-based intelligent operation component system of the first embodiment of the present application.

[0025] Figure 2 is a principle block diagram of a Vue-based intelligent operation component system of the second embodiment of the present application.

[0026] 101 - processor, 102 - operation definition module, 103 - operation rendering module, 104 - data processing module, 105 - state management module, 106 - operation management unit, 107 - data cache module, 108 - component creation mechanism, 109 - component rendering logic, 110 - component interaction processing, 111 - intelligent grouping module, 112 - behavior recording module, 113 - behavior analysis engine, 114 - identity information verification module, 115 - permission control module, 116 - state storage submodule, 117 - state update mechanism, 118 - state synchronization submodule, 201 - intelligent recommendation module, 202 - performance monitoring module 202, 203 - optimization module. DETAILED DESCRIPTION

[0027] The embodiments of the present application are described in detail below, examples of which are shown in the accompanying drawings, the embodiments described below by referring to the accompanying drawings are exemplary and are intended to explain the present application, and cannot be understood as a limitation of the present application.

[0028] The first embodiment, please refer to Figure 1 , Figure 1 is a principle block diagram of a Vue-based intelligent operation component system of the first embodiment of the present application.

[0029] The present application provides a Vue-based intelligent operation component system, comprising a processor 101, an operation definition module 102, an operation rendering module 103, a data processing module 104, a state management module 105, an operation management unit 106 and a data cache module 107, the operation rendering module 103 comprising a component creation mechanism 108, a component rendering logic 109 and a component interaction processing 110, the operation management unit 106 comprising an intelligent grouping module 111, a behavior recording module 112, a behavior analysis engine 113, an identity information verification module 114 and a permission control module 115, the state management module 105 comprising a state storage submodule 116, a state update mechanism 117 and a state synchronization submodule 118, the foregoing technical solution solves the technical problems of scattered interactive operation implementation, inconsistent style, difficult maintenance and low development efficiency in the prior art of Web front-end development.

[0030] For this specific embodiment, the operation definition module 102 is used to define the type, behavior and attribute configuration of the operation;

[0031] The operation rendering module 103 is configured to receive the operation definition information from the operation definition module 102, and is configured to create operation component instances, render the appearance of operation components, and process user interaction events.

[0032] The data processing module 104 is configured to process data involved in the operation process, and transmit the processed data to the processor 101 and the state management module 105.

[0033] The state management module 105 is configured to manage the state and life cycle of operation components.

[0034] The operation management unit 106 is configured to display, group, and filter the operation buttons in the operation definition module 102.

[0035] The operation definition module 102 is connected to the processor 101, the operation rendering module 103 is connected to the operation definition module 102, the data processing module 104 is connected to the operation rendering module 103 and the processor 101, the state management module 105 is connected to the data processing module 104 and the processor 101, and the operation management unit 106 is connected to the processor 101 and the operation definition module 102. In specific use, the processor 101 serves as the core and is responsible for coordinating the work of each module to ensure accurate information transmission and processing. The operation definition module 102 centrally defines the type, behavior, and attribute configuration of operations to avoid problems caused by scattered definitions. The operation rendering module 103 creates and renders operation component instances based on operation definition information, processes user interaction events, and ensures the consistency of operation appearance and behavior. The data processing module 104 processes data involved in the operation process to ensure data accuracy and effectiveness and provides data support for operations. The state management module 105 manages the state and life cycle of operation components to enable component state changes to be reflected on the interface in a timely manner, improving user experience. The operation management unit 106 manages the display, grouping, and filtering logic of operation buttons to improve the manageability and flexibility of operations. The modules cooperate with each other to form an organic whole, thereby solving the technical problems of scattered implementation of interactive operations, inconsistent styles, maintenance difficulties, and low development efficiency in existing Web front-end development.

[0036] Secondly, the operation rendering module 103 includes a component creation mechanism 108, a component rendering logic 109, and a component interaction processing 110. The component creation mechanism 108 is configured to create operation component instances. The component rendering logic 109 is configured to render the appearance of operation components. The component interaction processing 110 is configured to process user interaction events.

[0037] The component creation mechanism 108 dynamically creates a component instance using the createApp method of Vue.

[0038] Meanwhile, the operation definition module 102 defines the types of operations including pop-up, drawer, page, and confirmation, the operation definition module 102 defines the behaviors of operations including confirmation, description, and details, and the operation definition module 102 defines the attributes of operations including basic, style, function, and condition.

[0039] In addition, the operation management unit 106 includes an intelligent grouping module 111, a behavior recording module 112, and a behavior analysis engine 113, the intelligent grouping module 111 is connected with the operation definition module 102, the behavior recording module 112 is connected with the operation definition module 102 and the behavior analysis engine 113, and the behavior analysis engine 113 is connected with the intelligent grouping module 111.

[0040] The behavior recording module 112 is used to record the operation behavior of the user on the operation button in real time, and transmit the recorded behavior data to the behavior analysis engine 113; after receiving the data, the behavior analysis engine 113 classifies the user groups according to the operation habits by using a clustering analysis algorithm, and divides different clusters by calculating the similarity of operation behaviors; by means of an association rule mining algorithm, the potential association between operation behaviors is explored, such as the probability of performing other operations after performing a certain operation; by using a time series analysis algorithm, a model of user operation behavior changing with time is constructed, and future operation tendency is predicted. Based on these analyses, user operation habit patterns are refined, potential functional requirements are mined, and then targeted suggestions covering button layout, function integration, interaction process optimization, etc. are generated, and are fed back to the intelligent grouping module 111 in a structured format, and the intelligent grouping module 111 combines the button optimization suggestions to intelligently group the operation buttons.

[0041] In addition, the permission control module 115 is connected with the identity information verification module 114 and the intelligent grouping module 111, the identity information verification module 114 is used to obtain user identity information, and the permission control module 115 matches the user operation permission information with the operation button information in the intelligent grouping module 111. The intelligent grouping module 111 scientifically groups the operation buttons according to behavior analysis and preset rules. If the user has the execution permission of a certain operation button, the permission control module 115 will instruct the system interface to normally display the button, and the user can freely operate to trigger the corresponding business function, such as the data query permission user can see and use the query button.

[0042] If the user has no execution right of a certain operation button, the right control module 115 will set the button to a hidden or disabled state according to the system configuration. When hidden, the button is invisible in the interface, avoiding user confusion; when disabled, the button is visible but gray, and the user cannot click it. When the user tries to operate the disabled button, the system will pop up a prompt such as "You have no right to perform this operation" to guide the user to use the system correctly.

[0043] Thirdly, the state management module 105 includes a state storage submodule 116, a state update mechanism 117, and a state synchronization submodule 118. The state update mechanism 117 uses the Vuex state management library to realize centralized management and update of the state, modifies the state in the state storage submodule 116 by defining mutations, and ensures traceability and controllability of state changes.

[0044] Finally, the specific running mode of the data processing module 104 is as follows: converting data, including processing nested fields, data formatting, using regular expressions and object mapping technology to realize conversion of complex nested fields to flat structure, and calling API to obtain or submit data.

[0045] The specific calling API to obtain or submit data is as follows:

[0046] Sending a request through an HTTP client library, combining intelligent retry mechanism and detailed error handling logic, and automatically adjusting the retry strategy according to different error types.

[0047] The data cache module 107 is connected with the data processing module 104, and the data cache module 107 is used to cache frequently used data, reduce the number of API calls, and improve system performance. The data cache module 107 uses a combination of local storage (such as localStorage, sessionStorage) and memory caching, sets different caching strategies according to the update frequency and usage frequency of data; for data with low update frequency and high usage frequency, store it in the local storage so that it can still be quickly obtained after page refresh or system restart; for data with high update frequency or high real-time requirement, use memory caching to improve data access speed.

[0048] Using a Vue-based intelligent operation component system of the embodiment, in specific use, the processor 101 is responsible for coordinating the work of each module, ensuring accurate information transmission and processing as the core. The operation definition module 102 centrally defines the type, behavior and attribute configuration of the operation, avoiding problems caused by scattered definition. The operation rendering module 103 creates and renders operation component instances according to operation definition information, processes user interaction events, and ensures the consistency of operation appearance and behavior. The data processing module 104 processes data during operation to ensure data accuracy and effectiveness, providing data support for operation. The state management module 105 manages the state and life cycle of the operation component, so that the component state change can be reflected on the interface in time, improving the user experience. The operation management unit 106 manages the display, grouping and filtering logic of the operation button, improving the manageability and flexibility of the operation. Each module cooperates with each other to form an organic whole, in this way, the technical problems of scattered implementation of interactive operation, inconsistent style, difficult maintenance and low development efficiency in the prior art of Web front-end development are solved.

[0049] The second embodiment is a principle block diagram of a Vue-based intelligent operation component system of the second embodiment of the application. Figure 2 , Figure 2 The second embodiment is a principle block diagram of a Vue-based intelligent operation component system of the second embodiment of the application.

[0050] Based on the technology of the first embodiment, the application provides a Vue-based intelligent operation component system, further comprising an intelligent recommendation module 201, a performance monitoring module 202 and an optimization module 203.

[0051] For this specific embodiment, the intelligent recommendation module 201 is connected with the intelligent grouping module 111, and when a new user uses, the intelligent recommendation module 201 will transmit the button grouping recommendation to the intelligent grouping module 111 according to similar users.

[0052] The performance monitoring module 202 is connected with the processor 101, and the optimization module 203 is also connected with the processor 101. The performance monitoring module 202 monitors the performance indicators of the processor 101 in real time, and sends an alarm in time when the performance indicators exceed the threshold by setting the performance threshold. According to the performance monitoring result, the optimization module 203 analyzes the bottleneck of the processor 101 and takes corresponding optimization measures.

[0053] Using a Vue-based intelligent operation component system of the embodiment, the intelligent recommendation module 201 is connected with the intelligent grouping module 111, in the use of a new user, the intelligent recommendation module 201 will be recommended to the transmission to the intelligent grouping module 111 according to the similar user button grouping, the performance monitoring module 202 is connected with the processor 101, the optimization module 203 is also connected with the processor 101, the performance monitoring module 202 monitors the various performance indicators of the processor 101 in real time, when the performance index exceeds the threshold value, the alarm is sent in time through the setting performance threshold value.According to the performance monitoring result, the optimization module 203 analyzes the bottleneck of the processor 101 and takes corresponding optimization measures.

[0054] The above disclosure is only a preferred embodiment of the application, of course, cannot be limited by the scope of the application, those skilled in the art can understand that the whole or part of the above-mentioned embodiment is realized, and the equivalent changes made according to the claims of the application still belong to the scope covered by the application.

Claims

1. A Vue-based intelligent operation component system, characterized in that, it comprises a processor, an operation definition module, an operation rendering module, a data processing module, a state management module, and an operation management unit, the operation definition module is connected with the processor, the operation rendering module is connected with the operation definition module, the data processing module is connected with the operation rendering module and the processor, the state management module is connected with the data processing module and the processor, and the operation management unit is connected with the processor and the operation definition module; the operation definition module is used to define the type, behavior, and attribute configuration of an operation; the operation rendering module is used to receive operation definition information from the operation definition module, create an operation component instance, render the appearance of the operation component, and process user interaction events; the data processing module is used to process data involved in the operation process and transmit the processed data to the processor and the state management module; the state management module is used to manage the state and life cycle of the operation component; the operation management unit is used to display, group, and filter the operation buttons in the operation definition module. 2.The Vue-based intelligent operation component system of claim 1, characterized in that, the operation rendering module comprises a component creation mechanism, a component rendering logic, and a component interaction processing, the component creation mechanism is used to create an operation component instance; the component rendering logic is used to render the appearance of the operation component; and the component interaction processing is used to process user interaction events; the component creation mechanism uses the createApp method of Vue to dynamically create a component instance. 3.The Vue-based intelligent operation component system of claim 2, characterized in that, the operation definition module defines the type of an operation, including pop-up, drawer, page, and confirmation; defines the behavior of an operation, including confirmation, description, and details; and defines the attributes of an operation, including basic, style, function, and condition. 4.The Vue-based intelligent operation component system of claim 3, characterized in that, the operation management unit comprises an intelligent grouping module, a behavior recording module, and a behavior analysis engine, the intelligent grouping module is connected with the operation definition module, the behavior recording module is connected with the operation definition module and the behavior analysis engine, and the behavior analysis engine is connected with the intelligent grouping module; the behavior recording module is used to record user operation behavior on operation buttons in real time and transmit the recorded behavior data to the behavior analysis engine; the behavior analysis engine is used to perform in-depth analysis on the user operation behavior data transmitted from the behavior recording module, use data analysis algorithms to mine user operation habits and potential needs, generate operation button optimization suggestions according to the analysis results, and feed back the suggestions to the intelligent grouping module, which intelligently groups the operation buttons in combination with the button optimization suggestions. 5.The Vue-based intelligent operation component system of claim 4, characterized in that, The operation management unit further comprises an identity information verification module and a permission control module, both of which are connected with the identity information verification module and the intelligent grouping module, the identity information verification module is used to obtain user identity information, the permission control module manages permissions according to user identity information, and a set of operation permissions corresponding to the user is queried from a pre-configured permission database, the permission control module matches the operation permission information of the user with the operation button information in the intelligent grouping module, if the user has the execution permission of a certain operation button, the button is allowed to be normally displayed on the interface and can be operated by the user; if the user has no permission, the button is set to a hidden state or a disabled state, and corresponding permission prompt information is given when the user attempts to operate.

6. The Vue-based intelligent operation component system of claim 5, wherein the state management module comprises a state storage submodule, a state update mechanism, and a state synchronization submodule, the state update mechanism uses a Vuex state management library to realize centralized management and update of the state, the state in the state storage submodule is modified by defining mutations, and traceability and controllability of state changes are ensured.

7. The Vue-based intelligent operation component system of claim 6, wherein the data processing module has the following specific operation mode: data is converted, including processing nested fields, data formatting, using regular expressions and object mapping technology to realize conversion of complex nested fields to a flat structure, and calling an API to obtain or submit data. The API calling to obtain or submit data is specifically as follows: A request is sent through an HTTP client library, an intelligent retry mechanism and detailed error handling logic are combined, and the retry strategy is automatically adjusted according to different error types.

8. The Vue-based intelligent operation component system of claim 7, further comprising a data caching module connected with the data processing module. ​ ​ ​

Images