Front-end page configuration method and device, computer equipment and readable storage medium

Abstract

The invention provides a front-end page configuration method and device, computer equipment and a computer readable storage medium, and belongs to the technical field of computers. The method comprises the following steps: displaying a visual editing interface of the content management system, wherein the visual editing interface comprises a page editing control and a component customization control; displaying an editing sub-interface of the target front-end page on the visual editing interface in response to an editing instruction triggered by a touch operation for the page editing control; in response to a component customization instruction triggered by a touch operation for the component customization control, establishing a connection between the content management system and a component customization end according to a customization end address carried by the component customization instruction; after the content management system establishes a connection with the component customization end, generating a customized component according to a basic component provided by the component customization end; and adding the customized component to the target front-end page in response to an adding operation for the customized component. According to the method, the diversified requirements of front-end page development and the page development efficiency can be improved.

Description

Technical Field

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

[0002] The front-end page is the interface for users to interact with websites or applications. The goal of front-end page design is to provide a good user experience. For example, in the field of digital financial services, in order to meet the needs of digital financial services, front-end pages are usually provided to provide technical support for business needs such as good and smooth communication between financial business personnel and users and users purchasing financial products. In order to adapt to the diverse front-end page development needs and page development efficiency, in related technologies, front-end developers customize and develop front-end pages through content management systems; however, the component templates provided by content management systems are limited, so it is difficult to develop highly customized front pages based on content management systems. Summary of the invention

[0003] The present application provides a front-end page configuration method, device, computer equipment and computer-readable storage medium, which belong to the field of computer technology and can improve the diversified needs of front-end page development and page development efficiency.

[0004] In a first aspect, the present application provides a front-end page configuration method, the method comprising:

[0005] Displaying a visual editing interface of the content management system, wherein the visual editing interface includes a page editing control and a component customization control;

[0006] In response to an editing instruction triggered by a touch operation on the page editing control, displaying an editing sub-interface of the target front-end page on the visual editing interface;

[0007] In response to a component customization instruction triggered by a touch operation on the component customization control, a connection is established between the content management system and the component customization terminal according to the customization terminal address carried in the component customization instruction;

[0008] After the content management system establishes a connection with the component customization end, generating a customized component according to the basic component provided by the component customization end;

[0009] In response to an adding operation on the customized component, the customized component is added to a target front-end page.

[0010] In a second aspect, the present application provides a front-end page configuration device, the front-end page configuration device comprising:

[0011] A first display unit, used to display a visual editing interface of the content management system, wherein the visual editing interface includes a page editing control and a component customization control;

[0012] A second display unit, configured to display an editing sub-interface of the target front-end page on the visual editing interface in response to an editing instruction triggered by a touch operation on the page editing control;

[0013] A connection unit, configured to establish a connection between the content management system and the component customization terminal according to a customization terminal address carried in the component customization instruction in response to a component customization instruction triggered by a touch operation on the component customization control;

[0014] A configuration unit, configured to generate a customized component according to a basic component provided by the component customization end after the content management system establishes a connection with the component customization end;

[0015] The configuration unit is further configured to add the customized component to a target front-end page in response to an adding operation on the customized component.

[0016] In a third aspect, the present application also provides a computer device, comprising a memory and a processor; the memory is used to store a computer program; the processor is used to execute the computer program and implement the front-end page configuration method when executing the computer program.

[0017] In a fourth aspect, the present application also provides a computer-readable storage medium on which a computer program is stored, and the computer program is loaded by a processor to execute the front-end page configuration method.

[0018] This application establishes a connection between a content management system and a component customization end according to the customization end address carried by the component customization instruction in response to the component customization instruction triggered by the touch operation of the component customization control; after the content management system and the component customization end are connected, a customized component is generated according to the basic component provided by the component customization end. On the one hand, since the component customization end can be used to assist in the development of customized components, the configuration development process of the customized components by the front-end developers is avoided, the configuration difficulty of the customized components of the front-end page is reduced, and the configuration efficiency of the front-end page is improved; on the other hand, when the component templates provided by the content management system are limited, the component customization end can be used to generate customized components for the target front-end page, thereby improving the richness of the components and reducing the innovation restrictions of the front-end page. Therefore, the embodiment of this application can improve the diversified needs of front-end page development and the efficiency of page development. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For those skilled in the art, other drawings can be obtained based on these drawings without creative work.

[0020] Figure 1 This is a flow chart of a front-end page configuration method provided in an embodiment of the present application;

[0021] Figure 2 is a scene schematic diagram of a visual editing interface provided in an embodiment of the present application;

[0022] Figure 3 This is a flowchart of an embodiment of step 104 in the embodiment of the present application;

[0023] Figure 4 is another embodiment flow chart of step 104 in the embodiment of the present application;

[0024] Figure 5 It is a schematic diagram of the structure of an embodiment of the front-end page configuration device provided in the embodiment of the present application;

[0025] Figure 6 It is a schematic block diagram of the structure of a computer device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0026] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of this application.

[0027] The flowcharts shown in the accompanying drawings are only examples and do not necessarily include all the contents and operations / steps, nor must they be executed in the order described. For example, some operations / steps may also be decomposed, combined or partially merged, so the actual execution order may change according to actual conditions.

[0028] In the description of the embodiments of the present application, it should be understood that the terms "first" and "second" are used for descriptive purposes only and cannot be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Thus, the features defined as "first" and "second" may explicitly or implicitly include one or more of the features. In the description of the embodiments of the present application, the meaning of "multiple" is two or more, unless otherwise clearly and specifically defined.

[0029] In order to enable any technician in the field to implement and use the application, the following description is given. In the following description, details are listed for the purpose of explanation. It should be understood that those of ordinary skill in the art can recognize that the application can also be implemented without using these specific details. In other examples, the known process will not be elaborated in detail to avoid unnecessary details that make the description of the embodiment of the application obscure. Therefore, the application is not intended to be limited to the embodiments shown, but is consistent with the widest range of principles and features disclosed in accordance with the embodiments of the application.

[0030] Embodiments of the present application provide a front-end page configuration method, apparatus, computer equipment, and computer-readable storage medium.

[0031] The executor of the front-end page configuration method of the embodiment of the present application may be the front-end page configuration device provided in the embodiment of the present application, or the computer device provided in the embodiment of the present application, wherein the front-end page configuration device may be implemented in hardware or software.

[0032] Some embodiments of the present application are described in detail below in conjunction with the accompanying drawings. In the absence of conflict, the following embodiments and features in the embodiments can be combined with each other.

[0033] See also Figure 1 , Figure 1 1 is a flow chart of a front-end page configuration method provided in an embodiment of the present application. The front-end page configuration method includes steps 101 to 105, wherein:

[0034] 101. Display a visual editing interface of a content management system, wherein the visual editing interface includes a page editing control and a component customization control.

[0035] The content management system is a software platform for creating, managing and modifying digital content, and can be used for publishing and updating content on websites or applications. In this implementation, the front-end page configuration is implemented through the visual editing interface provided by the content management system.

[0036] like Figure 2 As shown, Figure 2 It is a scene diagram of the visual editing interface provided in an embodiment of the present application. Exemplarily, the visual editing interface of the content management system can be displayed on a computer device, and the visual editing interface includes page editing controls, component customization controls, etc.

[0037] In order to enable content management users to customize, generate or modify website pages according to their needs using components provided by the content management system to form the required front-end pages, a page editing control is provided in this embodiment. In order to enable content management users to customize, generate or modify website pages according to their needs, content management users can customize components with different functions according to their needs to achieve personalized customization of front-end pages. In this embodiment, component customization controls are provided in the visual editing interface of the content management system to provide component customization functions.

[0038] 102. In response to an editing instruction triggered by a touch operation on the page editing control, display an editing sub-interface of a target front-end page on the visual editing interface.

[0039] The target front-end page refers to the front-end page to be edited and configured.

[0040] Exemplarily, a content management user can open a visual editing interface of a content management system through a computer device. After the content management user clicks a page editing control provided in the visual editing interface and selects a front-end page to be opened for editing (the target front-end page), the content management system will trigger an editing instruction when a touch operation of the content management user on the page editing control is detected. At this time, an editing sub-interface of the target front-end page will be displayed in the visual editing interface, such as Figure 2 As shown, the user can edit the target front-end page on the editing sub-interface, including but not limited to configuring the layout and elements of the page by dragging, clicking, etc.

[0041] 103. In response to a component customization instruction triggered by a touch operation on the component customization control, a connection is established between the content management system and the component customization terminal according to a customization terminal address carried in the component customization instruction.

[0042] In order to customize, generate or modify website pages according to the needs of content management users, the content management users can customize components with different functions according to the needs to realize the personalized customization of the front-end page. The component customization function is provided in this embodiment. Exemplarily, after opening the editing sub-interface of the target front-end page in the visual editing interface, the content management user (such as the developer of the target front-end page) clicks the component customization control provided by the visual editing interface, and enters the customization information (such as the customization end address, component description information, browser page address, etc.) according to the needs. At this time, when the content management user detects the touch operation of the component customization control, the content management system will trigger the component customization instruction carrying the customization information (such as the customization end address, component description information, browser page address, etc.); according to the customization end address carried by the component customization instruction, the connection between the content management system and the component customization end is established.

[0043] 104. After the content management system establishes a connection with the component customization end, a customized component is generated according to the basic component provided by the component customization end.

[0044] There are many ways to implement step 104, illustratively including:

[0045] (1) In some embodiments, the component customization end provides a preset component library, which includes multiple basic components. The content management user can directly select any basic component from the preset component library and load it into the content management system to provide a customized component for the content management system. Figure 3 As shown, step 104 may specifically include the following steps 1041A to 1043A:

[0046] 1041A. After the content management system establishes a connection with the component customization end, the component query interface of the component customization end is called according to the component description information carried by the component customization instruction, and matching basic components of the component description information are obtained from the preset component library of the component customization end.

[0047] 1042A. Display matching basic components provided by the component customization end on the visual editing interface.

[0048] 1043A. In response to a selection operation on the matching basic component, obtain a selected basic component of the selection operation and generate a customized component.

[0049] There are many ways to implement step 1041A, illustratively, including the following ways ① and ②

[0050] ① In some embodiments, in response to a selection operation on the matching basic component, a selected basic component of the selection operation is obtained, and the selected basic component is directly used as a customized component.

[0051] ② In some embodiments, the element attributes of the selected basic component may be adjusted to obtain a customized component. In this case, step 1043A may specifically include the following steps A1 to A3:

[0052] A1. Calling a second file request interface provided by the component customization end to obtain a second display attribute file of the selected basic component of the selection operation.

[0053] The second file request interface is a functional interface that the component customization end exposes to other systems or modules. The function of the file request interface is to enable the content management system to request the component customization end to return the second display attribute file.

[0054] Among them, the display attribute file is a file used to control the component's element color, size, layout, interaction and other attributes.

[0055] The second display attribute file is a display attribute file of the selected basic component.

[0056] A2. Based on the second display attribute file, generate a second element attribute setting panel for the selected basic component in the visual editing interface.

[0057] The element property setting panel is a control panel used to set the element properties of basic components. For example, it can be used to control the color, size, layout, interaction and other properties of the element.

[0058] Among them, the second element property setting panel is a control panel used to set the element properties of the selected basic component.

[0059] A3. In response to the element adjustment operation triggered by the second element attribute setting panel, the configuration information of the selected basic component is adjusted to obtain the customized component.

[0060] In some embodiments, the element adjustment operation includes a size adjustment operation. In response to the size adjustment operation triggered by the second element property setting panel, the adjusted size of the parent element and the adjusted size of the child element of the selected basic component are obtained; the relative unit information between elements of the selected basic component is generated according to the adjusted size of the parent element and the adjusted size of the child element; according to the relative unit information between elements, the configuration information of the selected basic component is adjusted to obtain the customized component. In this way, the relative units and percentages of the parent element and child element of the component can be set, so that the relative size between elements can be adapted according to the parent element, so as to better adapt to different screen sizes and ensure the display integrity and aesthetics of the component on the front-end pages of different devices.

[0061] In some embodiments, the element adjustment operation includes a position adjustment operation, in response to the position adjustment operation triggered by the second element property setting panel, the adjusted parent element position and the adjusted child element position of the selected basic component are obtained; the relative position information between elements of the selected basic component is generated according to the adjusted position of the parent element and the adjusted position of the child element; according to the relative position information between elements, the configuration information of the selected basic component is adjusted to obtain the customized component. In this way, the relative units and percentages of the parent and child elements of the component can be set, so that the relative spacing between elements can be adapted according to the parent element, so as to better adapt to different screen sizes and ensure the display integrity and aesthetics of the component on the front-end pages of different devices.

[0062] In some embodiments, the element adjustment operation includes an animation adjustment operation, and in response to the animation adjustment operation triggered by the second element attribute setting panel, the animation adjustment information corresponding to the animation adjustment operation is obtained, wherein the animation adjustment information includes the element transition duration, the element speed curve, and the element color change curve; according to the animation adjustment information, the configuration information of the selected basic component is adjusted to obtain the customized component. In this way, the dynamic effects of the elements of the component can be set, so that different component dynamic effects can be customized in combination with different business needs, the customizability of the target front-end page can be improved, the personalized setting requirements of the target front-end page can be met, and the problem that the component template provided by the content management system is difficult to meet the personalized needs of the target front-end page can be avoided, thereby meeting the highly personalized or specially customized display requirements of the component, and helping to increase the innovation space of the target front-end page.

[0063] (2) In some embodiments, the component customization end is used to simulate the browser page to generate the page basic component to provide a customized component to the content management system. Figure 4 As shown, step 104 may specifically include the following steps 1041B to 1044B:

[0064] 1041B. After the content management system establishes a connection with the component customization end, a web page structure request is sent to the component customization end according to the browser page address carried by the component customization instruction, so that the component customization end calls a preset web page structure interface to obtain the web page structure file of the browser page address.

[0065] The browser page address is the address of the browser web page for customizing the component entered by the content management user (such as the developer of the target front-end page) in the content management system (for example, it can be a URL (Uniform Resource Locator) address). The browser page address points to a specific web page. The browser page address carried in the component customization instruction is used to indicate that the content management user wants the component customization end to obtain the content or structure of the web page from the address.

[0066] Among them, the preset web page structure interface is a functional interface exposed to other systems or modules. The function of the preset web page structure interface is to enable the component customization end to request and obtain the specific structural content of a web page (such as the browser page corresponding to the browser page address). In this embodiment, the component customization end requests the structural information of a specific web page (i.e., the web page structure file) by calling the preset web page structure interface. Specifically, the component customization end calls the preset web page structure interface, and the web page structure interface returns a file or data describing the layout, style, and elements of the web page.

[0067] The webpage structure file is a file or data describing the layout, style, and elements of a webpage returned by the webpage structure interface when the component customization end calls the preset webpage structure interface. The webpage structure file may specifically include HTML code, CSS style, JavaScript script, etc., which are used to describe the appearance and function of the webpage.

[0068] The web page structure request is a request for the control component customization end to obtain the web page structure file.

[0069] Exemplarily, after a content management user (such as a developer of a target front-end page) clicks on a component customization control provided by a visual editing interface and inputs customization information (such as a browser page address) as required, the component customization instruction triggered at this time will carry the browser page address. After the content management system establishes a connection with the component customization end, first, the content management system generates a web page structure request carrying the browsing page address according to the browser page address carried by the component customization instruction, and sends the web page structure request carrying the browsing page address to the component customization end. After receiving the web page structure request, the component customization end parses the web page structure request to obtain the browsing page address carried by the web page structure request. Next, the component customization end calls a preset web page structure interface to obtain the web page structure file of the browser page address according to the browsing page address carried by the web page structure request.

[0070] 1042B. Send a web page simulation request to the component customization end according to the browser page address, so that the component customization end calls a preset web page execution interface to obtain a web page dynamic interaction file of the browser page address.

[0071] The preset web page execution interface is a functional interface exposed to other systems or modules. The preset web page execution interface enables the component customization end to request and obtain the page data of a web page (such as a browser page corresponding to a browser page address) that is dynamically loaded.

[0072] The web page simulation request is a request for the control component customization end to obtain the dynamic interaction file of the web page.

[0073] The web page dynamic interaction file is the dynamically loaded page data returned by the preset web page execution interface when the component customization end calls the preset web page execution interface.

[0074] Exemplarily, after a content management user (such as a developer of a target front-end page) clicks on a component customization control provided by a visual editing interface and inputs customization information (such as a browser page address) as required, the component customization instruction triggered at this time will carry the browser page address. After the content management system establishes a connection with the component customization end, first, the content management system generates a web page simulation request carrying the browsing page address according to the browser page address carried by the component customization instruction, and sends the web page simulation request carrying the browsing page address to the component customization end. After receiving the web page simulation request, the component customization end parses the web page simulation request to obtain the browsing page address carried by the web page simulation request. Then, the component customization end calls a preset web page execution interface to obtain a web page dynamic interaction file of the browser page address according to the browsing page address carried by the web page simulation request. Among them, when the component customization end calls the preset web page execution interface, a virtual browser will be run to simulate the user interaction behavior of the browsing page address, so that the page content after JavaScript execution can be obtained according to the dynamic loading data of the browser page address, thereby realizing the capture of the dynamically loaded page data and forming a web page dynamic interaction file.

[0075] Therefore, obtaining the dynamic interaction file of the web page through step 1042B can capture the page data dynamically loaded by the web page, so that the generated page basic components can be dynamic and interactive, and then the customized components generated based on the page basic components have higher dynamics and interactivity, which can improve the dynamics and interactivity of the target front-end page.

[0076] 1043B. Calling the component generation interface of the component customization end so that the component customization end generates a page basic component according to the web page structure file and the web page dynamic interaction file and sends the page basic component to the content management system.

[0077] The component generation interface is a functional interface that the component customization end exposes to other systems or modules. The function of the component generation interface is to enable the content management system to request the component customization end to generate page basic components according to the web page structure file and the web page dynamic interaction file.

[0078] The page basic component is the dynamically loaded page data returned by the component generation interface when the content management system calls the component generation interface.

[0079] 1044B. Generate a customized component based on the page basic component provided by the component customization end.

[0080] Therefore, through steps 1041B to 1044B, the dynamics, interactivity and editing convenience of the target front-end page can be improved.

[0081] There are many ways to implement step 1044B, illustratively including the following ways ① and ②:

[0082] ① In some embodiments, the page basic component provided by the component customization end can be directly used as a customized component.

[0083] ② In some embodiments, the element attributes of the page basic component provided by the component customization end may be adjusted to obtain a customized component. At this time, step 1044B may specifically include the following steps B1 to B4:

[0084] B1. Displaying page basic components provided by the component customization end on the visual editing interface.

[0085] B2. Calling a first file request interface provided by the component customization end to obtain a first display attribute file of the page basic component.

[0086] The first file request interface is a functional interface that the component customization end exposes to other systems or modules. The function of the file request interface is to enable the content management system to request the component customization end to generate a first display attribute file according to the webpage structure file and the webpage dynamic interaction file.

[0087] Among them, the display attribute file is a file used to control the component's element color, size, layout, interaction and other attributes.

[0088] The first display attribute file is an attribute file generated according to the web page structure file and the web page dynamic interaction file.

[0089] Exemplarily, after the content management system establishes a connection with the component customization end, the content management system can call the first file request interface provided by the component customization end, so that the component customization end generates a first display attribute file based on the web page structure file and the web page dynamic interaction file and returns it to the content management system. Thus, the content management system can obtain the first display attribute file of the page basic component.

[0090] B3. Based on the first display attribute file, generate a first element attribute setting panel of the page basic component in the visual editing interface.

[0091] Among them, the first element attribute setting panel is a control panel used to set the element attributes of the basic components of the page.

[0092] B4. In response to the element adjustment operation triggered by the first element property setting panel, the configuration information of the page basic component is adjusted to obtain the customized component.

[0093] In some embodiments, the element adjustment operation includes a size adjustment operation. In response to the size adjustment operation triggered by the first element property setting panel, the adjusted size of the parent element and the adjusted size of the child element of the page basic component are obtained; the relative unit information between elements of the page basic component is generated according to the adjusted size of the parent element and the adjusted size of the child element; according to the relative unit information between elements, the configuration information of the page basic component is adjusted to obtain the customized component. In this way, the relative units and percentages of the parent element and child element of the component can be set, so that the relative size between elements can be adapted according to the parent element, so as to better adapt to different screen sizes and ensure the display integrity and aesthetics of the component on the front-end pages of different devices.

[0094] In some embodiments, the element adjustment operation includes a position adjustment operation, in response to the position adjustment operation triggered by the first element property setting panel, obtaining the adjusted parent element position and the adjusted child element position of the page basic component; generating the relative position information between elements of the page basic component according to the adjusted position of the parent element and the adjusted position of the child element; adjusting the configuration information of the page basic component according to the relative position information between elements to obtain the customized component. In this way, the relative units and percentages of the parent and child elements of the component can be set, so that the relative spacing between elements can be adapted according to the parent element, so as to better adapt to different screen sizes and ensure the display integrity and aesthetics of the component on the front-end pages of different devices.

[0095] In some embodiments, the element adjustment operation includes an animation adjustment operation, and in response to the animation adjustment operation triggered by the first element property setting panel, the animation adjustment information corresponding to the animation adjustment operation is obtained, wherein the animation adjustment information includes the element transition duration, the element speed curve, and the element color change curve; according to the animation adjustment information, the configuration information of the page basic component is adjusted to obtain the customized component. In this way, the dynamic effects of the elements of the component can be set, so that different component dynamic effects can be customized in combination with different business needs, the customizability of the target front-end page can be improved, the personalized setting requirements of the target front-end page can be met, and the problem that the component template provided by the content management system is difficult to meet the personalized needs of the target front-end page can be avoided, thereby meeting the highly personalized or specially customized display requirements of the component, and helping to increase the innovation space of the target front-end page.

[0096] 105. In response to the adding operation on the customized component, add the customized component to the target front-end page.

[0097] Further, in order to improve the customization requirements of the component, after adding the customized component to the target front-end page, the properties of the customized component can also be edited. At this time, the front-end page configuration method can further include: displaying the component property setting panel of the customized component on the visual editing interface; in response to the component adjustment operation triggered by the component property setting panel, adjusting the configuration information of the customized component according to the component adjustment information corresponding to the component adjustment operation, wherein the component adjustment information includes at least one of text content, image path, and link address. Wherein, the component property setting panel of the customized component can be generated using the first display file. In this way, each component added to the target front-end page can further customize the properties, and the content management user can click on the customized component to pop up a component property setting panel. In the pop-up component property setting panel, the text content, image path, link address and other properties of the customized component can be adjusted, thereby meeting the highly personalized or specially customized display requirements of the component, which helps to improve the innovation space of the target front-end page.

[0098] Furthermore, in order to improve the customization requirements of components, after adding customized components to the target front-end page, the layout of customized components can also be edited, for example, by dragging and / or scaling customized components in the editing sub-interface to adjust the position and size of customized components in the target front-end page. At this time, the front-end page configuration method may further include: in response to a drag operation on the customized component, adjusting the position of the customized component in the target front-end page; and / or in response to a scaling operation on the customized component, adjusting the size of the customized component in the target front-end page. In this way, each component added to the target front-end page can further customize the layout, thereby meeting the highly personalized or specially customized display requirements of the component, and helping to increase the innovation space of the target front-end page.

[0099] In order to better understand the embodiment of the present application, the following is a specific example to introduce the function of the visual editing interface provided by the content management system in the embodiment of the present application, and the use of the visual editing interface for configuring the front-end page, as follows:

[0100] 1. Configure the target front-end page through the visual editing interface provided by the content management system.

[0101] When configuring the target front-end page, you can refer to steps 103 to 105 to generate customized components and add them to the target front-end page. The visual editing interface will provide content management users with an intuitive and user-friendly environment to easily create and configure the display of the front-end page. The visual editing interface allows content management users to configure the layout and elements of the page by dragging, clicking, etc. The editing functions or specific operation procedures of the visual editing interface are as follows:

[0102] (1) Log in and select a project: Content management users log in to the backend management system and select the project or page to be edited.

[0103] (2) Navigate to the editing interface: After entering the project, the content management user can navigate to the visual editing interface, at which time a "visual editing" option or button may be provided.

[0104] (3) Adding components: In the editing interface, content management users can see a basic component library from which they can select the required components, such as text boxes, images, buttons, etc. Content management users can click or drag these components to the page.

[0105] (4) Customizing component properties: Each component added to a page can be further customized. Content management users can click on a component to pop up a property panel where they can adjust properties such as text content, image path, and link address.

[0106] (5) Layout and typesetting: Content management users can use dragging and resizing to layout and typeset components on the page to achieve the ideal display effect.

[0107] (6) Adding custom components: In addition to basic components, content management users can also choose customizable components, such as carousels, cards, tables, etc. These components can have more complex display and interactive effects to better meet specific needs.

[0108] (7) Interaction and animation: The editing interface provides some interaction and animation setting options. Content management users can add mouse hover effects, click effects or transition animations to page elements to enhance the interactivity and attractiveness of the page.

[0109] (8) Real-time preview: During the editing process, content management users can click the preview button at any time to view the page display effect in the actual browser to ensure that the changes made are in line with expectations.

[0110] (9) Save and publish: After completing page editing, the content management user can save and publish the page. The saved page will become the actual front-end display content and can be accessed through the URL.

[0111] (10) Feedback and optimization: If content management users find problems during browsing, they can return to the editing interface to make adjustments and optimizations. Due to the convenience of the visual editing interface, these adjustments can be completed quickly without restarting the development process. Through the above steps, content management users can use the visual editing interface to create and configure rich and dynamic front-end pages without coding to meet different display needs, while saving time and development costs.

[0112] 2. Configuration-driven rendering: Content management users can define the display logic of the target front-end page by configuring components, modules, etc. in the visual editing interface provided by the content management system. The target front-end page will automatically render content according to these configurations.

[0113] 3. Real-time preview: Content management users can preview the display effect of the target front-end page in real time during the editing process to ensure that the configuration achieves the expected effect.

[0114] 4. One-click publishing: Configuration changes will be published to the target front-end page after being triggered by the publish button, without the need for manual intervention by front-end developers.

[0115] From the above content, it can be seen that by responding to the component customization instruction triggered by the touch operation of the component customization control, the connection between the content management system and the component customization end is established according to the customization end address carried by the component customization instruction; after the content management system and the component customization end are connected, the customized component is generated according to the basic component provided by the component customization end. On the one hand, since the component customization end can be used to assist in the development of customized components, the configuration and development process of the customized components by the front-end developers can be avoided, and the process of configuring and modifying the page by the intervention of the back-end developers can be reduced, thereby reducing the delay between content editing and display, reducing the difficulty of configuring the customized components of the front-end page, and improving the configuration efficiency of the front-end page; on the other hand, when the component templates provided by the content management system are limited, the component customization end can be used to generate customized components for the target front-end page, thereby improving the richness of the components and reducing the innovation restrictions of the front-end page. On the third hand, adding customized components through the visual editing interface can improve the flexibility and interactivity of the page display. Content management users do not need to rely on back-end developers, and can flexibly configure the layout and content of the page through an intuitive visual interface; at the same time, it also reduces the workload of front-end developers, allowing them to focus more on the development of core functions. By adding customized components through the visual editing interface to realize the display style of the front-end page, it can not only reduce the probability of errors, but also speed up the publishing of pages; thus, it brings a more efficient and flexible display mechanism to Web development, and promotes the continuous improvement of content management and user experience. Therefore, the embodiment of the present application can improve the diversified needs of front-end page development and the efficiency of page development.

[0116] In addition, in order to better implement the front-end page configuration method in the embodiment of the present application, based on the front-end page configuration method, the embodiment of the present application also provides a front-end page configuration device, such as Figure 5 FIG. 1 is a schematic diagram of a front-end page configuration device according to an embodiment of the present application. The front-end page configuration device 500 includes:

[0117] A first display unit 501 is used to display a visual editing interface of the content management system, wherein the visual editing interface includes a page editing control and a component customization control;

[0118] The second display unit 502 is used to display an editing sub-interface of the target front-end page in the visual editing interface in response to an editing instruction triggered by a touch operation on the page editing control;

[0119] A connection unit 503, configured to establish a connection between the content management system and the component customization terminal according to the customization terminal address carried in the component customization instruction in response to the component customization instruction triggered by the touch operation on the component customization control;

[0120] A configuration unit 504, configured to generate a customized component according to a basic component provided by the component customization end after the content management system is connected to the component customization end;

[0121] The configuration unit 504 is further configured to add the customized component to the target front-end page in response to an adding operation on the customized component.

[0122] In some embodiments, the configuration unit 504 is specifically configured to:

[0123] After the content management system establishes a connection with the component customization end, a web page structure request is sent to the component customization end according to the browser page address carried by the component customization instruction, so that the component customization end calls a preset web page structure interface to obtain a web page structure file of the browser page address;

[0124] Sending a web page simulation request to the component customization end according to the browser page address, so that the component customization end calls a preset web page structure interface to obtain a web page dynamic interaction file of the browser page address;

[0125] Calling the component generation interface of the component customization end so that the component customization end generates a page basic component according to the web page structure file and the web page dynamic interaction file and sends the generated page basic component to the content management system;

[0126] Generate customized components based on the page basic components provided by the component customization end.

[0127] In some embodiments, the configuration unit 504 is specifically used to: display the page basic components provided by the component customization end in the visual editing interface;

[0128] Calling a first file request interface provided by the component customization end to obtain a first display attribute file of the page basic component;

[0129] Based on the first display attribute file, generating a first element attribute setting panel of the page basic component in the visual editing interface;

[0130] In response to the element adjustment operation triggered by the first element property setting panel, the configuration information of the page basic component is adjusted to obtain the customized component.

[0131] In some embodiments, the element adjustment operation includes a size adjustment operation, and the configuration unit 504 is specifically configured to:

[0132] In response to the size adjustment operation triggered by the first element property setting panel, obtaining the adjusted size of the parent element and the adjusted size of the child element of the page basic component;

[0133] Generate relative unit information between elements of the page basic component according to the adjusted size of the parent element and the adjusted size of the child element;

[0134] According to the relative unit information between the elements, the configuration information of the page basic component is adjusted to obtain the customized component.

[0135] In some embodiments, the element adjustment operation includes an animation adjustment operation, and the configuration unit 504 is specifically configured to:

[0136] In response to the animation adjustment operation triggered by the first element property setting panel, obtaining animation adjustment information corresponding to the animation adjustment operation, wherein the animation adjustment information includes element transition duration, element speed curve, and element color change curve;

[0137] According to the animation adjustment information, the configuration information of the page basic component is adjusted to obtain the customized component.

[0138] In some embodiments, the configuration unit 504 is specifically configured to:

[0139] Displaying a component property setting panel of the customized component in the visual editing interface;

[0140] In response to a component adjustment operation triggered by the component property setting panel, the configuration information of the customized component is adjusted according to component adjustment information corresponding to the component adjustment operation, wherein the component adjustment information includes at least one of text content, image path, and link address.

[0141] In some embodiments, the configuration unit 504 is specifically configured to:

[0142] In response to a drag operation on the customized component, adjusting a position of the customized component in the target front-end page;

[0143] And / or in response to a zooming operation on the customized component, adjusting the size of the customized component in the target front-end page.

[0144] In specific implementation, the above units can be implemented as independent entities, or can be arbitrarily combined and implemented as the same or several entities. The specific implementation of the above units can refer to the previous front-end page configuration method embodiment, which will not be repeated here.

[0145] See also Figure 6 , Figure 6 A schematic block diagram of the structure of a computer device provided in an embodiment of the present application. The computer device may be a server.

[0146] like Figure 6 As shown, the computer device includes a processor, a memory, and a network interface connected via a system bus, wherein the memory may include a non-volatile storage medium and an internal memory.

[0147] The non-volatile storage medium can store an operating system and a computer program. The computer program includes program instructions, and when the program instructions are executed, the processor can execute any front-end page configuration method.

[0148] The processor is used to provide computing and control capabilities and support the operation of the entire computer equipment.

[0149] The internal memory provides an environment for the operation of the computer program in the non-volatile storage medium. When the computer program is executed by the processor, the processor can execute any front-end page configuration method.

[0150] The network interface is used for network communication, such as sending assigned tasks, etc. Those skilled in the art will understand that Figure 6 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0151] It should be understood that the processor may be a central processing unit (CPU), and the processor may also be other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. Among them, the general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc.

[0152] In one embodiment, the processor is used to run a computer program stored in the memory to implement the following steps:

[0153] A visual editing interface of a content management system is displayed, wherein the visual editing interface includes a page editing control and a component customization control; in response to an editing instruction triggered by a touch operation on the page editing control, an editing sub-interface of a target front-end page is displayed on the visual editing interface; in response to a component customization instruction triggered by a touch operation on the component customization control, a connection is established between the content management system and a component customization end according to a customization end address carried by the component customization instruction; after the connection between the content management system and the component customization end is established, a customized component is generated according to a basic component provided by the component customization end; in response to an add operation on the customized component, the customized component is added to the target front-end page.

[0154] A person skilled in the art will appreciate that all or part of the steps in the above-mentioned front-end page configuration method may be completed by instructions, or by controlling related hardware through instructions. The instructions may be stored in a computer-readable storage medium and loaded and executed by a processor.

[0155] To this end, an embodiment of the present application provides a computer-readable storage medium, in which multiple computer programs are stored. The computer programs can be loaded by a processor to execute any front-end page configuration method provided in the embodiment of the present application.

[0156] The computer-readable storage medium may include: a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, etc.

[0157] In the above-mentioned front-end page configuration device and computer-readable storage medium embodiments, the description of each embodiment has its own emphasis. For parts not described in detail in a certain embodiment, reference can be made to the relevant description of other embodiments. Those skilled in the art can clearly understand that for the convenience and simplicity of description, the specific working process and beneficial effects of the above-described front-end page configuration device, computer-readable storage medium and its corresponding units can refer to the description of the front-end page configuration method in the above embodiment, and will not be repeated here.

[0158] The above is a detailed introduction to a front-end page configuration method, device, computer equipment and computer-readable storage medium provided in the embodiments of the present application. Specific examples are used herein to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method and its core idea of ​​the present application; at the same time, for those skilled in the art, according to the ideas of the present application, there will be changes in the specific implementation methods and application scopes. In summary, the content of this specification should not be understood as a limitation on the present application. The non-company software tools or components that appear in the embodiments of the present application are only examples and do not represent actual use.

Claims

1. A front-end page configuration method, characterized in that: The method comprises: Displaying a visual editing interface of the content management system, wherein the visual editing interface includes a page editing control and a component customization control; In response to an editing instruction triggered by a touch operation on the page editing control, displaying an editing sub-interface of the target front-end page on the visual editing interface; In response to a component customization instruction triggered by a touch operation on the component customization control, a connection is established between the content management system and the component customization terminal according to the customization terminal address carried in the component customization instruction; After the content management system establishes a connection with the component customization end, generating a customized component according to the basic component provided by the component customization end; In response to an adding operation on the customized component, the customized component is added to a target front-end page.

2. The front-end page configuration method according to claim 1, characterized in that: After the content management system is connected to the component customization end, generating a customized component according to the basic component provided by the component customization end includes: After the content management system establishes a connection with the component customization end, a web page structure request is sent to the component customization end according to the browser page address carried by the component customization instruction, so that the component customization end calls a preset web page structure interface to obtain a web page structure file of the browser page address; Sending a web page simulation request to the component customization end according to the browser page address, so that the component customization end calls a preset web page structure interface to obtain a web page dynamic interaction file of the browser page address; Calling the component generation interface of the component customization end so that the component customization end generates a page basic component according to the web page structure file and the web page dynamic interaction file and sends the generated page basic component to the content management system; Generate customized components based on the page basic components provided by the component customization end.

3. The front-end page configuration method according to claim 2, characterized in that: The generating of customized components based on the page basic components provided by the component customization end includes: Displaying the page basic components provided by the component customization end on the visual editing interface; Calling a first file request interface provided by the component customization end to obtain a first display attribute file of the page basic component; Based on the first display attribute file, generating a first element attribute setting panel of the page basic component in the visual editing interface; In response to the element adjustment operation triggered by the first element property setting panel, the configuration information of the page basic component is adjusted to obtain the customized component.

4. The front-end page configuration method according to claim 3, characterized in that: The element adjustment operation includes a size adjustment operation, and the element adjustment operation triggered in response to the first element property setting panel adjusts the configuration information of the page basic component to obtain the customized component, including: In response to the size adjustment operation triggered by the first element property setting panel, obtaining the adjusted size of the parent element and the adjusted size of the child element of the page basic component; Generate relative unit information between elements of the page basic component according to the adjusted size of the parent element and the adjusted size of the child element; According to the relative unit information between the elements, the configuration information of the page basic component is adjusted to obtain the customized component.

5. The front-end page configuration method according to claim 3, characterized in that: The element adjustment operation includes an animation adjustment operation, and the element adjustment operation triggered in response to the first element property setting panel adjusts the configuration information of the page basic component to obtain the customized component, including: In response to the animation adjustment operation triggered by the first element property setting panel, obtaining animation adjustment information corresponding to the animation adjustment operation, wherein the animation adjustment information includes element transition duration, element speed curve, and element color change curve; According to the animation adjustment information, the configuration information of the page basic component is adjusted to obtain the customized component.

6. The front-end page configuration method according to claim 1, characterized in that: The method further comprises: Displaying a component property setting panel of the customized component in the visual editing interface; In response to a component adjustment operation triggered by the component property setting panel, the configuration information of the customized component is adjusted according to component adjustment information corresponding to the component adjustment operation, wherein the component adjustment information includes at least one of text content, image path, and link address.

7. The front-end page configuration method according to claim 1, characterized in that: The method further comprises: In response to a drag operation on the customized component, adjusting a position of the customized component in the target front-end page; And / or in response to a zooming operation on the customized component, adjusting the size of the customized component in the target front-end page.

8. A front-end page configuration device, characterized in that: The front-end page configuration device comprises: A first display unit, used to display a visual editing interface of the content management system, wherein the visual editing interface includes a page editing control and a component customization control; A second display unit, configured to display an editing sub-interface of the target front-end page on the visual editing interface in response to an editing instruction triggered by a touch operation on the page editing control; A connection unit, configured to establish a connection between the content management system and the component customization terminal according to a customization terminal address carried in the component customization instruction in response to a component customization instruction triggered by a touch operation on the component customization control; A configuration unit, configured to generate a customized component according to a basic component provided by the component customization end after the content management system establishes a connection with the component customization end; The configuration unit is further configured to add the customized component to a target front-end page in response to an adding operation on the customized component.

9. A computer device, characterized in that: The computer device includes a memory and a processor; The memory is used to store computer programs; The processor is used to execute the computer program and implement the front-end page configuration method according to any one of claims 1 to 7 when executing the computer program.

10. A computer-readable storage medium, characterized in that: A computer program is stored thereon, and the computer program is loaded by a processor to execute the front-end page configuration method according to any one of claims 1 to 7.

Images