Front-end engineering template library construction method and device, electronic device, and storage medium

Abstract

The embodiments of the present invention provide a front-end engineering template library construction method and device, electronic device, and storage medium, which relate to the field of software development technology. The front-end engineering template library construction method includes: constructing a file hierarchy according to business logic and function, and generating a template library directory structure according to the file hierarchy; adjusting the UI components to be adjusted in the UI component library according to the adjustment requirements of the components, and generating corresponding functional components according to the functional requirements of the components; generating a calling interface with preset rules, and the calling interface is used to call UI components and functional components according to the directory structure. This embodiment adjusts the UI components to be adjusted in the UI component library, generates corresponding functional components according to the functional requirements of the components, customizes and adjusts them on the basis of the original components, avoids a large number of repetitive operations, improves the efficiency of component customization, and uses the calling interface with preset rules to perform unified interface call management, so as to facilitate the maintenance and update of components.

Description

Technical Field

[0001] The present invention relates to the technical field of software development, and in particular to a method and device for constructing a front-end engineering template library, an electronic device, and a storage medium. Background Art

[0002] The front-end refers to the web pages that run on browsers on PCs, mobile devices, and other devices and are displayed to users. Front-end technology refers to the process of communicating with the user's computer through the browser, while back-end technology refers to the process of storing data on the server. The primary function of front-end development is to effectively present the website interface to users. Front-end technology is generally categorized as front-end design and front-end development. Front-end design can generally be understood as the visual design of a website, while front-end development involves the implementation of the website's front-end code. This includes basic HTML and CSS, JavaScript / Ajax, and now advanced versions such as HTML5, CSS3, and SVG.

[0003] With the development of front-end technologies and the widespread adoption of technologies like HTML5, CSS3, and Node.JS, various front-end framework libraries have emerged one after another, allowing for the rapid development of new projects. However, these framework libraries often offer limited functionality. Customizing components is complex and requires numerous repetitive operations, resulting in low efficiency. Furthermore, the lack of unified interface call management makes maintenance and updates inconvenient. Summary of the Invention

[0004] The main purpose of the embodiments of the present invention is to propose a front-end engineering template library construction method and device, electronic equipment and storage medium, which can customize and adjust components, improve the efficiency of component customization, and perform unified interface call management to facilitate maintenance and updating of components.

[0005] To achieve the above objectives, a first aspect of an embodiment of the present invention provides a method for constructing a front-end engineering template library, comprising:

[0006] Construct a file hierarchy according to business logic and functions, and generate a template library directory structure based on the file hierarchy;

[0007] Adjust the UI components to be adjusted in the UI component library according to the component adjustment requirements;

[0008] Generate corresponding functional components according to the functional requirements of the components;

[0009] A calling interface of a preset rule is generated, where the calling interface is used to call the UI component and the functional component according to the directory structure.

[0010] In some embodiments, the adjustment requirement of the component is a modification requirement, and adjusting the UI component to be adjusted in the UI component library according to the adjustment requirement of the component includes:

[0011] Obtaining the directory location of the UI component to be adjusted according to the directory structure;

[0012] Modify the UI component to be adjusted at the directory location according to the modification requirement.

[0013] In some embodiments, the adjustment requirement of the component is: span value adjustment requirement;

[0014] When the UI component to be adjusted is a layout component, adjusting the UI component to be adjusted in the UI component library according to the adjustment requirements of the component includes:

[0015] Acquire the number of components of the layout component according to the span value adjustment requirement;

[0016] Calculating a rasterization quantity based on the number of components;

[0017] The span value of the layout component is adjusted according to the rasterization quantity.

[0018] In some embodiments, when the UI component to be adjusted is a form component, the adjustment requirements of the component include: one or more of form width calculation requirements, form verification requirements, form modification marking requirements, or form binding optimization requirements.

[0019] In some embodiments, adjusting the UI component to be adjusted in the UI component library according to the adjustment requirement of the component includes one of the following:

[0020] When the adjustment requirement of the component is a form width calculation requirement, the width of each form-type component is obtained, and a maximum width is obtained according to the width, and the maximum width is sent to each form-type component by using an event broadcast message, so that the form-type component adjusts its width according to the maximum width;

[0021] When the adjustment requirement of the component is a form verification requirement, obtain the message of the verifier and verify the form class component according to the message; or obtain the Placeholder information of the form class component and verify the form class component according to the Placeholder information; or obtain the Label message of the form class component and verify the form class component according to the Label message;

[0022] When the adjustment requirement of the component is a form modification mark requirement, obtaining the modification information of the form component and displaying the modification mark for the modification information;

[0023] When the adjustment requirement of the component is a form binding optimization requirement, the associated form information of the form class component is obtained, and the associated form information is referenced in the form class component.

[0024] In some embodiments, generating corresponding functional components according to functional requirements of the components includes:

[0025] Obtaining functional requirements of the component, where the functional requirements include one or more of: regional requirements, approval requirements, or tree selection requirements;

[0026] Corresponding functional components are generated according to the functional requirements, and the functional components include: one or more of an area component, an approval chain component, or a tree-shaped selection shuttle component.

[0027] In some embodiments, further comprising:

[0028] Get background interface information;

[0029] The backend interface information is configured in the urls directory for unified registration.

[0030] To achieve the above-mentioned purpose, the second aspect of the present invention proposes a front-end engineering template library construction device, comprising:

[0031] A directory structure building module is used to build a file hierarchy according to business logic and functions, and generate a template library directory structure based on the file hierarchy;

[0032] The component adjustment module is used to adjust the UI components to be adjusted in the UI component library according to the component adjustment requirements;

[0033] Functional component generation module, used to generate corresponding functional components according to the functional requirements of the components;

[0034] The component calling module is used to generate a calling interface of a preset rule, wherein the calling interface is used to call the UI component and the functional component according to the directory structure.

[0035] To achieve the above-mentioned object, a third aspect of the present invention provides an electronic device, comprising:

[0036] at least one memory;

[0037] at least one processor;

[0038] at least one program;

[0039] The program is stored in the memory, and the processor executes the at least one program to implement the method of the present invention as described in the first aspect above.

[0040] To achieve the above-mentioned objective, a fourth aspect of the present invention provides a storage medium, which is a computer-readable storage medium. The computer-readable storage medium stores computer-executable instructions, and the computer-executable instructions are used to cause a computer to execute:

[0041] As described in the first aspect above.

[0042] The front-end engineering template library construction method and device, electronic device, and storage medium proposed in the embodiment of the present invention construct a file hierarchy according to business logic and function, and generate a template library directory structure according to the file hierarchy, and then adjust the UI components to be adjusted in the UI component library according to the adjustment requirements of the components, and generate corresponding functional components according to the functional requirements of the components, and finally generate a calling interface with preset rules, which can call UI components and functional components according to the directory structure. This embodiment adjusts the UI components to be adjusted in the UI component library, and generates corresponding functional components according to the functional requirements of the components, customizes and adjusts them based on the original components, avoids a large number of repetitive operations, improves the efficiency of component customization, and uses the calling interface with preset rules to perform unified interface call management, so as to facilitate the maintenance and update of components. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] Figure 1 It is a flowchart of a method for constructing a front-end engineering template library provided by an embodiment of the present invention.

[0044] Figure 2 It is a schematic diagram of the template library directory structure of the front-end engineering template library construction method provided by an embodiment of the present invention.

[0045] Figure 3 This is another flow chart of the front-end engineering template library construction method provided by an embodiment of the present invention.

[0046] Figure 4 This is another flow chart of the front-end engineering template library construction method provided by an embodiment of the present invention.

[0047] Figure 5 This is another flow chart of the front-end engineering template library construction method provided by an embodiment of the present invention.

[0048] Figure 6 It is a schematic diagram of form verification of the front-end engineering template library construction method provided by an embodiment of the present invention.

[0049] Figure 7 This is another flow chart of the front-end engineering template library construction method provided by an embodiment of the present invention.

[0050] Figure 8 It is a schematic diagram of form modification marking of the front-end engineering template library construction method provided by an embodiment of the present invention.

[0051] Figure 9 It is a structural block diagram of a front-end engineering template library construction device provided by an embodiment of the present invention.

[0052] Figure 10 It is a schematic diagram of the hardware structure of the electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0053] In order to make the purpose, technical solutions and advantages of the present invention more clearly understood, the present invention will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not intended to limit the present invention.

[0054] It should be noted that although the functional modules are divided in the device schematic and the logical order is shown in the flowchart, in some cases, the steps shown or described can be performed in a different order than the module division in the device or the order in the flowchart.

[0055] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by those skilled in the art to which the present invention pertains. The terms used herein are for the purpose of describing embodiments of the present invention only and are not intended to limit the present invention.

[0056] First, some terms involved in this invention are analyzed:

[0057] UI (User Interface): The user interface refers to the overall design of software's human-computer interaction, operational logic, and aesthetically pleasing interface. The user interface is the medium for interaction and information exchange between the system and the user, enabling the conversion of information's internal form into a human-acceptable form. The user interface is software designed to facilitate communication between the user and the hardware. Its purpose is to enable users to operate the hardware conveniently and efficiently, achieving two-way interaction and completing desired tasks with the hardware. The user interface has a broad definition, encompassing both human-computer interaction and graphical user interfaces. User interfaces exist in any field involving information exchange between humans and machines.

[0058] Component: Component technology is a software reuse method and the foundation of distributed computing and Web services. Component technology is now widely used, and component programming reuses program modules with complete specific functions. Each component provides some standard and simple application interfaces, allowing users to set and adjust parameters and properties. Users can organically combine multiple components from different sources to quickly build a complex application that meets actual needs. The main features that distinguish components from general software are their reusability (public / universal), customizability (setting parameters and properties), self-containedness (relatively independent modules and relatively complete functions), and interoperability (multiple components can work together). The ability to easily and conveniently integrate components using visual tools is also a key advantage of component technology.

[0059] API (Application Programming Interface): It refers to some predefined interfaces (such as functions, HTTP interfaces), or the agreements that connect different components of a software system. It is used to provide a set of routines that applications and developers can access based on certain software or hardware without having to access the source code or understand the details of the internal working mechanism.

[0060] NPM (Node Package Manager) is a package management tool installed with Node.JS, a JavaScript runtime based on the Chrome V8 engine. Node.JS uses an event-driven, non-blocking I / O model to solve code deployment problems. Common NPM usage scenarios include: 1) allowing users to download third-party packages from an NPM server for local use; 2) allowing users to download and install command-line programs written by others from an NPM server for local use; and 3) allowing users to upload their own packages or command-line programs to an NPM server for others to use.

[0061] The front-end refers to the web pages that run on browsers on PCs, mobile devices, and other devices and are displayed to users. Front-end technology refers to the process of communicating with the user's computer through the browser, while back-end technology refers to the process of storing data on the server. The primary function of front-end development is to effectively present the website interface to users. Front-end technology is generally categorized as front-end design and front-end development. Front-end design can generally be understood as the visual design of a website, while front-end development involves the implementation of the website's front-end code. This includes basic HTML and CSS, JavaScript / Ajax, and now advanced versions such as HTML5, CSS3, and SVG.

[0062] With the development of front-end technologies and the widespread adoption of technologies like HTML5, CSS3, and Node.js, various front-end framework libraries have emerged one after another, allowing for rapid development of new projects. However, these framework libraries often offer limited functionality. Customizing components is complex and requires repetitive operations, resulting in low efficiency. Furthermore, the lack of unified interface call management makes maintenance and updates inconvenient.

[0063] Based on this, an embodiment of the present invention provides a front-end engineering template library construction method and device, electronic device, and storage medium, which can adjust the UI components to be adjusted in the UI component library, and generate corresponding functional components according to the functional requirements of the components, and customize and adjust them based on the original components to avoid a large number of repetitive operations, improve the efficiency of component customization, and use the calling interface with preset rules to perform unified interface call management, so as to facilitate the maintenance and update of components.

[0064] The embodiments of the present invention provide a front-end engineering template library construction method and device, electronic device, and storage medium, which are specifically illustrated by the following embodiments. First, the front-end engineering template library construction method in the embodiment of the present invention is described.

[0065] The front-end engineering template library construction method provided by the embodiment of the present invention can be applied to the terminal, can be applied to the server side, and can also be software running in the terminal or the server side. In some embodiments, the terminal can be a smart phone, a tablet computer, a laptop computer, a desktop computer or a smart watch, etc.; the server can be an independent server, or it can be a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content delivery networks (CDNs), and big data and artificial intelligence platforms; the software can be an application that implements the front-end engineering template library construction method, etc., but is not limited to the above forms.

[0066] The present invention can be used in a wide variety of general or special computer system environments or configurations. For example: 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, distributed computing environments including any of the above systems or devices, and the like. 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 via a communications network. In a distributed computing environment, program modules can be located in local and remote computer storage media, including storage devices.

[0067] Figure 1 This is an optional flowchart of the method for constructing a front-end engineering template library provided by an embodiment of the present invention. Figure 1 The method may include but is not limited to steps S110 to S140.

[0068] Step S110: construct a file hierarchy according to business logic and functions, and generate a template library directory structure according to the file hierarchy.

[0069] In one embodiment, in order to regularize the directory structure, a clear and concise file hierarchy division is performed, integration and subdivision are performed according to business logic and core functions, a file hierarchy is constructed, and a template library directory structure is generated based on the file hierarchy, for example, it can be a tree structure, and the files are reasonably named to facilitate file storage and search.

[0070] Reference Figure 2, is a schematic diagram of the template library directory structure in an embodiment of the present application. As can be seen from the figure, the template library directory structure is divided into three levels according to the file hierarchy. The first level is the "src" general directory, which contains 11 second-level directories, namely: "assets (resources)", "components (components)", "extends (inheritance)", "lang (language)", "lookup (query)", "mock (simulated data)", "router (routing)", "ruler (rules)", "store (storage)", "urls (links)", "views (display)", etc., wherein the second-level directory "views" also includes at least two third-level directories, and the third-level directories correspond to specific files, namely: "App.vue" and "main.js". It can be understood that this figure only shows the template library directory structure, and does not mean that the template library directory structure in the embodiment of the present application can only be in this form or contain these directory contents, and no specific limitation is made here.

[0071] After obtaining the template library directory structure, you need to customize and adjust the UI components to be adjusted in the UI component library based on the original components to avoid a large number of repetitive operations and improve component customization efficiency. The following describes how to customize and adjust the UI components to be adjusted.

[0072] Step S120: Adjust the UI components to be adjusted in the UI component library according to the adjustment requirements of the components.

[0073] In one embodiment, the UI component library is integrated, integrating components into the component library through non-NPM package formats. This non-NPM format reduces the difficulty of customizing components. In this embodiment, component adjustment requirements include one or more of: modification requirements, span value adjustment requirements, form width calculation requirements, form validation requirements, form modification marking requirements, or form binding optimization requirements.

[0074] In one embodiment, when the component adjustment requirement is a modification requirement, the adjustment requirement is mainly a modification requirement. The specific adjustment process includes but is not limited to steps S1211 to S1212:

[0075] Step S1211: Obtain the directory location of the UI component to be adjusted according to the directory structure.

[0076] Step S1212: Modify the UI component to be adjusted in the directory location according to the modification requirements.

[0077] In one embodiment, by obtaining the specific location of the UI component to be adjusted in the above template library directory structure, for example Figure 2In the "components" directory, make corresponding modifications to the UI component to be adjusted based on the modification requirements of the component.

[0078] In one embodiment, when the component adjustment requirement is a span value adjustment requirement, and the UI component to be adjusted is a layout component, refer to Figure 3 , adjusting the UI components to be adjusted in the UI component library according to the adjustment requirements of the components, including but not limited to steps S1213 to S1215:

[0079] Step S1213: Obtain the number of layout components according to the span value adjustment requirement.

[0080] Step S1214: Calculate the number of rasterizations based on the number of components.

[0081] In one embodiment, the number of layout components, N1, is first obtained. Based on N1, the corresponding number of grids, N2, is calculated. Generally, N1 = N2. Gridding, or gridding, is a layout method that handles both rows and columns. A grid container wraps grid elements, drawing a pre-defined area into a grid and then filling it with elements according to the grid width.

[0082] Step S1215: Adjust the span value of the layout component according to the rasterization quantity.

[0083] In one embodiment, there is no need to specifically set the span value of each component. In this embodiment, it is only necessary to equally divide the preset area according to the rasterization number N2 and allocate the grid width according to the rule of equal distribution. That is, the span values of the layout components in this embodiment are the same.

[0084] The following is an example of the definition of a layout component span in related technologies:

[0085]

[0086] The number N1 of the above-mentioned layout components (such as grid-content) is 8, and the corresponding rasterization number is also 8. The span values of the corresponding layout components are set to: 24, 8, 8, 8, 6, 6, 6, 6, that is, the relevant technology requires specific settings for the span value of each component.

[0087] The following is an example of adjusting the span of a layout component in this embodiment (for the content in the above-mentioned related technology):

[0088]

[0089] In the above embodiment, there is no need to specifically set the span value of each component. According to the rule of equal distribution, the span value of each layout component can be (24+8+8+8+6+6+6+6) / 8=9. This adjustment method can reduce the difficulty of customizing components and improve customization efficiency.

[0090] In one embodiment, when the UI component to be adjusted is a form component (eg, a Form component), its adjustment requirements include one or more of: form width calculation, form validation, form modification marking, or form binding optimization.

[0091] In one embodiment, when the adjustment requirement is the form width calculation requirement, the width of the label is automatically calculated to achieve the effect of adaptively adjusting the width of the label text. Figure 4 , adjusting the UI components to be adjusted in the UI component library according to the component adjustment requirements, including but not limited to steps S1216 to S1218:

[0092] Step S1216: Get the width of each form component.

[0093] In one embodiment, the width of a form-like component is monitored by its parent component. When a piece of code is encapsulated into a component, which is then imported into another component, the file that imports the encapsulated component is called the parent component, and the imported component is called the child component. In a Form component, each form field is composed of a Form-item component. In this embodiment, the parent component monitors the generation of Form-item events and records the text width of the Label in each form-like component as the width of the form-like component.

[0094] Step S1217, obtaining the maximum width according to the width selection.

[0095] In one embodiment, the parent component compares the widths of all the obtained form-type components and obtains a maximum width from them, which is recorded as Labelwidth.

[0096] Step S1218: Send the maximum width to each form component by using an event broadcast message, so that the form component adjusts its width according to the maximum width.

[0097] In one embodiment, the parent component broadcasts the maximum width Labelwidth obtained above to the Form-item components of all form-type components using an event broadcast message, so that the form-type components can readjust their Label text width using the maximum width, thereby automatically calculating the Label width to achieve the effect of adaptively adjusting the Label text width, thereby eliminating the need to manually set the alignment of the Label of the form-type components.

[0098] The following is an example of calculating the form width in one embodiment of the present application.

[0099]

[0100] In this embodiment, the form text width is set by setting the value of the label-width parameter of the form component (Form). Taking label-width = 120 as an example, 120 is the maximum width. If the maximum width value is not determined during adjustment, it is not filled in here. This embodiment will adaptively calculate the maximum width according to the process from step S1216 to step S1218 and adjust the Label text width.

[0101] In one embodiment, when the adjustment requirement is a form verification requirement, it is necessary to perform convenient and quick form verification on the integrated UI component. The purpose of form verification is to verify the form information input by the user. Generally, by defining verification rules, the input information is verified and judged according to the verification rules to filter invalid data, false data or toxic data. It is a checkpoint for data security. Whether from the perspective of the product itself or considering the audience of the product, form verification is indispensable. Take the commonly used user registration form as an example: if there is no form verification, the user spends time and effort to fill in a large amount of information. When clicking Submit to experience the product function, the background returns a data format error and requires the user to fill in again, which will greatly affect the user experience.

[0102] Reference Figure 5 In this embodiment, adjusting the UI components to be adjusted in the UI component library according to the adjustment requirements of the components includes but is not limited to steps S1219 to S1221:

[0103] Step S1219: Obtain the message from the validator, and verify the form class component according to the message.

[0104] In one embodiment, by obtaining the message in the validator, the validation rules are prompted with the message to complete the purpose of validating the form component. For example, the validation rules are defined as follows:

[0105]

[0106] The messages in the validator are: site name message "Site name cannot be empty" and site name length message "Length is between 3 and 5 characters". This is only an example and does not limit the message.

[0107] Step S1220 , or, obtaining the Placeholder information of the form class component, and verifying the form class component according to the Placeholder information.

[0108] In one embodiment, if the validator message cannot be retrieved, the Placeholder information of the form component is retrieved. During front-end page layout, an input box is used, and the Placeholder information can be used to prompt the user to enter the correct information in the input box. The Placeholder attribute, an HTML5 attribute, can be used to describe a brief prompt describing the expected value of an input field. This Placeholder prompt is displayed before the user enters a value and automatically disappears once the user enters the information. The Placeholder attribute applies to the following input types: text, search, url, tel, email, and password. For example, when a user logs in and needs to enter a username (text type) and a password (password type), the Placeholder information can be used to prompt the user to enter the specific location for the username and password. Therefore, in this embodiment, by obtaining the Placeholder information of the form component (which may include validation rules) and validating the form component according to the Placeholder information, it is determined whether the input information obtained by the form complies with the validation rules.

[0109] Step S1221, or, obtain the Label message of the form class component, and verify the form class component according to the Label message.

[0110] In one embodiment, if the Placeholder information in the validator cannot be obtained, the Label message contained in the form-item component is obtained, where the Label message is used to describe the label defined in the form element. Therefore, this embodiment obtains the verification rules from the Label message and verifies the form-item component.

[0111] In one embodiment, the above three validation rules located at different message positions support string name index validation rules when being defined, and support dynamic parameter passing of validation rules, which can further improve the efficiency of form validation.

[0112] The following is an example of form validation in an embodiment of the present application. The validation rule is defined in the Placeholder information, represented as "rule":

[0113]

[0114] After the verification rules in the above embodiment are defined, they can be called multiple times and can be used across forms, enabling global management and improving the scope of application of form verification.

[0115] Reference Figure 6 , which is a schematic diagram of form validation in an embodiment of the present application. The figure shows that validation rules are defined in the Placeholder information. The content of the Input box is obtained based on the Placeholder information and validated to determine whether it meets the input requirements. For example, the "Xxx" in the Activity Name input box is validated.

[0116] In one embodiment, when the adjustment requirement is a form modification mark requirement, refer to Figure 7 , adjusting the UI components to be adjusted in the UI component library according to the adjustment requirements of the components, including but not limited to steps S1222 to S1223:

[0117] Step S1222: Obtain modification information of the form component.

[0118] In one embodiment, corresponding modification information is generated according to the modification log of the form component. The modification information may include: modification content and modification location.

[0119] Step S1223: Display the modified information with a modification mark.

[0120] In one embodiment, in order to obtain modification change information for focused attention or continued modification, modification information can be displayed with a modification mark. The modification mark can be displayed by highlighting the text or background of the modified content or highlighting the modified location. It is understood that the modification mark display can be a highlight display or a frame display, etc., and is not specifically limited here.

[0121] Reference Figure 8 , which is a schematic diagram of form modification marking in one embodiment of the present application. Figure 8The modifications include: the event name is changed from "123456" to "789", the event area is changed from "Shanghai" to "Nanjing", and the event time is changed from "2021H1" to "2021H2". Therefore, in the modified form, the modified positions of the modified event name, activity area and activity time (the input boxes shown in the figure) are displayed with frame lines. Before the modification, it is a dotted line frame, and after the modification, it is a solid line frame.

[0122] In one embodiment, when the adjustment requirement is a form binding optimization requirement, adjusting the UI component to be adjusted in the UI component library according to the component adjustment requirement includes but is not limited to steps S1224 to S1225:

[0123] Step S1224: Obtain the associated form information of the form component.

[0124] Step S1225: Reference the associated form information in the form class component.

[0125] In one embodiment, if there is associated information between two form-type components, in order to improve customization efficiency, the subsequent form can reference the definition of the other form and omit some of the same information content, so that the subsequent form does not need to display the definition.

[0126] For example, in the following example, there is an association between form components form1 and form components form2, which is represented as:

[0127]

[0128]

[0129] In the above embodiment, according to the description of step S1224 to step S1225, the associated form information of form2 is first obtained as form1. According to the associated information, the subsequent form form2 can reference the definition of form form1, so that the subsequent form form2 does not need to display the same definition.

[0130] Step S130: Generate corresponding functional components according to the functional requirements of the components.

[0131] In one embodiment, the functional requirements of the component are first obtained. For example, the functional requirements include one or more of: area requirements, approval requirements, or tree selection requirements. Then, corresponding functional components are generated based on the functional requirements. Corresponding functional components include one or more of: area components, approval chain components, or tree selection shuttle components.

[0132] In one embodiment, for example, if a form requires selecting the user's location, i.e., a region requirement, a region component may be generated. When the corresponding input box is clicked, the available region information is expanded. For example, if the user selects either domestic or foreign, for example, domestic, the next level of region information is expanded, such as "Beijing," "Shanghai," "Hangzhou," "Shenzhen," etc., which together constitute the region component. It should be understood that this is for illustrative purposes only and is not intended to be limiting.

[0133] In one embodiment, for example, if a form requires approval information, an approval chain component can be generated. When the corresponding input box is clicked, information about available approval types can be displayed. For example, options include "Sequential Approval," "Collaborative Approval," "Parallel Approval," or "Circular Approval." After the user selects an approval type, such as "Sequential Approval," a prompt appears: "Previous approval completed, next approval." The component also displays information about the next level of approvers for the user to select, and supports automatic correction of the selected content. It should be understood that this is for illustrative purposes only and is not intended to be limiting.

[0134] In one embodiment, for example, when a shuttle box component fails to meet project requirements, a tree-based selection shuttle component can be generated, for example, by re-implementing the shuttle box using a Tree control within an element. In this embodiment, the options on the left side of the tree-based selection shuttle component are not limited to a linear array; they can be a tree structure. Selecting an option on the left side will cause the selected content to appear on the right side. Deleting the selected content from the right side will also cause the selected content to be removed from the left side. It should be understood that this is for illustrative purposes only and does not constitute a limitation.

[0135] After the above embodiment customizes and adjusts the UI components to be adjusted in the UI component library, it is necessary to generate a unified interface for calling to facilitate management and maintenance.

[0136] Step S140: Generate a calling interface of preset rules, where the calling interface can call UI components and functional components according to the directory structure.

[0137] In one embodiment, an example of a calling interface for a preset rule is as follows:

[0138] this.api.get('method name',{}).then(res=>{}),

[0139] or:

[0140] This.api.post('method name',{}).then(res=>{})

[0141] Or include error handling:

[0142] This.api.getWithError('method name',{}).then(res=>{}).catch(err=>{})

[0143] This.api.postWiethError("Method name", {}).then(res=>{}).catch(err=>{})

[0144] In one embodiment, an API calling interface with unified rules and styles is defined, and the calling interface can call UI components and functional components. At the same time, due to the unified interface style, the maintenance difficulty is reduced, and the components can be easily maintained and updated.

[0145] In addition, one embodiment of the present application also includes step S150: obtaining background interface information, and configuring the background interface information in the urls directory for unified registration, that is, in this embodiment, all background interfaces are uniformly placed in the urls directory. For example, files can be uniformly registered according to functional modules, which facilitates centralized maintenance and management of background interfaces and improves the management efficiency of background interfaces.

[0146] The front-end engineering template library construction method proposed in the embodiment of the present invention constructs a file hierarchy according to business logic and function, and generates a template library directory structure according to the file hierarchy, then adjusts the UI components to be adjusted in the UI component library according to the adjustment requirements of the components, and generates corresponding functional components according to the functional requirements of the components, and finally generates a calling interface with preset rules, which can call UI components and functional components according to the directory structure. This embodiment adjusts the UI components to be adjusted in the UI component library, and generates corresponding functional components according to the functional requirements of the components, customizes and adjusts them based on the original components, avoids a large number of repetitive operations, improves the efficiency of component customization, and uses the calling interface with preset rules to perform unified interface call management, so as to facilitate the maintenance and update of components.

[0147] In addition, the front-end engineering template library constructed according to the above-mentioned front-end engineering template library construction method in this embodiment can quickly start the project, avoiding the need to select a UI library after the relevant technology has built the environment, reducing the time for technology selection, and since third-party UI libraries may have unknown risks, the model library can be used for free customization, standardizing component expression, facilitating interface maintenance, and unified Ajax standardized calls. At the same time, since the file hierarchy is constructed according to business logic and function, and the template library directory structure is generated according to the file hierarchy, each function is divided into modules, which can be developed as a whole or in a decentralized manner. In the process of multi-person collaborative development, it can significantly reduce development time and improve development efficiency.

[0148] The embodiment of the present invention also provides a front-end engineering template library construction device, which can implement the above-mentioned front-end engineering template library construction method, referring to Figure 9 , the device comprises:

[0149] The directory structure construction module 910 is used to construct a file hierarchy according to business logic and functions, and generate a template library directory structure according to the file hierarchy;

[0150] The component adjustment module 920 is used to adjust the UI components to be adjusted in the UI component library according to the adjustment requirements of the components;

[0151] Functional component generation module 930, used to generate corresponding functional components according to the functional requirements of the components;

[0152] The component calling module 940 is used to generate a calling interface with preset rules, and the calling interface is used to call UI components and functional components according to the directory structure.

[0153] The specific implementation of the front-end engineering template library construction device of this embodiment is basically the same as the specific implementation of the front-end engineering template library construction method described above, and will not be repeated here.

[0154] An embodiment of the present invention further provides an electronic device, including:

[0155] at least one memory;

[0156] at least one processor;

[0157] at least one program;

[0158] The program is stored in the memory, and the processor executes the at least one program to implement the front-end engineering template library construction method of the present invention. The electronic device can be any intelligent terminal including a mobile phone, a tablet computer, a personal digital assistant (PDA), an in-vehicle computer, etc.

[0159] See also Figure 10 , Figure 10 The hardware structure of an electronic device according to another embodiment is shown. The electronic device includes:

[0160] The processor 1001 may be implemented as a general-purpose CPU (Central Processing Unit), a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits, and is configured to execute relevant programs to implement the technical solutions provided by the embodiments of the present invention.

[0161] The memory 1002 can be implemented in the form of ROM (Read Only Memory), static storage device, dynamic storage device or RAM (Random Access Memory). The memory 1002 can store the operating system and other application programs. When the technical solutions provided in the embodiments of this specification are implemented by software or firmware, the relevant program code is stored in the memory 1002 and is called by the processor 1001 to execute the front-end engineering template library construction method of the embodiment of the present invention;

[0162] Input / output interface 1003, used to implement information input and output;

[0163] Communication interface 1004, used to implement communication interaction between this device and other devices, which can be achieved through wired means (such as USB, network cable, etc.) or wireless means (such as mobile network, WIFI, Bluetooth, etc.); and

[0164] Bus 1005 , which transmits information between various components of the device (e.g., processor 1001 , memory 1002 , input / output interface 1003 , and communication interface 1004 );

[0165] The processor 1001 , the memory 1002 , the input / output interface 1003 and the communication interface 1004 are connected to each other in communication within the device via the bus 1005 .

[0166] An embodiment of the present invention further provides a storage medium, which is a computer-readable storage medium. The computer-readable storage medium stores computer-executable instructions, and the computer-executable instructions are used to enable a computer to execute the above-mentioned front-end engineering template library construction method.

[0167] The front-end engineering template library construction method, front-end engineering template library construction device, electronic device, and storage medium proposed in the embodiments of the present invention adjust the UI components to be adjusted in the UI component library, generate corresponding functional components according to the functional requirements of the components, customize and adjust them based on the original components, avoid a large number of repetitive operations, improve the efficiency of component customization, and use a calling interface with preset rules to perform unified interface calling management, so as to facilitate the maintenance and updating of components.

[0168] The memory, as a non-transient computer-readable storage medium, can be used to store non-transient software programs and non-transient computer executable programs. In addition, the memory may include a high-speed random access memory and may also include a non-transient memory, such as at least one disk storage device, a flash memory device, or other non-transient solid-state storage device. In some embodiments, the memory may optionally include a memory remotely arranged relative to the processor, and these remote memories may be connected to the processor via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0169] The embodiments described in the embodiments of the present invention are intended to more clearly illustrate the technical solutions of the embodiments of the present invention and do not constitute a limitation on the technical solutions provided by the embodiments of the present invention. Those skilled in the art will appreciate that with the evolution of technology and the emergence of new application scenarios, the technical solutions provided by the embodiments of the present invention are equally applicable to similar technical problems.

[0170] It will be understood by those skilled in the art that Figure 1-8 The technical solutions shown in the figures do not constitute a limitation on the embodiments of the present invention, and may include more or fewer steps than those shown in the figures, or a combination of certain steps, or different steps.

[0171] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate, i.e., they may be located in one place or distributed across multiple network units. Some or all of the modules may be selected based on actual needs to achieve the objectives of this embodiment.

[0172] Those skilled in the art will appreciate that all or some of the steps in the methods, systems, and functional modules / units in the devices disclosed above may be implemented as software, firmware, hardware, or appropriate combinations thereof.

[0173] The terms "first," "second," "third," "fourth," and the like (if any) in the description of the present invention and the accompanying drawings are used to distinguish similar objects and are not necessarily used to describe a particular order or precedence. It should be understood that the terms used in this manner are interchangeable where appropriate so that the embodiments of the present invention described herein can be implemented in orders other than those illustrated or described herein. In addition, the terms "including" and "having," as well as any variations thereof, are intended to cover non-exclusive inclusions. For example, a process, method, system, product, or apparatus that includes a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units that are not explicitly listed or that are inherent to such processes, methods, products, or apparatus.

[0174] It should be understood that in the present invention, "at least one (item)" refers to one or more, and "plurality" refers to two or more. "And / or" is used to describe the association relationship of associated objects, indicating that three relationships may exist. For example, "A and / or B" can represent: only A exists, only B exists, and A and B exist at the same time, where A and B can be singular or plural. The character " / " generally indicates that the previous and next associated objects are in an "or" relationship. "At least one of the following items" or similar expressions refers to any combination of these items, including any combination of single items or plural items. For example, at least one of a, b or c can represent: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, c can be single or multiple.

[0175] In the several embodiments provided by the present invention, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are merely illustrative. For example, the division of the units is merely a logical function division. In actual implementation, there may be other division methods, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. In addition, the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0176] The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of these units may be selected to achieve the purpose of this embodiment according to actual needs.

[0177] In addition, the functional units in the various embodiments of the present invention may be integrated into a single processing unit, each unit may exist physically separately, or two or more units may be integrated into a single unit. The aforementioned integrated units may be implemented in the form of hardware or software functional units.

[0178] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes multiple instructions for enabling a computer device (which can be a personal computer, server, or network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: various media that can store programs, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk.

[0179] The preferred embodiments of the present invention are described above with reference to the accompanying drawings, but are not intended to limit the scope of the present invention. Any modifications, equivalent substitutions, and improvements made by those skilled in the art without departing from the scope and essence of the present invention should be within the scope of the present invention.

Claims

1. A method for constructing a front-end engineering template library, characterized in that: include: Construct a file hierarchy according to business logic and functions, and generate a template library directory structure based on the file hierarchy; Adjust the UI components to be adjusted in the UI component library according to the component adjustment requirements; the component adjustment requirements include modification requirements and span value adjustment requirements; Generate corresponding functional components according to the functional requirements of the components; Generate a calling interface of a preset rule, wherein the calling interface is used to call the UI component and the functional component according to the directory structure; The step of adjusting the UI components to be adjusted in the UI component library according to the adjustment requirements of the components includes: Acquire the directory location of the UI component to be adjusted according to the directory structure, and modify the UI component to be adjusted according to the modification requirement at the directory location; When the UI component to be adjusted is a layout component, the number of components of the layout component is obtained according to the span value adjustment requirement, the rasterization number is calculated according to the component number, and the span value of the layout component is adjusted according to the rasterization number; When the UI component to be adjusted is a form component, the adjustment requirements of the component include: form width calculation requirements, form verification requirements, form modification marking requirements, and form binding optimization requirements, and adjusting the UI component to be adjusted in the UI component library according to the component adjustment requirements includes: When the adjustment requirement of the component is a form width calculation requirement, the width of each form-type component is obtained, and a maximum width is obtained according to the width, and the maximum width is sent to each form-type component by using an event broadcast message, so that the form-type component adjusts its width according to the maximum width; When the adjustment requirement of the component is a form verification requirement, obtain the message of the verifier and verify the form class component according to the message; or obtain the Placeholder information of the form class component and verify the form class component according to the Placeholder information; or obtain the Label message of the form class component and verify the form class component according to the Label message; When the adjustment requirement of the component is a form modification mark requirement, obtaining the modification information of the form component and displaying the modification mark for the modification information; When the adjustment requirement of the component is a form binding optimization requirement, the associated form information of the form class component is obtained, and the associated form information is referenced in the form class component.

2. The front-end engineering template library construction method according to claim 1, characterized in that: Generating corresponding functional components according to the functional requirements of the components includes: Obtaining functional requirements of the component, where the functional requirements include one or more of: regional requirements, approval requirements, or tree selection requirements; Corresponding functional components are generated according to the functional requirements, and the functional components include: one or more of an area component, an approval chain component, or a tree-shaped selection shuttle component.

3. The method for constructing a front-end engineering template library according to any one of claims 1 to 2, characterized in that: Also includes: Get background interface information; The backend interface information is configured in the urls directory for unified registration.

4. A front-end engineering template library construction device, characterized in that: include: A directory structure building module is used to build a file hierarchy according to business logic and functions, and generate a template library directory structure based on the file hierarchy; A component adjustment module is used to adjust the UI components to be adjusted in the UI component library according to the component adjustment requirements; the component adjustment requirements include modification requirements and span value adjustment requirements; Functional component generation module, used to generate corresponding functional components according to the functional requirements of the components; A component calling module, configured to generate a calling interface according to a preset rule, wherein the calling interface is used to call the UI component and the functional component according to the directory structure; The step of adjusting the UI components to be adjusted in the UI component library according to the adjustment requirements of the components includes: Acquire the directory location of the UI component to be adjusted according to the directory structure, and modify the UI component to be adjusted according to the modification requirement at the directory location; When the UI component to be adjusted is a layout component, the number of components of the layout component is obtained according to the span value adjustment requirement, the rasterization number is calculated according to the component number, and the span value of the layout component is adjusted according to the rasterization number; When the UI component to be adjusted is a form component, the adjustment requirements of the component include: form width calculation requirements, form verification requirements, form modification marking requirements, and form binding optimization requirements, and adjusting the UI component to be adjusted in the UI component library according to the component adjustment requirements includes: When the adjustment requirement of the component is a form width calculation requirement, the width of each form-type component is obtained, and a maximum width is obtained according to the width, and the maximum width is sent to each form-type component by using an event broadcast message, so that the form-type component adjusts its width according to the maximum width; When the adjustment requirement of the component is a form verification requirement, obtain the message of the verifier and verify the form class component according to the message; or obtain the Placeholder information of the form class component and verify the form class component according to the Placeholder information; or obtain the Label message of the form class component and verify the form class component according to the Label message; When the adjustment requirement of the component is a form modification mark requirement, obtaining the modification information of the form component and displaying the modification mark for the modification information; When the adjustment requirement of the component is a form binding optimization requirement, the associated form information of the form class component is obtained, and the associated form information is referenced in the form class component.

5. An electronic device, characterized in that: include: at least one memory; at least one processor; at least one program; The program is stored in the memory, and the processor executes at least one of the programs to implement: The method according to any one of claims 1 to 3.

6. A storage medium, wherein the storage medium is a computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-executable instructions, and the computer-executable instructions are used to cause a computer to execute: The method according to any one of claims 1 to 3.

Images