Method, device, storage medium and electronic equipment for lightweight development of forms

Abstract

The present application relates to a kind of lightweight development form method, device, storage medium and electronic equipment, method includes: according to the requirement analysis result of target project, determine the front-end framework and component library for the form to be developed, based on the determined component library, determine each component satisfying requirement analysis result;The function of target project is combed, based on the function obtained by combing, with the function corresponding to each component of the determined each component is matched, according to the function of matching corresponding component is configured;Based on front-end framework and component library, configured component and the function of combing, code encapsulation is carried out, and the encapsulated component is obtained;The encapsulated component is visualized to page, to optimize the component configured, obtains the form to be developed;After verifying strategy is verified to the form to be developed, using backend data interface and transmission protocol transmission form to be developed to backend server to carry out release.The form development efficiency can be improved.

Description

Technical Field

[0001] This invention relates to the field of Internet technology, and in particular to a method, apparatus, storage medium, and electronic device for lightweight form development. Background Technology

[0002] In front-end development, forms are the means of obtaining user information and facilitating data interaction between users and servers. By submitting forms displayed on the front-end, users can use the submitted data to verify their identity, record their preferences, and return appropriate responses. Different projects require different forms, but form development typically demands extensive programming knowledge and experience, as well as a deep understanding of various front-end frameworks and technologies, making it difficult, time-consuming, and inefficient. Summary of the Invention

[0003] In view of this, the present invention provides a method, apparatus, storage medium, and electronic device for lightweight form development.

[0004] Specifically, the present invention is achieved through the following technical solution: According to a first aspect of the present invention, a method for lightweight form development is provided, the method comprising: Based on the requirements analysis results of the target project, determine the front-end framework and component library for the form to be developed, and based on the determined component library, determine each component that meets the requirements analysis results; The target project is functionally analyzed, and based on the functions obtained from the analysis, they are matched with the functions corresponding to each component that meets the requirements analysis results. The corresponding components are then configured according to the matched functions. Based on the aforementioned front-end framework and component library, the components configured according to the matching functions, and the functions obtained through functional analysis, code encapsulation is performed to obtain encapsulated components. The encapsulated components are visualized on a page to optimize the components configured based on matching functions, resulting in a form to be developed; After validating the form to be developed according to the pre-set validation strategy, the form is transmitted to the backend server for publication using the pre-set backend data interface and transmission protocol.

[0005] Optionally, the step of determining the front-end framework and component library for the form to be developed based on the requirements analysis results of the target project includes: Obtain the requirements analysis results of the target project, and determine the attribute information of the form to be developed based on the requirements analysis results; Based on the attribute information, determine the front-end framework for the form to be developed; Based on the attribute information and the front-end framework, the component library for the form to be developed is determined.

[0006] Optionally, determining the component library for the form to be developed based on the attribute information and the front-end framework includes: Based on the aforementioned front-end framework, a number of first component libraries compatible with the front-end framework are identified; Based on the attribute information, a plurality of second component libraries matching the attribute information are determined from the plurality of first component libraries; For each of the plurality of second component libraries, obtain the community activity level of that second component library; The second component library with the highest community activity was identified as the component library for the form to be developed.

[0007] Optionally, the method further includes: For each piece of information in the attribute information, based on the function corresponding to each component in the component library, obtain the component corresponding to the function that matches the information, and determine each obtained component as the component that satisfies the requirements analysis result.

[0008] Optionally, the matching function is an input function, and configuring the corresponding components according to the matching function includes: Based on the description information corresponding to the input function in the target project, set the type, length limit, and required field identifier of the input box component. The type of the input box component is set to text, number, or email.

[0009] Optionally, visualizing the encapsulated component on a page includes: Create a visual container to hold the components of the form to be developed; The encapsulation component is introduced into the visualization container; Based on the pre-set design requirements of the form to be developed, determine the layout of each component introduced into the visualization container; Bind the components and instances in the visualization container.

[0010] Optionally, the method further includes: Based on the verified form to be developed, create operation guides, tutorials, and technical manuals.

[0011] The lightweight form development method in this technical solution determines the front-end framework and component library for the form to be developed based on the requirements analysis results of the target project, and determines each component that meets the requirements analysis results based on the determined component library. The target project undergoes functional analysis. Based on the identified functions, each component that meets the requirements analysis results is matched with its corresponding function. The corresponding components are then configured according to the matched functions. Based on the front-end framework and component library, the components configured according to the matched functions, and the functions identified during the functional analysis, code is encapsulated to obtain encapsulated components. These encapsulated components are then visualized on a webpage to optimize the components configured according to the matched functions, resulting in a form to be developed. After validating the form according to a pre-set validation strategy, the form is transmitted to the backend server for publication using a pre-set backend data interface and transmission protocol. In this way, by componentizing the form's functionality and configuring, encapsulating, and visually optimizing the form's functionality in a component-based manner, there is no need to write code for the form to be developed; only the required components need to be selected and configured, effectively improving the form development efficiency.

[0012] According to a second aspect of the present invention, an apparatus for lightweight development forms is provided, the apparatus comprising: The component determination module is used to determine the front-end framework and component library for the form to be developed based on the requirements analysis results of the target project, and to determine each component that meets the requirements analysis results based on the determined component library. The component configuration module is used to sort out the functions of the target project, match the functions obtained from the sorting out with the functions corresponding to each component that meets the requirements analysis results, and configure the corresponding components according to the matched functions. The component encapsulation module is used to encapsulate code based on the front-end framework and component library, components configured according to matching functions, and functions obtained through functional analysis, to obtain encapsulated components. The visual optimization module is used to visualize the encapsulated components on the page, so as to optimize the components configured according to the matching functions and obtain the form to be developed; The form publishing module is used to validate the form to be developed according to a pre-set validation strategy, and then transmit the form to the backend server for publishing using a pre-set backend data interface and transmission protocol.

[0013] According to a third aspect of the invention, a storage medium is provided that stores a computer program, the program being executed by a processor to implement the steps of a method for lightweight development forms in any possible implementation of the first aspect.

[0014] According to a fourth aspect of the present invention, an electronic device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement a method for a lightweight development form in any possible implementation of the first aspect. Attached Figure Description

[0015] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with the invention and, together with the description, serve to explain the principles of the invention.

[0016] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or related technologies will be briefly introduced below. Obviously, those skilled in the art can obtain other drawings based on these drawings without creative effort.

[0017] Figure 1 A flowchart illustrating a method for lightweight form development provided in an embodiment of the present invention; Figure 2 A schematic diagram of a device for lightweight development forms provided in an embodiment of the present invention; Figure 3 This is a schematic diagram of the structure of an electronic device provided in an embodiment of the present invention. Detailed Implementation

[0018] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0019] In related technologies, form development typically requires developers to have extensive programming knowledge and experience, as well as a deep understanding of various front-end frameworks and technologies. This leads to the following drawbacks in form development: First, the design and implementation of forms is cumbersome: developers need to manually write a lot of code to define the structure, style and interaction logic of the form, which is not only time-consuming and laborious, but also makes the form development difficult and time-consuming, resulting in low form development efficiency. In addition, due to manual coding, it is easy to make mistakes.

[0020] Secondly, the reusability of forms developed for different projects is poor: different projects may need similar form functions, but due to the lack of effective encapsulation and componentization mechanisms, developers often need to repeatedly write similar code to adapt to different projects, resulting in low development efficiency.

[0021] Furthermore, since form development typically requires extensive programming knowledge and experience, it is almost impossible for developers without a technical background to participate in the development, creation, and modification of forms. This limits the team's collaboration efficiency and makes it impossible to meet the needs of some business departments to quickly adjust forms.

[0022] In addition, the configuration and deployment process of forms is also quite complex: form development usually needs to be done locally for development and debugging before deployment, which involves the use of multiple steps and tools, increasing the possibility of errors and extending the project's launch time.

[0023] Finally, there are certain difficulties in the interaction between forms and backend data: data validation, transmission and storage require complex code implementation, which increases the difficulty of development and maintenance costs.

[0024] To address the technical problems of complex and repetitive form development mentioned above, this embodiment proposes a lightweight form development method based on front-end technology. By using front-end technology to re-encapsulate the form framework, form elements and functions are componentized and embedded, simplifying the form development process. For example, by encapsulating different combinations of form elements and functions, a series of reusable components are formed. This allows developers to select the required components and perform simple configurations without writing code for the form itself. This not only significantly improves development efficiency but also effectively reduces the probability of errors.

[0025] See Figure 1 This invention provides a method for lightweight form development, which may include the following steps: S101. Based on the requirements analysis results of the target project, determine the front-end framework and component library for the form to be developed, and based on the determined component library, determine each component that meets the requirements analysis results. In this embodiment, as an optional embodiment, based on the requirements analysis results of the target project, the front-end framework and component library for the form to be developed are determined, including: A11, Obtain the requirements analysis results of the target project, and determine the attribute information of the form to be developed based on the requirements analysis results; In this embodiment, a comprehensive and in-depth analysis of the overall requirements of the target project is conducted to obtain the requirements analysis results. Based on the requirements analysis results, the attribute information of the forms to be developed subsequently is determined. As an optional embodiment, the attribute information includes, but is not limited to: data type, interaction complexity, application scenario, and extended items.

[0026] In this embodiment, as an optional implementation, taking an e-commerce platform as the target project, the corresponding form to be developed is an order form for the e-commerce platform. The requirements analysis results include, but are not limited to, multiple functional requirements such as product information entry, quantity selection, price calculation, and user address filling. The data type of the form to be developed is determined based on quantity and price. The application scenario is e-commerce. Since it is e-commerce, the order form also needs to interact with backend servers such as inventory system and payment system. Therefore, the interaction complexity of this order form is high, and the required development efficiency, scalability and data interaction capabilities are high.

[0027] A12, Based on the attribute information, determine the front-end framework for the form to be developed; In this embodiment, a front-end framework that satisfies the attribute information is selected. As an optional embodiment, the front-end framework includes, but is not limited to, the React framework, the Vue framework, and the Angular framework. Among them, the React framework is based on the Virtual Document Object Model (DOM) and the component-based development model, making it suitable for building large and complex single-page applications. It also has a rich ecosystem with numerous third-party libraries available for various functionalities. The Vue framework has a concise syntax and excellent performance optimization, making it suitable for rapidly developing small to medium-sized applications. The Angular framework has powerful two-way data binding and dependency injection capabilities, but it has high requirements for code standardization, making it suitable for developing enterprise-level applications.

[0028] In this embodiment, due to the high complexity of the interaction and the high requirements for development efficiency, scalability, and data interaction capabilities, the React framework can be selected as an optional embodiment.

[0029] A13. Based on the attribute information and the front-end framework, determine the component library for the form to be developed.

[0030] In this embodiment, after determining the front-end framework, relevant component libraries are selected based on the requirements analysis results (attribute information). These component libraries provide a series of predefined, reusable UI components and functional modules, accelerating the development process. As an optional embodiment, if the front-end framework is Vue, for e-commerce applications, component libraries such as ElementUI can be configured (combined). ElementUI offers a rich collection of high-quality components with a unified design style, suitable for enterprise-level back-end applications. It also provides numerous aesthetically pleasing and practical components, offering excellent support for common business scenarios.

[0031] In this embodiment, as an optional embodiment, the component library of the form to be developed is determined based on the attribute information and the front-end framework, including: Based on the aforementioned front-end framework, a number of first component libraries compatible with the front-end framework are identified; Based on the attribute information, a plurality of second component libraries matching the attribute information are determined from the plurality of first component libraries; For each of the plurality of second component libraries, obtain the community activity level of that second component library; The second component library with the highest community activity was identified as the component library for the form to be developed.

[0032] In this embodiment, when determining the component library for the form to be developed, consideration is given to whether the functionality and style of the component library meet the needs of the target project. As an optional embodiment, factors such as the activity level of the component library's community, the completeness of its documentation, and its compatibility with the front-end framework version can also be considered. For example, selecting a component library with high community activity makes it easier to find solutions in the community when encountering problems during development or application, and to obtain timely updates to adapt to the development of the front-end framework.

[0033] In this embodiment, components that meet the attribute information are selected from the ElementUI component library. Taking an order form on an e-commerce platform as an example, input box components can be selected from the ElementUI component library to fill in information such as product name, price, quantity, and user address; dropdown box components can be selected to select product category; and date picker components can be selected to select the order date. Therefore, as an optional embodiment, the method further includes: For each piece of information in the attribute information, based on the function corresponding to each component in the component library, obtain the component corresponding to the function that matches the information, and determine each obtained component as the component that satisfies the requirements analysis result.

[0034] In this embodiment, a requirements analysis is performed on the target project. For details, please refer to relevant technical documents, which will not be elaborated here.

[0035] S102. Perform a functional analysis of the target project. Based on the functions obtained from the analysis, match them with the functions corresponding to each component that meets the requirements analysis results. Configure the corresponding components according to the matched functions. In this embodiment, the functions are sorted out according to the target project. For example, the functions are sorted out based on the requirements analysis results. The sorted functions include: input function, selection function, date function, link function, etc. Among the components that meet the requirements analysis results, there are: input box component, drop-down box component and date picker component. The sorted input functions match the functions corresponding to the input box components. Based on the description information corresponding to the input functions of the target project, the input box components are configured accordingly.

[0036] In this embodiment, as an optional embodiment, the matching function is an input function, and the configuration of the corresponding components based on the matching function includes: Based on the description information corresponding to the input function in the target project, set the type, length limit, and required field identifier of the input box component. The type of the input box component is set to text, number, or email.

[0037] In this embodiment, for example, for an input box component, the type, length limit, and required field identifier of the input box component can be set according to the description information corresponding to the input function. The types of input box components include, but are not limited to, text, number, and email addresses. For example, for a dropdown component, option content and default values ​​can be configured.

[0038] In this embodiment, during the functional analysis phase, the required components can be meticulously organized and matched according to the target project requirements. Taking an input box component as an example, the component settings include, but are not limited to: setting the input box component type, such as text, number, email, etc., setting length limits, and setting required field indicators. As an optional embodiment, if the target project is a customer information collection project, for the input box component used to collect customer names in the form to be developed, the type is set to text, the length limit is 50 characters, and the required field indicator is set to yes, to ensure that customer name information is collected completely. For another example, for a dropdown component, in addition to configuring option content and default values, it may also be necessary to set whether it is searchable, whether multiple selections are allowed, etc., according to project requirements. For instance, in the dropdown box corresponding to a product category selection component, the option content is configured to the specific product category name, the default value is set to the most frequently used product category according to the business scenario, and it is also set to searchable to facilitate users to quickly find the required product category and improve form filling efficiency.

[0039] In this embodiment, the characteristics of the chosen front-end framework and related component libraries influence the specific content and method of feature delineation. For example, if the Vue framework is chosen in conjunction with the ElementUI component library, the ElementUI component library has specific design specifications and component characteristics. Therefore, when delineating features, the required functions can be organized based on the component foundation provided by the ElementUI component library. For instance, for an input box component, the ElementUI component library may already have some default styles and basic functions. However, to meet the specific needs of the target project, such as specific input validation rules and interaction logic with other components, the detailed configurations for these components are further clarified during the component configuration after feature delineation. In this way, the front-end framework and component library determined by the architecture selection provide a concrete implementation carrier for feature delineation, limiting the expansion and refinement of feature delineation to within its provided capabilities.

[0040] In this embodiment, the components in the component library are uniform format components, i.e., general components. As an optional embodiment, for similar components in different projects, uniform format components can be extracted based on each similar component and stored in the component library. In subsequent applications, based on the uniform format components and combined with the characteristics of different projects, corresponding configurations can be made respectively. In this way, on the one hand, by extracting uniform format components, development efficiency can be greatly improved and repetitive development work can be avoided. For example, for input box components needed by multiple projects, the common parts of the input box components used by multiple projects can be extracted into a unified format, and common basic styles and basic interaction logic can be set to form a common input box component. This allows different projects to develop based on this common input box component, reducing development costs and time. On the other hand, although different projects have similar component requirements, they still have unique features. Taking input box components as an example, one project may mainly use it for user login information input. Therefore, based on the configuration of the common input box component for that project, the focus should be on configuring length limits, required field identifiers, etc., to ensure the accuracy of login information. Another project uses it for product description input, and may be more concerned with the character limit when the input box type is text, whether it supports rich text editing, etc. Therefore, based on the common component with a unified format, each project can configure it according to its own needs to meet specific business scenarios.

[0041] S103. Based on the aforementioned front-end framework and component library, the components configured according to the matching functions, and the functions obtained through functional analysis, code encapsulation is performed to obtain encapsulated components; In this embodiment, after configuring the components according to the identified functions, the corresponding form code is automatically generated based on the developer's settings. As an optional embodiment, the code follows best front-end development practices, exhibiting good structure and readability. Thus, through code encapsulation, the identified functions and configurations can be transformed into actually executable form code.

[0042] In this embodiment, Vue is used as an example. As a lightweight yet powerful front-end framework, Vue's component-based approach greatly enhances development convenience and flexibility. After component configuration, Vue can automatically generate form code based on pre-configured settings, significantly improving development efficiency and effectively reducing errors that may occur when writing code manually.

[0043] In this embodiment, as an optional implementation, configuration information can be encapsulated into executable form code by calling Vue framework directives and leveraging Vue's directive system and data binding mechanism. For example, for an input box component, when the input box type is set to "number", the length limit is "10", and the required field is set to "yes" during the component configuration phase, the `v-model` directive in the Vue framework, which implements two-way data binding, can be used to reflect the user's input in the input box in real time to the data model. Simultaneously, the `v-bind` directive can be used to add attributes such as maximum length (`maxlength`) to the input box to implement the length limit function. For required fields, the form validation mechanism of the Vue framework can be combined with the `v-on` directive to listen for the submission event and check the value of the input box. If it is empty, the user is prompted to enter something.

[0044] In this embodiment, as an optional implementation, the code structure follows a clear layering principle during the code encapsulation process, reasonably separating the view layer, logic layer, and data layer. For example, in a Vue-based project, the template part can be used to define the view structure, the script part to handle business logic, and the style part to set page styles. This separation makes the code structure clear at a glance, easy to understand, and easy to modify.

[0045] In this embodiment, as an optional implementation, regarding readability, the code naming conventions follow industry-standard practices, with variable names, function names, and component names accurately reflecting their functions. Simultaneously, comments are used appropriately to improve code readability; by adding comments to key code sections, the function and implementation logic of the code are explained, facilitating other developers' quick understanding of the code's intent.

[0046] In this embodiment, as an optional implementation, considering code reusability, common functionalities are encapsulated into independent Vue components during the code encapsulation process. For example, for a dropdown component, it is encapsulated into a generic component, which can be adapted to the needs of different projects by passing different attributes. This not only effectively improves development efficiency but also ensures code consistency and maintainability.

[0047] S104. Visualize the encapsulated components on a page to optimize the components configured according to the matching functions and obtain the form to be developed; In this embodiment, the encapsulated components are displayed in a graphical interface so that developers can view the actual effect of the form to be developed at any time during the configuration process, so as to make timely adjustments and optimizations.

[0048] In this embodiment, based on the Vue framework technology, the encapsulated components are assembled into a graphical interface, and then adjusted and optimized. As an optional embodiment, the encapsulated components are visualized on a page, including: B11, Create a visual container to hold the components in the form to be developed; In this embodiment, as an optional implementation, the main view file of the Vue framework, such as the App.vue file or a .vue file, is used to define a view with predefined styles and layouts. The element acts as a container, creating a visual container to wrap the various components in the form to be developed.

[0049] In this embodiment, as an optional implementation, the program code for creating a visual container to hold the various components is as follows: <template> <div class="form-container'><!-- Here will place the assembled form components -->< / template><style scoped lang=" scss"> #form-container { padding: 20px; border: 1px solid #ccc; border-radius: 5px; background-color:m#f9f9f9; B12. In the visualization container, introduce the encapsulated component; In this embodiment, when assembling the Vue component script part of the form to be developed, various encapsulated components are introduced through the import statement. For example, the encapsulated input box component (InputComponent.vue), dropdown box component (SelectComponent.vue), etc.

[0050] In this embodiment, as an optional embodiment, the program code segment for introducing the encapsulated component is as follows: <script>import InputComponent from '@ / components / InputComponent.vue';import SelectComponent from '@ / components / SelectComponent.vue';export default {components:{InputComponent，electComponent}，data(){return { / / 这里可以定义与表单相关的数据}；}}；< / script> B13. According to the design requirements of the form to be developed set in advance, determine the layout of each component introduced in the visualization container; In this embodiment, according to the design requirements of the form to be developed set in advance, determine the layout method of each component on the page. As an optional embodiment, the Vue framework provides various layout methods, including but not limited to: CSS styles based on Flexbox layout or Grid layout. As another optional embodiment, layout components provided by UI frameworks (such as Element-UI, Vuetify, etc.) can also be used.

[0051] In this embodiment, taking the form to be developed implemented using Flexbox layout as an example, where the form to be developed contains an input box and a dropdown box. Taking the dropdown box as an example, the program code segment corresponding to the dropdown box is as follows: <template> <!--This is where the assembled form components will be placed--> <inputcomponent label="用户名" type="text" v-model="username">< / inputcomponent> <selectcomponent label="用户角色”:options=" role0ptions" v-model="userRole">< / selectcomponent> <script>import InputComponent from'@ / components / InputComponent.vue';import SelectComponent from"@ / components / selectcomponent.wue;export default {components:{…}data(){return {username:‘’,userRole:1:‘’,roleOptions:{}};}};< / script> > <style scoped lang="scss">…< / style> B14, binds the components and instances in the visualization container.

[0052] In this embodiment, data binding is performed on the assembled components, enabling them to interact with the data of the Vue instance in the component library. As an optional embodiment, taking the input box component as an example, the value of the configured input box component is bound to the username data property of the Vue instance using the v-model directive. In this way, when the drop-down options change, the value of userRole will also be updated synchronously.

[0053] In this embodiment, for components with interactive behaviors, such as button click events, the corresponding methods can be bound using the v-on directive (abbreviated as @). For example, the code snippet for adding a click event to a submit button is as follows: <template> <div class="" form-container"> <!-- Other components --> <button @click="submitForm'><button>Submit Form< / button>< / template><script>export default {methods:{submitForm(){ / / Process form submission logic, such as sending data to the backend, etc.console.log('Form submitted, username: ', this.username, ', user role: ', this.userRole);}}};< / script>In this embodiment, developers can view the actual effect of the form to be developed at any time during the component configuration process. When it is found that the layout of the form to be developed is unreasonable, the component style does not meet the expectations, or the interaction function is not perfect, adjustments and optimizations can be directly made in the template, style, or script part of the Vue component. For example, if it is found that the width of the input box is too narrow, the width property of the input box component can be directly adjusted in the relevant CSS style; if it is found that the option data of the dropdown box is incorrect, the value of roleOptions can be corrected in the data definition part of the Vue instance. In this way, through the method of real-time preview and adjustment, the visual effect of the form to be developed can be quickly iteratively optimized, ensuring that the form interface finally presented to the user meets the design requirements and has a good user experience.

[0054] S105. After verifying the form to be developed according to the pre-set verification policy, the form to be developed is transmitted to the backend server for publication by using the pre-set backend data interface and transmission protocol.

[0055] In this embodiment, by docking the form with the backend data interface, permanent data storage is achieved. As an optional embodiment, a unified backend data interface and transmission protocol are adopted. When the user submits the form, the data of the form is strictly verified and processed, and then transmitted to the backend server through a secure channel. After receiving the data, the backend server performs corresponding processing and storage. As an optional embodiment, the pre-set verification policy is the form verification mechanism in the component library.

[0056] In this embodiment, taking the form to be developed as a user registration form as an example, this form includes fields such as username, password, and email. On the front end, that is, after obtaining the form to be developed, the form verification mechanism of the Vue component can be used for verification: For username verification, it is verified through the verification function defined in the methods method of the Vue component: the username is required to be between 3 and 20 characters in length and can only contain letters, numbers, and underscores.

[0057] For password verification: Passwords must be at least 6 characters long and contain at least one number, one uppercase letter, and one lowercase letter.

[0058] For email verification: Email verification uses common email format regular expressions.

[0059] The corresponding code segment for verification is as follows: / / Username verification validateUsername(){ const username= this.username; const regex= / ^[a-zA-Z0-9]{3,20}$ / ; if(!regex.test(username)){ this.$message.error('Username must be between 3 and 20 characters long and can only contain letters, numbers, and underscores'); return false; } return true; } / / Email verification validateEmail(){ const email = this.email; const regex= / ^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-]+$ / ; if (!regex.test(email)) { this.$message.error('Please enter a valid email address'); return false; } return true; } / / Password verification validatePassword(){ const password = this.password; const regex = / ^(?=.*[az])(?=.*[AZ])(?=.*\d)[a-zA-Z\d]{6,}$ / ; if (!regex.test(password)) { this.$message.error('Password must be at least 6 characters long and contain at least one number, one uppercase letter, and one lowercase letter'); return false; } return true; } In this embodiment, after the form to be developed is generated, i.e. when the form is submitted, the verification function in the above form verification mechanism is called to perform the corresponding verification. If the verification is successful, the corresponding backend interface is called and the data is stored in the database; if the verification fails, the user is prompted to make modifications in the visual interface.

[0060] In this embodiment, as an optional embodiment, the method further includes: Based on the verified form to be developed, create operation guides, tutorials, and technical manuals.

[0061] In this embodiment, by creating operation guides, tutorials, and technical manuals, it is easy for non-technical personnel to use, and it can be enriched and expanded with certain technical functions.

[0062] In this embodiment, the elements and functions of the form are encapsulated to form a series of reusable components, which are stored in a component library. This eliminates the need for developers to write code from scratch when creating forms; they can simply select the required components and perform simple configurations. This not only greatly improves development efficiency but also reduces the probability of errors.

[0063] Meanwhile, by leveraging front-end technologies to componentize and encapsulate the various functions of the form, the maintainability of the form has been significantly improved. When it is necessary to modify or optimize a certain function of the form, only the corresponding component needs to be adjusted, without having to search for and modify related code in the entire codebase.

[0064] In addition, by embedding some complex form logic and interactive behaviors, developers can easily implement various complex form functions without having to delve into the underlying implementation details.

[0065] Based on the same inventive concept, such as Figure 2 As shown, this embodiment of the invention also provides a lightweight form development apparatus, the apparatus comprising: The component determination module 201 is used to determine the front-end framework and component library for the form to be developed based on the requirements analysis results of the target project, and to determine each component that meets the requirements analysis results based on the determined component library. In this embodiment, as an optional embodiment, the component determination module 201 is specifically used for: Obtain the requirements analysis results of the target project, and determine the attribute information of the form to be developed based on the requirements analysis results; Based on the attribute information, determine the front-end framework for the form to be developed; Based on the attribute information and the front-end framework, the component library for the form to be developed is determined.

[0066] In this embodiment, as an optional embodiment, the component library of the form to be developed is determined based on the attribute information and the front-end framework, including: Based on the aforementioned front-end framework, a number of first component libraries compatible with the front-end framework are identified; Based on the attribute information, a plurality of second component libraries matching the attribute information are determined from the plurality of first component libraries; For each of the plurality of second component libraries, obtain the community activity level of that second component library; The second component library with the highest community activity was identified as the component library for the form to be developed.

[0067] In this embodiment, as another optional embodiment, the component determination module 201 is further configured to: For each piece of information in the attribute information, based on the function corresponding to each component in the component library, obtain the component corresponding to the function that matches the information, and determine each obtained component as the component that satisfies the requirements analysis result.

[0068] The component configuration module 202 is used to sort out the functions of the target project, match the functions obtained from the sorting out with the functions corresponding to each component of each component that meets the requirements analysis results, and configure the corresponding components according to the matched functions. In this embodiment, as an optional embodiment, the component configuration module 202 is specifically used for: Based on the description information corresponding to the input function in the target project, set the type, length limit, and required field identifier of the input box component. The type of the input box component is set to text, number, or email.

[0069] The component encapsulation module 203 is used to encapsulate code based on the front-end framework and component library, components configured according to matching functions, and functions obtained by functional analysis, to obtain encapsulated components. The visual optimization module 204 is used to visualize the encapsulated components on the page in order to optimize the components configured according to the matching functions and obtain the form to be developed. In this embodiment, as an optional embodiment, the visual optimization module 204 is specifically used for: Create a visual container to hold the components of the form to be developed; The encapsulation component is introduced into the visualization container; Based on the pre-set design requirements of the form to be developed, determine the layout of each component introduced into the visualization container; Bind the components and instances in the visualization container.

[0070] The form publishing module 205 is used to validate the form to be developed according to a pre-set validation strategy, and then transmit the form to be developed to the backend server for publishing using a pre-set backend data interface and transmission protocol.

[0071] In this embodiment, as an optional embodiment, the device further includes: The form operation module (not shown in the figure) is used to create operation guides, tutorials, and technical manuals based on the validated form to be developed.

[0072] Based on the same inventive concept, embodiments of the present invention also provide a storage medium storing a computer program thereon, wherein when the program is executed by a processor, it implements the steps of the lightweight development form method in any of the above possible implementations.

[0073] Optionally, the storage medium may be a non-transitory computer-readable storage medium, such as a ROM, random access memory (RAM), CD-ROM, magnetic tape, floppy disk, and optical data storage device.

[0074] Based on the same inventive concept, see [link to inventive concept] Figure 3 This invention also provides an electronic device, including a memory 101 (e.g., non-volatile memory), a processor 102, and a computer program stored on the memory 101 and executable on the processor 102. When the processor 102 executes the program, it implements the steps of the lightweight development form method described in any of the above possible implementations, which can be equivalent to the aforementioned lightweight development form apparatus. Of course, the processor can also be used to process other data or perform calculations. This electronic device can be a PC, server, terminal, or other similar device.

[0075] like Figure 3 As shown, the electronic device may also include: memory 103, network interface 104, and internal bus 105. In addition to these components, other hardware may also be included, which will not be described in detail here.

[0076] It should be noted that the aforementioned lightweight development form device can be implemented by software. As a logical device, it is formed by the processor 102 of the electronic device in which it is located reading the computer program instructions stored in the non-volatile memory into the memory 103 for execution.

[0077] The embodiments of the subject matter and functional operation described in this specification can be implemented in the following ways: digital electronic circuits, tangibly embodied computer software or firmware, computer hardware including the structures disclosed in this specification and their structural equivalents, or combinations thereof. Embodiments of the subject matter described in this specification can be implemented as one or more computer programs, i.e., one or more modules of computer program instructions encoded on a tangible, non-transitory program carrier for execution by a data processing apparatus or for controlling the operation of a data processing apparatus. Alternatively or additionally, the program instructions may be encoded on artificially generated propagation signals, such as machine-generated electrical, optical, or electromagnetic signals, which are generated to encode information and transmit it to a suitable receiving device for execution by the data processing apparatus. The computer storage medium may be a machine-readable storage device, a machine-readable storage substrate, a random or serial access memory device, or combinations thereof.

[0078] The processing and logic flow described in this specification can be executed by one or more programmable computers that execute one or more computer programs to perform corresponding functions by operating on input data and generating output. The processing and logic flow can also be executed by special-purpose logic circuitry—such as FPGA (Field Programmable Gate Array) or ASIC (Application-Specific Integrated Circuit), and the device can also be implemented as special-purpose logic circuitry.

[0079] Suitable computers for executing computer programs include, for example, general-purpose and / or special-purpose microprocessors, or any other type of central processing unit. Typically, the central processing unit receives instructions and data from read-only memory and / or random access memory. The basic components of a computer include a central processing unit for implementing or executing instructions and one or more memory devices for storing instructions and data. Typically, a computer will also include one or more mass storage devices for storing data, such as disks, magneto-optical disks, or optical disks, or the computer will be operatively coupled to such mass storage devices to receive data from or transfer data to them, or both. However, a computer is not required to have such devices. Furthermore, a computer can be embedded in another device, such as a mobile phone, a personal digital assistant (PDA), a mobile audio or video player, a game console, a global positioning system (GPS) receiver, or a portable storage device such as a universal serial bus (USB) flash drive, to name a few.

[0080] Computer-readable media suitable for storing computer program instructions and data include all forms of non-volatile memory, media, and memory devices, such as semiconductor memory devices (e.g., EPROM, EEPROM, and flash memory devices), magnetic disks (e.g., internal hard disks or removable disks), magneto-optical disks, and CD-ROM and DVD-ROM disks. Processors and memory may be supplemented by or incorporated into dedicated logic circuitry.

[0081] While this specification contains numerous specific implementation details, these should not be construed as limiting the scope of any invention or the scope of the claims, but rather are primarily used to describe features of specific embodiments of a particular invention. Certain features described in the various embodiments herein may also be implemented in combination in a single embodiment. Conversely, various features described in a single embodiment may also be implemented separately in various embodiments or in any suitable sub-combination. Furthermore, while features may function in certain combinations as described above and even initially claimed in this way, one or more features from a claimed combination may be removed from that combination in some cases, and a claimed combination may refer to a sub-combination or a variation thereof.

[0082] Similarly, although the operations are depicted in a specific order in the accompanying drawings, this should not be construed as requiring these operations to be performed in the specific order shown or sequentially, or requiring all illustrated operations to be performed to achieve the desired result. In some cases, multitasking and parallel processing may be advantageous. Furthermore, the separation of various system modules and components in the above embodiments should not be construed as requiring such separation in all embodiments, and it should be understood that the described program components and systems can generally be integrated together in a single software product or packaged into multiple software products.

[0083] Thus, specific embodiments of the subject matter have been described. Other embodiments are within the scope of the appended claims. In some cases, the actions recited in the claims may be performed in a different order and still achieve the desired result. Furthermore, the processes depicted in the drawings are not necessarily shown in a specific order or sequence to achieve the desired result. In some implementations, multitasking and parallel processing may be advantageous.

[0084] It should be noted that, in this document, relational terms such as "first" and "second" are used merely to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one…" does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes the element.

[0085] The above are merely specific embodiments of the present invention, enabling those skilled in the art to understand or implement the invention. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the invention. Therefore, the present invention is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features claimed herein.< / button> < / template> < / template> < / template>

Claims

1. A method for lightweight form development, characterized in that, include: Based on the requirements analysis results of the target project, determine the front-end framework and component library for the form to be developed, and based on the determined component library, determine each component that meets the requirements analysis results; The target project is functionally analyzed, and based on the functions obtained from the analysis, they are matched with the functions corresponding to each component that meets the requirements analysis results. The corresponding components are then configured according to the matched functions. Based on the aforementioned front-end framework and component library, the components configured according to the matching functions, and the functions obtained through functional analysis, code encapsulation is performed to obtain encapsulated components. The encapsulated components are visualized on a page to optimize the components configured based on matching functions, resulting in a form to be developed; After validating the form to be developed according to the pre-set validation strategy, the form is transmitted to the backend server for publication using the pre-set backend data interface and transmission protocol.

2. The method for lightweight form development according to claim 1, characterized in that, Based on the requirements analysis results of the target project, the front-end framework and component library for the form to be developed are determined, including: Obtain the requirements analysis results of the target project, and determine the attribute information of the form to be developed based on the requirements analysis results; Based on the attribute information, determine the front-end framework for the form to be developed; Based on the attribute information and the front-end framework, the component library for the form to be developed is determined.

3. The method for lightweight form development according to claim 2, characterized in that, The step of determining the component library for the form to be developed based on the attribute information and the front-end framework includes: Based on the aforementioned front-end framework, a number of first component libraries compatible with the front-end framework are identified; Based on the attribute information, a plurality of second component libraries matching the attribute information are determined from the plurality of first component libraries; For each of the plurality of second component libraries, obtain the community activity level of that second component library; The second component library with the highest community activity was identified as the component library for the form to be developed.

4. The method for lightweight form development according to claim 3, characterized in that, The method further includes: For each piece of information in the attribute information, based on the function corresponding to each component in the component library, obtain the component corresponding to the function that matches the information, and determine each obtained component as the component that satisfies the requirements analysis result.

5. The method for lightweight form development according to any one of claims 1 to 4, characterized in that, The matching function is an input function, and configuring the corresponding components according to the matching function includes: Based on the description information corresponding to the input function in the target project, set the type, length limit, and required field identifier of the input box component. The type of the input box component is set to text, number, or email.

6. The method for lightweight form development according to any one of claims 1 to 4, characterized in that, The step of visualizing the encapsulated component on a page includes: Create a visual container to hold the components of the form to be developed; The encapsulation component is introduced into the visualization container; Based on the pre-set design requirements of the form to be developed, determine the layout of each component introduced into the visualization container; Bind the components and instances in the visualization container.

7. The method for lightweight form development according to any one of claims 1 to 4, characterized in that, The method further includes: Based on the verified form to be developed, create operation guides, tutorials, and technical manuals.

8. A device for lightweight form development, characterized in that, The apparatus for the lightweight development form includes: The component determination module is used to determine the front-end framework and component library for the form to be developed based on the requirements analysis results of the target project, and to determine each component that meets the requirements analysis results based on the determined component library. The component configuration module is used to sort out the functions of the target project, match the functions obtained from the sorting out with the functions corresponding to each component that meets the requirements analysis results, and configure the corresponding components according to the matched functions. The component encapsulation module is used to encapsulate code based on the front-end framework and component library, components configured according to matching functions, and functions obtained through functional analysis, to obtain encapsulated components. The visual optimization module is used to visualize the encapsulated components on the page, so as to optimize the components configured according to the matching functions and obtain the form to be developed; The form publishing module is used to validate the form to be developed according to a pre-set validation strategy, and then transmit the form to the backend server for publishing using a pre-set backend data interface and transmission protocol.

9. A storage medium, characterized in that, The steps of storing a program or instructions on a storage medium, and having the program or instructions executed by a processor to implement the method of lightweight development form as described in any one of claims 1 to 7.

10. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the steps of the method for lightweight development forms as described in any one of claims 1 to 7.

Images