Modularized addition, deletion, modification and check component development method implemented based on antd component

Abstract

The invention provides a modular addition, deletion, modification and check component development method implemented based on an antd component. The method comprises the following steps: using a mature open source component library stable version as a basic version of a front-end implementation page; developing a public component for realizing adding, deleting, modifying and checking functions, and developing a display component corresponding to three behavior states of adding, editing and checking; configuration item development, display and development of all configuration items, display and development of newly-added components, display and development of editing components, display and development of viewing components, and use of the newly-added, editing and viewing components in a page; the customization uses a common component. According to the invention, a modularized front-end development component for realizing function requirements of adding, deleting, modifying and checking is provided, a repeated part in the component is extracted as a public component, the public component is only defined once and can be reused, the service requirements are realized under the condition that codes are as few as possible, the maintenance cost of the component is reduced, and the development efficiency is improved; and customized component development is supported, and long-term expected requirements are better met.

Description

Technical Field

[0001] The present invention relates to the technical field of front - end development. Specifically, it relates to a development method for modular add, delete, modify, and query components implemented based on antd components. Background Art

[0002] Ant Design (abbreviated as antd) is a set of enterprise - level UI design languages and React component libraries. Ant Design aims to help developers build high - quality user interfaces. The components provided in the Ant Design component library are all common UI elements for page development. These components play the role of "parts" in front - end page development. How to piece together these "parts" into the expected page and achieve the expected interaction is the key point in front - end page development.

[0003] For the production of regular pages, the requirements can be met directly by front - end development using Ant Design components. However, for some interfaces with complex interactions, it is necessary to make corresponding components for various situations such as adding, editing, deleting, and list display, and then perform corresponding displays.

[0004] Currently, many front - end development projects directly perform functions such as adding, deleting, modifying, querying, and list display within the page. However, at present, the implementation methods of many front - end developments have weak capabilities to support the adjustment of configuration content. When the configuration content needs to be adjusted each time, there is no modular (patternized) modification idea, the modified content is not clear, and the maintainability is weak. And in many projects, when encountering front - end implementations that require customized development for the interactive behaviors of adding, deleting, modifying, querying, and list functions, the implementation code is complex, no common components are formed, resulting in code redundancy and repetition, and the component maintenance cost is high, which restricts the development efficiency. Summary of the Invention

[0005] In view of this, the purpose of the present invention is to develop a development method for modular add, delete, modify, and query components implemented based on antd components, provide development components for modular front - end implementation of the requirements for adding, deleting, modifying, and querying functions, extract the repeated parts in the components as common components, define them only once, and can be reused. Achieve business requirements with as little code as possible, thereby reducing the component maintenance cost and improving the development efficiency; support customized component development to better meet long - term expected requirements.

[0006] The present invention provides a development method for modular add, delete, modify, and query components implemented based on antd components, including the following steps:

[0007] S1. Use the stable version of a mature open - source component library as the basic version for front - end page implementation;

[0008] Specifically, in the current market where there are already so many excellent UI component libraries, the present invention uses the React framework and selects the 4.24 version of Ant Degion, and conducts customized development on this basis;

[0009] S2. Develop common components for implementing functions of adding, deleting, modifying, and querying. The common components include three outer frame components: a new outer frame component, an edit outer frame component, and a view outer frame component; based on the three outer frame components, develop display components corresponding to three behavior states of adding, editing, and viewing;

[0010] Specifically, in front-end development, it includes the function of storing various states. In the interaction of storing various states, the values of behavior states have three types: "new", "view", "edit", and the three types of behavior states correspond to different displays as shown in Figure 1 、 2 shown. In the developed components, first develop the display components corresponding to the above three behavior states of "new", "edit", and "view", and then show different interface effects according to different interaction behaviors.

[0011] S3. Use common components, including: development of configuration items, development of the display of all configuration items, development of the display of new components, development of the display of edit components, development of the display of view components, and use the add, edit, and view components on the page;

[0012] S4. Customize the use of common components.

[0013] Preferably, based on the new outer frame component, the edit outer frame component, and the view outer frame component, a simple add component, edit component, and view component can be developed, create the corresponding structure, and according to different configuration items, modify the content in role-configuration-body, and process the add and edit logics of the added field data, then a unique configured add, delete, modify module effect can be customized and created.

[0014] Further, the method for developing common components for implementing functions of adding, deleting, modifying, and querying in step S2 includes:

[0015] S21. Develop a new outer frame component, and pass in parameters: title configuration, configured content, delete disable, delete button click, hide delete button, style configuration of configured content;

[0016] The effect of the new outer frame component includes an outer frame composed of a dotted line and a delete icon.

[0017] S22. Develop the editing outer frame component, create a new configuration-editor folder, and develop it by referring to the index.tsx and index.module.css files in configuration-creator;

[0018] Specifically, as Figure 4 shown, the style of the editing outer frame component is currently similar to that of the newly added outer frame component, but the functions it represents are different. To make an obvious distinction, the present invention creates a new configuration-editor folder and develops it by referring to the index.tsx and index.module.css files in configuration-creator.

[0019] S23. Develop the viewing outer frame component and pass in the parameters: the configured title data, whether it is the last item, the collapsed content, delete disabled, edit disabled, delete button click, edit button click, hide the delete button, and hide the edit button.

[0020] The effects of the newly added outer frame component include an outer frame composed of solid lines, edit and delete icons, and a collapse icon.

[0021] Further, the method for developing the configuration items in step S3 includes:

[0022] Configuration item development; in one embodiment of the present invention, there are three configuration items: name, CPU, and memory. Create a new role-configuration folder for storing the configuration items, and then create three files in the role-configuration folder to implement the configuration of the three configuration items: name, CPU, and memory respectively.

[0023] The implementation ideas of the three configuration items of CPU, name, and memory are the same. Referring to the development of the CPU configuration item, add the configuration of name and memory as well.

[0024] Further, the method for developing the display of all configuration items in step S3 includes:

[0025] Create a new role-configuration-body folder for splicing the configuration items and splice all the configuration items onto one page.

[0026] Each configuration item is equivalent to a "part", and the display of all configuration items is equivalent to assembling all the "parts" onto one page.

[0027] Further, the method for developing the display of the newly added component in step S3 includes:

[0028] Use the newly added outer frame component in step S21, pass in the title configuration, set up the input box, configure the content of the name, CPU, and memory through the input box, add two buttons, namely the save button and the cancel button. When the save button is clicked, write the corresponding data logic to save the data of the currently newly added configuration; when the cancel button is clicked, do not save the currently newly added data.

[0029] Further, the method for developing the display of the editing component in step S3 includes:

[0030] Create a new role-editor file. Compared with the RoleCreator component, add a new field for configuration item data in the RoleEditor component in role-editor / index.tsx, and supplement the logic for initializing data according to the field of the configuration item data.

[0031] The display of the editing component is similar to that of the newly added component, except that there is initial data during editing, and the logic for saving data is to edit an existing piece of data. Therefore, referring to the implementation of role-creator (role creation), create a new role-editor file. In the RoleEditor component in role-editor / index.tsx, a new field for configuration item data is added compared to RoleCreator, and the logic for initializing data can be supplemented according to this field.

[0032] Further, the method for developing the display of the viewing component in step S3 includes:

[0033] Use the viewing outer frame component to display the content of the title configuration and the content of the CPU and memory configurations, and display them in the form of a table; click the edit icon to display and edit the configuration items, and click the delete button to delete the corresponding configuration items.

[0034] Further, the method for using the newly added, editing, and viewing components on the page in step S3 includes:

[0035] Store the list data in the form form, and traverse the list data. By default, the viewing component is displayed. When there is a new addition operation, the newly added component is displayed; when there is an editing operation, the editing component is displayed; after the operation is saved, the newly added and edited data is saved to the list data in the form form.

[0036] Specifically, after the new, edit, and view components are developed, they need to be combined for use. In the initial state, the view component is displayed. When the new button is clicked, the content of the new component is shown. After the new content is saved, the content of the view component is displayed in the list. When the edit icon in the view component is clicked, the edit component for the selected item is shown. When the edit is cancelled, the data remains unchanged. After the edit is saved, the new edited data content is shown in the list.

[0037] The above-mentioned new outer frame component, edit outer frame component, view outer frame component, new component, edit component, and view component are only preferred embodiments. When customizing the use, the idea of this preferred embodiment can be referred to, and it is not necessary to implement it exactly according to this preferred embodiment. Abstract the different displays of operations into individual components, and determine which component to display based on whether the stored behavior state is in the new or edit state.

[0038] At present, there is no solution with the same effect to achieve the technical purpose of the present invention. Although the Formlist component is provided in the Ant Design component library, which can quickly achieve the effect of adding, deleting, modifying, and querying, when the expected styles are significantly inconsistent, using the Formlist component will make the logic more complex and the style handling more troublesome. Therefore, the present invention is a better solution by rewriting a public component with a clear structure.

[0039] The present invention also provides a computer-readable storage medium, on which a computer program is stored. When the program is executed by a processor, it realizes the steps of the modular add, delete, modify, and query component development method implemented based on antd components as described above.

[0040] The present invention also provides a computer device, which includes a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the program, it realizes the steps of the modular add, delete, modify, and query component development method implemented based on antd components as described above.

[0041] Compared with the prior art, the beneficial effects of the present invention are as follows:

[0042] The modular add, delete, modify, and query component development method provided by the present invention based on Ant Design UI components develops component for realizing the functional requirements of adding, deleting, modifying, and querying through a modular front-end. The repeated parts in the components are extracted as public components, which are defined only once and can be reused. It can realize business requirements with as little code as possible, reduce the component maintenance cost, and effectively improve the development efficiency; it supports customized component development and can better meet long-term expected requirements. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] Various other advantages and benefits will become apparent to those of ordinary skill in the art by reading the following detailed description of the preferred embodiments. The drawings are only for the purpose of showing the preferred embodiments and are not considered to be a limitation of the present invention.

[0044] In the drawings:

[0045] Figure 1 is the actual interface diagram of the new configuration of the embodiment of the present invention;

[0046] Figure 2 is the actual interface diagram of the editing configuration of the embodiment of the present invention;

[0047] Figure 3 is the actual interface diagram of the new outer frame component of the embodiment of the present invention;

[0048] Figure 4 is the actual interface diagram of the editing outer frame component of the embodiment of the present invention;

[0049] Figure 5 is the actual interface diagram of the expansion effect of the new outer frame component of the embodiment of the present invention;

[0050] Figure 6 is the actual interface diagram of the folding effect of the new outer frame component of the embodiment of the present invention;

[0051] Figure 7 is the structural interface diagram of the configuration item development of the embodiment of the present invention after adding the name and memory configuration;

[0052] Figure 8 is the structural interface diagram of the configuration item splicing for the display of the configuration item of the embodiment of the present invention;

[0053] Figure 9 is the actual interface diagram of the display content of the new component developed for the display of the new component of the embodiment of the present invention;

[0054] Figure 10 is the actual interface diagram of the display content developed for the editing component of the embodiment of the present invention;

[0055] Figure 11 is the actual interface diagram of the display content developed for the viewing component of the embodiment of the present invention;

[0056] Figure 12 is the actual interface diagram when the viewing component of the embodiment of the present invention is folded;

[0057] Figure 13 is the flowchart of the development method of the modular addition, deletion, modification, and query component based on the antd component of the present invention;

[0058] Figure 14The method flow chart for developing a common component that realizes the functions of adding, deleting, modifying, and querying in the present invention;

[0059] Figure 15 The schematic diagram of the composition of the computer device according to the embodiment of the present invention. Detailed implementation manners

[0060] Here, the exemplary embodiments will be described in detail, and the examples are shown in the drawings. When the following description refers to the drawings, unless otherwise indicated, the same numbers in different drawings represent the same or similar elements. The implementation manners described in the following exemplary embodiments do not represent all implementation manners consistent with the present disclosure. On the contrary, they are merely examples of devices and products consistent with some aspects of the present disclosure as detailed in the appended claims.

[0061] The terms used in the present disclosure are only for the purpose of describing specific embodiments and are not intended to limit the present disclosure. The singular forms "a", "the", and "said" used in the present disclosure and the appended claims are also intended to include the plural forms unless the context clearly indicates otherwise. It should also be understood that the term "and / or" used herein refers to and includes any or all possible combinations of one or more of the associated listed items.

[0062] It should be understood that although the terms first, second, third, etc. may be used in the present disclosure to describe various information, such information should not be limited to these terms. These terms are only used to distinguish the same type of information from each other. For example, without departing from the scope of the present disclosure, the first information may also be referred to as the second information, and similarly, the second information may also be referred to as the first information. Depending on the context, the word "if" as used herein may be interpreted as "when" or "while" or "in response to a determination".

[0063] The following further elaborates on the embodiments of the present invention.

[0064] The embodiment of the present invention provides a method for developing a modular component for adding, deleting, modifying, and querying based on antd components. Refer to Figure 13 As shown, it includes the following steps:

[0065] S1. Use the stable version of a mature open-source component library as the basic version for implementing the page front-end;

[0066] Specifically, in the case that there are already so many excellent UI component libraries in the current market, the present invention uses the React framework, selects the 4.24 version of Ant Degion, and performs customized development on this basis;

[0067] S2. Develop a common component that implements the functions of adding, deleting, modifying, and querying. The common component includes three outer frame components: an add outer frame component, an edit outer frame component, and a view outer frame component. Based on the three outer frame components, develop display components corresponding to three behavioral states: add, edit, and view.

[0068] For the method of developing a common component that implements the functions of adding, deleting, modifying, and querying, see Figure 14 as shown below, including:

[0069] S21. Develop an add outer frame component and pass in parameters: title configuration, configured content, delete disable, delete button click, hide delete button, and style configuration of the configured content.

[0070] As Figure 3 shown, the effect of the add outer frame component includes an outer frame surrounded by a dotted line and a delete icon.

[0071] The specific implementation is as follows (the sigma-ui component used in the code is a partial customization of ant-design 4. Here, the ant-design 4 component or other UI components can also be directly used):

[0072] For the file configuration-creator / index.tsx, the code is as follows:

[0073]

[0074] For the file configuration-creator / index.module.css, the code is as follows:

[0075]

[0076] S22. Develop an edit outer frame component, create a new folder configuration-editor, and develop it by referring to the index.tsx and index.module.css files in configuration-creator.

[0077] Specifically, as Figure 4 shown, the style of the edit outer frame component is currently similar to that of the add outer frame component, but the functions it represents are different. To make an obvious distinction, the present invention creates a new folder configuration-editor and develops it by referring to the index.tsx and index.module.css files in configuration-creator.

[0078] S23. Develop a view outer frame component and pass in the following parameters: the configured title data, whether it is the last item, the collapsed content, delete disabled, edit disabled, delete button click, edit button click, hide the delete button, and hide the edit button.

[0079] The expanded effect of the newly added outer frame component is as Figure 5 shown, including an outer frame composed of solid lines, edit and delete icons, and a collapse icon. The collapse effect is as Figure 6 shown.

[0080] The specific implementation is as follows:

[0081] In the folder configuration-viewer / index.tsx, the code is as follows:

[0082] .

[0083] In the folder configuration-viewer / index.module.css, the code is as follows:

[0084]

[0085] Specifically, in front-end development, it includes the function of storing various states. In the interaction of storing various states, the values of the behavior states have three types: "new", "view", and "edit". The three types of behavior states correspond to different displays as Figure 1 、 2 shown. In the developed components, first develop the display components corresponding to the above three behavior states of "new", "edit", and "view", and then show different interface effects according to different interaction behaviors.

[0086] S3. Use common components, including: configuration item development, display development of all configuration items, display development of new components, display development of edit components, display development of view components, and use the new, edit, and view components on the page;

[0087] The methods for configuration item development include:

[0088] Configuration item development; in one embodiment of the present invention, there are three configuration items: name, CPU, and memory. Create a new role-configuration folder for storing the configuration items, and then create three files in the role-configuration folder to implement the configuration of the three configuration items: name, CPU, and memory respectively.

[0089] The CPU configuration item is a form item, including the corresponding label and radio box. The code is as follows:

[0090]

[0091] The implementation ideas for the three configuration items of CPU, name, and memory are the same. Referring to the development of the CPU configuration item, add the configurations of name and memory. After adding, the structure is as Figure 7 shown.

[0092] The methods for developing the display of all configuration items include:

[0093] Create a new role-configuration-body folder, splice the configuration items, and splice all the configuration items onto one page.

[0094] Each configuration item is equivalent to a "part", and the display of all configuration items is equivalent to assembling all the "parts" onto one page.

[0095] The structure is as Figure 8 shown. The code is as follows:

[0096]

[0097] The methods for developing the display of the newly added component include:

[0098] Use the newly added outer frame component in step S21, pass in the title configuration, set the input box, configure the content of name, CPU, and memory through the input box, add two buttons, namely the save button and the cancel button. When the save button is clicked, write the corresponding data logic to save the data of the currently newly added configuration; when the cancel button is clicked, do not save the currently newly added data.

[0099] The display content of the newly added component is as Figure 9 shown. As can be seen from the content in Figure 9 , use the newly added outer frame component in step S21, pass in the title configuration, set an input box, and configure the content of name, CPU, and memory. Add two buttons, namely the save button and the cancel button. When the save button is clicked, the corresponding data logic can be written to save the data of the current configuration; when the cancel button is clicked, the currently newly added data can be not saved.

[0100] For the folder role-creator / index.tsx: The code implementation is as follows:

[0101]

[0102] The methods for developing the display of the edit component include:

[0103] Create a new role-editor file. Compared with the RoleCreator component, add a field for configuration item data to the RoleEditor component in role-editor / index.tsx, and supplement the logic for initializing data according to the field of the configuration item data.

[0104] As Figure 10 shown, the display of the editing component is similar to that of the new component, except that there is initial data during editing, and the logic for saving data is to edit an existing piece of data. Therefore, referring to the implementation of role-creator (role creation), create a new role-editor file. In the RoleEditor component in role-editor / index.tsx, add a field for configuration item data compared to RoleCreator, and supplement the logic for initializing data according to this field.

[0105] The methods for developing the display of the viewing component include:

[0106] Use the viewing frame component to display the content configured in the title, as well as the content configured for CPU and memory, and display it in the form of a table; click the edit icon to display and edit the configuration items, and click the delete button to delete the corresponding configuration items.

[0107] When the viewing component is expanded, the displayed content is as Figure 11 shown; when folded, the displayed content is as Figure 12 shown.

[0108] From Figure 11 the content, it can be seen that the viewing frame component in step S23 is used to display the content configured in the title, which is the configured name here. CPU and memory are the configured content and are displayed in the form of a table. You can click the edit and delete icons in the upper right corner. Click the edit icon to display and edit the configuration items, and click the delete button to delete the configuration item.

[0109] The specific implementation is as follows:

[0110] For the folder role-viewer / index.tsx, the file content is as follows:

[0111]

[0112] For the folder role-viewer / expand-content / index.tsx, the code implementation is as follows:

[0113]

[0114] The methods for using the newly added, edited, and viewed components on the page include:

[0115] Store the list data in the form and traverse the list data. By default, the viewed component is shown. When there is an add operation, the added component is shown; when there is an edit operation, the edited component is shown; after the operation is saved, the added and edited data is saved to the list data in the form.

[0116] Specifically, after the newly added, edited, and viewed components are developed, they need to be combined for use. In the initial state, the viewed component is shown. When the add button is clicked, the content of the added component is shown. After the add is saved, the content of the viewed component is shown in the list; when the edit icon in the viewed component is clicked, the edited component of the selected item is shown. When the edit is cancelled, the data remains unchanged. After the edit is saved, the new edited data content is shown in the list.

[0117] S4. Customize the use of common components.

[0118] Based on the newly added frame component, edited frame component, and viewed frame component, develop a simple newly added component, edited component, and viewed component, create the corresponding structure, and modify the content in role-configuration-body according to different configuration items to handle the addition and editing logic of the newly added field data, and then a unique configured add, delete, and modify module effect can be customized.

[0119] The embodiment of the present invention also provides a computer device. Figure 15 It is a schematic structural diagram of a computer device provided by the embodiment of the present invention; see the attached drawing Figure 15 As shown, the computer device includes: an input system 23, an output system 24, a memory 22, and a processor 21; the memory 22 is used to store one or more programs; when the one or more programs are executed by the one or more processors 21, the one or more processors 21 implement the modular add, delete, modify, and query component development method based on antd components as provided in the above embodiment; among them, the input system 23, output system 24, memory 22, and processor 21 can be connected through a bus or other means. Figure 15 Taking the connection through the bus as an example.

[0120] The memory 22, as a computable device-readable and writable storage medium, can be used to store software programs and computer-executable programs, such as the program instructions corresponding to the modular CRUD component development method implemented based on antd components as described in the embodiments of the present invention; the memory 22 may mainly include a program storage area and a data storage area. Among them, the program storage area can store an operating system and application programs required for at least one function; the data storage area can store data created according to the use of the device, etc.; in addition, the memory 22 can include high-speed random access memory, and can also include non-volatile memory, such as at least one magnetic disk storage device, a flash memory device, or other non-volatile solid-state storage devices; in some instances, the memory 22 can further include a memory remotely set relative to the processor 21, and these remote memories can be connected to the device through a network. Examples of the above network include but are not limited to the Internet, an enterprise intranet, a local area network, a mobile communication network, and combinations thereof.

[0121] The input system 23 can be used to receive input digital or character information, and generate key signal inputs related to the user settings and function control of the device; the output system 24 can include display devices such as a display screen.

[0122] The processor 21 executes various functional applications and data processing of the device by running the software programs, instructions, and modules stored in the memory 22, that is, implements the above-mentioned modular CRUD component development method implemented based on antd components.

[0123] The above-provided computer device can be used to execute the modular CRUD component development method implemented based on antd components provided in the above embodiments, and has corresponding functions and beneficial effects.

[0124] An embodiment of the present invention further provides a storage medium containing computer-executable instructions. When the computer-executable instructions are executed by a computer processor, they are used to execute the modular addition, deletion, modification, and query component development method implemented based on antd components as provided in the above embodiment. The storage medium is any of various types of memory devices or storage devices, including: installation media such as CD-ROMs, floppy disks, or tape systems; computer system memories or random access memories such as DRAM, DDR RAM, SRAM, EDO RAM, Rambus RAM, etc.; non-volatile memories such as flash memories, magnetic media (such as hard disks or optical storage); registers or other similar types of memory elements, etc.; the storage medium may also include other types of memories or combinations thereof; additionally, the storage medium may be located in a first computer system in which the program is executed, or may be located in a different second computer system that is connected to the first computer system through a network (such as the Internet); the second computer system may provide program instructions to the first computer for execution. The storage medium includes two or more storage media that may reside in different locations (such as in different computer systems connected through a network). The storage medium can store program instructions executable by one or more processors (such as specifically implemented as a computer program).

[0125] Of course, the computer-executable instructions of a storage medium containing computer-executable instructions provided by an embodiment of the present invention are not limited to the modular addition, deletion, modification, and query component development method implemented based on antd components as described in the above embodiment, and can also execute related operations in the modular addition, deletion, modification, and query component development method implemented based on antd components provided by any embodiment of the present invention.

[0126] So far, the technical solution of the present invention has been described in combination with the preferred embodiments. However, it is easy for those skilled in the art to understand that the protection scope of the present invention is obviously not limited to these specific embodiments. Without departing from the principle of the present invention, those skilled in the art can make equivalent changes or substitutions to the relevant technical features, and the technical solutions after these changes or substitutions will all fall within the protection scope of the present invention.

[0127] The above are only the preferred embodiments of the present invention and are not used to limit the present invention; for those skilled in the art, the present invention can have various changes and variations. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. A modular add, delete, modify and query component development method based on antd components, characterized in that: The following steps are involved: S1. Use the mature stable version of the open source component library as the basic version of the front-end implementation page; S2. Develop a common component that implements the functions of adding, deleting, modifying, and checking. The common component includes three outer frame components: a new outer frame component, an edit outer frame component, and a view outer frame component. Based on the three outer frame components, develop display components corresponding to the three behavior states of adding, editing, and checking. S3. Use public components, including: configuration item development, display development of all configuration items, display development of new components, display development of edit components, display development of view components, and use the new, edit, and view components on the page; S4. Customized use of common components.

2. According to the modular add, delete, modify and query component development method based on antd component implementation in claim 1, it is characterized in that: The method of developing a common component for implementing the functions of adding, deleting, modifying and checking in step S2 includes: S21. Develop a new frame component and pass in parameters: title configuration, configuration content, delete disable, delete button click, hide delete button, and style configuration of configuration content; S22. Develop and edit the outer frame component, add a new configuration-editor folder, and refer to the index.tsx and index.module.css files in configuration-creator for development; S23. Develop a view frame component and pass in the following parameters: configured title data, whether it is the last item, collapsed content, delete disabled, edit disabled, delete button clicked, edit button clicked, hide delete button, hide edit button.

3. The modular add, delete, modify and query component development method based on antd component implementation according to claim 2 is characterized in that: The method for developing the configuration items in step S3 includes: Configuration item development: create a new role-configuration folder to store configuration items, and then create three new files in the role-configuration folder to implement three configuration items: name, CPU, and memory configuration.

4. The modular add, delete, modify and query component development method based on antd component implementation according to claim 1 is characterized in that: The method for displaying and developing all configuration items of the S3 step includes: Create a new role-configuration-body folder, splice the configuration items, and splice all the configuration items onto one page.

5. The modular add, delete, modify and query component development method based on antd component implementation according to claim 3 is characterized in that: The method for displaying and developing the newly added components of step S3 includes: Use the newly added outer frame component of step S21, pass in the title configuration, set the input box, configure the name, CPU and memory content through the input box, add two buttons, Save and Cancel, and when the Save button is clicked, write the corresponding data logic to save the currently newly configured data; when the Cancel button is clicked, the currently newly added data is not saved.

6. The modular add, delete, modify and query component development method based on antd component implementation according to claim 1 is characterized in that: The method for displaying and developing the editing component of the S3 step includes: Create a new role-editor file. Compared with the RoleCreator component, the RoleEditor component in role-editor / index.tsx adds a field for configuration item data, and adds logic for initializing data based on the field for configuration item data.

7. The modular add, delete, modify and query component development method based on antd component implementation according to claim 2 is characterized in that: The method for developing the display of the viewing component in step S3 includes: Use the View Frame component to display the contents of the title configuration, as well as the contents of the CPU and memory configurations in a table format; click the edit icon to edit the configuration items, and click the delete button to delete the corresponding configuration items.

8. The modular add, delete, modify and query component development method based on antd component implementation according to claim 1 is characterized in that: The method of using the add, edit, and view components in the page in step S3 includes: Store the list data in the form and traverse the list data. By default, the viewing component is displayed. When there is a new operation, the new component is displayed; when there is an edit operation, the edit component is displayed; after the operation is saved, the new and edited data are saved in the list data of the form.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by the processor, the steps of the modular add, delete, modify and query component development method based on the antd component as described in any one of claims 1 to 8 are implemented.

10. A computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the program, the steps of the modular add, delete, modify and query component development method based on the antd component as described in any one of claims 1 to 8 are implemented.

Images