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

Abstract

The application 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, the method comprising the following steps: defining a first-layer button component, a second-layer input component, a third-layer table component and a fourth-layer sub-component respectively; 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 putting online the first-layer button component, the second-layer input component, the third-layer table component and the fourth-layer sub-component after component configuration. The method improves the development efficiency, reduces repeated labor through component reuse, enhances the scalability and maintainability of the system, facilitates the addition and modification of subsequent functions, and optimizes the user experience, so that the interface is more friendly and intuitive.

Description

Technical Field

[0001] This invention relates to the field of component construction technology, and in particular to a front-end component construction method, apparatus, computer device, and storage medium. Background Technology

[0002] Front-end components refer to reusable, independent modules specifically designed to build various parts of the user interface. These components can be basic UI elements, such as buttons, input fields, and navigation bars, or more complex functional modules, such as carousels, modals, and form validation components. Componentization is a core concept in modern front-end development. By breaking down the interface into independent, composable parts, each component is responsible for its own logic and style, greatly improving code maintainability, scalability, and reusability. Front-end components are widely used in various web applications and websites to achieve efficient interface construction and flexible functional expansion.

[0003] Existing front-end components cannot effectively integrate Vue with request carriers, nor can they provide standardized component-based encapsulation for button, search, and list components. This makes it difficult for users without programming language skills to develop software according to business requirements. For example, while Vue uses keyword conventions for code syntax, various coding styles can emerge while adhering to these conventions. Furthermore, existing software systems or low-code platforms contain many mature Vue-specific code blocks, but lack a comprehensive component library that integrates standard specifications, is universally compatible, and seamlessly integrates with other components.

[0004] Other applications on the market, even those that combine Vue with request carriers, can generate code through configuration blocks, but they cannot simultaneously modularize button components, search components, and list components to enable users to complete system development even without mastering programming languages. Summary of the Invention

[0005] To address the aforementioned technical problems, this invention provides a front-end component construction method, employing the following technical solution, including:

[0006] Define the first-level button components, which include a button container, a query button, a reset button, an add button, an edit button, a delete button, an export to Excel button, and an import to Excel button;

[0007] Define a second-level input component, which includes a search container, a form container, a text box, a drop-down list, a pop-up selection box, a date box, and a number box;

[0008] Define a third-level table component, which includes a table and a table container;

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

[0010] 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;

[0011] Preview and deploy 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.

[0012] Preferably, the step of defining a first-layer button component, which includes a button container, a query button, a reset button, an add button, an edit button, a delete button, an export to Excel button, and an import to Excel button, specifically includes:

[0013] Based on the Vue language and the Element UI framework, define the first-layer button component;

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

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

[0016] Based on the Vue language and the Element UI framework, define the second-layer input component;

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

[0018] Preferably, the step of defining a third-layer table component, which includes a table and a table container, specifically includes:

[0019] The third-layer table component is defined based on the Vue language and the Element UI framework language.

[0020] Use Vue's data binding mechanism to bind the data object to the third-level table component; use Vue's event binding mechanism to handle the interactive operations in the third-level table component.

[0021] Preferably, the step of defining the fourth-layer sub-component, which includes a general pop-up container, a department component, an employee ID component, and an attachment component, specifically includes:

[0022] The fourth-layer sub-component is defined based on the Vue language and the Element UI framework language.

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

[0024] Preferably, the step 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 includes:

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

[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 step of previewing and deploying the first-layer button component, the second-layer input component, the third-layer table component, and the fourth-layer sub-component after component configuration specifically includes:

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

[0032] The functions of the first-layer button component, the second-layer input component, the third-layer table component, and the fourth-layer sub-component are tested.

[0033] 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;

[0034] The package file is then subjected to online verification and monitoring.

[0035] To address the aforementioned technical problems, the present invention also provides a front-end component construction device, which employs the following technical solution, including:

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

[0037] The second-level component module is used to define the second-level input components, which include a search container, a form container, a text box, a drop-down list, 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 component, which includes a table and a table container;

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

[0040] 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 deployment module is used to preview and deploy the first-layer button component, the second-layer input component, the third-layer table component, and the fourth-layer sub-component after the component configuration is completed.

[0041] To address the aforementioned technical problems, the present invention also provides a computer device that employs the technical solution described below, comprising a memory and a processor, wherein the memory stores computer-readable instructions, and the processor executes the computer-readable instructions to implement the steps of the aforementioned front-end component construction method.

[0042] To address the aforementioned technical problems, the present invention also provides a computer-readable storage medium, which employs the technical solution described below. The computer-readable storage medium stores computer-readable instructions, which, when executed by a processor, implement the steps of the aforementioned front-end component construction method.

[0043] Compared with existing technologies, this invention has the following main advantages: By adopting a layered definition approach, a first-layer button component containing various buttons is first defined, providing rich operation options for the page; then, a second-layer input component is defined, covering various input elements to meet the user's data entry needs; a third-layer table component is responsible for data display, making the information more intuitive; finally, a fourth-layer sub-component is defined, providing general and specific functional extensions, such as pop-up containers and department selection; after obtaining the component configuration requirements, each layer of components is configured according to the requirements. This process improves the reusability and flexibility of the components. By configuring rather than hard-coding, it can respond to changes in requirements more quickly and reduce maintenance costs; after configuration is completed, the components are previewed and deployed to ensure the correctness of the functions and the smoothness of the user experience; development efficiency is improved by reducing repetitive work through component reuse; the scalability and maintainability of the system are enhanced, facilitating the addition and modification of subsequent functions; at the same time, the user experience is also optimized, making the interface more user-friendly and intuitive. Attached Figure Description

[0044] To more clearly illustrate the solutions in this invention, the accompanying drawings used in the description of the embodiments of this invention will be briefly introduced below. Obviously, the drawings described below are some embodiments of this invention. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

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

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

[0047] Figure 3 This is a schematic diagram of the structure of an embodiment of the computer device of the present invention. Detailed Implementation

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

[0049] In this document, the term "embodiment" means that a particular feature, structure, or characteristic described in connection with an embodiment may be included in at least one embodiment of the invention. The appearance of this phrase in various places throughout the specification does not necessarily refer to the same embodiment, nor is it a separate or alternative embodiment mutually exclusive with other embodiments. It will be explicitly and implicitly understood by those skilled in the art that the embodiments described herein can be combined with other embodiments.

[0050] To enable those skilled in the art to better understand 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 in the embodiments of the present invention is generally executed by a server / terminal device, and correspondingly, the front-end component construction device is generally set in the server / terminal device.

[0052] It should be understood that the number of terminal devices, networks, and servers is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and servers can be used.

[0053] Example 1

[0054] Please refer to Figure 1 The diagram illustrates 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-level button components, which include a button container, a query button, a reset button, an add button, an edit button, a delete button, an export to Excel button, and an import to Excel button.

[0056] In this embodiment, the electronic device (e.g., a server / terminal device) on which the front-end component construction method runs can receive the front-end component construction request via a wired or wireless connection. It should be noted that the aforementioned wireless connection methods may 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 may specifically include the following steps:

[0058] S11, based on the Vue language and the Element UI framework, defines the first-level button component.

[0059] Define the button container: using Element UI <el-button>A component that defines the container for a button, sets the button's style (such as size and color) and behavior (such as click events), and defines the style and behavior of the button's container.

[0060] Define a search button: Add a search button to the button container and bind a click event to trigger the search operation. Define the function of the search button to trigger the search operation.

[0061] Define a reset button: Add a reset button to the button container and bind a click event to trigger the reset operation. Define the function of the reset button to reset the form data.

[0062] Define the Add button: Add an Add button to the button container and bind a click event to trigger the add operation. Define the function of the Add button to trigger the add operation.

[0063] Define an edit button: Add an edit button to the button container and bind a click event to trigger the editing operation. Define the function of the edit button to trigger the editing operation.

[0064] Define a delete button: Add a delete button to the button container and bind a click event to trigger the delete operation. Define the function of the delete button to trigger the delete operation.

[0065] Define an "Export Excel" button: Add an "Export Excel" button to the button container and bind a click event to trigger the export operation. Define the function of the "Export Excel" button to export spreadsheet data to an Excel file.

[0066] Define an "Import Excel" button: Add an "Import Excel" button to the button container and bind a click event to trigger the import operation. Define the function of the "Import Excel" button to import Excel files into the spreadsheet.

[0067] You can define the usage logic of the button component. 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 uses CSS to style the first-level button component and Vue's event binding mechanism to handle the click events of the first-level button component.

[0069] Define a consistent button style using CSS, including background color, border, font size, and hover effect. For each button (button container, query button, reset button, etc.), you can differentiate them using class selectors, such as different colors or icons. In Vue, use the `v-on:click` or the shorthand `@click` directive to bind click event handlers. For example, bind `@click=handleQuery` to the query button and `@click=handleReset` to the reset button, ensuring that each button click triggers the corresponding Vue method to implement business logic. This combination of CSS and Vue ensures both aesthetically pleasing buttons and functional interactivity.

[0070] Step S2: Define the second-level input components, which include a search container, a form container, a text box, a drop-down list, a pop-up selection box, a date box, and a number box.

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

[0072] S21, based on the Vue language and the Element UI framework, defines a second-layer input component.

[0073] Define the search container: Using Element UI's layout components, define a search container and place the search box and search button within it. Define the style and behavior of the search container to house the search box and search button.

[0074] Define a form container: Using Element UI's form components, define a form container and place input components such as text boxes and dropdown lists within it. Define the style and behavior of the form container to hold various input components.

[0075] Define a text box: using Element UI <el-input>This component defines a text box and sets its properties (such as placeholders and validation rules). It defines the style and behavior of the text box for inputting text data.

[0076] Define a dropdown list: using Element UI <el-select>This component defines a dropdown list and sets its option data. It defines the style and behavior of the dropdown list for selecting predefined data items.

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

[0078] Define a date box: using Element UI's ` <el-date-picker>This component defines a date box and sets its properties (such as type and format). It defines the style and behavior of the date box for selecting date data.

[0079] Define the number box: using Element UI's ` <el-input-number>This component defines a number box and sets its properties (such as minimum value, maximum value, and step size). It defines the style and behavior of the number box for inputting numerical data.

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

[0081] You can define the usage logic of the second-level input component. On the page, you can choose to use a button container or a form container, and then add text boxes, drop-down lists, pop-up selection boxes, date boxes, number boxes, and text as needed into the container.

[0082] S22, use Vue's data binding mechanism to bind the second-level input component 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 implement data binding, enabling two-way binding between second-level input components (such as search containers, text boxes within form containers, dropdowns, etc.) and data objects. For validation mechanisms, 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 fields, minimum length, and email format, validation can be triggered in the component's `blur` or `change` events. When validation fails, corresponding error messages can be displayed to the user. This combination of data binding and validation mechanisms ensures the legality and integrity of the data, improving the user experience.

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

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

[0086] S31, based on the Vue language and the Element UI framework, defines a third-layer table component.

[0087] Define the table: using Element UI <el-table>This component defines a table and sets its column data, data source, and other properties. It also defines the table's style and behavior for displaying a list of data.

[0088] Define a table container: Using Element UI's layout components, define a table container and place table and pagination components within it. Define the table container's style and behavior for placing table components and other related components (such as pagination components).

[0089] You can define the usage logic of the third-level table component, use a table container on the page, and then add tables to the table container.

[0090] S32 uses Vue's data binding mechanism to bind data objects to the third-level table component; it also uses Vue's event binding mechanism to handle interactive operations within the third-level table component.

[0091] In Vue, interaction with third-layer table components can be achieved through data binding and event binding mechanisms. First, use `v-bind` or its shorthand to bind a data object to the table component's `props`, enabling one-way or two-way data flow. For example, binding a data source to the table's `data` property will automatically render the table content. Second, use `v-model` to establish a two-way binding between form elements (such as input fields) and the data model, facilitating data updates as the user inputs. Finally, use `v-on` or the shorthand `@` to listen for events in the table component, such as row clicks and cell edits, triggering corresponding methods to handle interactive operations and ensuring a smooth user experience.

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

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

[0094] S41, based on the Vue language and the Element UI framework language, defines the fourth layer of sub-components.

[0095] Define a generic pop-up container to encapsulate pop-up components such as modals and dialog boxes, providing unified pop-up logic and styles.

[0096] Define department components, employee ID components, and attachment components: Create sub-components with specific functions based on business needs, such as department selectors and employee ID input boxes.

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

[0098] The usage logic of the fourth-level sub-components can be defined. A general pop-up container is used on the page, and then the general pop-up container is used as the complete page. Button containers, search containers, and table containers are added to the page as needed. The department component, employee number component, and attachment component in the sub-components are used in the search container or form container.

[0099] S42 uses Vue's data binding mechanism to bind data objects to the fourth-level child component; it uses Vue's event binding mechanism to handle interactive operations in the fourth-level child component.

[0100] In the Vue framework, data binding and event binding mechanisms enable interaction between data objects and fourth-level child components (the general popup container, department component, employee ID component, and attachment component). First, data binding is achieved by passing the data object level from the parent component to the fourth-level child components using the `props` attribute. Second, in the child components, the `v-model` directive enables two-way binding between form elements and data. Simultaneously, event handlers are bound using `v-on` or `@` syntax to handle user interactions in the child components, such as clicks and input. In this way, Vue's data and event binding mechanism ensures efficient and flexible communication between data objects and child components.

[0101] Step S5: 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.

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

[0103] S51: Analyze business requirements, formulate unified component configuration specifications, and collect component configuration information according to the component configuration specifications.

[0104] Analyze business requirements, such as determining the click event handling logic for each button in the first-level button component, including the backend interface and frontend processing logic for operations like query, reset, add, edit, delete, export to Excel, and import to Excel; defining the data type, validation rules (such as non-empty validation, format validation, etc.), and default values ​​for each input box in the second-level input component; determining the number of columns, column names, data display format (such as date format, number format, etc.), sorting and filtering functions for the third-level table component; and defining the functional requirements for each sub-component in the fourth-level sub-component, such as the pop-up logic of the general pop-up container, the department data acquisition and display of the department component, the employee ID verification of the employee ID component, and the file upload and download of the attachment component.

[0105] Define the configuration items for each component layer, along with their corresponding value types and default values. For example, a button component can be configured with its text, click event handler, and style class; an input component can be configured with its input field type, placeholders, and validation rules.

[0106] Static configuration information (such as button text, table column names, etc.) can be collected through configuration files.

[0107] For dynamically configured information (such as department data and employee ID lists that are dynamically loaded based on user selection), user selections or inputs can be collected through forms.

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

[0109] Configure the button component's text, click event handlers, and styles based on the configuration information.

[0110] For the button container, create a container element to contain all the buttons. You can set the container's layout (such as horizontal or vertical) as needed.

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

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

[0113] For the "Add" button, configure its text (e.g., "Add"), click event handler (to open the "Add" form or pop-up), and style.

[0114] For the edit button, configure its text (e.g., "Edit"), click event handler (to open the edit form or pop-up based on the selected row data), and style. Note that the edit button may need to interact with the table component to retrieve the currently selected row data.

[0115] For the delete button, configure its text (e.g., "Delete"), click event handler (calling the backend delete API and refreshing the table data), and style. Similarly, the delete button may also need to interact with the table component.

[0116] For the "Export Excel" button, configure the button's text (e.g., "Export Excel"), click event handler (call the backend export interface and download the Excel file), and style, etc.

[0117] For the Import Excel button, configure the text (e.g., "Import Excel"), click event handler (open the file selection box, select a file, and then call the backend import interface), and style, etc.

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

[0119] Configure the input component type, validation rules, default values, and data binding based on the configuration information.

[0120] For the search container, create a container element to contain the search box and search button. The search box can be configured as a text box component, and the search button can be configured as a button component, with corresponding click event handlers bound to it.

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

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

[0123] For dropdown lists, configure the dropdown list's option data (which can be obtained from the backend interface or statically configured), default values, and data binding, etc.

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

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

[0126] For number boxes, configure default values, validation rules (such as number range validation), and data binding. Number boxes can restrict users to entering only numbers and provide additional functionality (such as increase / decrease buttons).

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

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

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

[0130] For tables, configure the number of columns, column names, data display format (such as date format, number format, etc.), sorting and filtering functions, etc. Table components typically support retrieving data from backend interfaces and dynamically updating the data based on the user's sorting and filtering conditions.

[0131] Column configuration: Configure the column name, data field name, display format, and sorting rules for each column. For example, a date column can be configured to display dates in date format and provide ascending / descending sorting functionality.

[0132] Data binding: Binds 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 functionality: Configure the number of items displayed per page, the current page number, and the total number of pages in the pagination component, and link it with the table component to achieve the function of displaying data in pages.

[0134] S55, configure the fourth-layer sub-component according to the configuration information.

[0135] Configure the functions, styles, and data interactions of each sub-component based on the configuration information.

[0136] For general popup containers, configure the trigger element (such as a button or link), popup content (which can be any Vue / React component), popup position, and style. Popup containers are typically used to display modals, tooltips, or confirmation dialogs.

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

[0138] For the employee ID component, configure its validation rules (such as employee ID format validation), default values, and data binding. The employee ID component is used to input and validate 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. The attachment component is used to upload and download attachment files.

[0140] There are functional divisions among the containers. Button containers hold buttons, which can automatically adjust the buttons to the appropriate position on the page; table containers hold tables, which can be used as search identifiers when submitting table data to the backend; and search containers hold input components, which can be used as input parameters when calling APIs.

[0141] The required configuration fields for the container use common default values, which do not need to be changed in most cases, and are easy to modify even if changes are made.

[0142] It supports configuring the interface URL. After configuration, it can perform joint debugging with the backend in real time without the need for coding. You only need to configure the interface parameters and interface link.

[0143] The interface offers diverse input parameter configurations, supporting both object-based and array-based messages. It also includes built-in options for automatically retrieving search containers and table containers. Once the configuration is complete, the code development is finished as well, greatly improving development efficiency.

[0144] Step S6: Preview and deploy 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.

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

[0146] S61, preview the effects and interaction logic of the first-layer button component, the second-layer input component, the third-layer table component, and the fourth-layer sub-component on the local development server through a browser to see if they meet expectations.

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

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

[0149] Conduct comprehensive testing of the functionality of each component to ensure that all functions meet expectations and are free of vulnerabilities.

[0150] It allows for unit testing (using testing frameworks such as Jest and Mocha), integration testing (simulating interactions between components), and end-to-end testing (using tools such as Cypress and Selenium to simulate user actions), providing comprehensive testing of all component functionalities. The purpose of comprehensive testing is to verify whether the component functions as expected, including button click events, form submissions, and data display, ensuring the correctness and completeness of the component's functionality.

[0151] Automated testing tools (such as Jest and Mocha) can also be used to write test cases to automate the testing of component interaction logic, data binding, and styles. Automated testing can greatly improve testing efficiency and reduce human error.

[0152] In some optional implementations of this embodiment, the styles of each layer of components can also be adjusted and adapted. For example, CSS or preprocessors (such as Sass or Less) can be used to write component styles, and media queries can be used to implement responsive design, ensuring that the components maintain a good visual effect on different devices and screen sizes. This can improve the user experience of the components and enable them to maintain a consistent appearance and layout in different environments.

[0153] S63 packages the code of the first-level button component, the second-level input component, the third-level table component, and the fourth-level 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 the relevant metadata, such as the name, version, description, and entry file of the component library.

[0155] Package the component library: Run the build command (e.g., `vue-cli-service build --targetlib`) to package the component code into an npm package. A directory will be generated in the project root directory containing the packaged files.

[0156] Configure an npm repository: If you don't already have a private npm repository, you'll need to set one up first. You can use tools like Verdaccio to quickly set up a private npm repository.

[0157] Configure the npm repository: In your local development environment, configure the npm repository to a private repository address. This ensures that when you publish a 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 command `npm login` in your terminal and follow the prompts to enter your npm repository username, password, and email address. This will enable developers to publish packages to a private repository.

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

[0160] The purpose of step S63 is to package the component code into a standardized format so that it can be reused and deployed in other projects.

[0161] S64 performs online verification and monitoring of package files.

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

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

[0164] Step S64 ensures that components operate stably in the production environment and allows for the timely detection and repair of potential problems.

[0165] The beneficial effects of implementing this embodiment are as follows: By adopting a layered definition approach, a first-layer button component containing various buttons is first defined, providing rich operation options for the page; then, a second-layer input component is defined, covering various input elements to meet the user's data entry needs; the third-layer table component is responsible for data display, making the information more intuitive; finally, a fourth-layer sub-component is defined, providing general and specific functional extensions, such as pop-up containers and department selection; after obtaining the component configuration requirements, each layer of components is configured according to the requirements. This process improves the reusability and flexibility of the components. By configuring rather than hard-coding, it is possible to respond to changes in requirements more quickly and reduce maintenance costs; after completing the configuration, the components are previewed and deployed to ensure the correctness of the functions and the smoothness of the user experience; development efficiency is improved, and repetitive work is reduced through component reuse; the scalability and maintainability of the system are enhanced, facilitating the addition and modification of subsequent functions; at the same time, the user experience is also optimized, making the interface more user-friendly and intuitive.

[0166] This invention can be used in a wide variety of general-purpose or special-purpose computer system environments or configurations. Examples include: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, and distributed computing environments including any of the above systems or devices. This invention can be described in the general context of computer-executable instructions, such as program modules, that are executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc., that perform specific tasks or implement specific abstract data types. This invention can also be practiced in distributed computing environments where tasks are performed by remote processing devices connected via a communication network. In distributed computing environments, program modules can reside in local and remote computer storage media, including storage devices.

[0167] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by instructing related hardware with computer-readable instructions. These computer-readable instructions can be stored in a computer-readable storage medium. When executed, the program can include the processes of the embodiments of the above methods. The aforementioned storage medium can be a non-volatile storage medium such as a magnetic disk, optical disk, or read-only memory (ROM), or random access memory (RAM).

[0168] It should be understood that although the steps in the flowcharts of the accompanying figures are shown sequentially as indicated by the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the accompanying figures may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the sub-steps or stages of other steps.

[0169] Example 2

[0170] Further reference Figure 2 As a response to the above Figure 1 The present invention provides an embodiment of a front-end component building device, which is similar to the method shown. Figure 1 Corresponding to the method embodiments shown, this device can be specifically applied to various electronic devices.

[0171] like Figure 2 As shown, the front-end component building 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 deployment module 76. Wherein:

[0172] The first-level component module 71 is used to define the first-level button components, which include a button container, a query button, a reset button, an add 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, which include a search container, a form container, a text box, a drop-down list, a pop-up selection box, a date box, and a number box.

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

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

[0176] 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-component according to the component configuration requirements;

[0177] The preview and deployment module 76 is used to preview and deploy the first-layer button component, the second-layer input component, the third-layer table component, and the fourth-layer sub-components after the component configuration is completed.

[0178] The beneficial effects of implementing this embodiment are as follows: By adopting a layered definition approach, a first-layer button component containing various buttons is first defined, providing rich operation options for the page; then, a second-layer input component is defined, covering various input elements to meet the user's data entry needs; the third-layer table component is responsible for data display, making the information more intuitive; finally, a fourth-layer sub-component is defined, providing general and specific functional extensions, such as pop-up containers and department selection; after obtaining the component configuration requirements, each layer of components is configured according to the requirements. This process improves the reusability and flexibility of the components. By configuring rather than hard-coding, it is possible to respond to changes in requirements more quickly and reduce maintenance costs; after completing the configuration, the components are previewed and deployed to ensure the correctness of the functions and the smoothness of the user experience; development efficiency is improved, and repetitive work is reduced through component reuse; the scalability and maintainability of the system are enhanced, facilitating the addition and modification of subsequent functions; at the same time, the user experience is also optimized, making the interface more user-friendly and intuitive.

[0179] Example 3

[0180] To address the aforementioned technical problems, embodiments of the present invention also provide a computer device. Please refer to [link / reference needed]. Figure 3 , Figure 3 This is a basic structural block diagram of the computer device in this embodiment.

[0181] The aforementioned computer device 8 includes a memory 81, a processor 82, and a network interface 83 that are interconnected via a system bus. It should be noted that only the computer device 8 with components 81, 82, and 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. Those skilled in the art will understand that the computer device described herein is a device capable of automatically performing 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 aforementioned computer devices can be desktop computers, laptops, handheld computers, and cloud servers, among other computing devices. These devices can facilitate human-computer interaction with users through keyboards, mice, remote controls, touchpads, or voice-activated devices.

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

[0184] In some embodiments, the processor 82 described above may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chip. The processor 82 is typically used to control the overall operation of the computer device 8. In this embodiment, the processor 82 is used to execute computer-readable instructions stored in the memory 81 or to process data, for example, to execute computer-readable instructions of the front-end component construction method described above.

[0185] The network interface 83 may include a wireless network interface or a wired network interface, which is typically used to establish a communication connection between the computer device 8 and other electronic devices.

[0186] The beneficial effects of implementing this embodiment are as follows: By adopting a layered definition approach, a first-layer button component containing various buttons is first defined, providing rich operation options for the page; then, a second-layer input component is defined, covering various input elements to meet the user's data entry needs; the third-layer table component is responsible for data display, making the information more intuitive; finally, a fourth-layer sub-component is defined, providing general and specific functional extensions, such as pop-up containers and department selection; after obtaining the component configuration requirements, each layer of components is configured according to the requirements. This process improves the reusability and flexibility of the components. By configuring rather than hard-coding, it is possible to respond to changes in requirements more quickly and reduce maintenance costs; after completing the configuration, the components are previewed and deployed to ensure the correctness of the functions and the smoothness of the user experience; development efficiency is improved, and repetitive work is reduced through component reuse; the scalability and maintainability of the system are enhanced, facilitating the addition and modification of subsequent functions; at the same time, the user experience is also optimized, making the interface more user-friendly and intuitive.

[0187] Example 4

[0188] The present invention also provides another embodiment, namely, providing a computer-readable storage medium storing computer-readable instructions that can be executed by at least one processor to cause the at least one processor to perform the steps of the front-end component construction method as described above.

[0189] The beneficial effects of implementing this embodiment are as follows: By adopting a layered definition approach, a first-layer button component containing various buttons is first defined, providing rich operation options for the page; then, a second-layer input component is defined, covering various input elements to meet the user's data entry needs; the third-layer table component is responsible for data display, making the information more intuitive; finally, a fourth-layer sub-component is defined, providing general and specific functional extensions, such as pop-up containers and department selection; after obtaining the component configuration requirements, each layer of components is configured according to the requirements. This process improves the reusability and flexibility of the components. By configuring rather than hard-coding, it is possible to respond to changes in requirements more quickly and reduce maintenance costs; after completing the configuration, the components are previewed and deployed to ensure the correctness of the functions and the smoothness of the user experience; development efficiency is improved, and repetitive work is reduced through component reuse; the scalability and maintainability of the system are enhanced, facilitating the addition and modification of subsequent functions; at the same time, the user experience is also optimized, making the interface more user-friendly and intuitive.

[0190] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of the present invention, or the part that contributes 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 disk) and includes several instructions to cause a terminal device (which may 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 embodiments described above are merely some embodiments of the present invention, not all embodiments. The accompanying drawings show 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; rather, these embodiments are provided to provide a more thorough and complete understanding of the disclosure of the present invention. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art can still modify the technical solutions described in the foregoing specific embodiments, or make equivalent substitutions for some of the technical features. Any equivalent structures made using the content of this specification and drawings, directly or indirectly applied to other related technical fields, are similarly within the patent protection scope of this invention.

Claims

1. A method for constructing a front-end component, characterized in that, Includes the following steps: Define the first-level button components, which include a button container, a query button, a reset button, an add button, an edit button, a delete button, an export to Excel button, and an import to Excel button; Define a second-level input component, which includes a search container, a form container, a text box, a drop-down list, a pop-up selection box, a date box, and a number box; Define a third-level table component, which includes a table and a table container; Define a fourth-layer sub-component, which includes a general pop-up container, a department component, an employee ID component, and an attachment component; 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; Preview and deploy 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.

2. The front-end component construction method according to claim 1, characterized in that, The steps of defining the first-level button component, which includes a button container, a query button, a reset button, an add button, an edit button, a delete button, an export to Excel button, and an import to Excel button, specifically include: Based on the Vue language and the Element UI framework, define the first-layer button component; Use CSS to style the first-layer button component, and use Vue's event binding mechanism 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 steps for defining the second-layer input component, which includes a search container, a form container, a text box, a dropdown list, a pop-up selection box, a date box, and a number box, specifically include: Based on the Vue language and the Element UI framework, define the second-layer input component; Use Vue's data binding mechanism to bind the second-level input component to the data object; use Vue's validation mechanism 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-level table component, which includes a table and a table container, specifically includes: The third-layer table component is defined based on the Vue language and the Element UI framework language. Use Vue's data binding mechanism to bind the data object to the third-level table component; use Vue's event binding mechanism to handle the interactive operations in the third-level table component.

5. The front-end component construction method according to claim 1, characterized in that, The steps for defining the fourth-layer sub-component, which includes a general pop-up container, a department component, an employee ID component, and an attachment component, specifically include: The fourth-layer sub-component is defined based on the Vue language and the Element UI framework language. Use Vue's data binding mechanism to bind the data object to the fourth-layer child component; use Vue's event binding mechanism to handle the interactive operations in the fourth-layer child component.

6. The front-end component construction method according to claim 1, characterized in that, 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: 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 front-end component construction method according to any one of claims 1 to 6, characterized in that, The steps of previewing and deploying 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 the effects and interaction logic of the first-layer button component, the second-layer input component, the third-layer table component, and the fourth-layer sub-component in a browser on the local development server to see if they meet expectations. The functions of the first-layer button component, the second-layer input component, the third-layer table component, and the fourth-layer sub-component are tested. 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; The package file is then subjected to online verification and monitoring.

8. A front-end component construction apparatus, characterized in that, include: The first-level component module is used to define the first-level button components, which include a button container, a query button, a reset button, an add button, an edit button, a delete button, an export to Excel button, and an import to Excel button. The second-level component module is used to define the second-level input components, which include a search container, a form container, a text box, a drop-down list, 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, which includes a table and a table container; The fourth-layer component module is used to define the fourth-layer sub-components, which include a general pop-up container, a department component, an employee number 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 deployment module is used to preview and deploy the first-layer button component, the second-layer input component, the third-layer table component, and the fourth-layer sub-component after the component configuration is completed.

9. A computer device, characterized in that, The device includes a memory and a processor, wherein the memory stores computer-readable instructions, and the processor executes the computer-readable instructions to implement the steps of the front-end component construction method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-readable instructions, which, when executed by a processor, implement the steps of the front-end component construction method as described in any one of claims 1 to 7.

Images