Method for quickly building table in background management system

Abstract

The invention relates to a method for quickly building a table in a background management system, which comprises the following steps of: packaging an HTML (Hypertext Markup Language) structure, a style and a behavior of the table into a component which internally comprises interaction logic of the table; packaging a data request by using an HTTP (Hyper Text Transport Protocol) client to form a service layer; a service layer Service is injected into the table component to serve as a data source; invoking the adapter to process the response data; the table component is linked with external data through the exposed attribute props; and monitoring the change of the attribute props, requesting data from a server by using a new attribute value when the attribute props is changed, and displaying new data by re-rendering and updating the table. According to the method, through table componentization, code multiplexing and modularization are achieved, the development efficiency and maintainability are improved, the consistency of table styles and behaviors is ensured, meanwhile, the expansibility and customization ability of the table are enhanced, performance optimization and internationalization are supported, and therefore the user experience and the overall quality of the system are improved.

Description

Technical Field

[0001] The present invention relates to the technical field of interactive interface development, in particular to a method for quickly constructing a table in a background management system. Background Art

[0002] In the background management system, the use of tables is very common, and most of the data displays are presented based on tables, such as: the presentation of issuance records, the viewing of coupon data lists, the viewing of social activity area information, and so on.

[0003] Existing tables require heavy repetitive development work when adding, deleting, and modifying data, which is inefficient and has poor maintainability.

[0004] First of all, each new project or new page needs to write table code with similar functions from scratch, which greatly reduces development efficiency.

[0005] Secondly, due to the lack of componentized or modular design, the style and behavior of the table are difficult to maintain consistency across different pages or projects, increasing the complexity of development and maintenance.

[0006] Furthermore, traditional table implementation methods may encounter performance bottlenecks when processing large amounts of data, affecting the user experience.

[0007] Finally, traditional tables are difficult to meet diverse business needs and have limited scalability and customization capabilities.

[0008] Therefore, a modular, customizable, easy-to-maintain and expandable solution is needed to improve the development efficiency and quality of tables in the backend management system.

[0009] The information disclosed in this background technology section is only intended to deepen the understanding of the overall background technology of the present invention, and should not be regarded as acknowledging or suggesting in any form that the information constitutes the prior art already known to those skilled in the art. Summary of the invention

[0010] In view of the defects existing in the prior art, the purpose of the present invention is to provide a method for quickly building a table in a background management system. By componentizing the table, code reuse and modularization are achieved, development efficiency and maintainability are improved, and consistency of table style and behavior is ensured. At the same time, the scalability and customization capabilities of the table are enhanced, performance optimization and internationalization are supported, thereby improving user experience and the overall quality of the system.

[0011] In order to achieve the above purpose, the technical solution adopted by the present invention is:

[0012] A method for quickly building a table in a background management system, characterized in that it includes the following steps:

[0013] Encapsulate the HTML structure, style, and behavior of the table into an independent component, which contains the interaction logic of the table;

[0014] Use HTTP client to encapsulate data requests to form a service layer Service;

[0015] Inject the encapsulated service layer Service into the table component as the data source;

[0016] Call the responseAdaptor adapter to process the response data;

[0017] The table component is linked to external data through the exposed property props;

[0018] The table component monitors changes in the property props;

[0019] Once the attribute changes are detected, the table component will use the new attribute value to request data from the server;

[0020] After receiving the data returned by the server, update the table by re-rendering to show the new data.

[0021] Based on the above technical solution, the encapsulation is to construct the component using JSON configuration + API call.

[0022] On the basis of the above technical solution, the specific steps of packaging into components include:

[0023] Decompose the table component into two parts: element configuration items and the tool method library Utils for parsing configuration items;

[0024] The element configuration item defines the display content and behavior of the table through JSON data;

[0025] The tool method library Utils uses logic inside the component to parse each element configuration item and render the table accordingly.

[0026] On the basis of the above technical solution, the element configuration items are formed based on the division of the page, and at least include:

[0027] Action button configuration item, configure the Action button on the page, including the button text, icon, and click event;

[0028] Table configuration items configure the Table on the page, including column definition, data binding, paging, and sorting.

[0029] Based on the above technical solution, the tool method library Utils contains a variety of practical methods to support the configuration and function implementation of page elements and tables, including:

[0030] fnHelper is a function helper class method that contains helper functions used to simplify code logic or improve code readability;

[0031] tpl template class method, used for template file management in projects or frameworks;

[0032] Other class methods are used for service catalog management and initialization configuration management.

[0033] Based on the above technical solution, the element configuration items and the tool method library Utils are both written in TypeScript.

[0034] Based on the above technical solution, the fnHelper function auxiliary class method is specifically divided into:

[0035] Filter method: contains functions related to data filtering, which is used to filter data before display;

[0036] HttpData method: includes sending requests and processing responses related to HTTP data interaction;

[0037] Moment method: used for date formatting and time calculation;

[0038] Service method: contains the code of the service layer, which is used to encapsulate business logic, including data acquisition business logic and data processing business logic;

[0039] Validation method: Contains functions related to form validation or data validation, which are used to ensure the correctness of user input or data processing.

[0040] Based on the above technical solution, the tpl template class method is specifically divided into:

[0041] tpl / index information: the index directory of the template, including the template entry file or the main template configuration;

[0042] tpl-builtin method: A directory of built-in templates, containing predefined template files.

[0043] On the basis of the above technical solutions, other methods are specifically divided into:

[0044] Services method: service directory, including API call codes and data processing codes related to various services;

[0045] Index information: the entry file of the service directory, used to initialize and configure services;

[0046] init method: Initialization function or method used to configure and initialize services when the application starts.

[0047] The method for quickly building a table in a background management system described in the present invention has the following beneficial effects:

[0048] By encapsulating table components in a componentized and configured manner, the development efficiency and maintainability of the backend management system can be significantly improved, code reuse and consistency can be achieved, customized functions and state management can be simplified, the interactivity and performance of the table can be enhanced, the error rate can be reduced, and internationalization and design patterns can be better supported, thereby building a more robust, flexible and user-friendly backend management system.

[0049] 1. Improve development efficiency: Through componentization, the interface can be built quickly, reducing the workload of repeatedly writing the same code.

[0050] Component-based development can improve development efficiency. Developers can quickly build interfaces without having to write table-related code from scratch.

[0051] 2. Enhance code reusability: Encapsulated components can be reused in multiple projects or pages, improving the code reuse rate.

[0052] After being encapsulated into a component, the table component can be reused in multiple pages or projects without having to rewrite the same code each time.

[0053] 3. Ensure consistency: Unified component specifications can ensure that the style and behavior of tables in different projects or pages remain consistent.

[0054] Using components ensures that the style and behavior of tables remain consistent across your entire app or across multiple projects.

[0055] 4. Simplified maintenance: The modular code structure makes maintenance and updating easier, making it easier to locate and fix problems.

[0056] Componentization makes the code more modular and easier to maintain and update. When you need to modify the function or style of the table, you only need to modify it within the component.

[0057] Encapsulating the table logic inside the component decouples it from the rest of the application, helping to keep the code clean and organized.

[0058] Componentization makes unit testing and integration testing easier because you can test the functionality of the table components in isolation.

[0059] 5. Improve customization: Encapsulated components can customize functions according to business needs, such as sorting, filtering, paging, etc.

[0060] The encapsulated table component can be customized according to needs, such as sorting, filtering, paging, editing, etc., to meet the needs of different scenarios.

[0061] Encapsulated components can better manage state, especially for complex table operations such as row selection, data editing, etc.

[0062] 6. Optimize performance: Improve the ability to handle large amounts of data through reasonable encapsulation and performance optimization measures, such as lazy loading and virtual scrolling.

[0063] Through proper encapsulation, the performance of the table can be optimized, for example, lazy loading, virtual scrolling, etc., to handle large amounts of data.

[0064] 7. Rich interactivity: Components can contain complex interaction logic to provide a richer user experience.

[0065] Components can contain complex interaction logic, such as click, double-click, right-click menu, etc., to provide a richer user experience.

[0066] 8. Reduce error rate: Using tested components can reduce errors and improve system stability.

[0067] Using tested components reduces the chances of errors being introduced when copying and pasting code in multiple places.

[0068] 9. Support internationalization: Encapsulated components are easier to integrate internationalization support, facilitating the development of multi-language systems.

[0069] Encapsulated components can more easily integrate internationalization support and facilitate the development of multi-language backend systems.

[0070] 10. Follow design patterns: Componentization helps implement design patterns such as MVC, MVVM, and build scalable and maintainable applications.

[0071] Componentization is the basis for implementing design patterns such as MVC and MVVM, which helps to build scalable and maintainable applications. BRIEF DESCRIPTION OF THE DRAWINGS

[0072] The present invention has the following accompanying drawings:

[0073] The accompanying drawings are used to better understand the present invention and do not constitute an improper limitation of the present invention.

[0074] Figure 1 A flowchart of embodiment 1 of a method for quickly constructing a table in a background management system described in the present invention.

[0075] Figure 2 Schematic diagram of the components of the table component.

[0076] Figure 3 Action button configuration item example. DETAILED DESCRIPTION

[0077] The present invention is further described in detail below in conjunction with the accompanying drawings. The detailed description is an explanation made in conjunction with the exemplary embodiments of the present invention, including various details of the embodiments of the present invention to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those skilled in the art that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, for the sake of clarity and conciseness, the description of well-known functions and structures is omitted in the following description.

[0078] like Figure 1 As shown, the present invention provides a method for quickly building a table in a background management system, comprising the following steps:

[0079] Encapsulate the HTML structure, style and behavior of the table into an independent component, which contains the interactive logic of the table, such as sorting, filtering and paging;

[0080] The HTTP client is used to encapsulate data requests to form a service layer Service. The HTTP client defaults to the axios library. The service layer Service is responsible for interacting with the backend API to obtain data.

[0081] Inject the encapsulated service layer Service into the table component as the data source; the table component obtains the required data through the service layer Service;

[0082] Call the responseAdaptor adapter to process the response data; the responseAdaptor adapter is responsible for converting the data returned by the backend into the format required by the table component, such as extracting rows (data list) and count (total number), etc.;

[0083] The table component is linked to external data through the exposed property props; for example: the property props is the query field, and the external data is the form data. When the external data changes, the table can respond to these changes and update the display.

[0084] For example, the table component defines some properties (props), such as query, which is used to receive data transmitted from the outside; the table component monitors changes in these properties (props); once the property changes are monitored, the table component will use the new property values ​​​​(such as the user's search keywords, form data refers to the data entered by the user in the form on the web page or application) to request data from the server; after receiving the data returned by the server, the table component will update its internal state and re-render to display the new data.

[0085] This embodiment describes the data flow from the data source to the table display. The general process of the data flow is: the service layer obtains data -> processes the data through the responseAdaptor adapter -> passes the processed data to the table component -> the table component renders the table according to the configuration and data.

[0086] Based on the above technical solution, the encapsulation is to construct the component using JSON configuration + API call.

[0087] Based on the above technical solution, Figure 2 As shown, the specific steps of packaging into components include:

[0088] Decompose the table component into two parts: element configuration items and the tool method library Utils for parsing configuration items;

[0089] The element configuration item defines the display content and behavior of the table through JSON data;

[0090] The tool method library Utils uses logic inside the component to parse each element configuration item and render the table accordingly.

[0091] On the basis of the above technical solution, the element configuration items are formed based on the division of the page, and at least include:

[0092] Action button configuration item, configure the Action button on the page, including the button text, icon, and click event;

[0093] Table configuration items configure the Table on the page, including column definition, data binding, paging, and sorting.

[0094] Based on the above technical solution, the tool method library Utils contains a variety of practical methods to support the configuration and function implementation of page elements and tables, including:

[0095] The fnHelper function auxiliary class method contains auxiliary functions used to simplify code logic or improve code readability, which are specifically divided into:

[0096] Filter method: contains functions related to data filtering, which is used to filter data before display;

[0097] HttpData method: includes sending requests and processing responses related to HTTP data interaction;

[0098] Moment method: used for date formatting and time calculation;

[0099] Service method: contains the code of the service layer, which is used to encapsulate business logic, including data acquisition business logic and data processing business logic;

[0100] Validation method: contains functions related to form validation or data validation, which is used to ensure the correctness of user input or data processing;

[0101] The tpl template class method is used to manage template files in a project or framework, which is specifically divided into:

[0102] tpl / index information: the index directory of the template, including the template entry file or the main template configuration;

[0103] tpl-builtin method: a directory of built-in templates, containing predefined template files;

[0104] Other class methods are used for service catalog management and initialization configuration management, which are specifically divided into:

[0105] Services method: service directory, including API call codes and data processing codes related to various services;

[0106] Index information: the entry file of the service directory, used to initialize and configure services;

[0107] init method: Initialization function or method used to configure and initialize services when the application starts.

[0108] Based on the above technical solution, the element configuration items and the tool method library Utils are both written in TypeScript.

[0109] Figure 3 An example of an Action button configuration item is shown, which is stored in action.ts, a TypeScript file that contains logic related to the action (Action); specifically, it includes:

[0110] The ACTION_DATA object is used to define the data structure of the configuration item. The example contains the following properties:

[0111] _element: identifies the type of action element;

[0112] label: operation name;

[0113] type: button type, such as 'primary';

[0114] text: button shape, if true, it means it is a text button;

[0115] permission: permission control, used to control permissions;

[0116] actionType: action execution type, such as 'link', 'dialog', 'ajax', etc.;

[0117] linkPath: When actionType is 'link', the page path to jump to;

[0118] visibleOn: controls the display and hiding conditions of the action;

[0119] confirmText: the text of the secondary confirmation pop-up window;

[0120] api: the API for executing the action, which can be a GET or POST request;

[0121] dataMapping: interface request parameter mapping;

[0122] requestAdaptor and responseAdaptor: adapter functions for requests and responses;

[0123] The ACTION_DATA object shown in this example defines various action-related configurations, such as element type, label, type, text, permission, action type, link path, visibility condition, confirmation text, API, data mapping, request adapter, and response adapter, including file organization, data structure definition, and detailed comments.

[0124] The contents not described in detail in this specification belong to the prior art known to professional and technical personnel in this field.

[0125] The above description is only a preferred embodiment of the present invention, and the protection scope of the present invention is not limited to the above embodiment. Any equivalent modifications or changes made by those skilled in the art based on the contents disclosed by the present invention should be included in the protection scope recorded in the claims.

Claims

1. A method for quickly building a table in a background management system, characterized in that: The steps include: Encapsulate the HTML structure, style, and behavior of the table into an independent component, which contains the interaction logic of the table; Use HTTP client to encapsulate data requests to form a service layer Service; Inject the encapsulated service layer Service into the table component as the data source; Call the responseAdaptor adapter to process the response data; The table component is linked to external data through the exposed property props; The table component monitors changes in the property props; Once the attribute changes are detected, the table component will use the new attribute value to request data from the server; After receiving the data returned by the server, update the table by re-rendering to show the new data.

2. A method for quickly building a table in a background management system as claimed in claim 1, characterized in that: The encapsulation is a component that uses JSON configuration + API calls to build components.

3. The method for quickly building a table in a background management system according to claim 1, characterized in that: The specific steps of packaging into components include: Decompose the table component into two parts: element configuration items and the tool method library Utils for parsing configuration items; The element configuration item defines the display content and behavior of the table through JSON data; The tool method library Utils uses logic inside the component to parse each element configuration item and render the table accordingly.

4. A method for quickly building a table in a background management system as described in claim 3, characterized in that: The element configuration items are formed based on the division of the page, and at least include: Action button configuration item, configure the Action button on the page, including the button text, icon, and click event; Table configuration items configure the Table on the page, including column definition, data binding, paging, and sorting.

5. A method for quickly building a table in a background management system as claimed in claim 3, characterized in that: The tool method library Utils contains a variety of practical methods to support the configuration and function implementation of page elements and tables, including: fnHelper is a function helper class method that contains helper functions used to simplify code logic or improve code readability; tpl template class method, used for template file management in projects or frameworks; Other class methods are used for service catalog management and initialization configuration management.

6. A method for quickly building a table in a background management system as claimed in claim 3, characterized in that: The element configuration items and the tool method library Utils are both written in TypeScript.

7. A method for quickly building a table in a background management system as claimed in claim 5, characterized in that: fnHelper function auxiliary class method, specifically divided into: Filter method: contains functions related to data filtering, which is used to filter data before display; HttpData method: includes sending requests and processing responses related to HTTP data interaction; Moment method: used for date formatting and time calculation; Service method: contains the code of the service layer, which is used to encapsulate business logic, including data acquisition business logic and data processing business logic; Validation method: Contains functions related to form validation or data validation, which are used to ensure the correctness of user input or data processing.

8. A method for quickly building a table in a background management system as claimed in claim 5, characterized in that: Tpl template class method, specifically broken down into: tpl / index information: the index directory of the template, including the template entry file or the main template configuration; tpl-builtin method: A directory of built-in templates, containing predefined template files.

9. A method for quickly building a table in a background management system as claimed in claim 5, characterized in that: Other class methods are specifically divided into: Services method: service directory, including API call codes and data processing codes related to various services; Index information: the entry file of the service directory, used to initialize and configure services; init method: Initialization function or method used to configure and initialize services when the application starts.

Images