Front-end page rapid generation method and device, storage medium and product

Abstract

The invention relates to the technical field of smart homes, and provides a front-end page rapid generation method and device, a storage medium and a product, and the method comprises the steps: selecting a to-be-applied reference page from a reference page library according to a page generation demand, and selecting a to-be-applied database object from a plurality of pre-defined database objects; according to the to-be-applied reference page and the to-be-applied database object, automatically adding or removing a difference component to obtain a complete page structure corresponding to the page generation demand; and according to the complete page structure, generating a front-end page code, and running the front-end page code to generate a target front-end page. According to the scheme, on the premise that the front-end page generation accuracy is guaranteed, rapid generation of the front-end page can be achieved, the workload and time of front-end page development are saved, and the efficiency of front-end page development is improved.

Description

Technical Field

[0001] The present application relates to the field of smart home technology, and in particular to a method, device, storage medium and product for quickly generating a front-end page. Background Art

[0002] Front-end development is a branch of software development that focuses on building and maintaining the user interface and user experience of a website or web application. Front-end developers use a range of technologies to create interactive pages that run in a browser.

[0003] Currently, when building web applications, many pages often present similar layout structures and functional modules, resulting in serious code redundancy. In this case, the similar parts can be regarded as common components, such as shared navigation bars, footers, or common UI components. However, each page has its own unique parts, such as data object operations and interaction problems between page components, which require customized development. For example, if a front-end developer wants to develop a query list page, he generally needs two parts: the query condition form and the query result list, which are common components in the project. Then develop a docking back-end interface, obtain data objects, and customize the correspondence between the development condition form and the result list.

[0004] The existing front-end page development model is mainly based on development. In addition to the development of common components, most front-end developers are engaged in the development of page component interactions with high repetition and the development of binding back-end interfaces. Therefore, the existing front-end page development workload is large, the development time is long, and the efficiency of front-end page development is poor. Summary of the invention

[0005] The present application provides a method, device, storage medium and product for quickly generating a front-end page, which is used to solve the defects of the existing front-end page development in the prior art, such as large workload, long development time and poor efficiency of front-end page development. It can realize the rapid generation of the front-end page while ensuring the accuracy of the front-end page generation, thus saving the workload and time of the front-end page development and improving the efficiency of the front-end page development.

[0006] The present application provides a method for quickly generating a front-end page, and the method comprises the following steps.

[0007] According to the page generation requirement, a reference page to be applied is selected from a reference page library, and a database object to be applied is selected from a plurality of predefined database objects; wherein the reference page library includes a plurality of predefined reference pages, and the reference page includes predefined components and layouts; Automatically add or remove different components according to the to-be-applied reference page and the to-be-applied database object, so as to obtain the complete page structure corresponding to the page generation requirement; wherein, the different components are the different components between the predefined components in the to-be-applied reference page and the components required by the target front-end page; the target front-end page is the front-end page corresponding to the page generation requirement; the complete page structure includes: the components required by the target front-end page and the binding relationship between the components required by the target front-end page and the database object; Generate front-end page code according to the complete page structure, and run the front-end page code to generate the target front-end page.

[0008] The beneficial effects of the above steps are as follows: By selecting the to-be-applied reference page and the to-be-applied database object from the reference page library and multiple predefined database objects, the time for developers to write code from scratch can be greatly reduced. Further, according to the to-be-applied reference page and the to-be-applied database object, automatically add or remove different components to generate the target front-end page, that is, automatically add or remove different components according to the actual page generation requirement, meet the personalized setting requirement of the actual front-end page, and improve the accuracy and reliability of front-end page generation. Further, the predefined reference pages and components can be reused in multiple projects, improving the reusability and utilization efficiency of development resources. Therefore, the above solution can achieve the rapid generation of the front-end page on the premise of ensuring the accuracy of front-end page generation, save the workload and time of front-end page development, and improve the efficiency of front-end page development.

[0009] According to the present application, a method for rapidly generating a front-end page is provided. Automatically adding or removing different components according to the to-be-applied reference page and the to-be-applied database object to obtain the complete page structure corresponding to the page generation requirement includes the following steps.

[0010] Compare the predefined components in the to-be-applied reference page with the components required by the target front-end page to determine the different components; If the components required by the target front-end page are more than the predefined components in the to-be-applied reference page, perform a complement processing to automatically add the different components; If the components required by the target front-end page are less than the predefined components in the to-be-applied reference page, perform a rounding processing to automatically remove the different components.

[0011] The beneficial effects of the above steps are as follows: On the one hand, by comparing the predefined components in the to-be-applied benchmark page with the components required for the target front-end page, the differential components are automatically identified and processed, meeting the personalized setting requirements of the actual front-end page and improving the accuracy and reliability of front-end page generation. On the other hand, the workload of manual coding is reduced, making page generation more intelligent and automated. On yet another hand, developers do not need to manually add or remove components, and can respond more quickly to changes in page requirements, improving development efficiency. Therefore, the above steps improve the efficiency and quality of front-end page generation by automatically processing component differences, while saving development and maintenance costs.

[0012] According to the present application, a method for quickly generating a front-end page is provided. After automatically adding or removing differential components according to the to-be-applied benchmark page and the to-be-applied database object to obtain a complete page structure corresponding to the page generation requirement, the method further includes the following steps.

[0013] Perform adaptive adjustment on the layout of the complete page structure.

[0014] The beneficial effects of the above steps are as follows: On the one hand, through adaptive adjustment, the page can automatically adapt to different devices and screen sizes, enhancing the ability of responsive design. On the other hand, adaptive adjustment reduces the need to customize specific versions of the page for different devices, thereby reducing maintenance costs and workload. On yet another hand, performing adaptive adjustment on the layout of the complete page structure can provide an optimized layout and experience for users, enhancing user experience and satisfaction. Therefore, the above steps ensure the flexibility and future compatibility of the page, while enhancing user experience and search engine optimization effects.

[0015] According to the present application, a method for quickly generating a front-end page is provided. Generating front-end page code according to the complete page structure specifically includes the following steps.

[0016] Based on the type of code generation selected by the user, generate front-end page code according to the complete page structure; the types of code generation include: full-scale code and incremental code.

[0017] The beneficial effects of the above steps are as follows: On the one hand, users can choose to generate full - scale code or incremental code according to their own needs, providing greater flexibility and control. On the other hand, for large - scale projects or frequently updated applications, incremental code generation can reduce the deployment of duplicate code and improve development and deployment efficiency. Full - scale code generation ensures that all dependencies and components are up - to - date when deployed in a new environment, reducing compatibility issues. Therefore, the above steps provide two types of code generation, full - scale code and incremental code, which can meet the development and deployment needs in different scenarios, improve development efficiency, optimize resource usage, and ensure the rapid iteration and continuous delivery of the application.

[0018] According to the present application, a method for quickly generating a front - end page is provided. After running the front - end page code to generate the target front - end page, the method further includes the following steps.

[0019] Perform functional testing on the target front - end page to ensure that the functions of the target front - end page are normal.

[0020] The beneficial effects of the above steps are as follows: After running the front - end page code to generate the target front - end page, performing functional testing on the front - end page ensures that the functions of the front - end page are normal, improving the accuracy and reliability of front - end page generation.

[0021] According to the present application, a method for quickly generating a front - end page is provided. The front - end page code includes at least one of the following: HyperText Markup Language, Cascading Style Sheets, JavaScript.

[0022] The beneficial effects of the above steps are as follows: By automatically generating HyperText Markup Language, Cascading Style Sheets, and JavaScript code, not only the development efficiency and code quality are improved, but also the responsiveness, interactivity, and maintainability of the page are ensured.

[0023] The present application further provides a front - end page quick - generation device, and the front - end page quick - generation device includes the following modules.

[0024] A selection module, configured to select a benchmark page to be applied from a benchmark page library according to page generation requirements, and select a database object to be applied from multiple pre - defined database objects; wherein, the benchmark page library includes multiple pre - defined benchmark pages, and the benchmark pages include pre - defined components and layouts; A processing module, configured to automatically add or remove different components according to the to-be-applied reference page and the to-be-applied database object, so as to obtain a complete page structure corresponding to the page generation requirement; wherein, the different components are the different components between the predefined components in the to-be-applied reference page and the components required by the target front-end page; the target front-end page is the front-end page corresponding to the page generation requirement; the complete page structure includes: the components required by the target front-end page and the binding relationship between the components required by the target front-end page and the database object; A generation module, configured to generate front-end page code according to the complete page structure, and run the front-end page code to generate the target front-end page.

[0025] The beneficial effects of the above device are as follows: The selection module can greatly reduce the time for developers to write code from scratch by selecting the to-be-applied reference page and the to-be-applied database object from the reference page library and multiple predefined database objects. Further, the processing module automatically adds or removes different components according to the to-be-applied reference page and the to-be-applied database object, and the generation module generates the target front-end page, that is, it can automatically add or remove different components according to the actual page generation requirement, meet the actual front-end page personalized setting requirement, and improve the accuracy and reliability of front-end page generation. Further, the predefined reference pages and components can be reused in multiple projects, improving the reusability and utilization efficiency of development resources. Therefore, the above solution can achieve the rapid generation of the front-end page on the premise of ensuring the accuracy of front-end page generation, save the workload and time of front-end page development, and improve the efficiency of front-end page development. This application also provides an electronic device, including a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein when the processor executes the program, the steps of the front-end page rapid generation method as described in any one of the above are implemented.

[0026] This application also provides a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, the steps of the front-end page rapid generation method as described in any one of the above are implemented.

[0027] This application also provides a computer program product, including a computer program, and when the computer program is executed by a processor, the steps of the front-end page rapid generation method as described in any one of the above are implemented.

[0028] The front-end page rapid generation method, device, storage medium, and product provided by this application can greatly reduce the time for developers to write code from scratch by selecting the benchmark page to be applied and the database objects to be applied from the benchmark page library and multiple predefined database objects. Further, according to the benchmark page to be applied and the database objects to be applied, the target front-end page is generated by automatically adding or removing differential components, that is, differential components can be automatically added or removed according to the actual page generation requirements, meeting the personalized setting requirements of the actual front-end page and improving the accuracy and reliability of front-end page generation. Further, the predefined benchmark pages and components can be reused in multiple projects, improving the reusability and utilization efficiency of development resources. Therefore, the solution of this application can achieve the rapid generation of front-end pages on the premise of ensuring the accuracy of front-end page generation, saving the workload and time of front-end page development and improving the efficiency of front-end page development. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0030] Figure 1 It is a schematic diagram of the hardware environment of an interaction method of an intelligent device according to an embodiment of this application.

[0031] Figure 2 It is a schematic flowchart of the front-end page rapid generation method provided by this application.

[0032] Figure 3 It is a schematic structural diagram of the front-end page rapid generation device provided by this application.

[0033] Figure 4 It is a schematic structural diagram of the electronic device provided by this application. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0034] To make the objectives, technical solutions, and advantages of the present invention clearer, the following will clearly and completely describe the technical solutions in the present invention in conjunction with the drawings in the present invention. Obviously, the described embodiments are some, but not all, of the embodiments of the present invention. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative efforts fall within the scope of protection of the present invention.

[0035] It should be noted that the terms "including" and "having" and any variations thereof in the description of the present application and the above-mentioned drawings are intended to cover non-exclusive inclusion. For example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those clearly listed steps or units, but may include other steps or units that are not clearly listed or are inherent to these processes, methods, products or devices.

[0036] According to one aspect of the embodiments of the present application, a method for quickly generating a front-end page is provided. The method for quickly generating a front-end page is widely applied to whole-house intelligent digital control application scenarios such as Smart Home, intelligent home, intelligent household device ecosystem, Intelligence House ecosystem, etc. Optionally, in this embodiment, the above-mentioned method for quickly generating a front-end page can be applied to a hardware environment composed of a terminal device 102 and a server 104 as shown in Figure 1 the figure. As shown in Figure 1 the figure, the server 104 is connected to the terminal device 102 through a network, and can be used to provide services (such as application services, etc.) for the terminal or the client installed on the terminal. A database can be set on the server or independently of the server, and is used to provide data storage services for the server 104. Cloud computing and / or edge computing services can be configured on the server or independently of the server, and are used to provide data operation services for the server 104.

[0037] The above-mentioned network may include but is not limited to at least one of the following: wired network, wireless network. The above-mentioned wired network may include but is not limited to at least one of the following: wide area network, metropolitan area network, local area network. The above-mentioned wireless network may include but is not limited to at least one of the following: WIFI (Wireless Fidelity), Bluetooth. The terminal device 102 is not limited to a PC, mobile phone, tablet computer, smart air conditioner, smart range hood, smart refrigerator, smart oven, smart stove, smart washing machine, smart water heater, smart washing equipment, smart dishwasher, smart projection device, smart TV, smart drying rack, smart curtain, smart audio and video, smart socket, smart speaker, smart sound box, smart fresh air device, smart kitchen and bathroom equipment, smart bathroom equipment, smart floor sweeping robot, smart window cleaning robot, smart mopping robot, smart air purification device, smart steam box, smart microwave oven, smart kitchen water heater, smart purifier, smart water dispenser, smart door lock, etc.

[0038] The technical solution of the present application and how the technical solution of the present application solves the above technical problems will be described in detail below with specific embodiments. These several specific embodiments below can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments. Below, in combination with Figure 2Describe the method for quickly generating the front-end page of this application.

[0039] In practical applications, the execution entity of this front-end page quick generation method can be a front-end page quick generation device. There are various implementation methods for the front-end page quick generation device. For example, it can be implemented through a computer program, such as application software, etc.; or, for example, a chip, etc. It can also be implemented as a medium storing relevant computer programs, such as a USB flash drive, a cloud drive, etc.; or, it can also be implemented through an entity device integrated or installed with relevant computer programs, such as a server, a smart device, etc.

[0040] Figure 2 It is a schematic flowchart of the front-end page quick generation method provided by this application. As Figure 2 shown, this front-end page quick generation method includes steps 201 to 204.

[0041] Step 201: According to the page generation requirement, select the benchmark page to be applied from the benchmark page library, and select the database object to be applied from multiple pre-defined database objects.

[0042] Among them, the benchmark page library includes multiple pre-defined benchmark pages, and the benchmark page includes pre-defined components and layouts.

[0043] Specifically, the benchmark page refers to a template page that has been designed, including pre-defined components and layouts, and can be used to quickly construct a new front-end page.

[0044] Exemplarily, the pre-defined components in the benchmark page include: UI components (User Interface Components), functional components, layout components, etc. Among them, the UI components include buttons, input boxes, drop-down menus, navigation bars, tables, charts, etc. The functional components include login forms, search boxes, shopping cart icons, etc. The layout components include grid systems, card layouts, list views, etc.

[0045] Exemplarily, the pre-defined layouts in the benchmark page include: responsive layout, flexible grid system, navigation structure. Among them, the responsive layout ensures that the page can be correctly displayed on different devices and screen sizes. The flexible grid system allows the content area to be dynamically adjusted according to the screen size. The pre-defined navigation menu and breadcrumb navigation in the navigation structure help users navigate within the website.

[0046] It can be understood that the benchmark page to be applied refers to the template page selected from the benchmark page library for a specific page generation task. This benchmark page is pre-defined and contains a series of layouts and components, and can be used to quickly construct a new front-end page.

[0047] Among them, the database objects to be applied refer to the database entities or data structures selected to provide data support during the page generation process. These objects usually contain the data that the page needs to display or interact with. By way of example, the database objects to be applied include: Tables, Views, Indexes, Triggers, Stored Procedures, Functions, Sequences, Constraints, User-Defined Data Types, User-Defined Aggregates, User-Defined Table Types, etc.

[0048] In this embodiment, the page generation requirements refer to the specific requirements and goals when a user or developer creates a new front-end page. It can be understood that the page generation requirements characterize the target front-end page. In practical applications, the page generation requirements are the guiding principles in the front-end page development process. It helps developers clarify the goals, select appropriate baseline pages and database objects to ensure that the finally generated page can meet all the predetermined requirements.

[0049] By way of example, the page generation requirements include at least one of the following: functional requirements, that is, the specific functions that the page needs to implement, for example, data display, form submission, user interaction, etc.; data requirements, that is, the data types that the page needs to display or process, as well as the source and structure of the data; layout and design requirements, that is, the visual layout, design style and user experience requirements of the page, including colors, fonts, images and responsive design, etc.; performance requirements, that is, the performance standards of the page, such as loading speed, response time and resource consumption, etc.

[0050] In this embodiment, there is no specific limitation on the selection method of the baseline page to be applied and the database objects to be applied. By way of example, it is automatically implemented by the front-end page rapid generation device according to the page generation requirements. For example, the front-end page rapid generation device obtains the page generation requirements and automatically selects the baseline page to be applied and the database objects to be applied. By way of another example, the front-end page rapid generation device provides a selection interface for the user, and the developer can check the baseline page to be applied and the database objects to be applied in the selection interface according to the page generation requirements.

[0051] Optionally, the front-end page rapid generation device obtains the page generation requirements, automatically selects the baseline page to be applied and the database objects to be applied, and further visually displays the baseline page to be applied and the database objects to be applied in the selection interface, and the developer can adjust the baseline page to be applied and the database objects to be applied according to the actual application scenario and actual requirements.

[0052] Step 202: Automatically add or remove different components according to the to-be-applied baseline page and the to-be-applied database object, so as to obtain the complete page structure corresponding to the page generation requirement.

[0053] Among them, the different components are the different components between the predefined components in the to-be-applied baseline page and the components required by the target front-end page; the target front-end page is the front-end page corresponding to the page generation requirement; the complete page structure includes: the components required by the target front-end page and the binding relationship between the components required by the target front-end page and the database object.

[0054] In the present invention, two core concepts are proposed, namely page rounding and page complementing. Among them, page rounding refers to selecting a to-be-applied baseline page, selecting the to-be-applied database object corresponding to the components required by the target front-end page, and then hiding other components and their layouts in the components of the to-be-applied baseline page except for the components required by the target front-end page. Page complementing refers to selecting the to-be-applied baseline page corresponding to the components required by the target front-end page, selecting a to-be-applied database object, and the remaining components will automatically analyze and complete the data objects of the remaining components according to the to-be-applied database object.

[0055] The following is illustrated with specific examples. Specifically, a query list page consists of a query condition form and a result list.

[0056] For the concept of page complementing, in an example, according to the page generation requirement, it is determined that the target front-end page needs a query list component. According to the page generation requirement, a query list page is selected from the baseline page library as the to-be-applied baseline page, and a database object of a query condition form is selected from the predefined database objects as the to-be-applied database object. Further, the front-end page rapid generation device analyzes according to the built-in database object analysis method, and finds out the data objects required by the associated result list component, and automatically supplements the data objects corresponding to the result list component.

[0057] For the concept of page rounding, in an example, according to the page generation requirement, it is determined that the target front-end page only needs the result list component and does not need the query condition form. According to the page generation requirement, a query list page is selected from the baseline page library as the to-be-applied baseline page, and a database object of the result list is selected from the predefined database objects as the to-be-applied database object. Further, the front-end page rapid generation device selects to hide or remove the query condition form component.

[0058] It should be noted that the method for quickly generating the front-end page in this embodiment can be applied to the generation of various types of front-end pages. For example, data display pages, form pages, e-commerce pages, user personal profile pages, management pages, search result pages, user feedback and comment pages, marketing and landing pages, multimedia content pages, enterprise official website pages, education and course pages, etc.

[0059] Specifically, in some embodiments, step 202 above includes: Compare the predefined components in the benchmark page to be applied with the components required for the target front-end page to determine the different components.

[0060] If the components required for the target front-end page are more than the predefined components in the benchmark page to be applied, perform a complement processing to automatically add the different components.

[0061] If the components required for the target front-end page are less than the predefined components in the benchmark page to be applied, perform a rounding processing to automatically remove the different components.

[0062] It can be understood that, on the one hand, by comparing the predefined components in the benchmark page to be applied with the components required for the target front-end page, automatically identifying and processing the different components, it meets the actual personalized setting requirements of the front-end page, and improves the accuracy and reliability of front-end page generation. On the other hand, it reduces the workload of manual coding, making page generation more intelligent and automated. On the other hand, developers do not need to manually add or remove components, and can respond to page requirement changes faster, improving development efficiency. Therefore, the above steps improve the efficiency and quality of front-end page generation by automatically processing component differences, while saving development and maintenance costs.

[0063] In addition, in some embodiments, after step 202 above, the method further includes: Perform an adaptive adjustment on the layout of the complete page structure.

[0064] Specifically, the adaptive adjustment includes but is not limited to: component position adjustment, page size adjustment, component size adjustment, hiding or showing components, font size adjustment, adaptation of images and media, adaptation of navigation and menus, and adjustment of interactive elements.

[0065] It is understandable that, on the one hand, through adaptive adjustment, the page can automatically adapt to different devices and screen sizes, enhancing the ability of responsive design. On the other hand, adaptive adjustment reduces the need to customize specific versions of the page for different devices, thus reducing maintenance costs and workload. On yet another hand, making adaptive adjustments to the layout of the complete page structure can provide users with an optimized layout and experience, enhancing user experience and satisfaction. Therefore, the above steps ensure the flexibility and future compatibility of the page, while enhancing user experience and search engine optimization effects.

[0066] Step 203: Generate front-end page code according to the complete page structure.

[0067] Among them, the complete page structure refers to the page structure that, after rounding or complementing, contains the components required for the target front-end page and the binding relationship between the components required for the target front-end page and the database objects.

[0068] In practical applications, use a template engine, code generation tool, or script to automatically generate front-end code according to the complete page structure.

[0069] Specifically, in some embodiments, the above front-end page code includes at least one of the following: HyperText Markup Language, Cascading Style Sheets, JavaScript.

[0070] Among them, HyperText Markup Language (HTML) is a standard markup language for creating web pages and online applications. HTML documents consist of a series of elements, which are used to tell the browser how to display the content. Each element is surrounded by a start tag and an end tag, and they can contain attributes to provide more information.

[0071] Among them, Cascading Style Sheets (CSS) is a style language used to describe the presentation form of HTML or Extensible Markup Language (XML) documents. CSS can control the layout, color, font, and various other visual and typographic effects of a web page, and is one of the key technologies for achieving web page beautification and responsive design.

[0072] Among them, JavaScript (JS) is a high-level, interpreted programming language. It is a multi-paradigm language that supports object-oriented, imperative, declarative, and functional programming styles.

[0073] It can be understood that by automatically generating Hypertext Markup Language, Cascading Style Sheets, and JavaScript code, not only the development efficiency and code quality are improved, but also the responsiveness, interactivity, and maintainability of the page are ensured.

[0074] In some embodiments, step 203 above specifically includes: Based on the type of code generation selected by the user, generate front-end page code according to the complete page structure; the types of code generation include: full code and incremental code.

[0075] Among them, full code refers to a complete set of code that includes all parts of an application or website. In a full deployment, the code of the entire application or website will be redeployed, even if only a part of the code has changed. Generating full code can ensure the consistency of the deployment environment, without the need to track which files have been modified, simplifying the deployment process.

[0076] Among them, incremental code only includes the parts of the code that have changed since the last deployment. In an incremental deployment, only the modified files will be uploaded and replaced, while the unmodified parts remain unchanged. Generating incremental code reduces the amount of data transferred, only uploading the changed parts, saving bandwidth, and can speed up the deployment process, especially for large projects, because only the changed parts need to be processed.

[0077] It can be understood that on the one hand, users can choose to generate full code or incremental code according to their own needs, providing greater flexibility and control. On the other hand, for large projects or frequently updated applications, incremental code generation can reduce the deployment of duplicate code and improve development and deployment efficiency. Full code generation ensures that when deploying in a new environment, all dependencies and components are up-to-date, reducing compatibility issues. Therefore, the above steps provide two types of code generation, full code and incremental code, which can meet the development and deployment needs in different scenarios, can improve development efficiency, can optimize resource usage, and ensure the rapid iteration and continuous delivery of the application.

[0078] Step 204, run the front-end page code to generate the target front-end page.

[0079] In practical applications, the front-end page code corresponds to the complete page structure, and the front-end page code includes the components required for the target front-end page, the binding relationship between the components required for the target front-end page and the database objects, and the interaction logic between the components.

[0080] In this application, the target front - end page can be automatically generated by simply selecting the benchmark page to be applied and the database objects to be applied from the benchmark page library and multiple predefined database objects. In practical applications, the generated target front - end page automatically activates the data object interface and the data objects that have an associated relationship with the data object. The generated target front - end page contains the interaction relationships between components and does not require additional customization.

[0081] In addition, in some embodiments, after step 204, the method further includes: Performing a functional test on the front - end page to ensure that the functions of the front - end page are normal.

[0082] It can be understood that after running the front - end page code to generate the target front - end page, performing a functional test on the front - end page ensures that the functions of the front - end page are normal, improving the accuracy and reliability of the front - end page generation.

[0083] In the front - end page rapid generation method provided in this embodiment, by selecting the benchmark page to be applied and the database objects to be applied from the benchmark page library and multiple predefined database objects, the time for developers to write code from scratch can be greatly reduced. Further, according to the benchmark page to be applied and the database objects to be applied, the target front - end page is generated by automatically adding or removing different components, that is, different components can be automatically added or removed according to the actual page generation requirements, meeting the personalized setting requirements of the actual front - end page and improving the accuracy and reliability of the front - end page generation. Further, the predefined benchmark pages and components can be reused in multiple projects, improving the reusability and utilization efficiency of development resources. Therefore, the solution of this embodiment can achieve the rapid generation of the front - end page while ensuring the accuracy of the front - end page generation, saving the workload and time of front - end page development and improving the efficiency of front - end page development.

[0084] The front - end page rapid generation system provided in this application will be described below. The front - end page rapid generation system described below can be correspondingly referred to the front - end page rapid generation method described above.

[0085] Figure 3 is a schematic structural diagram of the front - end page rapid generation device provided in this application, as Figure 3 shown. The above - mentioned front - end page rapid generation device includes: a selection module 31, a processing module 32, and a generation module 33.

[0086] The selection module 31 is configured to select the benchmark page to be applied from the benchmark page library and select the database objects to be applied from multiple predefined database objects according to the page generation requirements.

[0087] Among them, the reference page library includes multiple predefined reference pages, and a reference page includes predefined components and layouts.

[0088] Specifically, a reference page refers to a designed template page that includes predefined components and layouts and can be used to quickly construct a new front-end page.

[0089] It can be understood that the reference page to be applied refers to the template page selected from the reference page library for a specific page generation task. This reference page is predefined and contains a series of layouts and components, which can be used to quickly construct a new front-end page.

[0090] Among them, the database object to be applied refers to the database entity or data structure selected to provide data support during the page generation process. These objects usually contain the data that the page needs to display or interact with.

[0091] In this embodiment, the page generation requirement refers to the specific requirements and goals of the user or developer when creating a new front-end page. It can be understood that the page generation requirement characterizes the target front-end page. In practical applications, the page generation requirement is the guiding principle in the front-end page development process, which helps developers clarify the goal and select appropriate reference pages and database objects to ensure that the finally generated page can meet all predetermined requirements.

[0092] In this embodiment, there is no specific limitation on the selection method of the reference page to be applied and the database object to be applied. By way of example, the selection module 31 is automatically implemented according to the page generation requirement. For example, the front-end page rapid generation device obtains the page generation requirement and automatically selects the reference page to be applied and the database object to be applied. By way of another example, the selection module 31 provides a selection interface for the user, and the developer can check the reference page to be applied and the database object to be applied in the selection interface according to the page generation requirement.

[0093] Optionally, the selection module 31 obtains the page generation requirement and automatically selects the reference page to be applied and the database object to be applied. Further, the selection module 31 visually displays the reference page to be applied and the database object to be applied in the selection interface, and the developer can adjust the reference page to be applied and the database object to be applied according to the actual application scenario and actual requirements.

[0094] Combined with Figure 3 , the processing module 32 is used to automatically add or remove differential components according to the reference page to be applied and the database object to be applied, so as to obtain the complete page structure corresponding to the page generation requirement.

[0095] Among them, the differential components are the different components between the predefined components in the to-be-applied reference page and the components required by the target front-end page; the target front-end page is the front-end page corresponding to the page generation requirement; the complete page structure includes: the components required by the target front-end page and the binding relationship between the components required by the target front-end page and the database objects.

[0096] In the present invention, two core concepts are proposed, namely page rounding and page complementing. Among them, page rounding refers to selecting a to-be-applied reference page, selecting the to-be-applied database object corresponding to the components required by the target front-end page, and then hiding other components and their layouts in the components of the to-be-applied reference page except for the components required by the target front-end page. Page complementing refers to selecting the to-be-applied reference page corresponding to the components required by the target front-end page, selecting a to-be-applied database object, and the remaining components will automatically analyze and complete the data objects of the remaining components according to the to-be-applied database object.

[0097] Specifically, in some embodiments, the above-mentioned processing module 32 is specifically configured to: Compare the predefined components in the to-be-applied reference page with the components required by the target front-end page to determine the differential components.

[0098] If the components required by the target front-end page are more than the predefined components in the to-be-applied reference page, perform complementing processing to automatically add the differential components.

[0099] If the components required by the target front-end page are less than the predefined components in the to-be-applied reference page, perform rounding processing to automatically remove the differential components.

[0100] It can be understood that, on the one hand, by comparing the predefined components in the to-be-applied reference page with the components required by the target front-end page, the differential components are automatically identified and processed, meeting the actual personalized setting requirements of the front-end page, and improving the accuracy and reliability of the front-end page generation. On the other hand, the workload of manual coding is reduced, making the page generation more intelligent and automated. On the other hand, developers do not need to manually add or remove components, and can respond to page requirement changes faster, improving the development efficiency. Therefore, the processing module 32 improves the efficiency and quality of the front-end page generation through automatic processing of component differences, while saving the development and maintenance costs.

[0101] In addition, in some embodiments, the above-mentioned device further includes: An adaptive module for adaptively adjusting the layout of the complete page structure.

[0102] Specifically, the adaptive adjustment includes, but is not limited to: component position adjustment, page size adjustment, component size adjustment, hiding or showing components, font size adjustment, adaption of images and media, adaption of navigation and menus, and interactive element adjustment.

[0103] It can be understood that, on the one hand, through adaptive adjustment, the page can automatically adapt to different devices and screen sizes, enhancing the ability of responsive design. On the other hand, adaptive adjustment reduces the need to customize specific versions of the page for different devices, thereby reducing the maintenance cost and workload. On yet another hand, making adaptive adjustments to the layout of the complete page structure can provide users with an optimized layout and experience, enhancing the user experience and satisfaction. Therefore, the above-mentioned adaptive module ensures the flexibility and future compatibility of the page, while enhancing the user experience and search engine optimization effect.

[0104] Combined with Figure 3 , the above-mentioned processing module 32 is used to generate front-end page code according to the complete page structure.

[0105] Among them, the complete page structure refers to the page structure that, after rounding or complementing, contains the components required for the target front-end page and the binding relationship between the components required for the target front-end page and the database objects.

[0106] In practical applications, template engines, code generation tools, or scripts are used to automatically generate front-end code according to the complete page structure.

[0107] Specifically, in some embodiments, the above-mentioned front-end page code includes at least one of the following: Hypertext Markup Language, Cascading Style Sheets, JavaScript.

[0108] It can be understood that by automatically generating Hypertext Markup Language, Cascading Style Sheets, and JavaScript code, not only the development efficiency and code quality are improved, but also the responsiveness, interactivity, and maintainability of the page are ensured.

[0109] In some embodiments, when the above-mentioned processing module 32 is used to generate front-end page code according to the complete page structure, it is specifically used for: Based on the type of code generation selected by the user, generate front-end page code according to the complete page structure; the types of code generation include: full-scale code and incremental code.

[0110] It can be understood that, on the one hand, users can choose full - scale code or incremental code generation according to their own needs, providing greater flexibility and control. On the other hand, for large - scale projects or frequently updated applications, incremental code generation can reduce the deployment of duplicate code and improve development and deployment efficiency. Full - scale code generation ensures that all dependencies and components are up - to - date when deployed in a new environment, reducing compatibility issues. Therefore, the processing module 32 provides two types of code generation, full - scale code and incremental code, which can meet the development and deployment requirements in different scenarios, improve development efficiency, optimize resource usage, and ensure the rapid iteration and continuous delivery of the application.

[0111] The above - mentioned processing module 32 is also used to run the front - end page code to generate a target front - end page.

[0112] In practical applications, the front - end page code corresponds to the complete page structure, and the front - end page code includes the components required for the target front - end page, the binding relationship between the components required for the target front - end page and database objects, and the interaction logic between components.

[0113] In this application, by simply selecting the benchmark page to be applied and the database object to be applied from the benchmark page library and multiple predefined database objects, a target front - end page can be automatically generated. In practical applications, the generated target front - end page automatically activates the data object interface and data objects that have an associated relationship with the data object. The generated target front - end page contains the interaction relationship between components and does not require additional customization.

[0114] In addition, in some embodiments, the above - mentioned device further includes: A test module, which is used to perform functional tests on the front - end page to ensure the normal function of the front - end page.

[0115] It can be understood that after running the front - end page code to generate a target front - end page, the test module performs functional tests on the front - end page, ensuring the normal function of the front - end page and improving the accuracy and reliability of front - end page generation.

[0116] In the front-end page rapid generation device provided in this embodiment, the selection module can greatly reduce the time for developers to write code from scratch by selecting the benchmark page to be applied and the database objects to be applied from the benchmark page library and multiple predefined database objects. Further, the processing module and the generation module automatically add or remove different components according to the benchmark page to be applied and the database objects to be applied to generate the target front-end page, that is, they can automatically add or remove different components according to the actual page generation requirements, meet the actual front-end page personalization setting requirements, and improve the accuracy and reliability of front-end page generation. Further, the predefined benchmark pages and components can be reused in multiple projects, improving the reusability and utilization efficiency of development resources. Therefore, the solution of this embodiment can achieve the rapid generation of front-end pages on the premise of ensuring the accuracy of front-end page generation, save the workload and time of front-end page development, and improve the efficiency of front-end page development.

[0117] Figure 4 is a schematic structural diagram of the electronic device provided in this application, as Figure 4 shown, the electronic device may include: a processor 410, a communication interface 420, a memory 430, and a communication bus 440. Among them, the processor 410, the communication interface 420, and the memory 430 complete communication with each other through the communication bus 440. The processor 410 can call the logical instructions in the memory 430 to execute the front-end page rapid generation method, and the method includes: according to the page generation requirements, select the benchmark page to be applied from the benchmark page library, and select the database objects to be applied from multiple predefined database objects; wherein, the benchmark page library includes multiple predefined benchmark pages, and the benchmark page includes predefined components and layouts; according to the benchmark page to be applied and the database objects to be applied, automatically add or remove different components to obtain a complete page structure corresponding to the page generation requirements; wherein, the different components are the different components between the predefined components in the benchmark page to be applied and the components required by the target front-end page; the target front-end page is the front-end page corresponding to the page generation requirements; the complete page structure includes: the components required by the target front-end page and the binding relationship between the components required by the target front-end page and the database objects; according to the complete page structure, generate front-end page code, and run the front-end page code to generate the target front-end page.

[0118] In addition, when the logical instructions in the above-mentioned memory 430 are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on such an understanding, the technical solution of the present application, in essence, or the part that contributes to the prior art, or a 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 several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of the present application. The aforementioned storage medium includes: various media that can store program codes, such as USB flash drives, mobile hard disks, read-only memories (ROM, Read-Only Memory), random access memories (RAM, Random Access Memory), magnetic disks, or optical discs.

[0119] On the other hand, the present application also provides a computer program product. The computer program product includes a computer program stored on a computer-readable storage medium. The computer program includes program instructions. When the program instructions are executed by a computer, the computer can execute the front-end page rapid generation method provided by the above-mentioned various methods. The method includes: according to the page generation requirement, select a benchmark page to be applied from the benchmark page library and select a database object to be applied from multiple pre-defined database objects; wherein, the benchmark page library includes multiple pre-defined benchmark pages, and the benchmark page includes pre-defined components and layouts; according to the benchmark page to be applied and the database object to be applied, automatically add or remove different components to obtain a complete page structure corresponding to the page generation requirement; wherein, the different components are the different components between the pre-defined components in the benchmark page to be applied and the components required by the target front-end page; the target front-end page is the front-end page corresponding to the page generation requirement; the complete page structure includes: the components required by the target front-end page and the binding relationship between the components required by the target front-end page and the database object; according to the complete page structure, generate front-end page code and run the front-end page code to generate the target front-end page.

[0120] In another aspect, the present application also provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, it is configured to execute the front-end page rapid generation method provided above. The method includes: according to the page generation requirement, select a benchmark page to be applied from a benchmark page library, and select a database object to be applied from multiple pre-defined database objects; wherein, the benchmark page library includes multiple pre-defined benchmark pages, and a benchmark page includes pre-defined components and layouts; according to the benchmark page to be applied and the database object to be applied, automatically add or remove different components to obtain a complete page structure corresponding to the page generation requirement; wherein, the different components are the different components between the pre-defined components in the benchmark page to be applied and the components required by the target front-end page; the target front-end page is the front-end page corresponding to the page generation requirement; the complete page structure includes: the components required by the target front-end page and the binding relationship between the components required by the target front-end page and the database object; according to the complete page structure, generate front-end page code, and run the front-end page code to generate the target front-end page.

[0121] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place, or may be distributed to multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the solution of this embodiment. Those of ordinary skill in the art can understand and implement it without creative efforts.

[0122] Through the description of the above embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by means of software plus a necessary general hardware platform, and of course, it can also be implemented by hardware. Based on this understanding, the essence of the above technical solution, or the part that contributes to the prior art, can be embodied in the form of a software product. The computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and includes several instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment or some parts of the embodiments.

[0123] Finally, it should be noted that: the above embodiments are only used to illustrate the technical solutions of the present application, and are not intended to limit them; although the present application has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that: they can still modify the technical solutions described in the foregoing embodiments, or perform equivalent replacements on some of the technical features; and these modifications or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present application.

Claims

1. A method for quickly generating a front-end page, characterized in that: include: According to the page generation requirement, a reference page to be applied is selected from a reference page library, and a database object to be applied is selected from a plurality of predefined database objects; wherein the reference page library includes a plurality of predefined reference pages, and the reference page includes predefined components and layouts; According to the reference page to be applied and the database object to be applied, the difference components are automatically added or automatically removed to obtain a complete page structure corresponding to the page generation requirement; wherein the difference components are different components between the predefined components in the reference page to be applied and the components required by the target front-end page; the target front-end page is the front-end page corresponding to the page generation requirement; the complete page structure includes: the components required by the target front-end page and the binding relationship between the components required by the target front-end page and the database object; According to the complete page structure, a front-end page code is generated, and the front-end page code is run to generate the target front-end page.

2. The method for quickly generating a front-end page according to claim 1, characterized in that: The automatically adding or removing difference components according to the reference page to be applied and the database object to be applied to obtain a complete page structure corresponding to the page generation requirement includes: Comparing the predefined components in the to-be-applied benchmark page with the components required by the target front-end page to determine the difference components; If the target front-end page requires more components than the predefined components in the reference page to be applied, a complement process is performed to automatically add the difference components; If the components required by the target front-end page are less than the predefined components in the reference page to be applied, rounding processing is performed to automatically remove the difference components.

3. The method for quickly generating a front-end page according to claim 1, characterized in that: After automatically adding or removing difference components according to the reference page to be applied and the database object to be applied to obtain a complete page structure corresponding to the page generation requirement, the method further includes: The layout of the complete page structure is adaptively adjusted.

4. The method for quickly generating a front-end page according to claim 1, characterized in that: Generating the front-end page code according to the complete page structure specifically includes: Based on the code generation type selected by the user, the front-end page code is generated according to the complete page structure; the code generation type includes: full code and incremental code.

5. The method for quickly generating a front-end page according to any one of claims 1 to 4, characterized in that: After running the front-end page code to generate the target front-end page, the method further includes: Perform a functional test on the target front-end page to ensure that the function of the target front-end page is normal.

6. The method for quickly generating a front-end page according to any one of claims 1 to 4, characterized in that: The front-end page code includes at least one of the following: Hypertext Markup Language, Cascading Style Sheets, JavaScript.

7. A front-end page rapid generation device, characterized in that: include: A selection module, configured to select a reference page to be applied from a reference page library and a database object to be applied from a plurality of predefined database objects according to page generation requirements; wherein the reference page library includes a plurality of predefined reference pages, and the reference page includes predefined components and layouts; A processing module, used for automatically adding or removing difference components according to the reference page to be applied and the database object to be applied, so as to obtain a complete page structure corresponding to the page generation requirement; wherein the difference components are different components between predefined components in the reference page to be applied and components required by a target front-end page; the target front-end page is a front-end page corresponding to the page generation requirement; the complete page structure includes: components required by the target front-end page and a binding relationship between the components required by the target front-end page and the database object; The generation module is used to generate the front-end page code according to the complete page structure, and run the front-end page code to generate the target front-end page.

8. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the steps of the method for quickly generating a front-end page as described in any one of claims 1 to 6 are implemented.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method for quickly generating a front-end page as described in any one of claims 1 to 6 are implemented.

10. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the steps of the method for quickly generating a front-end page as described in any one of claims 1 to 6 are implemented.

Images