Page development method and device, equipment, medium and program product

Abstract

The embodiment of the invention provides a page development method and device, equipment, a medium and a program product. Comprising the steps that a preview interface of page development is displayed, the preview interface is presented as a first page, the first page comprises a first page element in an editable state, the first page is generated based on compiling of a first code, and the first code is generated by a model according to input page requirement description information; and in response to a first interaction operation for the first page element, determining operation data generated when the first interaction operation acts on the first page element, updating the first page element according to the operation data, forming a second page, and displaying the second page as a preview interface. According to the method, the visual editing development capability of the page can be provided on the basis of keeping the artificial intelligence code generation capability, the real-time updating of the page elements can be realized through the operation on the page elements in the editable state, the page fine tuning threshold is reduced, the real-time feedback of the page development effect is ensured, and the page development efficiency is improved.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, and more particularly to a page development method, apparatus, device, medium, and program product. Background Technology

[0002] Currently, AI-generated code can significantly improve page development efficiency. However, the code generated by current AI capabilities cannot perfectly match the development needs of a page. Manual modification of the generated code is required for fine-tuning, but this requires a high level of expertise from developers.

[0003] Currently, low-code or no-code visual editors are available to support page development, but these are primarily based on Domain Specific Languages ​​(DSLs). Artificial intelligence is not well-suited to code generation for different DSLs. Therefore, to achieve visual page editing development, an additional DSL-based platform is required, which increases development costs and limits flexibility and scalability. Summary of the Invention

[0004] This disclosure provides a page development method, apparatus, device, medium, and program product that enables editable page development, improves page development efficiency, and lowers the editing threshold for page development.

[0005] In a first aspect, embodiments of this disclosure provide a page development method, which includes:

[0006] The preview interface of the display page development is presented as a first page. The first page contains first page elements in an editable state. The first page is generated based on the compilation of first code, which is generated by the model according to the input page requirement description information.

[0007] In response to a first interactive operation on a first page element, the operation data generated when the first interactive operation is applied to the first page element is determined, the first page element is updated according to the operation data to form a second page, and the second page is displayed as the preview interface.

[0008] Secondly, embodiments of this disclosure also provide a page development apparatus, including:

[0009] The display module is used to display a preview interface of the page development. The preview interface is presented as a first page, which contains first page elements in an editable state. The first page is generated based on the compilation of first code, which is generated by the model according to the input page requirement description information.

[0010] The first response module is used to respond to a first interactive operation on a first page element, determine the operation data generated when the first interactive operation is applied to the first page element, update the first page element according to the operation data to form a second page, and display it as the preview interface.

[0011] Thirdly, embodiments of this disclosure also provide an electronic device, the electronic device comprising:

[0012] One or more processors;

[0013] Storage device for storing one or more programs.

[0014] When the one or more programs are executed by the one or more processors, the one or more processors implement the page development method as described in any embodiment of this disclosure.

[0015] Fourthly, embodiments of this disclosure also provide a storage medium containing computer-executable instructions, which, when executed by a computer processor, are used to perform the page development method as described in any embodiment of this disclosure.

[0016] Fifthly, embodiments of this disclosure also provide a computer program product, including a computer program that, when executed by a processor, is used to implement the page development method as described in any embodiment of this disclosure.

[0017] The technical solution of this embodiment, through the provided page development method, can display a preview interface for page development. The preview interface is presented as a first page, which contains first page elements in an editable state. The first page is generated based on the compilation of first code, which is generated by a model according to the input page requirement description information. It can also respond to a first interactive operation on the first page element, determine the operation data generated when the first interactive operation is applied to the first page element, update the first page element according to the operation data, form a second page, and display it as a preview interface. The above-mentioned technical solution of this embodiment can reuse the code generation capabilities of artificial intelligence, thereby presenting the efficiency advantages of artificial intelligence in page development and avoiding the additional resource consumption of traditional low-code platforms that require defining a DSL before providing page visual development capabilities. At the same time, this embodiment directly establishes a connection between code generation and page visual editing development, which is equivalent to providing a WYSIWYG operation carrier for page fine-tuning under visualization, providing a development implementation method for non-professional developers, and further lowering the development threshold for page development. Furthermore, by defining the operation data for interactive actions, visual operations can be transformed into executable element update instructions. This ensures that updates generated by interactive actions are precisely applied to page elements, guaranteeing accurate and flexible modification of page elements. Moreover, operation data-driven page element modification better expands the editing capabilities of page development, overcoming the limitations of traditional methods. The real-time preview updates and focused page element editing provided by the above technical solution significantly reduce the development difficulty and interference, thereby improving page development efficiency. Attached Figure Description

[0018] The above and other features, advantages, and aspects of the embodiments of this disclosure will become more apparent from the accompanying drawings and the following detailed description. Throughout the drawings, the same or similar reference numerals denote the same or similar elements. It should be understood that the drawings are schematic, and the originals and elements are not necessarily drawn to scale.

[0019] Figure 1 A flowchart illustrating a page development method provided in an embodiment of this disclosure is given;

[0020] Figure 2 A schematic diagram of the structure of a page development apparatus provided in an embodiment of this disclosure is given;

[0021] Figure 3 A schematic diagram of the structure of an electronic device provided in an embodiment of this disclosure is given. Detailed Implementation

[0022] Embodiments of this disclosure will now be described in more detail with reference to the accompanying drawings. While some embodiments of this disclosure are shown in the drawings, it should be understood that this disclosure can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of this disclosure. It should be understood that the accompanying drawings and embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of protection of this disclosure.

[0023] It should be understood that the steps described in the method embodiments of this disclosure may be performed in different orders and / or in parallel. Furthermore, the method embodiments may include additional steps and / or omit the steps shown. The scope of this disclosure is not limited in this respect.

[0024] The term "comprising" and its variations as used herein are open-ended inclusions, meaning "including but not limited to". The term "based on" means "at least partially based on". The term "one embodiment" means "at least two embodiments"; the term "another embodiment" means "at least two additional embodiments"; the term "some embodiments" means "at least some embodiments". Definitions of other terms will be given in the description below.

[0025] It should be noted that the concepts of "first" and "second" mentioned in this disclosure are used only to distinguish different devices, modules or units, and are not used to limit the order of functions performed by these devices, modules or units or their interdependencies.

[0026] It should be noted that the terms "a" and "a plurality of" used in this disclosure are illustrative rather than restrictive, and those skilled in the art should understand that, unless otherwise expressly indicated in the context, they should be understood as "one or more".

[0027] The names of messages or information exchanged between multiple devices in the embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of such messages or information.

[0028] It is understood that before using the technical solutions disclosed in the various embodiments of this disclosure, users should be informed of the types, scope of use, and usage scenarios of the personal information involved in this disclosure in an appropriate manner in accordance with relevant laws and regulations, and user authorization should be obtained.

[0029] For example, upon receiving a user's active request, a prompt message is sent to the user to explicitly inform them that the requested operation will require the acquisition and use of the user's personal information. This allows the user to independently choose whether to provide personal information to the software or hardware, such as the electronic device, application, server, or storage medium performing the operations of this disclosed technical solution, based on the prompt message.

[0030] As an optional but non-limiting implementation, in response to a user's active request, sending a prompt message to the user can be done via a pop-up window, where the prompt message can be presented in text format. Furthermore, the pop-up window can also include a selection control allowing the user to choose "agree" or "disagree" to provide personal information to the electronic device.

[0031] It is understood that the above notification and user authorization process are merely illustrative and do not constitute a limitation on the implementation of this disclosure. Other methods that comply with relevant laws and regulations may also be applied to the implementation of this disclosure.

[0032] It is understood that the data involved in this technical solution (including but not limited to the data itself, the acquisition or use of the data) shall comply with the requirements of relevant laws, regulations and related provisions.

[0033] It should be noted that one application scenario presented in this embodiment can be described as follows: Taking front-end page development as an example, currently, AI-powered code generation capabilities can be used to generate front-end page code based on provided page development requirements, thereby achieving front-end page development. However, front-end pages developed using model-generated code also have the problem of not fully matching development requirements. There is a need for page fine-tuning, but currently, this can only be achieved by manually modifying code segments within the generated code. Therefore, this places a high barrier to entry for developers.

[0034] Existing low-code or no-code editors that allow for visual editing and development of front-end pages are available. However, these editors are primarily based on DSLs (Specific Language Definitions). Considering the characteristics of DSLs, due to their domain-specific nature, they are often only suitable for front-end web development in a single scenario, limiting the flexibility and scalability of front-end page development. Furthermore, because DSLs differ from common general-purpose coding languages, generating DSLs through models is quite difficult. Therefore, it can be argued that currently, in the context of artificial intelligence applications, there is no good method for achieving visual editing and development of front-end pages.

[0035] Based on this, the embodiments of this disclosure provide a page development method that enables simple and efficient page development while solving existing problems. Specifically, Figure 1 A flowchart illustrating a page development method provided by an embodiment of this disclosure is given. This embodiment of the disclosure is applicable to the development of pages. The method can be executed by a page development device, which can be implemented in the form of software and / or hardware, and optionally, by an electronic device.

[0036] like Figure 1As shown, the page development method provided in this disclosure embodiment may specifically include:

[0037] S101. Display a preview interface for the developed page. The preview interface is presented as a first page. The first page contains first page elements in an editable state. The first page is generated based on the compilation of first code. The first code is generated by the model according to the input page requirement description information.

[0038] In this embodiment, the preview interface refers to a visual interface used in real time to display the final appearance of the page during the page development process. It allows developers to directly observe element styles and layouts on the interface and initiate editing operations. It can be considered as the implementation carrier of the WYSIWYG development mode. The first page can be considered as the initial page form displayed by the preview interface. Specifically, it can be generated by the first code generated by the model after compilation, containing all editable page elements. It can also be considered as the basic version page that is relied upon in subsequent visual editing development.

[0039] In this embodiment, the first page element can be considered as a specific component or element on the first page that supports editing interaction (such as title text, image resources, button styles, etc.). In the editable state, it possesses attributes that can receive interactive operations, such as selection, clicking, dragging, and input. In this embodiment, each page element can be considered to be associated with a corresponding code segment in the first code at the code level.

[0040] In this embodiment, the first code can be considered as page code automatically generated by a model (such as a front-end code generation model) based on the input page requirement description information, such as "generate a homepage with a red title and an image on the left". It can be code adapted to different page development frameworks, such as React code adapted to a page development framework like React, or HTML code adapted to a page development framework like HyperText Markup Language (HTML). The first code can be considered as the source code of the first page.

[0041] In this embodiment, the page requirement description information can be considered as input data for the model, which can be natural language description information or structured instruction description information provided by the developer. In an artificial intelligence application scenario, it can provide a conversational AI platform, and input page development requirement information through a dialog box in a conversational scenario. The AI ​​server can convert the input requirement information as page requirement description information into a model-readable format and input it into the model with code generation capabilities.

[0042] In this embodiment, an example of the page requirement description information could be: generate an e-commerce product details page, including a product image (left side), product name (24px bold), price tag (red font), and an "Add to Cart" button (blue background). The model used could be a front-end code generation model. By calling this generation model, the above page requirement description information can be read, and key information involved in code generation, such as element type, style, and layout, can be parsed out. Finally, the first code that conforms to the front-end syntax specification can be automatically generated.

[0043] In this embodiment, considering the language differences between the code and the page, compilation is required to establish a mapping relationship between the code and page elements, thereby transforming the generated first code into a visual page that can be rendered and viewed intuitively by the browser. In one implementation, the first code can be compiled using a compilation engine such as a browser's parsing engine.

[0044] It's important to note that the primary purpose of compilation is to generate the Document Object Model (DOM) corresponding to the initial code. In practice, the logic used for compiling the initial code differs depending on the page development framework. For example, if it's HTML code adapted for an HTML page development framework, the browser can directly parse the HTML tags and cascading styles to generate the DOM. If it's React code adapted for a React page development framework, a compilation tool can be used to convert the syntax into web page script code. Then, the React renderer generates a virtual DOM from the web page script code, and finally, the virtual DOM is mapped to the real DOM.

[0045] Following the above description, after generating the Document Object Model (DOM), the first page (preview interface) can be displayed by rendering the DOM. For example, the compiled DOM can be transformed into a visual page, i.e., the first page, through a browser rendering engine. Then, the first page can be embedded into the created preview container and some basic interactive support can be added. After the preview interface loads, the first page can be displayed.

[0046] In this embodiment, to ensure that page elements in the preview interface are in an editable state, the editability of the first page element is preferably achieved by adding an editable identifier to the first page element and binding interactive events to the first page element during the compilation phase of the first code. Specifically, this embodiment can be implemented through the following steps: During the compilation phase of the first code, an editable identifier can be added to the page elements that need to be editable. After displaying the first page, this embodiment can quickly locate the first page element by reading the editable identifier through a pre-built identifier location function and assign the first page element an editable state.

[0047] This embodiment also requires binding interactive events to the first page element during the compilation stage of the first code. Specifically, this embodiment can bind an edit trigger event to the first page element to trigger the first page element to enter edit mode, or it can bind an operation feedback event to the first page element to ensure that the operation on the first page element takes effect in real time.

[0048] It is important to note that during the compilation phase of the first code, this embodiment can also establish a mapping relationship between the first page elements and the first code. For example, if it is necessary to determine the matching code segment for the first page element in the first code, the position information of the matching first code segment can then be injected into the element object data of the first page element as element code mapping information. The element object data is the specific representation of the first page element in the document object model. The element code mapping information constructed in this embodiment can provide code update capabilities in subsequent page development.

[0049] S102. In response to a first interactive operation on a first page element, determine the operation data generated when the first interactive operation is applied to the first page element, update the first page element according to the operation data to form a second page, and display it as the preview interface.

[0050] In this embodiment, the first interactive operation can be understood as a visual interactive operation initiated on the first page element in an editable state, which can be regarded as the source of the instruction to trigger the page update. The operation type of the first interactive operation may include: text modification (such as clicking the title to enter new text), style adjustment (such as dragging the element to change its position, selecting the color to change the font color), resource replacement (such as clicking the image to upload a new image), and structural adjustment (such as deleting elements, adjusting the element hierarchy), etc.

[0051] In this embodiment, the operation data can be understood as structured data that can be identified and executed at the underlying logic level, formed by transforming unstructured interactive operations. Specifically, the operation data may include the operation type of the first interactive operation, and may also include element attribute information of the first page element triggered by the first interactive operation, such as element identifier and element line number.

[0052] Following the above description, the operation data further needs to include the operation content generated during the first interactive operation applied to the first page element. This operation content can include the old data of the target attribute item of the first page element before the response operation and the new data changed after the response. The target attribute item can be considered as the attribute item associated with the first page element under the operation type of the first interactive operation.

[0053] In this embodiment, the second page can be understood as a real-time feedback result provided after the first page has undergone an operation that takes effect. Specifically, the second page can be considered as a new page form formed after the elements of the first page are updated with operation data, or it can be considered as a visualization result of the first interactive operation. The second page also inherits other unmodified elements from the first page.

[0054] In this embodiment, the first interactive operation triggered on the first page element can be captured by listening to interactive events. It should be noted that, after capturing the first interactive operation, this embodiment can obtain the code information associated with the first page element and the element object data through the attribute information of the affected first page element. The obtained code information and element object data are then stored in a pre-built state library as backup of the original data before the operation on the first page element, and thus used for rollback operations involved in subsequent logic implementation.

[0055] In this embodiment, one implementation of operation data generation can be described as follows: Based on the operation type of the first interactive operation, determine the element attributes that need to be modified to adjust the first page element. Alternatively, the element attributes to be modified can be determined as operation-related fields, and the field data can be obtained. Then, according to the interface specifications set under the page development framework, encapsulate the operation type of the first interactive operation, the element identifier of the first page element, and the field data in the operation-related fields to form operation data. The generated operation data can be stored in the operation execution record and can be synchronously pushed onto the operation rollback stack to provide data support for subsequent rollback or redo operations.

[0056] In this embodiment, one implementation of updating the first page element with operation data to form the second page can be described as follows: An operation execution interface built under the page development framework can be used to call an operation processing function that matches the operation type of the first interactive operation. The operation processing function includes operation processing logic corresponding to the operation type. By running the operation processing function, the element object data of the first page element can be modified. Finally, the first page element and its associated area can be redrawn using the modified element object data.

[0057] In this embodiment, the operation execution interface can be understood as a function call interface configured within the page development framework upon which page development depends. This operation execution interface can contain a set of standardized operation processing rules created for different operation types, and these rules can be represented in the form of operation processing functions. The operation execution interface enables unified management of interactive operations under different operation types. Furthermore, this embodiment also utilizes the operation execution interface to achieve flexible expansion of visual editing and development pages under different page development frameworks. It only requires creating the operation execution interface tailored to the characteristics of different page development frameworks and constructing the necessary operation processing functions within the operation processing interface.

[0058] In this embodiment, the content of unmodified elements on the second page can remain unchanged. This embodiment pushes the element object data of the page elements on the second page into the preview container, ensuring that the structure of the document object model contained in the preview container is consistent with the second page, thereby achieving the effect of displaying the second page as a preview interface.

[0059] The technical solution described in this embodiment can reuse the code generation capabilities of artificial intelligence, thereby showcasing the efficiency advantages of AI in page development and avoiding the additional resource consumption required by traditional low-code platforms that need to define a DSL before providing page visualization development capabilities. Simultaneously, this embodiment directly establishes a connection between code generation and page visualization editing and development, essentially providing a WYSIWYG operational platform for fine-tuning the page under visualization, offering a development implementation method for non-professional developers and significantly lowering the development threshold for page development. Furthermore, by determining the operation data of interactive operations, visual operations can be transformed into executable element update instructions, ensuring that the updates generated by interactive operations can accurately affect page elements, guaranteeing precise and flexible modification of page elements. Moreover, operation data-driven page element modification can better expand the editing capabilities of page development, overcoming the limitations of traditional methods. The real-time preview updates and focused page element editing provided by the above technical solution significantly reduce the development difficulty and interference of page development, thereby improving page development efficiency.

[0060] As a first optional embodiment of this example, based on the above embodiment, the operation data generated when the first interactive operation is applied to the first page element can be specified as follows:

[0061] a1) Determine the operation type of the first interactive operation and obtain the operation association field under the operation type.

[0062] For example, the first interactive operation can determine the corresponding operation type based on the generated interactive event. Specifically, it can determine the triggering characteristics and the first page element of the interactive event, and determine the element type of the first page element. Then, it can determine the matching operation type through pre-set mapping information between events, element types, and operation types. The operation type can include text modification, style adjustment, resource replacement, class name modification, and element deletion of page elements.

[0063] In this embodiment, the operation-related field can be understood as the element attribute or data field that must be modified for the first page element under the corresponding operation type. It can represent the specific target of the first interactive operation on the first page element. This step can, after determining the operation type, obtain the element attribute field that the first interactive operation needs to modify for the first page element through pre-configured operation type and related field mapping information, and record this element attribute field as the operation-related field. For example, under the text modification operation type, the content attribute field of the first page element can be used as an operation-related field.

[0064] b1) Determine the field data corresponding to the operation-associated field when the first interactive operation is applied to the first page element, and encapsulate the operation type and the field data to form the operation data.

[0065] In this embodiment, the purpose of this step can be considered as transforming the visual interactive operation into structured operation data that can be identified and known in the application implementation, thereby providing basic data for subsequent page element updates and code synchronization.

[0066] One implementation of this step can be described as follows: the original data of the operation-related field before responding to the first interactive operation can be collected. For example, if the operation-related field is the element content, the text content currently displayed by the element can be extracted as the original data. If the operation-related field is the element style, the style value currently in effect by the element can be extracted as the original data. If the operation-related field is the resource path, the resource link currently referenced by the element can be extracted as the original data.

[0067] Following the above description, this step can also acquire new data generated by the first interactive operation on the first page element. For example, if the first interactive operation involves input modification (editing text), the input content in the input box can be collected as new data; or if the first interactive operation involves selection modification (adjusting style, replacing image, etc.), the target value determined from the selector or upload control (selected font size, path of uploaded image, etc.) can be collected as new data; or if the first interactive operation involves drag modification (adjusting element position), the final coordinate value of the first page element after dragging can be collected as new data involving the modification.

[0068] This step binds the collected raw data and new data with the operation-related fields to form field-level structured data. This is used to clarify the change logic involved in each operation-related field. Finally, the operation type, the element identifier of the first page element, and the field data formed above are encapsulated according to the structured format of the matching page development framework to form the final operation data. This ensures that the subsequent operation processing logic can directly parse and apply the operation data.

[0069] It should be noted that the operation data encapsulated in this embodiment can be cached and stored in the associated operation execution record to provide basic data support for subsequent logic execution.

[0070] The above-described technical solution in this embodiment provides a specific implementation for determining the operation data. It can solve the problems of fine-tuning the code generated by artificial intelligence and the inflexibility of editing under low-code DSL. It also provides key support for the basic data in terms of the scalability, stability and efficiency of the page development method provided in this embodiment.

[0071] As a second optional embodiment of this example, based on the above embodiment, updating the first page element according to the operation data can be specified as the following steps:

[0072] a2) Obtain the operation type from the operation data, and call the operation processing logic matching the operation type through the operation execution interface. The operation execution interface is created in the page development framework that the page development depends on.

[0073] In this embodiment, the operation execution interface can be considered as a standardized operation processing function interface predefined in a specific page development framework (such as the React framework and HTML framework), essentially a set of interfaces with unified input and output specifications. The operation execution interface can serve as an intermediate scheduling layer between the operation type and the operation processing logic, invoking the operation processing logic matching the operation type based on the received operation data.

[0074] In this embodiment, the operation processing logic can be viewed as specific execution code corresponding one-to-one with the operation type (such as text modification, style adjustment, etc.), which can implement changes to the operation-related fields in the operation data onto the first page element. In this embodiment, a set of operation processing functions representing the operation processing logic can be pre-built for the operation type. The construction of this operation processing function needs to be executed under the operation execution interface, and the operation execution interface needs to adapt to the technical characteristics of the page framework. For example, under the React framework, the operation execution interface may need to adapt to the technical characteristics of the framework, and under the HTML framework, the operation execution interface may need to adapt to the technical characteristics of the framework.

[0075] In this embodiment, the page development framework can be considered as a development technology system that supports the rendering of the first page and the execution of the first code. It is equivalent to the creation carrier of the operation execution interface. It is precisely under the page development framework that the creation of the operation execution interface is realized, which ensures that the page can be edited based on the first code.

[0076] In this embodiment, an operation execution interface can be obtained from the global state based on the frame to which the first page belongs. Then, the operation data can be parsed to obtain the included operation types. This operation execution interface can then be used to call pre-constructed operation processing functions relative to the operation types. The operation processing functions represent the operation processing logic to be executed.

[0077] This optional embodiment can further optimize the operation execution interface to support creation under at least one page development framework, and the operation execution interface supports the construction of operation processing logic corresponding to different operation types.

[0078] In this embodiment, because adaptable operation execution interfaces can be created under different page development frameworks, the limitations of page development frameworks on editable page development functions are broken. At the same time, this embodiment also supports the construction of operation processing logic corresponding to different operation types, thereby achieving flexible expansion of editing capabilities and better covering the full range of page development needs.

[0079] b2) Modify the element object data of the first page element according to the operation data through the operation processing logic.

[0080] In this embodiment, the operation processing logic can be executed through this step. The element object data can be considered as a structured data set describing the attributes, states, and associated information of the first page element. It is equivalent to the execution object corresponding to the operation processing logic. The specific content contained in the element object data can change depending on the element type of the first page element (such as text, image, container, etc.) and the different page development frameworks.

[0081] In this embodiment, the execution object of the operation processing logic can be considered as the element object data directly associated with the first page element. This element object data exists in the document object model generated after the first code is compiled, which is equivalent to the document object model containing the element object data corresponding to all the first page elements respectively.

[0082] In the specific implementation, the operation processing logic can determine the first page element to be modified based on the element identifier in the operation data. This allows the logic to identify the corresponding element object data from the Document Object Model (DOM). The operation processing logic can then determine the modification instructions for the element object data, thus clarifying the specific modifications to be made. Finally, the modification of the element object data can be implemented using the features of the page development framework. The modification history of the element object data can also be recorded for subsequent element rollback processing.

[0083] c2) Render the page based on the modified element object data to form the second page.

[0084] In this embodiment, the modified element object data can be transformed into a second page for visualization in real time using the available rendering capabilities. The process of rendering the element object data to form the second page in this step is basically the same as the process of forming the first page. The main difference is that the modified element object data is used for rendering the modified elements of the first page.

[0085] It should be noted that in this embodiment, during the process of responding to the first interactive operation and forming the second page through the above steps, the operation processing logic can also be put into the constructed operation back stack. This is so that when a back operation involving page elements is involved, the data information in the operation back stack can be used to restore the page elements to their presentation state before the interactive operation was executed.

[0086] The above-described technical solution in this embodiment lowers the development threshold and enables zero-code fine-tuning, thereby ensuring the widespread application of page development methods. The solution also has the ability to ensure multi-framework adaptation, breaking the limitations of existing technology stacks and improving the versatility of page development. At the same time, the interactive implementation based on the operation execution interface proposed in this technical solution also enhances the scalability of editing capabilities, realizes flexible acceptance of multi-scenario requirements, and ensures the accuracy of page development modifications and application stability.

[0087] As a third optional embodiment of this embodiment, based on the above embodiments, the page development method provided in this embodiment may further include the following after the second page is formed and displayed as the preview interface:

[0088] a3) Determine and store the operation execution record associated with the first interactive operation.

[0089] As can be seen from the above description, in the implementation of the first interactive operation acting on the first page element and responding to the modification of the first page element, all the generated operation data need to be recorded. In this embodiment, the operation type, operation data associated with the first interactive operation and the element modification data generated relative to the first page element during the modification stage can all be used as element update information and encapsulated in a set data format to form an existing operation execution record.

[0090] As one implementation method, determining and storing the operation execution record associated with the first interaction operation can be specifically defined as follows:

[0091] (a31) Obtain the operation type and operation data of the first interactive operation, and obtain the element object data of the first page element affected by the first interactive operation.

[0092] In this embodiment, during the execution of the steps described above, the operation type and operation data of the first interactive operation can be determined. Similarly, the element object data corresponding to the first page element that is synchronously modified when the first page element is visually edited in response to the first interactive operation can also be determined. This step can obtain the operation type, operation data, and element object data determined above.

[0093] a32) The operation type, operation data, and element object data are encapsulated as element update information of the first page element according to a set data format to form an operation execution record with a record identifier.

[0094] In this embodiment, the element update information of the first page element can be encapsulated according to a pre-defined data format. The element update information may include the operation type, operation data, and element object data. The encapsulated data can serve as an operation execution record generated after the first interactive operation is responded to. This step may assign a record identifier to the generated operation execution record to associate it with the first interactive operation.

[0095] b3) In response to a second interactive operation on the preview interface, update the first code according to the operation execution record and generate a second code that matches the second page.

[0096] In this embodiment, visual editing on the preview interface primarily enables real-time and efficient modification of page elements. However, visual editing of page elements still keeps page development at the editing level and does not affect the adjustment of the initial code. Only by achieving synchronous code adjustments through visually edited page elements can the complete logic execution of page development be realized.

[0097] In this embodiment, the second interactive operation can be considered as an edit and save operation triggered on the preview interface. Specifically, it can be an interactive operation generated by triggering the save control presented on the preview interface. This embodiment can respond to the second interactive operation through this step, and the response to the second interactive operation can be based on the operation execution record of the first interactive operation to update the first code, thereby obtaining the second code synchronized with the second page.

[0098] In one implementation of the second code, the operation type of the first interactive operation can be obtained from the operation execution record. It can also be obtained which page element the first interactive operation was applied to, and the operation data generated by the operation relative to that page element and the element object data involved after the page element was modified can be determined.

[0099] It is important to understand that in this embodiment, the mapping relationship between the code and page elements is pre-determined using the Document Object Model (DOM), thereby generating element code mapping information that represents the mapping relationship between the code and the element. The mapping between code and page elements can be formed by establishing a mapping between the location information of the code segment corresponding to the page element (such as the file path, line number, and column number of the code segment) and the element.

[0100] Simultaneously, the generated code can construct an abstract syntax tree. Through the mapping relationship between code and page elements, this embodiment can also construct the mapping relationship between nodes on the abstract syntax tree and page elements, thereby generating element node mapping information that represents the mapping relationship between the node and the page element. In the constructed abstract syntax tree, each node is mapped to a code segment in the first code. Through the element code mapping information determined above, the mapping relationship between nodes on the abstract syntax tree and page elements can be indirectly established. Specifically, the position information of the node (or the start and end line numbers and start and end column numbers of the code segment corresponding to the node can be used to represent the position information of the node) can be associated with the page element to form the element node mapping information.

[0101] By using pre-generated element code mapping information and element node mapping information, combined with the operation type, operation data, and element object data contained in the operation execution record, the corresponding node can be determined on the abstract syntax tree for the modified page element, thus identifying the corresponding original code segment for the page element in the first code. This node data can be modified based on the modified element object data, and a new code segment can be generated based on the modified node data. In this example, the generated new code segment can replace the original code segment corresponding to the page element in the first code, and the final code formed after replacement can be used as the second code.

[0102] Specifically, as one implementation method, updating the first code based on the operation execution record and generating the second code matching the second page can be described as the following steps:

[0103] b31) Based on the operation execution record, determine the second page element in the second page that meets the code update condition, and extract the element update information associated with the second page element from the operation execution record.

[0104] In this embodiment, one operation execution record can correspond to one first interaction operation, and there can be multiple operation execution records participating in this step. The key difference lies in the triggering timing of the second interaction operation. If the execution of the second interaction operation is triggered by executing the first interaction operation once, then there can be considered only one operation execution record participating in the code update. If the execution of the second interaction operation is triggered only after executing the first interaction operation multiple times, then there can be considered multiple operation execution records participating in the code update.

[0105] In this embodiment, the second page element that meets the code update conditions can be determined based on the operation execution record that did not participate in the code update. Specifically, it can be determined based on the operation data in the operation execution record, and the page element corresponding to the element identifier contained in the operation data can be recorded as the second page element. This step can also obtain the element update information contained in the corresponding operation execution record after determining the second page element, which can specifically include the element object data that the second page element possesses after participating in the first interactive operation.

[0106] (b32) Obtain the abstract syntax tree of the first code, and determine the first node corresponding to the second page element in the abstract syntax tree based on the constructed element node mapping information.

[0107] In this embodiment, after generating the first code, an abstract syntax tree (AST) corresponding to the first code can be obtained. This step can acquire the AST. As described above, during the compilation stage of the first code, the mapping relationship between the first code and page elements can also be determined, thereby constructing element code mapping information. Furthermore, through the correspondence between the first code and the AST, and the element code mapping information, the mapping relationship between page elements and nodes in the AST can be further generated, thereby constructing element node mapping information.

[0108] In this embodiment, this step can obtain the mapping information between the constructed page elements and the element nodes of the abstract syntax tree, thereby obtaining the first node corresponding to the second page element in the abstract syntax tree.

[0109] b33) Modify the node data of the first node according to the element update information, and convert the modified node data into the first code segment.

[0110] In this embodiment, the element update information includes the modified element object data of the second page element. This step can modify the node data of the first section through the modified element object data, and finally obtain the modified node data. Through the modified node data, the associated code segment after conversion into code can be obtained. In this embodiment, this code segment can be recorded as the first code segment.

[0111] b34) Based on the constructed element code mapping information, determine the second code segment corresponding to the second page element in the first code, replace the second code segment with the first code segment, and determine the first code after the second code segment is replaced as the second code.

[0112] In this embodiment, as described above, a mapping information between the first code and the original element code of the page is pre-constructed. This mapping information allows the determination of the code segment corresponding to the second page element in the first code. In this embodiment, this code segment can be designated as the second code segment. The first code segment determined above can then replace the second code segment, ultimately yielding the first code after the second code segment has been replaced. In this embodiment, the replaced first code can be designated as the second code.

[0113] This embodiment provides a specific implementation for updating the first code after visual editing of page elements. It primarily considers the mapping relationship between the first code and page elements, as well as the mapping relationship between the first code and the abstract syntax tree (AST). Ultimately, the mapping relationship between the AST and page elements can be determined. Through this mapping relationship, the modified element object data of the page elements can be used to adjust the node data of the AST. The adjustment of the AST is ultimately reflected in the adjustment of the first code. This solution better achieves automatic adjustment of the first code, ensuring the efficiency and simplicity of page development.

[0114] As a fourth optional embodiment of this embodiment, based on the above embodiments, the page development method provided in this embodiment may further include, after the second page is formed and displayed as the preview interface: in response to a third interactive operation on the preview interface, determining a third page element in the second page that meets the rollback condition, performing a state rollback process on the third page element, forming a third page and displaying it as the preview interface.

[0115] In this embodiment, the third interactive operation can be considered as a modification rollback operation initiated after the first interactive operation modifies the page element. It can be generated by triggering the rollback control in the preview interface. By responding to this third interactive operation, the third page element that meets the rollback conditions can be determined from the second page, which serves as the preview interface. Then, the state rollback processing of the third page element is implemented, and the page after the rollback processing is completed can be recorded as the third page and updated as a new preview interface for display.

[0116] In this embodiment, as described above, in the implementation of responding to the first interactive operation, the generated data information can be pre-push into the constructed operation rollback stack, and the order in which the data information is pushed into the operation rollback stack is consistent with the execution order of the corresponding first interactive operation.

[0117] After responding to the third interactive operation, data information needs to be retrieved from the operation back stack using a last-in-first-out (LIFO) approach. This data information is then used to determine which page element currently meets the back stack condition, and the page element that meets the back stack condition is designated as the third page element. The data information retrieved from the operation back stack corresponds to a first interactive operation. Therefore, the element identifier of the third page element associated with this first interactive operation can be obtained from the data information, as well as the element object data that the page element possessed before the interactive operation was performed on the associated third page element.

[0118] This embodiment can use the element object data before the operation to restore the third page element to its presentation state before responding to the first interactive operation, thereby forming a third page containing the third page element in the presentation state after the rollback. It is important to note that after completing the rollback process for the third page element, its associated data information needs to be removed from the operation rollback stack. Then, when the third interactive operation is triggered and responded to, the data information at the head of the stack can be retrieved again, and by analyzing this data information, the state rollback process of the third page element associated with that data information can be achieved.

[0119] As one implementation method, based on this optional embodiment, the process of determining the third page element in the second page that meets the rollback condition and performing state rollback processing on the third page element can be specified as follows:

[0120] a4) Access the constructed operation rollback stack, determine the first operation execution record at the top of the stack, and determine the page element associated with the first operation execution record as the third page element.

[0121] In this embodiment, the operation back stack can be created simultaneously with the first interactive operation. This allows the operation execution record generated after the first interactive operation to be pushed onto the operation back stack as data. When accessing the operation back stack, this step retrieves the operation execution record stored at the head of the stack each time; in this embodiment, this is referred to as the first operation execution record. By parsing the first operation execution record, the element identifier of the page element affected by the first interactive operation can be obtained. Therefore, the page element corresponding to this element identifier can be identified as the third page element associated with the first operation execution record.

[0122] b4) Obtain the pre-operation element object data of the third page element from the first operation execution record, and revert the third page element to the presentation state before the operation execution by rendering the pre-operation element object data.

[0123] In this embodiment, the first operation execution record includes not only the element object data after the first interactive operation is performed on the third page element, but also the element object data before the first interactive operation is performed. The element object data before the operation is equivalent to retaining the element information of the page element when the first interactive operation is performed.

[0124] In this embodiment, the element object data of the third page element before the operation can be obtained through this step, and the third page element can be re-rendered using the element object data before the operation. The presentation state of the third page element after rendering can be regarded as the presentation state of the third page element before the first interactive operation was executed.

[0125] The technical solution described in this embodiment provides an error correction mechanism and operational flexibility for visual editing through precise positioning, safe rollback, and real-time rendering. This technology ensures a closed-loop function for visual editing of page development, while also ensuring consistency between the interface and source code during rollback, ultimately achieving a low-threshold, highly secure, and highly collaborative development outcome.

[0126] Figure 2 A schematic diagram of the structure of a page development apparatus provided in an embodiment of this disclosure is given, as follows: Figure 2 As shown, the device includes a display module 21 and a first response module 22.

[0127] The display module 21 is used to display a preview interface for page development. The preview interface is presented as a first page, which contains first page elements in an editable state. The first page is generated based on the compilation of first code, which is generated by the model according to the input page requirement description information.

[0128] The first response module 22 is used to respond to a first interactive operation on a first page element, determine the operation data generated when the first interactive operation is applied to the first page element, update the first page element according to the operation data to form a second page, and display it as the preview interface.

[0129] This disclosure provides a page development apparatus that reuses the code generation capabilities of artificial intelligence, thereby showcasing the efficiency advantages of AI in page development and avoiding the additional resource consumption required by traditional low-code platforms that need to define a DSL before providing page visualization development capabilities. Simultaneously, this embodiment directly establishes a connection between code generation and page visualization editing and development, essentially providing a WYSIWYG operational platform for fine-tuning the page under visualization, offering a development implementation method for non-professional developers and significantly lowering the development threshold for page development. Furthermore, by determining the operation data of interactive operations, visual operations can be transformed into executable element update instructions, ensuring that the updates generated by interactive operations can accurately affect page elements, guaranteeing precise and flexible modification of page elements. Moreover, operation data-driven page element modification can better expand the editing capabilities of page development, overcoming the limitations of traditional methods. The real-time preview updates and focused page element editing provided by the above technical solution significantly reduce the development difficulty and interference of page development, thereby improving page development efficiency.

[0130] Furthermore, the first response module 22 includes a data determination unit, which can be specifically used to: determine the operation type of the first interactive operation and obtain the operation association field under the operation type;

[0131] Determine the field data corresponding to the operation-associated field when the first interactive operation is applied to the first page element, and encapsulate the operation type and the field data to form the operation data.

[0132] Furthermore, the first response module 22 also includes an element update unit, which can be specifically used for:

[0133] Obtain the operation type from the operation data, and call the operation processing logic matching the operation type through the operation execution interface. The operation execution interface is created in the page development framework on which the page development depends.

[0134] The operation processing logic modifies the element object data of the first page element according to the operation data.

[0135] The page is rendered based on the modified element object data to form the second page.

[0136] Furthermore, the operation execution interface supports creation under at least one page development framework, and the operation execution interface supports the construction of operation processing logic corresponding to different operation types.

[0137] Furthermore, the device may also include:

[0138] The record determination module is used to determine and store the operation execution record associated with the first interactive operation after the second page is formed and displayed as the preview interface;

[0139] The second response module is used to respond to a second interactive operation on the preview interface, update the first code according to the operation execution record, and generate a second code that matches the second page.

[0140] Furthermore, the record determination module can specifically be used for:

[0141] Obtain the operation type and operation data of the first interactive operation, and obtain the element object data of the first page element affected by the first interactive operation;

[0142] The operation type, operation data, and element object data are encapsulated as element update information of the first page element according to a set data format to form an operation execution record with a record identifier.

[0143] Furthermore, the second response module can specifically be used for:

[0144] Based on the operation execution record, identify the second page elements in the second page that meet the code update conditions, and extract the element update information associated with the second page elements from the operation execution record;

[0145] Obtain the abstract syntax tree of the first code, and determine the first node corresponding to the second page element in the abstract syntax tree based on the constructed element node mapping information;

[0146] Modify the node data of the first node according to the element update information, and convert the modified node data into the first code segment;

[0147] Based on the constructed element code mapping information, the second code segment corresponding to the second page element in the first code is determined, and the first code segment is used to replace the second code segment. The first code segment after the second code segment is replaced is then determined as the second code.

[0148] Furthermore, the device may also include:

[0149] The third response module is used to, after forming the second page and displaying it as the preview interface, respond to the third interactive operation on the preview interface, determine the third page element in the second page that meets the rollback condition, perform state rollback processing on the third page element, form the third page and display it as the preview interface.

[0150] Furthermore, the third response module can specifically be used for:

[0151] Access the constructed operation back stack, determine the first operation execution record at the head of the stack, and determine the page element associated with the first operation execution record as the third page element;

[0152] Obtain the pre-operation element object data of the third page element from the first operation execution record, and revert the third page element to its pre-operation presentation state by rendering the pre-operation element object data.

[0153] Furthermore, the editable state of the first page element is formed by adding an editable identifier to the first page element and binding interactive events to the first page element during the compilation phase of the first code.

[0154] The page development apparatus provided in this disclosure can execute the page development method provided in any embodiment of this disclosure, and has the corresponding functional modules and beneficial effects of the method execution.

[0155] It is worth noting that the various units and modules included in the above-mentioned device are only divided according to functional logic, but are not limited to the above division, as long as the corresponding functions can be realized; in addition, the specific names of each functional unit are only for easy differentiation and are not used to limit the protection scope of the embodiments of this disclosure.

[0156] Figure 3 A schematic diagram of the structure of an electronic device provided in an embodiment of this disclosure is given below. (Refer to...) Figure 3 It illustrates an electronic device suitable for implementing embodiments of the present disclosure (e.g., Figure 3 The diagram below shows the structure of the terminal device (or server) 300. The terminal device in this embodiment may include, but is not limited to, mobile terminals such as mobile phones, laptops, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), and vehicle terminals (e.g., vehicle navigation terminals), as well as fixed terminals such as digital TVs and desktop computers. Figure 3 The electronic device shown is merely an example and should not be construed as limiting the functionality and scope of the embodiments disclosed herein.

[0157] like Figure 3 As shown, the electronic device 300 may include a processing unit (e.g., a central processing unit, a graphics processing unit, etc.) 301, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 302 or a program loaded from a storage device 308 into a random access memory (RAM) 303. The RAM 303 also stores various programs and data required for the operation of the electronic device 300. The processing unit 301, ROM 302, and RAM 303 are interconnected via a bus 304. An edit / output (I / O) interface 305 is also connected to the bus 304.

[0158] Typically, the following devices can be connected to I / O interface 305: input devices 306 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 307 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 308 including, for example, magnetic tapes, hard disks, etc.; and communication devices 309. Communication device 309 allows electronic device 300 to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 3 An electronic device 300 with various devices is shown; however, it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed alternatively.

[0159] In particular, according to embodiments of this disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this disclosure include a computer program product comprising a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication device 309, or installed from storage device 308, or installed from ROM 302. When the computer program is executed by processing device 301, it performs the functions defined in the methods of embodiments of this disclosure.

[0160] The names of messages or information exchanged between multiple devices in the embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of such messages or information.

[0161] The electronic device provided in this embodiment and the page development method provided in the above embodiments belong to the same inventive concept. Technical details not described in detail in this embodiment can be found in the above embodiments, and this embodiment has the same beneficial effects as the above embodiments.

[0162] This disclosure provides a computer storage medium storing a computer program that, when executed by a processor, implements the page development method provided in the above embodiments.

[0163] It should be noted that the computer-readable medium described in this disclosure may be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium may be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this disclosure, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution device, apparatus, or device. In this disclosure, a computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium may be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution device, apparatus, or apparatus. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wires, optical fibers, RF (radio frequency), etc., or any suitable combination thereof.

[0164] In some implementations, clients and servers can communicate using any currently known or future-developed network protocol such as HTTP (Hypertext Transfer Protocol) and can interconnect with digital data communication (e.g., communication networks) of any form or medium. Examples of communication networks include local area networks (“LANs”), wide area networks (“WANs”), the Internet (e.g., the Internet of Things), and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any currently known or future-developed networks.

[0165] The aforementioned computer-readable medium may be included in the aforementioned electronic device; or it may exist independently and not assembled into the electronic device.

[0166] The aforementioned computer-readable medium carries one or more programs. When the electronic device executes the one or more programs, the electronic device causes the electronic device to: receive a trigger operation on a page editing component in a first interface, display a second interface, the second interface including a page preview area and a page content configuration area, the page preview area presenting an initial page, the page content configuration area including at least one page content configuration entry, the initial page including content to be filled positions, and the page content configuration entry being associated with the content to be filled positions; receive an editing operation on the page content configuration entry, and present a target page corresponding to the edited page content configuration entry in the page preview area.

[0167] Computer program code for performing the operations of this disclosure can be written in one or more programming languages ​​or a combination thereof, including but not limited to object-oriented programming languages ​​such as Java, Smalltalk, and C++, as well as conventional procedural programming languages ​​such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a local area network (LAN) or a wide area network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0168] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of apparatus, methods, and computer program products according to various embodiments of the present disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, may be implemented using dedicated hardware-based means to perform the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0169] The units described in the embodiments of this disclosure can be implemented in software or in hardware. The name of a unit does not necessarily limit the unit itself; for example, the first acquisition unit can also be described as "a unit that acquires at least two Internet Protocol addresses".

[0170] The functions described above in this document can be performed at least in part by one or more hardware logic components. For example, exemplary types of hardware logic components that can be used, without limitation, include: field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), devices-on-chip (SoCs), complex programmable logic devices (CPLDs), and so on.

[0171] In the context of this disclosure, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution apparatus, device, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can be, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor device, apparatus, or device, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0172] According to one or more embodiments of this disclosure, [Example 1] provides a page development method, including: displaying a preview interface for page development, the preview interface being presented as a first page, the first page containing first page elements in an editable state, the first page being generated based on the compilation of first code, the first code being generated by a model according to input page requirement description information; responding to a first interactive operation on the first page element, determining operation data generated when the first interactive operation is applied to the first page element, updating the first page element according to the operation data to form a second page, and displaying it as the preview interface.

[0173] According to one or more embodiments of this disclosure, [Example 2] provides a page development method. Optionally, determining the operation data generated when the first interactive operation is applied to the first page element includes: determining the operation type of the first interactive operation and obtaining the operation-related field under the operation type; determining the field data corresponding to the operation-related field when the first interactive operation is applied to the first page element, and encapsulating the operation type and the field data to form the operation data.

[0174] According to one or more embodiments of this disclosure, [Example 3] provides a page development method. Optionally, the step of updating the first page element to form a second page based on the operation data includes: obtaining the operation type in the operation data; calling the operation processing logic matching the operation type through an operation execution interface, wherein the operation execution interface is created in the page development framework on which the page development depends; modifying the element object data of the first page element according to the operation data through the operation processing logic; and rendering the page based on the modified element object data to form the second page.

[0175] According to one or more embodiments of this disclosure, [Example 4] provides a page development method. Optionally, the operation execution interface supports creation under at least one page development framework, and the operation execution interface supports the construction of operation processing logic corresponding to different operation types.

[0176] According to one or more embodiments of this disclosure, Example 5 provides a page development method, which, optionally, after forming a second page and displaying it as the preview interface, further includes: determining and storing an operation execution record associated with the first interactive operation; and updating the first code according to the operation execution record in response to a second interactive operation on the preview interface, thereby generating second code that matches the second page.

[0177] According to one or more embodiments of this disclosure, Example Six provides a page development method. Optionally, determining the operation execution record associated with the first interactive operation includes: obtaining the operation type and operation data of the first interactive operation, and obtaining the element object data of the first page element affected by the first interactive operation; encapsulating the operation type, operation data, and element object data as element update information of the first page element according to a set data format to form an operation execution record with a record identifier.

[0178] According to one or more embodiments of this disclosure, [Example Seven] provides a page development method. Optionally, the step of updating the first code according to the operation execution record and generating second code matching the second page includes: determining a second page element in the second page that meets the code update conditions according to the operation execution record, and extracting element update information associated with the second page element from the operation execution record; obtaining an abstract syntax tree of the first code, and determining a first node corresponding to the second page element in the abstract syntax tree according to the constructed element node mapping information; modifying the node data of the first node according to the element update information, and converting the modified node data into a first code segment; determining a second code segment corresponding to the second page element in the first code according to the constructed element code mapping information, and replacing the second code segment with the first code segment, and determining the first code after the second code segment replacement as the second code.

[0179] According to one or more embodiments of this disclosure, [Example Eight] provides a page development method, which, optionally, after forming a second page and displaying it as the preview interface, further includes: in response to a third interactive operation on the preview interface, determining a third page element in the second page that meets the rollback condition, performing a state rollback process on the third page element, forming a third page and displaying it as the preview interface.

[0180] According to one or more embodiments of this disclosure, [Example Nine] provides a page development method. Optionally, determining a third page element in the second page that meets the rollback condition and performing state rollback processing on the third page element includes: accessing a constructed operation rollback stack, determining a first operation execution record at the head of the stack, determining the page element associated with the first operation execution record as the third page element; obtaining the pre-operation element object data of the third page element from the first operation execution record, and rolling back the third page element to its presentation state before operation execution by rendering the pre-operation element object data.

[0181] According to one or more embodiments of this disclosure, Example 10 provides a page development method, wherein the editable state of the first page element is formed by adding an editable identifier to the first page element and binding an interactive event to the first page element during the compilation phase of the first code.

[0182] According to one or more embodiments of this disclosure, [Example 11] provides a page development apparatus, the apparatus comprising:

[0183] The display module is used to display a preview interface of the page development. The preview interface is presented as a first page, which contains first page elements in an editable state. The first page is generated based on the compilation of first code, which is generated by the model according to the input page requirement description information. The first response module is used to respond to a first interactive operation on the first page element, determine the operation data generated when the first interactive operation is applied to the first page element, update the first page element according to the operation data to form a second page, and display it as the preview interface.

[0184] The above description is merely a preferred embodiment of this disclosure and an explanation of the technical principles employed. Those skilled in the art should understand that the scope of this disclosure is not limited to technical solutions formed by specific combinations of the above-described technical features, but should also cover other technical solutions formed by arbitrary combinations of the above-described technical features or their equivalents without departing from the above-described concept. For example, technical solutions formed by substituting the above features with (but not limited to) technical features disclosed in this disclosure that have similar functions.

[0185] Furthermore, while the operations are described in a specific order, this should not be construed as requiring these operations to be performed in the specific order shown or in a sequential order. In certain environments, multitasking and parallel processing may be advantageous. Similarly, while several specific implementation details are included in the above discussion, these should not be construed as limiting the scope of this disclosure. Certain features described in the context of individual embodiments may also be implemented in combination in a single embodiment. Conversely, various features described in the context of a single embodiment may also be implemented individually or in any suitable sub-combination in multiple embodiments.

[0186] Although the subject matter has been described using language specific to structural features and / or methodological logic, it should be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or actions described above. Rather, the specific features and actions described above are merely illustrative examples of implementing the claims.

Claims

1. A page development method, characterized in that, include: The preview interface of the display page development is presented as a first page. The first page contains first page elements in an editable state. The first page is generated based on the compilation of first code, which is generated by the model according to the input page requirement description information. In response to a first interactive operation on a first page element, the operation data generated when the first interactive operation is applied to the first page element is determined, the first page element is updated according to the operation data to form a second page, and the second page is displayed as the preview interface.

2. The method according to claim 1, characterized in that, The operation data generated when the first interactive operation is applied to the first page element includes: Determine the operation type of the first interactive operation and obtain the operation-related fields under the operation type; Determine the field data corresponding to the operation-associated field when the first interactive operation is applied to the first page element, and encapsulate the operation type and the field data to form the operation data.

3. The method according to claim 1, characterized in that, The step of updating the first page elements according to the operation data to form the second page includes: Obtain the operation type from the operation data, and call the operation processing logic matching the operation type through the operation execution interface. The operation execution interface is created in the page development framework on which the page development depends. The operation processing logic modifies the element object data of the first page element according to the operation data. The page is rendered based on the modified element object data to form the second page.

4. The method according to claim 3, characterized in that, The operation execution interface supports creation under at least one page development framework, and the operation execution interface supports the construction of operation processing logic corresponding to different operation types.

5. The method according to claim 1, characterized in that, After the second page is formed and displayed as the preview interface, the process further includes: Determine and store the operation execution record associated with the first interactive operation; In response to a second interactive operation on the preview interface, the first code is updated according to the operation execution record, and a second code matching the second page is generated.

6. The method according to claim 5, characterized in that, The operation execution record associated with the first interactive operation includes: Obtain the operation type and operation data of the first interactive operation, and obtain the element object data of the first page element affected by the first interactive operation; The operation type, operation data, and element object data are encapsulated as element update information of the first page element according to a set data format to form an operation execution record with a record identifier.

7. The method according to claim 5, characterized in that, The step of updating the first code according to the operation execution record and generating the second code that matches the second page includes: Based on the operation execution record, identify the second page elements in the second page that meet the code update conditions, and extract the element update information associated with the second page elements from the operation execution record; Obtain the abstract syntax tree of the first code, and determine the first node corresponding to the second page element in the abstract syntax tree based on the constructed element node mapping information; Modify the node data of the first node according to the element update information, and convert the modified node data into the first code segment; Based on the constructed element code mapping information, the second code segment corresponding to the second page element in the first code is determined, and the first code segment is used to replace the second code segment. The first code segment after the second code segment is replaced is then determined as the second code.

8. The method according to claim 1, characterized in that, After the second page is formed and displayed as the preview interface, the process further includes: In response to a third interactive operation on the preview interface, a third page element in the second page that meets the rollback condition is identified, and the state rollback process is performed on the third page element to form a third page, which is then displayed as the preview interface.

9. The method according to claim 8, characterized in that, The step of determining the third page element in the second page that meets the rollback condition and performing state rollback processing on the third page element includes: Access the constructed operation back stack, determine the first operation execution record at the head of the stack, and determine the page element associated with the first operation execution record as the third page element; Obtain the pre-operation element object data of the third page element from the first operation execution record, and revert the third page element to its pre-operation presentation state by rendering the pre-operation element object data.

10. The method according to any one of claims 1-9, characterized in that, The editable state of the first page element is formed by adding an editable identifier to the first page element and binding interactive events to the first page element during the compilation phase of the first code.

11. A page development apparatus, characterized in that, include: The display module is used to display a preview interface of the page development. The preview interface is presented as a first page, which contains first page elements in an editable state. The first page is generated based on the compilation of first code, which is generated by the model according to the input page requirement description information. The first response module is used to respond to a first interactive operation on a first page element, determine the operation data generated when the first interactive operation is applied to the first page element, update the first page element according to the operation data to form a second page, and display it as the preview interface.

12. An electronic device, characterized in that, include: One or more processors; Storage device for storing one or more programs; When the one or more programs are executed by the one or more processors, the one or more processors implement the page development method as described in any one of claims 1-10.

13. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the page development method as described in any one of claims 1-10.

14. A computer program product comprising a computer program that, when executed by a processor, implements the page development method according to any one of claims 1-10.

Images