Front-end component construction method and device, computer equipment and storage medium

Abstract

The invention belongs to the technical field of component construction, and relates to a front-end component construction method and device, computer equipment and a storage medium, and the method comprises the steps: respectively defining a first-layer button component, a second-layer input component, a third-layer table component and a fourth-layer sub-component; obtaining component configuration requirements, and configuring the first-layer button component, the second-layer input component, the third-layer table component and the fourth-layer sub-component according to the component configuration requirements; and previewing and online the first-layer button component, the second-layer input component, the third-layer table component and the fourth-layer sub-component which are subjected to component configuration. The development efficiency is improved, and repeated labor is reduced through component reuse; the expandability and maintainability of the system are enhanced, and addition and modification of subsequent functions are facilitated; meanwhile, the user experience is optimized, and the interface is more friendly and visual.

Description

Technical Field

[0001] The present invention relates to the technical field of component construction, and particularly to a method, device, computer device and storage medium for constructing front-end components. Background Art

[0002] A front-end component refers to a reusable and independent module specifically used to construct various parts of a user interface. These components can be basic UI elements, such as buttons, input boxes, navigation bars, etc., or more complex functional modules, such as carousel diagrams, modal boxes, form validation components, etc. Componentization is the core concept of modern front-end development. By splitting the interface into independent and combinable parts, each component is responsible for its own logic and style, greatly improving the maintainability, scalability and reusability of the code. Front-end components are widely used in various Web applications and websites to achieve efficient interface construction and flexible function expansion.

[0003] Existing front-end components cannot achieve the combination of VUE and request carriers, cannot achieve the standard componentization encapsulation of button components, search components, and list components, and cannot enable users who do not master programming languages to complete software development according to business requirements. For example: VUE uses keyword conventions for the syntax and semantics of code, but multiple code styles can appear while observing the syntax and semantics. On the other hand, existing software systems or low-code platforms have many code blocks with mature VUE-specific functions, but lack a component library that integrates standard specifications, is general, and can be connected.

[0004] Other applications on the market, even if they have the characteristics of combining VUE and request carriers and can generate code through code block configuration, cannot both componentize button components, search components, and list components to achieve system development when users do not master programming languages. Summary of the Invention

[0005] In order to solve the above technical problems, the present invention provides a method for constructing front-end components, adopting the following technical solutions, including:

[0006] Define the first-layer button component, and the first-layer button component includes a button container, a query button, a reset button, a new button, an edit button, a delete button, an export Excel button, and an import Excel button;

[0007] Define the second-layer input component, and the second-layer input component includes a search container, a form container, a text box, a dropdown box, a pop-up selection box, a date box, and a number box;

[0008] Define the third-layer table component, and the third-layer table component includes a table and a table container;

[0009] Define the fourth-layer sub-component, where the fourth-layer sub-component includes a general pop-up container, a department component, an employee number component, and an attachment component;

[0010] Obtain the component configuration requirements, and configure the first-layer button component, the second-layer input component, the third-layer table component, and the fourth-layer sub-component according to the component configuration requirements;

[0011] Preview and go live with the first-layer button component, the second-layer input component, the third-layer table component, and the fourth-layer sub-component that have completed component configuration.

[0012] Preferably, the steps of defining the first-layer button component, where the first-layer button component includes a button container, a query button, a reset button, a new button, an edit button, a delete button, an export Excel button, and an import Excel button specifically include:

[0013] Define the first-layer button component based on VUE language and Element UI framework language;

[0014] Use CSS to design the style of the first-layer button component, and use the event binding mechanism of VUE to handle the click events of the first-layer button component.

[0015] Preferably, the steps of defining the second-layer input component, where the second-layer input component includes a search container, a form container, a text box, a drop-down box, a pop-up selection box, a date box, and a number box specifically include:

[0016] Define the second-layer input component based on VUE language and Element UI framework language;

[0017] Use the data binding mechanism of Vue to bind the second-layer input component to a data object; use the validation mechanism of Vue or custom validation logic to validate the data.

[0018] Preferably, the steps of defining the third-layer table component, where the third-layer table component includes a table and a table container specifically include:

[0019] Define the third-layer table component based on VUE language and Element UI framework language;

[0020] Use the data binding mechanism of Vue to bind a data object to the third-layer table component; use the event binding mechanism of Vue to handle the interaction operations in the third-layer table component.

[0021] Preferably, the steps of defining the fourth - layer sub - component, where the fourth - layer sub - component includes a general pop - up container, a department component, an employee number component, and an attachment component, specifically include:

[0022] Define the fourth - layer sub - component based on VUE language and Element UI framework language;

[0023] Use Vue's data - binding mechanism to bind data objects to the fourth - layer sub - component; use Vue's event - binding mechanism to handle interaction operations in the fourth - layer sub - component.

[0024] Preferably, the steps of obtaining component configuration requirements and configuring the first - layer button component, the second - layer input component, the third - layer table component, and the fourth - layer sub - component according to the component configuration requirements specifically include:

[0025] Analyze business requirements, formulate a unified component configuration specification, and collect component configuration information according to the component configuration specification;

[0026] Configure the first - layer button component according to the configuration information;

[0027] Configure the second - layer input component according to the configuration information;

[0028] Configure the third - layer table component according to the configuration information;

[0029] Configure the fourth - layer sub - component according to the configuration information.

[0030] Preferably, the steps of previewing and going live for the first - layer button component, the second - layer input component, the third - layer table component, and the fourth - layer sub - component that have completed component configuration specifically include:

[0031] Preview the effects and interaction logics of the first - layer button component, the second - layer input component, the third - layer table component, and the fourth - layer sub - component on a local development server through a browser to check if they meet expectations;

[0032] Test the functions of the first - layer button component, the second - layer input component, the third - layer table component, and the fourth - layer sub - component;

[0033] Package the codes of the first - layer button component, the second - layer input component, the third - layer table component, and the fourth - layer sub - component into a deployable package file;

[0034] Conduct online verification and monitoring on the package file.

[0035] To solve the above - mentioned technical problems, the present invention also provides a front - end component construction device, which adopts the following technical solutions, including:

[0036] The first-layer component module is used to define the first-layer button components, and the first-layer button components include a button container, a query button, a reset button, a new button, an edit button, a delete button, an export Excel button, and an import Excel button;

[0037] The second-layer component module is used to define the second-layer input components, and the second-layer input components include a search container, a form container, a text box, a drop-down box, a pop-up selection box, a date box, and a number box;

[0038] The third-layer component module is used to define the third-layer table components, and the third-layer table components include a table and a table container;

[0039] The fourth-layer component module is used to define the fourth-layer sub-components, and the fourth-layer sub-components include a general pop-up container, a department component, an employee ID component, and an attachment component;

[0040] The configuration module is used to obtain component configuration requirements, and configure the first-layer button components, the second-layer input components, the third-layer table components, and the fourth-layer sub-components according to the component configuration requirements; the preview and online module is used to preview and go online for the first-layer button components, the second-layer input components, the third-layer table components, and the fourth-layer sub-components after completing the component configuration.

[0041] To solve the above technical problems, the present invention also provides a computer device, which adopts the following technical solution, including a memory and a processor. Computer-readable instructions are stored in the memory, and when the processor executes the computer-readable instructions, the steps of the above-mentioned front-end component construction method are implemented.

[0042] To solve the above technical problems, the present invention also provides a computer-readable storage medium, which adopts the following technical solution. Computer-readable instructions are stored on the computer-readable storage medium, and when the computer-readable instructions are executed by a processor, the steps of the above-mentioned front-end component construction method are implemented.

[0043] Compared with the prior art, the present invention mainly has the following beneficial effects: By adopting a hierarchical definition method, first define the first-layer button component containing various buttons to provide rich operation options for the page; then define the second-layer input component, covering various input elements to meet the user's data entry needs; the third-layer table component is responsible for data display to make information more intuitive; finally, define the fourth-layer sub-component to provide general and specific function extensions, such as pop-up containers, department selection, etc.; after obtaining the component configuration requirements, configure each layer of components according to the requirements. This process improves the reusability and flexibility of the components. By configuration rather than hard coding, it can respond to demand changes faster and reduce maintenance costs; after completion of configuration, preview and go live with the components to ensure the correctness of functions and the smoothness of the user experience; improves development efficiency by reducing repetitive labor through component reuse; enhances the scalability and maintainability of the system, facilitating the addition and modification of subsequent functions; at the same time, it also optimizes the user experience, making the interface more friendly and intuitive. BRIEF DESCRIPTION OF THE DRAWINGS

[0044] In order to more clearly illustrate the solutions in the present invention, the following will briefly introduce the drawings required for description in the embodiments of the present invention. Obviously, the following-described drawings are some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on these drawings.

[0045] Figure 1 is a flowchart of an embodiment of the method for constructing a front-end component of the present invention;

[0046] Figure 2 is a schematic structural diagram of an embodiment of the front-end component construction device of the present invention;

[0047] Figure 3 is a schematic structural diagram of an embodiment of the computer device of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0048] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by those of ordinary skill in the technical field to which this invention belongs; the terms used in the specification of this application herein are only for the purpose of describing specific embodiments and are not intended to limit the present invention; the terms "including" and "having" and any variations thereof in the specification and claims of the present invention and the above drawings are intended to cover non-exclusive inclusion. The terms "first", "second", etc. in the specification and claims of the present invention or the above drawings are used to distinguish different objects and are not used to describe a specific order.

[0049] References to "embodiments" in this specification mean that the particular features, structures, or characteristics described in connection with the embodiments can be included in at least one embodiment of the invention. The phrase appears in various places in the specification and does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment mutually exclusive with other embodiments. Those skilled in the art will explicitly and implicitly understand that the embodiments described herein can be combined with other embodiments.

[0050] To enable those skilled in the art to better understand the solution of the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings.

[0051] It should be noted that the front-end component construction method provided by the embodiments of the present invention is generally executed by a server / terminal device. Correspondingly, the front-end component construction device is generally provided in the server / terminal device.

[0052] It should be understood that the numbers of terminal devices, networks, and servers are merely illustrative. Any number of terminal devices, networks, and servers can be provided according to actual needs.

[0053] Embodiment 1

[0054] Please refer to Figure 1 , which shows a flowchart of an embodiment of the front-end component construction method of the present invention. The front-end component construction method includes the following steps:

[0055] Step S1: Define the first-layer button component. The first-layer button component includes a button container, a query button, a reset button, a new button, an edit button, a delete button, an export Excel button, and an import Excel button.

[0056] In this embodiment, the electronic device (such as a server / terminal device) on which the front-end component construction method runs can receive a front-end component construction request through a wired connection or a wireless connection. It should be noted that the above wireless connection methods can include, but are not limited to, 3G / 4G / 5G connections, WiFi connections, Bluetooth connections, WiMAXX connections, Zigbee connections, UWB (ultra-wideband) connections, and other currently known or future-developed wireless connection methods.

[0057] In this embodiment, step S1 can specifically include the following steps:

[0058] S11: Define the first-layer button component based on the VUE language and the Element UI framework language.

[0059] Define the button container: Use <el-button>Component, which defines the container of the button, sets the styles (such as size, color) and behaviors (such as click events) of the button, and defines the styles and behaviors of the button container.

[0060] Define the query button: In the button container, add a query button and bind a click event to trigger the query operation. Define the function of the query button, which is used to trigger the query operation.

[0061] Define the reset button: In the button container, add a reset button and bind a click event to trigger the reset operation. Define the function of the reset button, which is used to reset the form data.

[0062] Define the add button: In the button container, add an add button and bind a click event to trigger the add operation. Define the function of the add button, which is used to trigger the add operation.

[0063] Define the edit button: In the button container, add an edit button and bind a click event to trigger the edit operation. Define the function of the edit button, which is used to trigger the edit operation.

[0064] Define the delete button: In the button container, add a delete button and bind a click event to trigger the delete operation. Define the function of the delete button, which is used to trigger the delete operation.

[0065] Define the export Excel button: In the button container, add an export Excel button and bind a click event to trigger the export operation. Define the function of the export Excel button, which is used to export the table data to an Excel file.

[0066] Define the import Excel button: In the button container, add an import Excel button and bind a click event to trigger the import operation. Define the function of the import Excel button, which is used to import an Excel file into the table.

[0067] The usage logic of the button component can be defined. First, use the button container on the page, and then add query buttons, reset buttons, add buttons, edit buttons, delete buttons, export Excel buttons, and import Excel buttons to the button container as needed.

[0068] S12. Use CSS to design the styles of the first-layer button components, and use the event binding mechanism of VUE to handle the click events of the first-layer button components.

[0069] Define a unified button style using CSS, such as background color, border, font size, and hover effect. For each button (button container, query button, reset button, etc.), differential design can be carried out through class selectors, such as different colors or icons. In Vue, use the `v-on:click` or the shorthand `@click` directive to bind click event handling functions. For example, bind `@click=handleQuery` to the query button and `@click=handleReset` to the reset button, etc., to ensure that the click of each button can trigger the corresponding Vue method and implement the business logic. Through the combination of CSS and Vue, both the aesthetics of the button and the interactivity of the function are ensured.

[0070] Step S2, define the second-layer input components. The second-layer input components include a search container, a form container, a text box, a dropdown box, a pop-up selection box, a date box, and a number box.

[0071] In this embodiment, step S2 may specifically include the steps:

[0072] S21, based on the VUE language and the Element UI framework language, define the second-layer input components.

[0073] Define the search container: Use the layout component of Element UI to define a search container and place a search box and a search button in it. Define the style and behavior of the search container for placing the search box and the search button.

[0074] Define the form container: Use the form component of Element UI to define a form container and place input components such as text boxes and dropdown boxes in it. Define the style and behavior of the form container for placing various input components.

[0075] Define the text box: Use the <el-input>A component that defines a text box and sets its properties (such as placeholders, validation rules). Defines the style and behavior of the text box for entering text data.

[0076] Define a dropdown box: Use Element UI's <el-select>A component that defines a dropdown box and sets its option data. Defines the style and behavior of the dropdown box for selecting predefined data items.

[0077] Define a pop-up selection box: Use the dialog component and selection component of Element UI to define a pop-up selection box, and set its option data and callback events. Define the style and behavior of the pop-up selection box for selecting data items and returning them to the parent component.

[0078] Define a date box: Use the ` <el-date-picker>`Component, defines a date box and sets its properties (such as type, format). Defines the style and behavior of the date box for selecting date data.

[0079] Define a number box: Use the ` <el-input-number>`Component, define a number box and set its properties (such as minimum value, maximum value, step). Define the style and behavior of the number box for inputting numerical data.

[0080] Define text: Use the text component of Element UI or simple HTML tags to define text and set its style. Define the style and behavior of the text for displaying static text.

[0081] The usage logic of the second-layer input components can be defined. On the page, select to use a button container or a form container, and then add text boxes, dropdown boxes, pop-up selection boxes, date boxes, number boxes, and text as required to the container.

[0082] S22, Use Vue's data binding mechanism to bind the second-layer input components to the data object; use Vue's validation mechanism or custom validation logic to validate the data.

[0083] In Vue, the v-model directive can be used to achieve data binding, performing two-way binding between the second-layer input components (such as text boxes and dropdown boxes within the search container or form container) and the data object. For the validation mechanism, Vue provides various methods, such as using third-party libraries like VeeValidate or Vuelidate, or custom validation logic. By defining validation rules, such as required, minimum length, email format, etc., the validation can be triggered in the blur or change event of the component. When the validation fails, corresponding error messages can be displayed to prompt the user. The combination of this data binding and validation mechanism ensures the legality and integrity of the data, enhancing the user experience.

[0084] Step S3, Define the third-layer table component, which includes a table and a table container.

[0085] In this embodiment, step S3 can specifically include the steps:

[0086] S31, Based on the VUE language and the Element UI framework language, define the third-layer table component.

[0087] Define the table: Use the <el-table>A component that defines a table and sets its properties such as column data and data source. It defines the style and behavior of the table for displaying a list of data.

[0088] Define a table container: Use the layout component of Element UI to define a table container and place the table component and pagination component in it. Define the style and behavior of the table container for placing the table component and other related components (such as the pagination component).

[0089] The usage logic of the third - layer table component can be defined. Use the table container on the page and then add a table to the table container.

[0090] S32. Use Vue's data - binding mechanism to bind the data object to the third - layer table component; use Vue's event - binding mechanism to handle interaction operations in the third - layer table component.

[0091] In Vue, interaction with the third - layer table component can be achieved through data - binding and event - binding mechanisms. First, use `v - bind` or its shorthand `:` to bind the data object to the `props` of the table component to achieve one - way or two - way data flow. For example, bind the data source to the `data` property of the table to automatically render the table content. Second, use `v - model` to establish a two - way binding between form elements (such as input boxes) and the data model to facilitate updating the data when the user enters. Finally, use `v - on` or its shorthand `@` to listen for events in the table component, such as row click, cell editing, etc., and trigger corresponding methods to handle interaction operations to ensure a smooth user experience.

[0092] Step S4: Define the fourth - layer sub - component. The fourth - layer sub - component includes a general pop - up container, a department component, an employee number component, and an attachment component.

[0093] In this embodiment, step S4 can specifically include the following steps:

[0094] S41. Define the fourth - layer sub - component based on VUE language and Element UI framework language.

[0095] Define a general pop - up container for encapsulating pop - up components such as modal boxes and dialog boxes, providing unified pop - up logic and styles.

[0096] Define the department component, the employee number component, and the attachment component: Create sub - components with specific functions according to business requirements, such as a department selector and an employee number input box.

[0097] Reserve space for extension: Create a general component template or an empty component in the sub - component directory to facilitate subsequent expansion of new business components.

[0098] The usage logic of the fourth - layer sub - components can be defined. Use a common pop - up container on the page, and regard the common pop - up container as a complete page, and then add button containers, search containers, and table containers to the page as needed; while the department component, employee ID component, and attachment component in the sub - components are used in the search container or form container.

[0099] S42, Use Vue's data - binding mechanism to bind the data object to the fourth - layer sub - components; use Vue's event - binding mechanism to handle the interaction operations in the fourth - layer sub - components.

[0100] In the Vue framework, the interaction between the data object and the fourth - layer sub - components (common pop - up container, department component, employee ID component, and attachment component) can be achieved through the data - binding and event - binding mechanisms. First, use the `props` property to pass the data object from the parent component to the fourth - layer sub - components step by step to achieve data binding. Second, in the sub - components, use the `v - model` directive to achieve two - way binding between form elements and data. At the same time, use the `v - on` or `@` syntax to bind event - handling functions to handle user interaction operations in the sub - components, such as clicks, inputs, etc. In this way, Vue's data and event - binding mechanisms ensure efficient and flexible communication between the data object and the sub - components.

[0101] Step S5, Obtain the component configuration requirements, and configure the first - layer button components, second - layer input components, third - layer table components, and fourth - layer sub - components according to the component configuration requirements.

[0102] In this embodiment, step S5 can specifically include the steps:

[0103] S51, Analyze the business requirements, formulate a unified component configuration specification, and collect the configuration information of the components according to the component configuration specification.

[0104] Analyze the business requirements. For the first - layer button components, determine the click - event handling logic of each button, such as the backend interfaces and frontend processing logics corresponding to operations such as query, reset, new, edit, delete, export to Excel, and import from Excel; for the second - layer input components, clarify the data types, validation rules (such as non - empty validation, format validation, etc.), and default values of each input box; for the third - layer table components, determine the number of columns, column names, data display formats (such as date format, number format, etc.), sorting, and filtering functions of the table; for the fourth - layer sub - components, clarify the functional requirements of each sub - component, such as the pop - up logic of the common pop - up container, the acquisition and display of department data in the department component, the employee ID verification in the employee ID component, and the file upload and download in the attachment component.

[0105] Define the configuration items for each layer of components, as well as the corresponding value types, default values, etc. For example, for a button component, you can configure the button text, click event handling function, style class, etc.; for an input component, you can configure the input box type, placeholder, validation rules, etc.

[0106] For static configuration information (such as button text, table column names, etc.), it can be collected in the form of a configuration file.

[0107] For dynamic configuration information (such as department data and employee number lists dynamically loaded based on user selections), the user's selections or inputs can be collected through a form.

[0108] S52, configure the first-layer button components according to the configuration information.

[0109] Configure the text, click event handling function, and style of the button components according to the configuration information.

[0110] For the button container, create a container element to contain all the buttons. The layout method of the container (such as horizontal layout or vertical layout) can be set according to requirements.

[0111] For the query button, configure the button text (such as "Query"), click event handling function (call the backend query interface and update the table data), and style, etc.

[0112] For the reset button, configure the button text (such as "Reset"), click event handling function (clear the data in the input component), and style, etc.

[0113] For the add button, configure the button text (such as "Add"), click event handling function (open the add form or pop-up window), and style, etc.

[0114] For the edit button, configure the button text (such as "Edit"), click event handling function (open the edit form or pop-up window according to the selected row data), and style, etc. Note that the edit button may need to be linked with the table component to obtain the currently selected row data.

[0115] For the delete button, configure the button text (such as "Delete"), click event handling function (call the backend delete interface and refresh the table data), and style, etc. Similarly, the delete button may also need to be linked with the table component.

[0116] For the export Excel button, configure the button text (such as "Export Excel"), click event handling function (call the backend export interface and download the Excel file), and style, etc.

[0117] For the "Import Excel" button, configure the text of the "Import Excel" button (such as "Import Excel"), the click event handling function (open the file selection box and call the backend import interface after selecting a file), and the style, etc.

[0118] S53, configure the second-layer input components according to the configuration information.

[0119] According to the configuration information, configure the type, validation rules, default value, and data binding of the input components, etc.

[0120] For the search container, create a container element to contain the search box and the search button. The search box can be configured as a text box component, and the search button can be configured as a button component, and bind the corresponding click event handling function.

[0121] For the form container, create a container element to contain multiple input components (such as text boxes, dropdown boxes, pop-up selection boxes, date boxes, and number boxes, etc.).

[0122] For the text box, configure the placeholder, default value, validation rules (such as non-empty validation, length validation, etc.), and data binding of the text box, etc.

[0123] For the dropdown box, configure the option data of the dropdown box (which can be obtained from the backend interface or statically configured), the default value, and data binding, etc.

[0124] For the pop-up selection box, configure the trigger element of the pop-up selection box (such as a button or a text box), the option data, the callback function after selection, and the style, etc. The pop-up selection box is usually used in scenarios where one or more options need to be selected from multiple options.

[0125] For the date box, configure the date format, default value, validation rules (such as date range validation), and data binding of the date box, etc. The date box can provide a date picker for the user to select a date.

[0126] For the number box, configure the default value, validation rules (such as number range validation), and data binding of the number box, etc. The number box can restrict the user to only enter numbers and provide some additional functions (such as increase / decrease buttons).

[0127] S54, configure the third-layer table component according to the configuration information.

[0128] According to the configuration information, configure the number of columns, column names, data display format, sorting, and filtering functions of the table component, etc.

[0129] For the table container, create a container element to contain the table and the pagination component, etc.

[0130] For a table, configure the number of columns, column names, data display formats (such as date format, number format, etc.), sorting function, filtering function, etc. The table component usually supports obtaining data from a backend interface and dynamically updating the data according to the user's sorting and filtering conditions.

[0131] Column configuration: Configure column names, data field names, display formats, sorting rules, etc. for each column. For example, a date column can be configured to be displayed in date format and provide ascending / descending sorting functions.

[0132] Data binding: Bind the data source of the table to the data returned by the backend interface to ensure that the table can dynamically display the latest data.

[0133] Pagination function: Configure the number of items per page, current page number, total number of pages, etc. of the pagination component, and link it with the table component to achieve the function of displaying data in pages.

[0134] S55. Configure the fourth-level sub-components according to the configuration information.

[0135] Configure the functions, styles, data interaction, etc. of each sub-component according to the configuration information.

[0136] For a general pop-up container, configure the trigger element (such as a button or link) of the pop-up container, the pop-up content (which can be any Vue / React component), the pop-up position, style, etc. The pop-up container is usually used to display modal boxes, prompt boxes, confirmation boxes, etc.

[0137] For the department component, configure the data source of the department component (department data can be obtained from the backend interface), the display method (such as a dropdown box or a tree structure), and the callback function after selection, etc. The department component is used to select department information.

[0138] For the employee ID component, configure the verification rules (such as employee ID format verification), default value, and data binding, etc. The employee ID component is used to input and verify employee ID information.

[0139] For the attachment component, configure the file upload button, file list display area, file size limit, and callback function after upload, etc. The attachment component is used to upload and download attachment files.

[0140] There are functional divisions among the containers. Place buttons in the button container, which can automatically adjust the buttons to be in the appropriate positions on the page; place tables in the table container, which can be used as a retrieval identifier when submitting table data to the backend; place input components in the search container, which can be used as input parameters when calling the interface.

[0141] The required configurations of the containers all adopt common default values. In most cases, there is no need to change them, and even if changed, they are easy to use.

[0142] Supports configuring the interface URL. After the configuration is completed, it can be connected and debugged with the backend in real time. There is no need to participate in coding. Just complete the configuration of the interface parameters and the interface link.

[0143] The input parameter configuration of the interface is diversified, which can support message forms in object form and array form, and built-in options for automatically obtaining search containers and table containers. After the configuration is completed, the code development is also completed, greatly improving the development efficiency.

[0144] Step S6: Preview and go live with the first-layer button component, the second-layer input component, the third-layer table component, and the fourth-layer sub-component after completing the component configuration.

[0145] In this embodiment, step S6 may specifically include the steps:

[0146] S61: On the local development server, preview through a browser whether the effects and interaction logics of the first-layer button component, the second-layer input component, the third-layer table component, and the fourth-layer sub-component meet the expectations.

[0147] Start the local development server, deploy the project to the server. Open the browser, access the address of the local development server, and view the display effects and interaction logics of each component. Use browser debugging tools (such as Chrome DevTools) to check the HTML structure, CSS styles, and JavaScript code of the components to ensure there are no errors or warnings.

[0148] S62: Test the functions of the first-layer button component, the second-layer input component, the third-layer table component, and the fourth-layer sub-component.

[0149] Comprehensively test the functions of each component to ensure that all functions meet the expectations and there are no vulnerabilities.

[0150] Unit tests (using testing frameworks such as Jest, Mocha, etc.), integration tests (simulating the interaction between components), and end-to-end tests (using tools such as Cypress, Selenium, etc. to simulate user operations) can be carried out to comprehensively test the various functions of the components. The purpose of conducting comprehensive tests is to verify whether the component functions work as expected, including button click events, form submissions, data displays, etc., and ensure the correctness and integrity of the component functions.

[0151] Automated testing tools (such as Jest, Mocha, etc.) can also be used to write test cases to perform automated tests on the interaction logic, data binding, and styles of the components. Automated testing can greatly improve the testing efficiency and reduce human errors.

[0152] In some alternative implementation manners of this embodiment, it is also possible to adjust and adapt the styles of each layer of components. For example, write component styles using CSS or preprocessors (such as Sass, Less), and implement responsive design using media queries to ensure that the components can maintain good visual effects on different devices and screen sizes. This can enhance the user experience of the components and enable the components to maintain a consistent appearance and layout in different environments.

[0153] S63. Package the code of the first-layer button component, the second-layer input component, the third-layer table component, and the fourth-layer sub-component into a deployable package file.

[0154] Configure package.json: Create a package.json file in the root directory of the project and configure relevant meta-information, such as the name, version, description, entry file, etc. of the component library.

[0155] Package the component library: Run the packaging command (such as `vue-cli-service build --target lib`), and package the component code into an npm package. A directory will be generated in the root directory of the project, which contains the packaged files.

[0156] Configure the npm repository: If there is no private npm repository yet, it is necessary to set one up first. Tools such as Verdaccio can be used to quickly set up a private npm repository.

[0157] Configure the npm source: In the local development environment, configure the source of npm to the address of the private repository. This can ensure that when publishing the component library, it will be uploaded to the private repository instead of the public npm repository.

[0158] Log in to the npm repository: Run the `npm login` command in the terminal and enter the username, password, and email address of the npm repository as prompted. This will enable developers to publish packages to the private repository.

[0159] Publish the component library: Run the npm publish command in the terminal to publish the component library. This will upload the component library to the private npm repository.

[0160] The purpose of step S63 is to package the component code into a standardized format, which is convenient for reuse and deployment in other projects.

[0161] S64. Perform online verification and monitoring on the package file.

[0162] Use monitoring tools such as Sentry and New Relic to perform real-time monitoring on the performance of the components in the production environment.

[0163] Collect user feedback and log information to analyze the stability and performance of components.

[0164] Through step S64, it can be ensured that the components operate stably in the production environment, and potential problems can be discovered and fixed in a timely manner.

[0165] Implementing this embodiment has the following beneficial effects: By adopting a hierarchical definition method, first define the first-layer button component containing various buttons to provide rich operation options for the page; then define the second-layer input component, covering various input elements to meet the user's data entry needs; the third-layer table component is responsible for data display to make information more intuitive; finally, define the fourth-layer sub-component to provide general and specific function extensions, such as pop-up containers, department selection, etc.; after obtaining the component configuration requirements, configure each layer of components according to the requirements. This process improves the reusability and flexibility of the components. Through configuration rather than hard coding, it can respond to demand changes faster and reduce maintenance costs; after configuration, preview and go live with the components to ensure the correctness of functions and the smoothness of the user experience; improve development efficiency by reducing repetitive labor through component reuse; enhance the scalability and maintainability of the system, facilitating the addition and modification of subsequent functions; at the same time, optimize the user experience to make the interface more friendly and intuitive.

[0166] The present invention can be used in many general or specific computer system environments or configurations. For example: personal computers, server computers, handheld or portable devices, tablet devices, multi-processor systems, microprocessor-based systems, set-top boxes, programmable consumer electronic devices, network PCs, minicomputers, mainframe computers, distributed computing environments including any of the above systems or devices, and so on. The present invention can be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform specific tasks or implement specific abstract data types. The present invention can also be practiced in distributed computing environments where tasks are performed by remote processing devices connected through a communication network. In distributed computing environments, program modules can be located in local and remote computer storage media including storage devices.

[0167] Those of ordinary skill in the art can understand that all or part of the processes of implementing the methods in the above embodiments can be completed by instructing relevant hardware through computer-readable instructions. These computer-readable instructions can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above methods. Among them, the aforementioned storage medium can be a non-volatile storage medium such as a magnetic disk, an optical disk, a Read-Only Memory (ROM), or a Random Access Memory (RAM), etc.

[0168] It should be understood that although the steps in the flowchart of the accompanying drawings are displayed in sequence according to the arrows, these steps do not necessarily have to be executed in the order indicated by the arrows. Unless otherwise clearly stated in this article, the execution of these steps has no strict order limit, and they can be executed in other orders. Moreover, at least a part of the steps in the flowchart of the accompanying drawings may include multiple sub-steps or multiple stages. These sub-steps or stages do not necessarily have to be executed at the same time, but can be executed at different times. Their execution order does not necessarily have to be sequential, but can be executed alternately or alternately with at least a part of other steps or sub-steps or stages of other steps.

[0169] Embodiment 2

[0170] Further reference Figure 2 , as an implementation of the method shown above Figure 1 , the present invention provides an embodiment of a front-end component construction device. This device embodiment corresponds to the method embodiment shown in Figure 1 , and this device can be specifically applied to various electronic devices.

[0171] As shown in Figure 2 , the front-end component construction device 70 in this embodiment includes: a first-layer component module 71, a second-layer component module 72, a third-layer component module 73, a fourth-layer component module 74, a configuration module 75, and a preview and online module 76. Among them:

[0172] The first-layer component module 71 is used to define the first-layer button components. The first-layer button components include a button container, a query button, a reset button, a new button, an edit button, a delete button, an export Excel button, and an import Excel button;

[0173] The second-layer component module 72 is used to define the second-layer input components. The second-layer input components include a search container, a form container, a text box, a dropdown box, a pop-up selection box, a date box, and a number box;

[0174] The third - layer component module 73 is used to define the third - layer table component, and the third - layer table component includes a table and a table container;

[0175] The fourth - layer component module 74 is used to define the fourth - layer sub - components, and the fourth - layer sub - components include a general pop - up container, a department component, an employee number component, and an attachment component;

[0176] The configuration module 75 is used to obtain component configuration requirements, and configure the first - layer button component, the second - layer input component, the third - layer table component, and the fourth - layer sub - components according to the component configuration requirements;

[0177] The preview and online module 76 is used to preview and go online for the first - layer button component, the second - layer input component, the third - layer table component, and the fourth - layer sub - components that have completed component configuration.

[0178] Implementing this embodiment has the following beneficial effects: By adopting a hierarchical definition method, first define the first - layer button component containing various buttons, providing rich operation options for the page; then define the second - layer input component, covering various input elements to meet the user's data entry needs; the third - layer table component is responsible for data display, making information more intuitive; finally, define the fourth - layer sub - components to provide general and specific function extensions, such as pop - up containers, department selection, etc.; after obtaining the component configuration requirements, configure each layer of components according to the requirements. This process improves the reusability and flexibility of the components. By configuration instead of hard - coding, it can respond to demand changes faster and reduce maintenance costs; after completion of configuration, preview and go online for the components to ensure the correctness of functions and the smoothness of the user experience; improve development efficiency, reduce repetitive labor through component reuse; enhance the scalability and maintainability of the system, facilitating the addition and modification of subsequent functions; at the same time, it also optimizes the user experience, making the interface more friendly and intuitive.

[0179] Embodiment Three

[0180] To solve the above - mentioned technical problems, the embodiment of the present invention also provides a computer device. Specifically, please refer to Figure 3 , Figure 3 which is the basic structural block diagram of the computer device in this embodiment.

[0181] The above computer device 8 includes a memory 81, a processor 82, and a network interface 83 that are communicatively connected to each other through a system bus. It should be noted that only the computer device 8 with components such as the memory 81, the processor 82, and the network interface 83 is shown in the figure. However, it should be understood that it is not required to implement all the shown components, and more or fewer components can be implemented alternatively. Among them, those skilled in the art of this technology can understand that the computer device here is a device that can automatically perform numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes but is not limited to microprocessors, application specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), digital signal processors (DSPs), embedded devices, etc.

[0182] The above computer device can be a computing device such as a desktop computer, a notebook, a palm computer, and a cloud server. The above computer device can perform human-computer interaction with the user through means such as a keyboard, a mouse, a remote control, a touchpad, or a voice control device.

[0183] The above memory 81 includes at least one type of readable storage medium. The above readable storage medium includes flash memory, a hard disk, a multimedia card, a card-type memory (such as an SD or DX memory, etc.), a random access memory (RAM), a static random access memory (SRAM), a read-only memory (ROM), an electrically erasable programmable read-only memory (EEPROM), a programmable read-only memory (PROM), a magnetic memory, a magnetic disk, an optical disk, etc. In some embodiments, the above memory 81 can be an internal storage unit of the above computer device 8, such as the hard disk or memory of the computer device 8. In other embodiments, the above memory 81 can also be an external storage device of the above computer device 8, such as a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, etc. equipped on the computer device 8. Of course, the above memory 81 can also include both the internal storage unit of the above computer device 8 and its external storage device. In this embodiment, the above memory 81 is generally used to store the operating system and various application software installed on the above computer device 8, such as computer-readable instructions for the front-end component construction method. In addition, the above memory 81 can also be used to temporarily store various data that have been output or will be output.

[0184] In some embodiments, the above-mentioned processor 82 may be a Central Processing Unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chips. This processor 82 is generally used to control the overall operation of the above-mentioned computer device 8. In this embodiment, the above-mentioned processor 82 is used to run the computer-readable instructions stored in the above-mentioned memory 81 or process data, such as running the computer-readable instructions of the above-mentioned front-end component construction method.

[0185] The above-mentioned network interface 83 may include a wireless network interface or a wired network interface. This network interface 83 is generally used to establish a communication connection between the above-mentioned computer device 8 and other electronic devices.

[0186] Implementing this embodiment has the following beneficial effects: By adopting a hierarchical definition method, first define the first-layer button component containing various buttons to provide rich operation options for the page; then define the second-layer input component, covering various input elements to meet the user's data entry needs; the third-layer table component is responsible for data display to make information more intuitive; finally, define the fourth-layer sub-component to provide general and specific function extensions, such as pop-up containers, department selection, etc.; after obtaining the component configuration requirements, configure each layer of components according to the requirements. This process improves the reusability and flexibility of the components. By configuration rather than hard coding, it can respond to demand changes faster and reduce maintenance costs; after configuration, preview and go live with the components to ensure the correctness of the functions and the fluency of the user experience; improve the development efficiency and reduce repetitive labor through component reuse; enhance the scalability and maintainability of the system, facilitating the addition and modification of subsequent functions; at the same time, it also optimizes the user experience, making the interface more friendly and intuitive.

[0187] Embodiment 4

[0188] The present invention also provides another implementation manner, that is, to provide a computer-readable storage medium storing computer-readable instructions, and the computer-readable instructions can be executed by at least one processor to enable the at least one processor to execute the steps of the front-end component construction method as described above.

[0189] Implementing this embodiment has the following beneficial effects: By adopting a hierarchical definition method, first define the first-layer button component containing various buttons to provide rich operation options for the page; then define the second-layer input component, covering various input elements to meet the user's data entry needs; the third-layer table component is responsible for data display to make information more intuitive; finally, define the fourth-layer sub-component to provide general and specific function extensions, such as pop-up containers, department selection, etc.; after obtaining the component configuration requirements, configure each layer of components according to the requirements. This process improves the reusability and flexibility of the components. By configuration instead of hard coding, it can respond to demand changes faster and reduce maintenance costs; after completion of configuration, preview and go live with the components to ensure the correctness of functions and the smoothness of the user experience; improve the development efficiency by reducing repetitive labor through component reuse; enhance the scalability and maintainability of the system for subsequent function addition and modification; at the same time, it also optimizes the user experience to make the interface more friendly and intuitive.

[0190] From the description of the above implementation manners, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus a necessary general hardware platform. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation manner. Based on such an understanding, the technical solution of the present invention, in essence, or the part that makes contributions to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disc) and includes several instructions for causing a terminal device (which can be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods of the various embodiments of the present invention.

[0191] Obviously, the above-described embodiments are only a part of the embodiments of the present invention, rather than all embodiments. The accompanying drawings show the preferred embodiments of the present invention, but do not limit the patent scope of the present invention. The present invention can be implemented in many different forms. On the contrary, the purpose of providing these embodiments is to make the understanding of the disclosed content of the present invention more thorough and comprehensive. Although the present invention has been described in detail with reference to the foregoing embodiments, for those skilled in the art, they can still modify the technical solutions recorded in the foregoing specific implementation manners, or perform equivalent replacements on some of the technical features. Any equivalent structure directly or indirectly using the content of the specification and drawings of the present invention in other related technical fields shall be similarly within the scope of the patent protection of the present invention.

Claims

1. A method for constructing a front-end component, characterized in that, It includes the following steps: Define the first-layer button component, where the first-layer button component includes a button container, a query button, a reset button, a new button, an edit button, a delete button, an export Excel button, and an import Excel button; Define the second-layer input component, where the second-layer input component includes a search container, a form container, a text box, a drop-down box, a pop-up selection box, a date box, and a number box; Define the third-layer table component, where the third-layer table component includes a table and a table container; Define the fourth-layer sub-component, where the fourth-layer sub-component includes a general pop-up container, a department component, an employee number component, and an attachment component; Obtain the component configuration requirements, and configure the first-layer button component, the second-layer input component, the third-layer table component, and the fourth-layer sub-component according to the component configuration requirements; Preview and go live with the first-layer button component, the second-layer input component, the third-layer table component, and the fourth-layer sub-component that have completed component configuration.

2. The front-end component construction method according to claim 1, characterized in that The step of defining the first-layer button component, where the first-layer button component includes a button container, a query button, a reset button, a new button, an edit button, a delete button, an export Excel button, and an import Excel button specifically includes: Define the first-layer button component based on VUE language and Element UI framework language; Use CSS to design the style of the first-layer button component, and use the event binding mechanism of VUE to handle the click events of the first-layer button component.

3. The front-end component construction method according to claim 1, characterized in that The step of defining the second-layer input component, where the second-layer input component includes a search container, a form container, a text box, a drop-down box, a pop-up selection box, a date box, and a number box specifically includes: Define the second-layer input component based on VUE language and Element UI framework language; Use the data binding mechanism of Vue to bind the second-layer input component to a data object; use the validation mechanism of Vue or custom validation logic to validate the data.

4. The front-end component construction method according to claim 1, characterized in that The step of defining the third-layer table component, where the third-layer table component includes a table and a table container specifically includes: Define the third-layer table component based on VUE language and Element UI framework language; Use the data binding mechanism of Vue to bind a data object to the third-layer table component; use the event binding mechanism of Vue to handle the interaction operations in the third-layer table component.

5. The front-end component construction method according to claim 1, characterized in that The step of defining the fourth-layer sub-component, where the fourth-layer sub-component includes a general pop-up container, a department component, an employee number component, and an attachment component specifically includes: Define the fourth-layer sub-component based on VUE language and Element UI framework language; Use the data binding mechanism of Vue to bind a data object to the fourth-layer sub-component; use the event binding mechanism of Vue to handle the interaction operations in the fourth-layer sub-component.

6. The front-end component construction method according to claim 1, characterized in that The step of obtaining the component configuration requirements and configuring the first-layer button component, the second-layer input component, the third-layer table component, and the fourth-layer sub-component according to the component configuration requirements specifically includes: Analyze business requirements, formulate unified component configuration specifications, and collect component configuration information according to the component configuration specifications; Configure the first-layer button component according to the configuration information; Configure the second-layer input component according to the configuration information; Configure the third-layer table component according to the configuration information; Configure the fourth-layer sub-component according to the configuration information.

7. The method for constructing a front-end component according to any one of claims 1 to 6, characterized in that The steps of previewing and going live for the first-layer button component, the second-layer input component, the third-layer table component, and the fourth-layer sub-component after completing component configuration specifically include: Preview on the local development server through a browser whether the effects and interaction logics of the first-layer button component, the second-layer input component, the third-layer table component, and the fourth-layer sub-component meet expectations; Test the functions of the first-layer button component, the second-layer input component, the third-layer table component, and the fourth-layer sub-component; Package the codes of the first-layer button component, the second-layer input component, the third-layer table component, and the fourth-layer sub-component into a deployable package file; Conduct online verification and monitoring on the package file.

8. A front-end component construction device, characterized in that, Include: The first-layer component module is used to define the first-layer button component, and the first-layer button component includes a button container, a query button, a reset button, a new button, an edit button, a delete button, an export Excel button, and an import Excel button; The second-layer component module is used to define the second-layer input component, and the second-layer input component includes a search container, a form container, a text box, a dropdown box, a pop-up selection box, a date box, and a number box; The third-layer component module is used to define the third-layer table component, and the third-layer table component includes a table and a table container; The fourth-layer component module is used to define the fourth-layer sub-component, and the fourth-layer sub-component includes a general pop-up container, a department component, an employee ID component, and an attachment component; The configuration module is used to obtain component configuration requirements and configure the first-layer button component, the second-layer input component, the third-layer table component, and the fourth-layer sub-component according to the component configuration requirements; The preview and go-live module is used to preview and go live for the first-layer button component, the second-layer input component, the third-layer table component, and the fourth-layer sub-component after completing component configuration.

9. A computer device, characterized in that, It includes a memory and a processor. Computer-readable instructions are stored in the memory, and when the processor executes the computer-readable instructions, the steps of the front-end component construction method described in any one of claims 1 to 7 are implemented.

10. A computer-readable storage medium, characterized in that, Computer-readable instructions are stored on the computer-readable storage medium, and when the computer-readable instructions are executed by the processor, the steps of the front-end component construction method described in any one of claims 1 to 7 are implemented.

Images