Front-end page development method and equipment

Abstract

The invention relates to the technical field of computers, in particular to a front-end page development method and device.The method comprises the steps that in the state that a front-end development page is displayed, in response to a target component selected in a target component area of the front-end development page, the target component is dragged into a development area of the front-end development page, and the target component is displayed in the development area of the front-end development page; the target component is displayed in the development area, the front-end development page comprises a high-code component area and a low-code component area, the target component area is the high-code component area or the low-code component area, and the layout position of the target component in the development area is the release position of the dragging operation in the development area; then, triggering a rendering engine to render the target component to obtain a preview front-end page, and displaying the preview front-end page in the development area; according to the method, the front-end page development efficiency can be improved, and the development operation cost can be reduced.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a front-end page development method and device. Background Art

[0002] In the front-end page development process, developers can usually implement front-end business requirements by writing code based on various development frameworks and tools.

[0003] However, although this development method is flexible and powerful, it requires developers to be proficient in various development frameworks and tools, resulting in long development cycles and high costs in front-end page development. Summary of the Invention

[0004] The embodiments of the present application provide a front-end page development method and device, which improve the efficiency of front-end page development and reduce the operating costs of front-end page development.

[0005] In a first aspect, a front-end page development method is provided, comprising:

[0006] In a state where a front-end development page is displayed, in response to dragging a target component selected in a target component area of ​​the front-end development page into a development area of ​​the front-end development page, the target component is displayed in the development area, wherein the front-end development page includes a high-code component area and a low-code component area, the target component area is the high-code component area or the low-code component area, and the layout position of the target component in the development area is the position where the dragging operation is released in the development area;

[0007] The rendering engine is triggered to render the target component to obtain a preview front-end page, and the preview front-end page is displayed in the development area.

[0008] By adopting the above technical solution, in the process of front-end page development, code components that need to use high code to implement specific functions are converted into high-code components, and code components that need to use low code to implement functions are converted into low-code components, which are displayed in the visual front-end development page, so that developers can carry out front-end page development and preview the front-end page after development in the development area of ​​the front-end development page by dragging the selected high-code components and / or low-code components, thereby reducing the amount of code writing by developers in the process of front-end page development and improving the efficiency of front-end page development; at the same time, the front-end page development process can be achieved by dragging the selected target components into the development area for layout, without the need for additional processes, thereby reducing the operating costs in the process of front-end page development.

[0009] Optionally, the front-end development page further includes a code editing area, the target component includes a target high-code component and a target low-code component, and before triggering the rendering engine to render the target component to obtain a preview front-end page, the method further includes:

[0010] In response to an editing operation in a code editing area of ​​the front-end development page, obtaining communication relationship configuration information between the target high-code component and the target low-code component;

[0011] The triggering rendering engine renders the target component to obtain a preview front-end page, including:

[0012] The rendering engine is triggered to render the target high-code component and the target low-code component according to the communication relationship configuration information to obtain a target front-end page.

[0013] Optionally, in response to dragging the target component selected in the target component area of ​​the front-end development page to the development area of ​​the front-end development page, before displaying the target component in the development area, the method further includes:

[0014] In response to a selection operation on a target front-end page template in the template library area of ​​the front-end development page, displaying the target front-end page template in the development area;

[0015] In response to dragging the target component selected in the target component area of ​​the front-end development page to the development area of ​​the front-end development page, and displaying the target component in the development area, the step includes:

[0016] In response to dragging the target component selected in the target component area of ​​the front-end development page to the component blank area within the target front-end page template, the target component is displayed within the target front-end page template, wherein the layout position of the target component in the component blank area is the release position of the dragging operation.

[0017] By adopting the above technical solution, based on the pre-developed front-end page template, since some components in the front-end page template have been determined, the personalized components required in the front-end page development process can be added in the blank component area in the front-end page template. This can achieve rapid development of the front-end page. The front-end page development efficiency can be further improved based on the front-end page template, and the developer's front-end page development experience can be improved.

[0018] Optionally, before triggering the rendering engine to render the target component to obtain a preview front-end page, the method further includes:

[0019] In response to a selection operation on the target component in the development area, displaying attribute information of the target component in the code editing area of ​​the front-end development page;

[0020] In response to a modification and editing operation on the attribute information, obtaining updated attribute information of the target component;

[0021] The triggering rendering engine renders the target component to obtain a preview front-end page, including:

[0022] The rendering engine is triggered to render the target component according to the updated attribute information of the target component to obtain a target front-end page.

[0023] By adopting the above technical solution, the attribute information of the target component selected during the front-end page development process can be modified through the code editing area in the front-end development page to ensure that the functional implementation of the component in the front-end page matches the actual development needs, thereby improving the flexibility of front-end page development.

[0024] Optionally, after displaying the target component in the development area, the method further includes:

[0025] In response to dragging the target component in the development area to a position outside the development area, the target component is removed from display in the development area.

[0026] Optionally, the front-end development page includes a project input box. In response to dragging a target component selected in a target component area of ​​the front-end development page into a development area of ​​the front-end development page, before displaying the target component in the development area, the method further includes:

[0027] In response to obtaining a project identifier of a target front-end page development project input in the project input box, obtaining, based on the project identifier, a plurality of pre-configured optional low-code components in target project requirement information associated with the target front-end page development project;

[0028] In the low-code component area of ​​the front-end development page, the multiple optional low-code components are displayed.

[0029] By adopting the above technical solution, during the project establishment stage of the target front-end page development project, when the low-code components that can be used in the development process are configured, multiple optional low-code components configured for the project currently to be developed can be displayed in the low-code component area of ​​the front-end development page, so as to meet the personalized low-code component usage requirements of different front-end development projects, further improve the flexibility of code development, and enhance the front-end page development experience of developers; at the same time, it can reduce the number of low-code components that need to be loaded on terminal devices, thereby improving the display smoothness of the front-end development page.

[0030] Optionally, the front-end development page includes a project input box. In response to dragging a target component selected in a target component area of ​​the front-end development page into a development area of ​​the front-end development page, before displaying the target component in the development area, the method further includes:

[0031] In response to obtaining a project identifier of a target front-end page development project input in the project input box, obtaining, based on the project identifier, a plurality of optional high-code components pre-configured in target project requirement information associated with the target front-end page development project;

[0032] In the low-code component area of ​​the front-end development page, the multiple optional high-code components are displayed.

[0033] By adopting the above technical solution, when the high-code components that can be used in the development process are configured during the project establishment stage of the target front-end page development project, multiple optional high-code components configured for the project currently to be developed can be displayed in the high-code component area of ​​the front-end development page, thereby meeting the personalized high-code component usage requirements of different front-end development projects, further improving the flexibility of code development, and enhancing the front-end page development experience of developers; at the same time, it can reduce the number of high-code components that need to be loaded on terminal devices, thereby improving the display smoothness of the front-end development page.

[0034] Optionally, the method further includes:

[0035] In response to a test configuration operation in a test area of ​​the front-end development page, obtaining test information for the preview front-end page;

[0036] The test engine is triggered to test the preview front-end page to obtain a test result.

[0037] By adopting the above technical solution, the performance of the developed front-end page can be tested based on the test information configured in the test area of ​​the front-end development page, so as to facilitate vulnerability repair during development and improve the reliability of front-end page development.

[0038] Optionally, the method further includes:

[0039] Displaying the performance indicators of the preview front-end page in the performance indicator monitoring area of ​​the front-end development page;

[0040] Based on the performance indicators and a predetermined optimization strategy, optimization suggestions for the preview front-end page are determined and displayed.

[0041] By adopting the above technical solution, it is possible to monitor and display the performance indicators of the developed front-end pages, and provide optimization suggestions to developers to further improve the reliability of front-end page development.

[0042] In a second aspect, a front-end page development device is provided, comprising:

[0043] The display module is configured to, in a state where a front-end development page is displayed, display the target component in the development area in response to dragging a target component selected in a target component area of ​​the front-end development page to a development area of ​​the front-end development page, wherein the front-end development page includes a high-code component area and a low-code component area, the target component area is the high-code component area or the low-code component area, and the layout position of the target component in the development area is a position where the drag operation is released in the development area;

[0044] The rendering module is configured to trigger a rendering engine to render the target component, obtain a preview front-end page, and display the preview front-end page in the development area.

[0045] According to a third aspect, an electronic device is provided, comprising a memory, a processor, and a computer program stored in the memory, wherein the processor executes the computer program to implement the method according to the first aspect.

[0046] In a fourth aspect, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the method described in the first aspect is implemented.

[0047] In a fifth aspect, a computer program product is provided, comprising a computer program, which implements the method described in the first aspect when executed by a processor.

[0048] It is to be understood that both the foregoing general description and the following detailed description are exemplary, and are intended to provide further explanation of the technology as claimed. BRIEF DESCRIPTION OF THE DRAWINGS

[0049] The above and other purposes, features, and advantages of the present application will become more apparent through a more detailed description of the embodiments of the present application in conjunction with the accompanying drawings. The accompanying drawings are intended to provide a further understanding of the embodiments of the present application and constitute a part of the specification. Together with the embodiments of the present application, they are used to explain the present application and do not constitute a limitation of the present application. In the drawings, the same reference numerals generally represent the same components or steps.

[0050] Figure 1 This is a schematic diagram of an implementation scenario of a front-end page development method in an embodiment of the present application.

[0051] Figure 2 This is a flowchart of a front-end page development method according to an embodiment of the present application.

[0052] Figure 3 This is a schematic diagram of the first front-end development page of an embodiment of the present application.

[0053] Figure 4 This is a schematic diagram of the second front-end development page of an embodiment of the present application.

[0054] Figure 5 This is a schematic diagram of the third front-end development page of an embodiment of the present application.

[0055] Figure 6 This is a schematic diagram of a front-end page template in an embodiment of the present application.

[0056] Figure 7 This is a schematic diagram of the fourth front-end development page of an embodiment of the present application.

[0057] Figure 8 This is a schematic diagram of the fifth front-end development page of an embodiment of the present application.

[0058] Figure 9 This is a workflow diagram of a front-end page development process in an embodiment of the present application.

[0059] Figure 10 This is a schematic diagram of a front-end page of an embodiment of the present application.

[0060] Figure 11 This is a block diagram of a front-end page development device according to an embodiment of the present application.

[0061] Figure 12 is a schematic diagram illustrating a computer program product according to an embodiment of the present application.

[0062] Figure 13 FIG. 1 is a hardware block diagram illustrating an electronic device according to an embodiment of the present application. DETAILED DESCRIPTION

[0063] The following describes embodiments of the present application in more detail with reference to the accompanying drawings. Although certain embodiments of the present application are shown in the accompanying drawings, it should be understood that the present application can be implemented in various forms and should not be construed as limited to the embodiments described herein. Instead, these embodiments are provided to provide a more thorough and complete understanding of the present application. It should be understood that the drawings and embodiments of the present application are for illustrative purposes only and are not intended to limit the scope of protection of the present application.

[0064] It should be understood that the various steps described in the method embodiments of the present application can be performed in different orders and / or in parallel. In addition, the method embodiments may include additional steps and / or omit the steps shown. The scope of the present application is not limited in this respect.

[0065] The term "including" and its variations used in this document are open inclusions, that is, "including but not limited to". The term "based on" means "based at least in part on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one other embodiment"; the term "some embodiments" means "at least some embodiments". The relevant definitions of other terms will be given in the description below. It should be noted that the concepts of "first", "second", etc. mentioned in this application are only used to distinguish different devices, modules or units, and are not used to limit the order or interdependence of the functions performed by these devices, modules or units.

[0066] It should be noted that the modifications of "one" and "multiple" mentioned in this application are illustrative rather than restrictive. Those skilled in the art should understand that unless otherwise clearly indicated in the context, they should be understood as "one or more".

[0067] The names of the messages or information exchanged between multiple devices in the embodiments of the present application are only used for illustrative purposes and are not used to limit the scope of these messages or information.

[0068] In order to solve the above problems, the present invention provides a front-end page development method. Figure 1 Schematic diagram of the implementation scenario of the front-end page development method of the exemplary embodiment of the present application is shown; Figure 1As shown, the implementation scenario 100 includes a server 101 and a terminal device 102, wherein the server 101 is a server running a front-end page development platform, which is used to support developers in front-end page development. The server can be deployed in the form of a server cluster so that multiple developers can simultaneously develop different page development projects based on the server of the front-end page development platform; the terminal device 102 is an electronic device used by the front-end page developers. The user terminal can be an electronic device such as a computer, notebook, tablet computer or mobile phone. The specific method can be determined based on actual needs and is not limited in the embodiments of the present application;

[0069] like Figure 1 As shown, a communication link is established between the server 101 and the terminal device 102, so that developers can develop front-end pages based on the front-end page development method provided in the embodiment of the present application.

[0070] Figure 2 A flow chart of a front-end page development method of an exemplary embodiment of the present application is shown, which can be applied to terminal devices such as Figure 2 As shown, the method of the embodiment of the present application may include:

[0071] Step S201: In a state where the front-end development page is displayed, in response to a target component being selected in the target component area of ​​the front-end development page and dragged to the development area of ​​the front-end development page, the target component is displayed in the development area;

[0072] The front-end development page includes a high-code component area and a low-code component area. The target component area is the high-code component area or the low-code component area. The layout position of the target component in the development area is the position where the drag operation is released in the development area.

[0073] Step S202: triggering the rendering engine to render the target component, obtaining a preview front-end page, and displaying the preview front-end page in the development area.

[0074] To sum up, the front-end page development method provided in the embodiment of the present application can convert the code components that need to implement specific functions through high code into high-code components during the front-end page development process, and convert the code components that need to implement functions through low code into low-code components, and display them in the visual front-end development page, so that developers can carry out front-end page development and preview the front-end page after development in the development area of ​​the front-end development page by dragging the selected high-code components and / or low-code components, thereby reducing the amount of code writing by developers during the front-end page development process and improving the front-end page development efficiency; at the same time, the front-end page development process can be achieved by dragging the selected target components into the development area for layout, without the need for additional processes, thereby reducing the operating costs during the front-end page development process.

[0075] The following Figure 2 The specific implementation of each step in the embodiment shown is described in detail:

[0076] In step S201, when the terminal device displays the front-end development page, in response to dragging the target component selected in the target component area of ​​the front-end development page to the development area of ​​the front-end development page, the target component is displayed in the development area.

[0077] In the embodiment of the present application, the front-end development page is an operation page for developers to perform visual development of the front-end page, wherein, Figure 3 As shown, the front-end development page 300 may include: a high-code component area 301, a development area 302, and a low-code component area 303, wherein the high-code component area 301 is used to display pre-developed high-code components. High-code components are code components that require a large amount of code to implement certain functions of the front-end page in the front-end page development scenario, for example, high-code components are business logic components and data processing logic components, etc.; the development area 302 is used for developers to perform visual development of the front-end page; the low-code component area 303 is used to display pre-developed low-code components. Low-code components are code components that do not require a large amount of code to implement certain functions of the front-end page in the front-end page development scenario, for example, low-code components are drop-down box components, user interface design (UI) components (such as input boxes, buttons and navigation bars) and upload components, etc.

[0078] It can be understood that in the embodiment of the present application, the target component area is the high-code component area or the low-code component area, and the layout position of the target component in the development area is the release position of the drag operation in the development area; the layout position of the target component in the development area is the position of the target component in the front-end page after the front-end page is developed.

[0079] In an optional embodiment, the terminal device can display a front-end development page in response to obtaining the running operation of the front-end development tool or the front-end development application, wherein the front-end development tool or the front-end development application is provided to the developer through the server for front-end page development.

[0080] In an optional embodiment, when the terminal device is displaying a front-end development page, in response to dragging a target component selected in a target component area of ​​the front-end development page to a development area of ​​the front-end development page, the target component is displayed in the development area. The front-end page can be developed through a simple dragging operation.

[0081] It is understandable that in the embodiment of the present application, the developer can repeat the above process in the front-end development page and develop the front-end page by selecting multiple target components.

[0082] It should be noted that, in the process of developing the above-mentioned front-end pages, there are cases where the attribute information of the target component selected by the developer needs to be modified, and / or, when low-code components and high-code components are selected, there are cases where a dependency relationship between the selected high-code components and the low-code components needs to be established. For example, if the function implementation of the high-code component needs to rely on one or more low-code components, then a communication relationship between the selected high-code components and the low-code components needs to be established. Therefore, if Figure 4 As shown, the front-end development page may also include a code editing area 304; the code editing area 304 is used for developers to modify the property information of the selected target component, or for developers to configure communication relationships between high-code components and low-code components that have dependencies.

[0083] In an optional embodiment, when the target component includes a target high-code component and a target low-code component, the terminal device can obtain the communication relationship configuration information between the target high-code component and the target low-code component in response to the editing operation in the code editing area of ​​the front-end development page; the communication relationship between the target high-code component and the low-code component that have a dependency relationship in function implementation can be configured through the code editing area in the front-end development page to ensure that the functions of the front-end page are normally implemented after development is completed.

[0084] It can be understood that the communication relationship configuration process between the target high-code component and the target low-code component can be achieved by editing the component communication code. Specifically, it can be determined based on actual needs, and the embodiments of the present application do not limit this. Among them, the communication method in the communication relationship configuration information can also be determined based on actual needs. The embodiments of the present application do not limit this. For example, it is allowed to configure the target high-code component and the target low-code component to communicate with each other through the JSBridge mechanism.

[0085] In an optional embodiment, the terminal device may also display the attribute information of the target component in the code editing area of ​​the front-end development page in response to the selection operation of the target component in the development area; then, in response to the modification and editing operation of the attribute information, obtain the updated attribute information of the target component; the attribute information of the target component selected during the front-end page development process may be modified through the code editing area in the front-end development page to ensure that the functional implementation of the component in the front-end page matches the actual development needs, thereby improving the flexibility of the front-end page development.

[0086] It can be understood that in the embodiment of the present application, the modification and editing operations of the attribute information can be determined based on the actual needs of the front-end page development, and the embodiment of the present application does not limit this. For example, modifying the display color of the UI component, or modifying the data transmission logic of the data processing logic component.

[0087] It should be noted that, in the embodiment of this application, in order to further improve the efficiency of front-end development, such as Figure 5 As shown, the front-end development page can also include a template library area 305, which is used to display pre-customized front-end page templates, wherein the front-end page template is a pre-developed front-end page template containing a fixed component area and a blank component area. The components in the fixed component area are usually non-replaceable components, and the blank component area allows developers to add components that are compatible with the current page development project, thereby realizing personalized development of the front-end page based on the front-end page template.

[0088] In an optional embodiment, before the terminal device displays the target component in the development area of ​​the front-end development page in response to dragging the target component selected in the target component area of ​​the front-end development page to the development area of ​​the front-end development page, the terminal device may further: display the target front-end page template in the development area in response to the selection operation of the target front-end page template in the template library area of ​​the front-end development page; then the process of the terminal device displaying the target component in the development area in response to dragging the target component selected in the target component area of ​​the front-end development page to the development area of ​​the front-end development page may include: displaying the target component in the target front-end page template in response to dragging the target component selected in the target component area of ​​the front-end development page to a component blank area within the target front-end page template, wherein the layout position of the target component in the component blank area is the release position of the drag operation. Based on a pre-developed front-end page template, since some components in the front-end page template have been determined, by adding personalized components required in the front-end page development process in the blank component area of ​​the front-end page template, rapid development of the front-end page can be achieved, and the front-end page development efficiency can be further improved based on the front-end page template, thereby improving the front-end page development experience of developers.

[0089] For example, Figure 6 As shown, Figure 6 A schematic diagram of a front-end page template provided in an embodiment of the present application is shown, wherein the fixed component area in the front-end page template 600 includes a top menu area 6011 and a left menu area 6012, as well as a blank component area 602 in the front-end page template 600, which is used for developers to add personalized components that meet the front-end page development needs.

[0090] In an optional embodiment, after displaying the target component in the development area, the terminal device may further: in response to dragging the target component in the development area to a location outside the development area, cancel the display of the target component in the development area. By removing the target component added to the development area, inappropriate target components added during the previous page development process can be removed, thereby improving the flexibility of front-end page development and the developer's front-end page development experience.

[0091] It can be understood that the terminal device cancels the display of the target component, which is the target component added by the developer to the component blank area of ​​the target front-end page template, so that in the scenario where the front-end page template is used for front-end page development, the target component can be flexibly added or removed in the component blank area of ​​the target front-end page template, thereby improving the flexibility of front-end page development.

[0092] It should be noted that, in the embodiment of the present application, after the developer controls the terminal device to display the front-end development page, he can select the front-end page development project that has been approved for development in the front-end development page, wherein the front-end page development project that has been approved is a front-end page development project that is pre-established by the project approver in the project management center of the front-end page development platform through the user terminal, and the front-end page development platform allows the project approver to configure the requirements of the front-end development project during the project establishment process, and determine the project requirement information of each approved front-end page development project, wherein the project requirement information may include project name, project establishment time, project cycle, participants, front-end page design specifications, platform usage specifications and material usage specifications, etc., wherein the front-end page design specifications may include theme libraries, panel plug-in libraries and toolbar libraries, etc., and the platform usage specifications may include domain-specific languages ​​(Domain-Specific Languages). Language, DSL) configuration information, code repository information and monitoring node information, etc. The material usage specifications may include: high-code component library, low-code component library, UI component library, and front-end page template library, etc.; it is understandable that when the project initiator does not configure the front-end page design specifications, platform usage specifications and / or material usage specifications, the front-end page development platform uses the default configuration to provide page development services for developers.

[0093] Optionally, in an embodiment of the present application, the front-end development page may also include a project input box, so that after the developer selects the target front-end page development project that needs to be developed currently based on the project input box, the front-end page design specifications and material usage specifications are configured in the project establishment stage of the target front-end page development project. The front-end development page includes a high-code component area to display pre-configured high-code components, and / or, a low-code component area to display pre-configured low-code components, wherein the low-code components may include UI components.

[0094] In an optional embodiment, in response to dragging the target component selected in the target component area of ​​the front-end development page to the development area of ​​the front-end development page, before displaying the target component in the development area, the terminal device may also: in response to obtaining the project identifier of the target front-end page development project entered in the project input box, obtain multiple optional low-code components pre-configured in the target project requirement information associated with the target front-end page development project based on the project identifier; then, display the multiple optional low-code components in the low-code component area of ​​the front-end development page; then, display the multiple optional low-code components in the low-code component area of ​​the front-end development page. During the project establishment stage of the target front-end page development project, if the low-code components that can be used in the development process are configured, multiple optional low-code components configured for the project currently to be developed can be displayed in the low-code component area of ​​the front-end development page to meet the personalized low-code component usage requirements of different front-end development projects, further improve the flexibility of code development, and enhance the front-end page development experience of developers; at the same time, the number of low-code components that need to be loaded by the terminal device can be reduced, thereby improving the display smoothness of the front-end development page.

[0095] Among them, after the terminal device obtains the project identification of the target front-end page development project entered in the project input box, it can generate a material acquisition request based on the project identification, and send the material acquisition request to the server to obtain multiple optional low-code components configured in the target project requirement information associated with the target front-end page development project; or, read multiple optional low-code components configured in the target project requirement information associated with the target front-end page development project locally.

[0096] Similarly, in response to dragging the target component selected in the target component area of ​​the front-end development page to the development area of ​​the front-end development page, before displaying the target component in the development area, the terminal device can also: in response to obtaining the project identifier of the target front-end page development project entered in the project input box, obtain multiple optional high-code components pre-configured in the target project requirement information associated with the target front-end page development project based on the project identifier; then, display the multiple optional high-code components in the low-code component area of ​​the front-end development page. In the case where the high-code components that can be used in the development process are configured during the project establishment stage of the target front-end page development project, multiple optional high-code components configured for the project currently to be developed can be displayed in the high-code component area of ​​the front-end development page to meet the personalized high-code component usage requirements of different front-end development projects, further enhance the flexibility of code development, and enhance the front-end page development experience of developers; at the same time, the number of high-code components that need to be loaded by the terminal device can be reduced, thereby improving the display smoothness of the front-end development page.

[0097] In step S202, the terminal device triggers the rendering engine to render the target component to obtain a preview front-end page, and displays the preview front-end page in the development area.

[0098] In an embodiment of the present application, the rendering engine is used to render the target component into a page visible to the front-end page user. The rendering mechanism of the rendering engine can be determined based on actual needs, and the embodiment of the present application does not limit this.

[0099] In an optional embodiment, when a terminal device obtains the communication relationship configuration information between a target high-code component and a target low-code component, the terminal device triggers the rendering engine to render the target component to obtain a preview front-end page, which includes triggering the rendering engine to render the target high-code component and the target low-code component according to the communication relationship configuration information to obtain the target front-end page. This allows the target high-code component and the target low-code component, which have been configured with a communication relationship in the front-end page, to communicate based on the configured communication mechanism during the front-end page display process to ensure that the content of the front-end page is displayed normally after the front-end page is developed.

[0100] In an optional embodiment, when a terminal device obtains updated attribute information of a target component, the terminal device triggers a rendering engine to render the target component. The process of obtaining a preview front-end page may include triggering the rendering engine to render the target component based on the updated attribute information of the target component to obtain a target front-end page. This allows the target component on the front-end page to be displayed according to the attributes required by the front-end page after development is complete.

[0101] Optionally, in the embodiment of the present application, Figure 7 As shown, the front-end development page may further include a test area 306 for developers to test the developed front-end page, so as to directly repair vulnerabilities in the front-end page after the front-end page is developed.

[0102] In an optional embodiment, the terminal device, in response to a test configuration operation in the test area of ​​the front-end development page, obtains test information for the preview front-end page; then, triggers a test engine to test the preview front-end page and obtain a test result. Based on the test information configured in the test area of ​​the front-end development page, the performance of the developed front-end page can be tested to facilitate vulnerability repair during development and improve the reliability of front-end page development.

[0103] It can be understood that in the embodiment of the present application, the test information for the preview front-end page can be determined based on actual needs, and the embodiment of the present application does not limit this; for example, the test information can be used to test the display results of the preview front-end page in different browsers, or to test the display results of the preview front-end page in different applications, or to test the display results of the preview front-end page in different versions of the same browser.

[0104] Optionally, in the embodiment of the present application, Figure 8 As shown, the front-end development page may further include a performance indicator monitoring area 307 for displaying the performance indicators of the preview front-end page for developers to view.

[0105] In an optional embodiment, the terminal device may further display the performance indicators of the preview front-end page in the performance indicator monitoring area of ​​the front-end development page; and then, based on the performance indicators and a predetermined optimization strategy, determine and display optimization suggestions for the preview front-end page. This enables monitoring and displaying the performance indicators of the developed front-end page and provides optimization suggestions to developers, thereby further improving the reliability of front-end page development.

[0106] Optionally, the terminal device can display optimization suggestions for the preview front-end page in the performance indicator monitoring area, or overlay the optimization suggestions for the preview front-end page in the central area of ​​the front-end development page, so that developers can see the optimization suggestions more intuitively.

[0107] Among them, the performance indicators of the preview front-end page may include indicators such as loading time, rendering speed and memory usage. The optimization strategy may include optimization bars, as well as optimization suggestions associated with the optimization conditions. Specifically, they can be determined based on actual needs, and the embodiments of the present application do not limit this. For example, the optimization conditions may include: judging whether the loading time is greater than the duration threshold, and the optimization suggestion corresponding to the optimization condition is: if the loading time is greater than the duration threshold, then code optimization is performed; or the optimization conditions may include: judging whether the rendering speed is greater than the rendering speed threshold, and the optimization suggestion corresponding to the optimization condition is: if the rendering speed is greater than the rendering speed threshold, then component splitting is performed; or the optimization conditions may include: judging whether the memory occupancy rate is greater than the memory occupancy rate threshold, and the optimization suggestion corresponding to the optimization condition is: if the memory occupancy rate is greater than the memory occupancy rate threshold, then resource loading optimization is performed. Among them, the duration threshold, rendering speed threshold and memory occupancy rate threshold can be determined based on actual needs, and the embodiments of the present application do not limit this.

[0108] For example, the present application embodiment provides an application example of a front-end page development method, such as Figure 9 As shown, Figure 9 A workflow diagram of a front-end page development process is shown in an embodiment of the present application, wherein component developers develop components and front-end page templates, and upload the developed high-code components, low-code components and front-end page templates to the front-end page template library and component library in the front-end page development platform; the project initiator creates a new front-end page development project in the front-end page development platform in advance, and configures the front-end page design specifications, platform usage specifications and material usage specifications of the front-end development project; the front-end page developer uses a mobile terminal to develop the front-end page in a codeless development manner based on the information configured by the project initiator, as well as the front-end page template library and component library, or the front-end page developer uses a computer to create multiple development branches in a low-code development manner based on the information configured by the project initiator, as well as the front-end page template library and component library, for iterative development of the front-end page, wherein each development branch corresponds to a different version of the front-end page, iterative development refers to the development process that updates the performance of the original front-end page, the codeless development method refers to the development method in which no code is written or modified during the development process, and the low-code development method refers to the development method that requires a low amount of code editing through the code editing area during the development process.

[0109] Among them, such as Figure 10 As shown, Figure 10A schematic diagram of a front-end page provided by an embodiment of the present application is shown, wherein the search condition component 1001 needs to implement various logical search functions and is displayed on the front-end development page in the form of a high-code component during the development process. The directory display component 1002 can support the display of search results and is displayed on the front-end development page in the form of a low-code component during the development process. Developers can obtain the search condition component and the search directory component by selecting them and configuring the communication relationship between them. Figure 10 The front-end page shown in .

[0110] The exemplary embodiment of the present application provides a front-end page development device, Figure 11 FIG. 1 shows a schematic block diagram of the functional modules of the front-end page development device according to an exemplary embodiment of the present application. Figure 11 As shown, the front-end page development device 1100 includes:

[0111] The display module 1101 is configured to, in a state where a front-end development page is displayed, display the target component in the development area in response to dragging a target component selected in a target component area of ​​the front-end development page to a development area of ​​the front-end development page, wherein the front-end development page includes a high-code component area and a low-code component area, the target component area is the high-code component area or the low-code component area, and the layout position of the target component in the development area is the position where the drag operation is released in the development area;

[0112] The rendering module 1102 is configured to trigger a rendering engine to render the target component, obtain a preview front-end page, and display the preview front-end page in the development area.

[0113] Optionally, the front-end development page further includes a code editing area, the target component includes a target high-code component and a target low-code component, and the apparatus further includes an acquisition module 1103 configured to:

[0114] In response to an editing operation in a code editing area of ​​the front-end development page, obtaining communication relationship configuration information between the target high-code component and the target low-code component;

[0115] The triggering rendering engine renders the target component to obtain a preview front-end page, including:

[0116] The rendering engine is triggered to render the target high-code component and the target low-code component according to the communication relationship configuration information to obtain a target front-end page.

[0117] Optionally, the display module 1101 is further configured to:

[0118] In response to a selection operation on a target front-end page template in the template library area of ​​the front-end development page, displaying the target front-end page template in the development area;

[0119] In response to dragging the target component selected in the target component area of ​​the front-end development page to the development area of ​​the front-end development page, and displaying the target component in the development area, the step includes:

[0120] In response to dragging the target component selected in the target component area of ​​the front-end development page to the component blank area within the target front-end page template, the target component is displayed within the target front-end page template, wherein the layout position of the target component in the component blank area is the release position of the dragging operation.

[0121] Optionally, the display module 1101 is further configured to:

[0122] In response to a selection operation on the target component in the development area, displaying attribute information of the target component in the code editing area of ​​the front-end development page;

[0123] In response to a modification and editing operation on the attribute information, obtaining updated attribute information of the target component;

[0124] The triggering rendering engine renders the target component to obtain a preview front-end page, including:

[0125] The rendering engine is triggered to render the target component according to the updated attribute information of the target component to obtain a target front-end page.

[0126] Optionally, the display module 1101 is further configured to:

[0127] In response to dragging the target component in the development area to a position outside the development area, the target component is removed from display in the development area.

[0128] Optionally, the front-end development page includes a project input box, and the display module 1101 is further configured to:

[0129] In response to obtaining a project identifier of a target front-end page development project input in the project input box, obtaining, based on the project identifier, a plurality of pre-configured optional low-code components in target project requirement information associated with the target front-end page development project;

[0130] In the low-code component area of ​​the front-end development page, the multiple optional low-code components are displayed.

[0131] Optionally, the front-end development page includes a project input box, and the display module 1101 is further configured to:

[0132] In response to obtaining a project identifier of a target front-end page development project input in the project input box, obtaining, based on the project identifier, a plurality of optional high-code components pre-configured in target project requirement information associated with the target front-end page development project;

[0133] In the low-code component area of ​​the front-end development page, the multiple optional high-code components are displayed.

[0134] Optionally, the apparatus further includes a testing module 1104 configured to:

[0135] In response to a test configuration operation in a test area of ​​the front-end development page, obtaining test information for the preview front-end page;

[0136] The test engine is triggered to test the preview front-end page to obtain a test result.

[0137] Optionally, the apparatus further includes a monitoring module 1105 configured to:

[0138] Displaying the performance indicators of the preview front-end page in the performance indicator monitoring area of ​​the front-end development page;

[0139] Based on the performance indicators and a predetermined optimization strategy, optimization suggestions for the preview front-end page are determined and displayed.

[0140] The exemplary embodiments of the present application further provide an electronic device, comprising: at least one processor; and a memory communicatively connected to the at least one processor. The memory stores a computer program executable by the at least one processor, wherein the computer program, when executed by the at least one processor, causes the electronic device to perform a method according to an embodiment of the present application.

[0141] An exemplary embodiment of the present application further provides a non-transitory computer-readable storage medium storing a computer program, wherein the computer program, when executed by a processor of a computer, is used to cause the computer to perform a method according to an embodiment of the present application.

[0142] like Figure 12 As shown, the exemplary embodiment of the present application further provides a computer program product 1200, including a computer program 1201, wherein when the computer program is executed by a processor of a computer, it is used to enable the computer to perform the method according to the embodiment of the present application.

[0143] refer to Figure 13, a block diagram of an electronic device 1300 that can serve as a user terminal or server of the present application will now be described, which is an example of a hardware device that can be applied to various aspects of the present application. Electronic device is intended to represent various forms of digital electronic computer devices, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the present application described and / or claimed herein.

[0144] like Figure 13 As shown, electronic device 1300 includes a computing unit 1301, which can perform various appropriate actions and processes according to a computer program stored in a read-only memory (ROM) 1302 or a computer program loaded from a storage unit 1308 into a random access memory (RAM) 1303. Various programs and data required for the operation of electronic device 1300 can also be stored in RAM 1303. Computing unit 1301, ROM 1302, and RAM 1303 are connected to each other via a bus 1304. An input / output (I / O) interface 1305 is also connected to bus 1304.

[0145] Multiple components within electronic device 1300 are connected to I / O interface 1305, including an input unit 1306, an output unit 1307, a storage unit 1308, and a communication unit 1309. Input unit 1306 can be any type of device capable of inputting information into electronic device 1300. Input unit 1306 can receive input numeric or character information and generate key input signals related to user settings and / or function control of the electronic device. Output unit 1307 can be any type of device capable of presenting information and may include, but is not limited to, a display, a speaker, a video / audio output terminal, a vibrator, and / or a printer. Storage unit 1308 may include, but is not limited to, a magnetic disk or an optical disk. Communication unit 1309 allows electronic device 1300 to exchange information / data with other devices via computer networks such as the Internet and / or various telecommunication networks, and may include, but is not limited to, a modem, a network card, an infrared communication device, a wireless communication transceiver and / or chipset, such as a Bluetooth™ device, a WiFi device, a WiMax device, a cellular communication device, and / or the like.

[0146] The computing unit 1301 may be a variety of general and / or special processing components with processing and computing capabilities. Some examples of the computing unit 1301 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various computing units for running machine learning model algorithms, digital signal processors (DSPs), and any appropriate processors, controllers, microcontrollers, etc. The computing unit 1301 performs the various methods and processes described above. For example, in some embodiments, the method of the exemplary embodiment of the present application may be implemented as a computer software program, which is tangibly included in a machine-readable medium, such as a storage unit 1308. In some embodiments, part or all of the computer program may be loaded and / or installed on the electronic device 1300 via the ROM 1302 and / or the communication unit 1309. In some embodiments, the computing unit 1301 may be configured to perform the method of the exemplary embodiment of the present application by any other appropriate means (e.g., by means of firmware).

[0147] The program code for implementing the methods of the present application can be written in any combination of one or more programming languages. Such program code can be provided to a processor or controller of a general-purpose computer, a special-purpose computer, or other programmable data processing device, so that when the program code is executed by the processor or controller, the functions / operations specified in the flow charts and / or block diagrams are implemented. The program code can be executed entirely on the machine, partially on the machine, as a stand-alone software package, partially on the machine and partially on a remote machine, or entirely on a remote machine or server.

[0148] In the context of the present application, a machine-readable medium can be a tangible medium that can contain or store a program for use by an instruction execution system, device or equipment or used in combination with an instruction execution system, device or equipment. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared or semiconductor system, device or equipment, or any suitable combination of the foregoing. A more specific example of a machine-readable storage medium can include an electrical connection based on one or more lines, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0149] As used herein, the terms "machine-readable medium" and "computer-readable medium" refer to any computer program product, apparatus, and / or device (e.g., magnetic disk, optical disk, memory, programmable logic device (PLD)) for providing machine instructions and / or data to a programmable processor, including machine-readable media that receives machine instructions as a machine-readable signal. The term "machine-readable signal" refers to any signal for providing machine instructions and / or data to a programmable processor.

[0150] The systems and techniques described herein can be implemented in a computing system that includes back-end components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes front-end components (e.g., a user computer having a graphical user interface or a web browser through which a user can interact with implementations of the systems and techniques described herein), or a computing system that includes any combination of such back-end components, middleware components, or front-end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include a local area network (LAN), a wide area network (WAN), and the Internet.

[0151] In the above embodiments, they can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using software, they can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer programs or instructions. When the computer program or instructions are loaded and executed on a computer, the process or function described in the embodiment of the present application is performed in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, a terminal, a user device or other programmable device. The computer program or instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer program or instructions can be transmitted from one website, computer, server or data center to another website, computer, server or data center via wired or wireless means. The computer-readable storage medium can be any available medium that can be accessed by a computer or a data storage device such as a server or data center that integrates one or more available media. The available medium can be a magnetic medium, such as a floppy disk, a hard disk, or a tape; it can also be an optical medium, such as a digital video disc (DVD); it can also be a semiconductor medium, such as a solid state drive (SSD).

[0152] Although the present application has been described with reference to specific features and embodiments thereof, it is apparent that various modifications and combinations may be made thereto without departing from the spirit and scope of the present application. Accordingly, this specification and the drawings are merely illustrative of the present application as defined by the appended claims and are deemed to cover any and all modifications, variations, combinations or equivalents within the scope of the present application. Obviously, those skilled in the art may make various modifications and variations to the present application without departing from the spirit and scope of the present application. Thus, the present application is intended to include such modifications and variations as fall within the scope of the claims of the present application and their equivalents.

Claims

1. A front-end page development method, characterized in that: include: In a state where a front-end development page is displayed, in response to dragging a target component selected in a target component area of ​​the front-end development page into a development area of ​​the front-end development page, the target component is displayed in the development area, wherein the front-end development page includes a high-code component area and a low-code component area, the target component area is the high-code component area or the low-code component area, and the layout position of the target component in the development area is the position where the dragging operation is released in the development area; The rendering engine is triggered to render the target component to obtain a preview front-end page, and the preview front-end page is displayed in the development area.

2. The front-end page development method according to claim 1, wherein: The front-end development page also includes a code editing area, and the target component includes a target high-code component and a target low-code component. Before triggering the rendering engine to render the target component to obtain a preview front-end page, the method further includes: In response to an editing operation in a code editing area of ​​the front-end development page, obtaining communication relationship configuration information between the target high-code component and the target low-code component; The triggering rendering engine renders the target component to obtain a preview front-end page, including: The rendering engine is triggered to render the target high-code component and the target low-code component according to the communication relationship configuration information to obtain a target front-end page.

3. The front-end page development method according to claim 1, wherein: In response to dragging a target component selected in the target component area of ​​the front-end development page into the development area of ​​the front-end development page, before displaying the target component in the development area, the method further includes: In response to a selection operation on a target front-end page template in the template library area of ​​the front-end development page, displaying the target front-end page template in the development area; In response to dragging the target component selected in the target component area of ​​the front-end development page to the development area of ​​the front-end development page, and displaying the target component in the development area, the step includes: In response to dragging the target component selected in the target component area of ​​the front-end development page to the component blank area within the target front-end page template, the target component is displayed within the target front-end page template, wherein the layout position of the target component in the component blank area is the release position of the dragging operation.

4. The front-end page development method according to claim 1, wherein: Before triggering the rendering engine to render the target component to obtain a preview front-end page, the method further includes: In response to a selection operation on the target component in the development area, displaying attribute information of the target component in the code editing area of ​​the front-end development page; In response to a modification and editing operation on the attribute information, obtaining updated attribute information of the target component; The triggering rendering engine renders the target component to obtain a preview front-end page, including: The rendering engine is triggered to render the target component according to the updated attribute information of the target component to obtain a target front-end page.

5. The front-end page development method according to claim 1, wherein: After displaying the target component in the development area, the method further includes: In response to dragging the target component in the development area to a position outside the development area, the target component is removed from display in the development area.

6. The front-end page development method according to claim 1, wherein: The front-end development page includes a project input box. In response to dragging a target component selected in a target component area of ​​the front-end development page into a development area of ​​the front-end development page, before displaying the target component in the development area, the method further includes: In response to obtaining a project identifier of a target front-end page development project input in the project input box, obtaining, based on the project identifier, a plurality of pre-configured optional low-code components in target project requirement information associated with the target front-end page development project; In the low-code component area of ​​the front-end development page, the multiple optional low-code components are displayed.

7. The front-end page development method according to claim 1, wherein: The front-end development page includes a project input box. In response to dragging a target component selected in a target component area of ​​the front-end development page into a development area of ​​the front-end development page, before displaying the target component in the development area, the method further includes: In response to obtaining a project identifier of a target front-end page development project input in the project input box, obtaining, based on the project identifier, a plurality of optional high-code components pre-configured in target project requirement information associated with the target front-end page development project; In the low-code component area of ​​the front-end development page, the multiple optional high-code components are displayed.

8. The front-end page development method according to any one of claims 1 to 7, characterized in that: The method further comprises: In response to a test configuration operation in a test area of ​​the front-end development page, obtaining test information for the preview front-end page; The test engine is triggered to test the preview front-end page to obtain a test result.

9. The front-end page development method according to any one of claims 1 to 7, characterized in that: The method further comprises: Displaying the performance indicators of the preview front-end page in the performance indicator monitoring area of ​​the front-end development page; Based on the performance indicators and a predetermined optimization strategy, optimization suggestions for the preview front-end page are determined and displayed.

10. An electronic device comprising a memory, a processor, and a computer program stored in the memory, wherein: The processor executes the computer program to implement the method according to any one of claims 1 to 9.

Images