CN117950626A

CN117950626A - Page generation method, page display method, device, equipment and storage medium

Info

Publication number: CN117950626A
Application number: CN202311494850.7A
Authority: CN
Inventors: 任碧涛
Original assignee: Mashang Xiaofei Finance Co Ltd
Current assignee: Mashang Xiaofei Finance Co Ltd
Priority date: 2023-11-09
Filing date: 2023-11-09
Publication date: 2024-04-30

Abstract

The application discloses a page generation method, a page display device, page display equipment and a storage medium. The page generation method comprises the following steps: responsive to a component selection operation on the design interface, presenting a configuration interface of the selected target layout component, the design interface including a layout component for presenting a target page design drawing; determining layer data of the target layout component based on an image area displayed by the target layout component in a target page design drawing and displaying the layer data on the configuration interface; determining a data source and a data model associated with the layer data in response to the operation of the layer data on the configuration interface, wherein the data source is used for acquiring the content data of the image area, and the data model is used for representing the display mode of the content data; and generating a target page file corresponding to the target page design diagram based on the layer data of the layout component in the design interface, the data source and the data model associated with the layer data.

Description

Page generation method, page display method, device, equipment and storage medium

Technical Field

The present application relates to the field of computer technologies, and in particular, to a page generating method, a page displaying method, a device, equipment, and a storage medium.

Background

In the traditional page generation method, a User Interface (UI) designer is required to design a UI design draft according to the requirement of a product manager, after the product manager confirms that the UI design draft is correct, the UI design draft is marked, cut and then delivered to a front-end development engineer for writing and developing codes of static pages, and after development is finished, the UI design draft is tested, verified, packaged and transmitted to a line. The whole process is very complicated, once a product manager proposes design change, the process needs to be repeated, and the page generation efficiency is low.

Disclosure of Invention

The embodiment of the application aims to provide a page generation method, a page display device, equipment and a storage medium, which are used for simplifying a page generation process, improving page generation efficiency and reducing page generation cost.

In order to achieve the above object, the embodiment of the present application adopts the following technical scheme:

in a first aspect, an embodiment of the present application provides a page generating method, including:

responsive to a component selection operation on a design interface, presenting a configuration interface of the selected target layout component, the design interface including a layout component for presenting a target page design drawing;

determining layer data of the target layout component based on an image area displayed by the target layout component in the target page design drawing and displaying the layer data on the configuration interface;

Determining a data source and a data model associated with the layer data in response to the operation of the layer data on the configuration interface, wherein the data source is used for acquiring the content data of the image area, and the data model is used for representing the display mode of the content data;

and generating a target page file corresponding to the target page design diagram based on the layer data of the layout component in the design interface, the data source and the data model associated with the layer data.

In a second aspect, an embodiment of the present application provides a page display method, including:

Receiving an access request for a target page, wherein the access request carries a uniform resource locator of the target page;

Acquiring a target page file corresponding to the target page based on the uniform resource locator, wherein the target page file is generated based on the page generation method of the first aspect;

and displaying the target page based on the target page file.

In a third aspect, an embodiment of the present application provides a page generating apparatus, including:

The display unit is used for responding to the component selection operation of the design interface, and displaying the configuration interface of the selected target layout component, wherein the design interface comprises a layout component for displaying a target page design diagram;

The first determining unit is used for determining layer data of the target layout component based on an image area displayed by the target layout component in the target page design drawing and displaying the layer data of the target layout component on the configuration interface;

A second determining unit, configured to determine, in response to an operation on the layer data at the configuration interface, a data source and a data model associated with the layer data, where the data source is configured to obtain content data of the image area, and the data model is configured to represent a presentation manner of the content data;

and the generating unit is used for generating a target page file corresponding to the target page design diagram based on the layer data of the layout component in the design interface, the data source and the data model associated with the layer data.

In a fourth aspect, an embodiment of the present application provides a page display device, including:

The receiving unit is used for receiving an access request to a target page, wherein the access request carries a uniform resource locator of the target page;

the obtaining unit is used for obtaining a target page file corresponding to the target page based on the uniform resource locator, wherein the target page file is generated based on the page generation method in the first aspect;

and the display unit is used for displaying the target page based on the target page file.

In a fifth aspect, an embodiment of the present application provides an electronic device, including: a processor; a memory for storing the processor-executable instructions; wherein the processor is configured to execute the instructions to implement the page generation method of the first aspect; or the processor is configured to execute the instructions to implement the page presentation method as described in the second aspect.

In a sixth aspect, an embodiment of the present application provides a computer readable storage medium, which when executed by a processor of an electronic device, enables the electronic device to perform the page generation method according to the first aspect; the instructions in the storage medium, when executed by a processor of an electronic device, enable the electronic device to perform the page presentation method as described in the second aspect.

The above at least one technical scheme adopted by the embodiment of the application can achieve the following beneficial effects:

providing a design interface for configuring page styles by utilizing a visual development technology, so that a developer can add various layout components on the design interface according to a target page design drawing (namely UI design draft) to display the image content of the target page design drawing through the layout components; secondly, a configuration interface for configuring the attribute of the layout component is provided, the configuration interface for displaying the layout component is triggered according to the selected layout component in the design interface, and the image layer data of the layout component is determined and displayed on the configuration interface for a developer to edit based on the image area to be displayed by the layout component in the target page design drawing, so that the developer can associate corresponding data sources and data models for the image layer data according to the requirements, and accordingly, the layout component can acquire corresponding content data from the data sources and display the content data according to a display mode indicated by the data models; further, based on the layer data of the layout component in the design interface, the data source and the data model associated with the layer data, a target page file corresponding to the target page design drawing is generated, and the page designed by the target page design drawing can be displayed through the target page file. Therefore, by the method provided by the embodiment of the application, the page generation can be realized by only determining the layer data of the layout component according to the UI design manuscript and arranging and binding the layout component according to the layer data, and a series of complicated operations such as cutting pictures, developing codes, testing and the like are not required to be carried out on the UI design manuscript, so that the page generation process is simplified, the development cost is reduced, and the page generation efficiency is improved.

Drawings

The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this specification, illustrate embodiments of the application and together with the description serve to explain the application and do not constitute a limitation on the application. In the drawings:

fig. 1 is a schematic diagram of an application scenario of the technical solution provided in the embodiment of the present application;

FIG. 2 is a schematic flow chart of a page generation method according to an embodiment of the present application;

FIG. 3 is a schematic illustration of a design interface provided by an embodiment of the present application;

FIG. 4A is a schematic diagram of a configuration interface of a target layout component according to one embodiment of the present application;

FIG. 4B is a second schematic diagram of a configuration interface of a target layout component according to an embodiment of the present application;

FIG. 4C is a third diagram illustrating a configuration interface of a target layout component according to one embodiment of the present application;

FIG. 4D is a diagram illustrating a configuration interface of a target layout component according to one embodiment of the present application;

FIG. 5 is a schematic diagram of an operation interface of a page design tool according to an embodiment of the present application;

FIG. 6 is a second schematic diagram of a design interface provided by an embodiment of the present application;

FIG. 7 is a flowchart of a page display method according to an embodiment of the present application;

fig. 8 is a schematic structural diagram of a page generating apparatus according to an embodiment of the present application;

fig. 9 is a schematic structural diagram of a page display device according to an embodiment of the present application;

fig. 10 is a schematic structural diagram of an electronic device according to an embodiment of the present application.

Detailed Description

In order to make the objects, technical solutions and advantages of the present application more apparent, the technical solutions of the present application will be clearly and completely described below with reference to specific embodiments of the present application and corresponding drawings. It will be apparent that the described embodiments are only some, but not all, embodiments of the application. All other embodiments, which can be made by those skilled in the art based on the embodiments of the application without making any inventive effort, are intended to be within the scope of the application.

The terms first, second and the like in the description and in the claims, are used for distinguishing between similar objects and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used may be interchanged where appropriate such that embodiments of the application may be practiced otherwise than as specifically illustrated or described herein. Furthermore, in the present specification and claims, "and/or" means at least one of the connected objects, and the character "/" generally means a relationship in which the associated objects are one or.

Partial conceptual description:

Data model: refers to a List (List) data set, and field attributes of different data structures can be freely added to an Object (Object) in the set, and the data structures include, but are not limited to, text, pictures, time, various options, events, interaction scripts and the like.

UI: and displaying the front-end page based on the UI manuscript.

UI presentation and data bidirectional binding: the text, picture, time, operation, etc. of the page presentation correspond to the data model.

CDN: content Delivery Network, a content distribution network. The CDN is a virtual distributed network based on a bearing network, and can intelligently cache source station contents (including various dynamic and static resources) to all node servers in the world. Thus, the method is convenient for users to acquire contents nearby, improves the access speed of resources and shares the pressure of source stations.

UI manuscript turning page: typesetting of the front-end page can be completed directly by copying or dragging the UI manuscript.

The embodiment of the application provides a page generation scheme for converting a UI manuscript into a page and a page display scheme which is executed based on a generated page file. According to the page generation scheme provided by the embodiment of the application, a visual development technology is utilized to provide a design interface for configuring page styles, so that a developer can add various layout components on the design interface according to a target page design drawing (namely a UI design draft) to display the image content of the target page design drawing through the layout components; secondly, a configuration interface for configuring the attribute of the layout component is provided, the configuration interface for displaying the layout component is triggered according to the selected layout component in the design interface, and the image layer data of the layout component is determined and displayed on the configuration interface for editing by a user based on the image area to be displayed by the layout component in the target page design drawing, so that a developer can associate corresponding data sources and data models for the image layer data according to requirements, and accordingly, the layout component can acquire corresponding content data from the data sources and display the content data according to a display mode indicated by the data models; further, based on the layer data of the layout component in the design interface, the data source and the data model associated with the layer data, a target page file corresponding to the target page design drawing is generated, and the page designed by the target page design drawing can be displayed through the target page file. Therefore, by the method provided by the embodiment of the application, the page generation can be realized by only determining the layer data of the layout component according to the UI design manuscript and arranging and binding the layout component according to the layer data, and a series of complicated operations such as cutting pictures, developing codes, testing and the like are not required to be carried out on the UI design manuscript, so that the page generation process is simplified, the development cost is reduced, and the page generation efficiency is improved. The following describes in detail the technical solutions provided by the embodiments of the present application with reference to the accompanying drawings.

The method provided by one or more embodiments of the present application may be applied to a scenario as shown in fig. 1, which may include a visualization management platform 10, a server 20, and a client 30.

The visual management platform 10 refers to a management tool for visual development by a developer. The developer can log in the visual management platform 10 through the network to conduct visual development of the page. In one embodiment, the visual management platform 10 provides a design interface for configuring page styles, so that a developer can add various layout components on the design interface according to the UI design manuscript, and display the image content of the UI design manuscript through the layout components. The visual management platform 10 also provides a configuration interface for configuring the attribute of the layout component, so that a developer can set the attribute of the layout component according to the requirement, such as setting the display mode of content data and content number displayed by the layout component. Further, the visual management platform 10 may further generate a page file corresponding to the UI design draft according to the page style of the layout component in the design interface, the attribute data of the layout component, and the like, where the page file is used to display a page corresponding to the UI design draft.

The server 20 may be a server, such as a cloud server, a physical server, or a server cluster formed by a plurality of servers, or a distributed system, such as a CDN, etc. The server 20 is configured to store the page file generated by the visual management platform 10, and return a storage address of the page file to the visual management platform 10, so that the visual management platform 10 generates a uniform resource locator (Universal Resource Locator, URL) for accessing the page.

The client 30 provides web page access functionality. The client 30 may send an access request to the server 20 via the URL of the page, and the server 20 retrieves the page file of the page based on the URL and returns to the client 30. Client 30 generates and presents pages for viewing by a user based on the page file. Or client 30 may also obtain the page file for the page from visualization management platform 10 and generate and present the page based on the page file.

The page generation method provided by the embodiment of the present application will describe in detail how the visual management platform 10 generates the page, and the page display method provided by the embodiment of the present application will describe in detail how the client 30 accesses the page.

Referring to fig. 2, a flow chart of a page generating method according to an embodiment of the application is provided, and the method can be applied to a visual management platform. As shown in fig. 2, the method may include the steps of:

S202, responding to the component selection operation of the design interface, and displaying the configuration interface of the selected target layout component.

The design interface is an operation interface provided by the visual management platform and used for designing page styles. The design interface includes a layout component for exposing the target page design drawing. The target page design drawing refers to a UI design draft. The layout component is a presentation carrier of page content, and can be a layout component written in advance through low codes (Lowcode) or a layout component which is autonomously arranged by an arrangement method provided by a visual management platform and has a certain logic result. The layout components may include, for example, but are not limited to, a page header search bar, tab switch component, a row single column component, a row multi-column component, a banner carousel component, a multi-column single row cross-bar component, a list component, a waterfall stream component, and the like.

Multiple functional areas may be provided in the design interface, with different functional areas being used to provide different page design functions. In one embodiment, as shown in FIG. 3, the design interface includes a page layout area and a component selection area. The component selection area includes a variety of layout components developed in advance for selection by a developer. The page arrangement area is used for simulating the page to be generated, and provides page arrangement functions so that a developer can select a required layout component from the component selection area to be added to the page arrangement area according to the target page design diagram, and arrange the position of the layout component in the page arrangement area, so that the position of the layout component in the page to be generated is simulated in a visual mode.

In practical application, the layout components in the component selection area can be stacked in the page layout area in a floor adding manner, namely, the layout components are sequentially arranged like stacked wood, and the next layout component is displayed after the last layout component is displayed. Or the layout components in the component selection area may be added to the page layout area in a non-floor addition manner, i.e. the position of the layout components is fixed relative to the page layout area, independent of other layout components, similar to page buoys, etc.

Accordingly, in the above S202, in response to the component selection operation on the component selection area, the layout component selected in the component selection area is added to the page arrangement area; in response to a component selection operation on the page layout area, a configuration interface of the selected target layout component in the page layout area is presented. The component selection operation of the component selection area may include, for example, but not limited to, drag, click, box, and the like. Component selection operations for the page layout area may include, for example, but not limited to, clicking, framing, and the like.

For example, in connection with FIG. 3, upon receiving a drag operation of a developer on layout component A in the component selection area, layout component A is added to the page layout area. After receiving the triggering operation of the developer on the layout component A in the page layout area, the developer jumps to a configuration interface (as shown in fig. 4A) of the layout component A, so that the developer can configure the attribute of the layout component A, such as configuring the content data displayed by the layout component A, the display mode of the content data A, and the like.

In another embodiment, as shown in FIG. 3, the design interface further includes a page configuration area. The page configuration area provides various component controls for arranging the layout components in the page so that a developer can arrange the page layout of the layout components through the various component controls according to the target page design drawing, such as arranging the positions of the layout components in the page, the types of the layout components and the like. The page configuration area also provides a UI import portal for importing UI design content data corresponding to the layout component. In this case, after receiving the trigger operation of the developer on the UI import, the developer jumps to the configuration interface of the layout component a (as shown in fig. 4A), so that the developer configures the attribute of the layout component a itself, for example, configures the content data displayed by the layout component a, the display manner of the content data a, and so on.

In yet another embodiment, as shown in fig. 3, the page configuration area further provides various page configuration controls for arranging the attributes of the page, so that a developer can configure the attributes of the page to be generated through the various page configuration controls according to the target page design drawing, such as configuring the inner edge distance, the outer edge distance, the size and the like of the page. In this case, before S202 described above, the page generating method provided by the embodiment of the present application may further include: displaying a page configuration control in a page configuration area; determining page attribute data of a page arrangement area in response to an editing operation on the page configuration control; based on the page attribute data, the page arrangement area is displayed on the design interface, and the overall style of the page to be generated is simulated in a visual mode, so that a developer can develop the page more accurately based on the target page design diagram.

S204, determining layer data of the target layout component based on the image area displayed by the target layout component in the target page design drawing, and displaying the layer data on the configuration interface.

Each layout component has corresponding layer data. The layer data is used for representing the structural style of the layer contained in the corresponding layout component. The layer data includes structure data of at least one layer in the corresponding layout component. The structure data of the layers is used to indicate the structure style of the layers, such as the number of layers and the order, position, size, etc. of each layer.

In one embodiment, the target page design comprises design parameters for different image regions. In S204, the design parameters of the image area displayed by the target layout component are analyzed, and the layer data of the image area is read from the design parameters, and is used as the layer data of the target layout component and displayed on the configuration interface of the target layout component, so that the developer can perform visual configuration on the layer data of the target layout component according to the content data of the image area. The design parameters of the image area may include, for example, the number of layers included in the image area, the sequence, the position, the size, the margin, the font size, the font color, the font style, the background color, the background image, and other structural data of each layer.

In another embodiment, in order to facilitate the developer to more accurately and flexibly configure the attribute of the target layout component, the step S204 may include: displaying the target page design drawing through a page design tool; responding to the selection operation of the target page design drawing, taking the selected image area as the image area displayed by the target layout component, and acquiring design parameters of the selected image area; and analyzing the design parameters to obtain the layer data of the target layout component and displaying the layer data on the configuration interface. In practice, the page design tool may include various UI design software commonly used in the art, such as figma, etc.

For example, FIG. 5 illustrates an operator interface of a page design tool that provides an import control for importing a target page design drawing. And responding to the triggering operation of the import control, and displaying the target page design diagram on an operation interface so that a developer can select an image area to be displayed through the target layout component. Upon receiving a selection operation of the image area 1, an operation menu is presented. In response to the triggering operation of the option of acquiring the design parameters in the operation menu, acquiring and analyzing the design parameters of the image area 1, obtaining the layer data of the image area 1, and displaying the layer data serving as the layer data of the target layout assembly on a configuration interface of the target layout assembly so that a developer can perform visual configuration on the layer data of the target layout assembly according to the content data of the image area. In addition, after the image area 1 is selected, the operation interface also displays the attribute of the image area 1, such as the attribute 1, the attribute 2, and the like.

The analysis of the design parameters may be implemented in various ways, which are not limited in this embodiment of the present application. To enable visual presentation of the layer data, in one embodiment, as shown in FIG. 4A, the configuration interface includes a parsing area and a layer configuration area. Correspondingly, analyzing the design parameters to obtain the layer data of the target layout component and displaying the layer data on the configuration interface comprises the following steps: converting the design parameters into a markup language code in a preset vector graphic format; loading the markup language code into an analysis area for analysis to obtain layer data of the target layout component; the layer data is shown in a layer configuration area.

The vector graphics format may be set according to actual needs, such as a scalable vector graphics (Scalable Vector Graphics, SVG) format. The SVG format is a language defined in markup language (Extensible Markup Language, XML) for describing two-dimensional vectors and vectors or grid graphics. Through converting design parameters into the mark language codes in the SVG format, the image area corresponding to the target layout component can be restored with high precision, the visual re-engraving of the design effect of the image area is realized, and compared with the mode of converting the design parameters into codes for display through other modes such as machine learning, the accuracy error is smaller.

In the embodiment of the present application, the layer data of the target layout component may be displayed in the configuration area in various manners.

As an example, as shown in fig. 4B, after loading a markup language code in a preset vector graphics format into an analysis area, the visual management platform analyzes the markup language code to obtain a target layout component including 4 layers 1 to 4 and structural data of each layer; further, the structural data of all the layers is shown in the configuration area.

As another example, the layer data of the target layout component is shown in a layer configuration area, comprising: displaying a structural style indicated by structural data of at least one layer in a first sub-region of the layer configuration region; and displaying the structural data of at least one layer in a second subarea of the layer configuration area.

For example, as shown in fig. 4C, by parsing the markup language code in the preset vector graphics format, it is determined that the target layout component includes 4 layers 1 to 4 layers and the structure data of each layer. Then, based on the structural data of each layer, performing visual display on each layer in a first sub-region so as to facilitate a developer to configure each layer according to needs, wherein reference numeral 1 in the first sub-region represents layer 1, reference numeral 2 represents layer 2, reference numeral 3 represents layer 3, and reference numeral 4 represents layer 4; and simultaneously, the structural data of each layer are also displayed in the second subarea.

Further, in this embodiment, after the second sub-region displays the structural data of at least one layer, the page generating method provided by the embodiment of the present application further includes: determining a first target layer selected from the at least one layer in response to a layer selection operation at the first sub-region; the structural data of the first target layer is highlighted in the second sub-region.

For example, as shown in fig. 4C, the first sub-region shows the structural patterns of layer 1, layer 2, layer 3, and layer 4, and the second sub-region shows the structural data of the respective layers. After receiving the selection operation of layer 3 in the first sub-area, the structure data of layer 3 is highlighted in the second sub-area.

It can be understood that after any layer in the first sub-area is selected, the structural data of the layer is highlighted in the second sub-area, which is helpful for a developer to intuitively and rapidly acquire the corresponding relationship between the structural data and the display effect of each layer, so as to facilitate configuration of each layer.

S206, determining a data source and a data model associated with the layer data in response to the operation of the layer data on the configuration interface.

The data source is used to obtain content data of the image area. The content data presented by the different layers in the target layout component are different. For example, as shown in fig. 4C, the content data of the image area corresponding to the target layout component includes "access XX function" illustrated by layer 2 and "access" illustrated by layer 3. To this end, the data sources of the layer data association include at least one layer associated data source.

In practice, the data source may take various forms, which are not limited by the embodiments of the present application. As an example, the data source may be a preconfigured set of content data or an interface address for retrieving content data.

The data model is used for representing the display mode of the content data by the target layout component. The data model may include, for example, but is not limited to: a document, image, event, interaction script, time segment, number, etc. has a model of business logic. The document refers to displaying content data in the form of a document. The image means that the content data is presented in the form of an image. The event refers to the presentation of content data upon receipt of a specified event. The interaction script refers to displaying content data according to logic indicated by the interaction script, for example, if the target layout component is associated with the interaction script, the interaction script is triggered under the condition that a designated event is received, the corresponding URL is jumped, and the content data is displayed through a page corresponding to the URL. The time section is used for limiting the presentation range of the content data when the content data is time information. The numerals refer to presentation of content data in the form of numerals.

The data model can guide the target layout component how to show the acquired content data and where to show the acquired content data. The presentation manner of the corresponding content data by different layers in the target layout component can be different. For example, taking the target layout component shown in fig. 4C as an example, the content data "access XX function" is directly shown in layer 2, the content data "access" is directly shown in layer 3, and the specific content of the XX function is shown by jumping to the corresponding link address when a click event to layer 3 is received. To this end, the data sources of the layer data associations include at least one layer associated data model.

The data model may have various forms, which are not limited by the embodiments of the present application. As an example, the data model may include a series of domain model structures defined by key-value pairs (values), where the values may include parameters such as a data source used to obtain the content data, a presentation mode of the content data, etc., and the keys are used to distinguish between different content data.

In the embodiment of the present application, the data source and the data model associated with the layer data may be determined in various manners, which is not limited in the embodiment of the present application.

In one embodiment, the configuration interface provides an association configuration control for associating data sources with data models, such that a developer can associate corresponding data sources with data models for a layer of data through the association configuration control.

In another embodiment, in order to more flexibly and accurately associate the corresponding data source and data model for each layer, S206 may include: displaying an associated configuration control of at least one layer in the second sub-region; responding to the triggering operation of the associated configuration control of the second target layer, displaying a data source list and a data model list corresponding to the content data, wherein the second target layer is any one of the at least one layer, the data source list comprises at least one data source corresponding to the content data, and the data model list comprises at least one data model corresponding to the content data; determining the selected data source in the data source list as the data source associated with the second target layer in response to the selection operation of the data source list; in response to a selection operation of the data model list, the selected data model in the data model list is determined to be the data model associated with the second target layer.

For example, in connection with FIG. 4C, each layer has a corresponding associated configuration control. And if the triggering operation of the association configuration control 3 is received, displaying a data source list and a data model list on a configuration interface so that a developer can select a data source associated with the layer 3 from the data source list and select a data model associated with the layer 3 from the data model list. Further, in response to a selection operation of the list of data sources, determining the selected data source as the data source associated with layer 3; and responsive to a selection operation of the list of data models, determining the selected data model as the layer 3 associated data model.

In practical application, the associated configuration control corresponding to each layer may further include a first associated configuration control and a second associated configuration control, where the first associated configuration control is used to configure the data source, and the second associated configuration control is used to configure the data model. In this case, in response to a triggering operation of the first association configuration control, a list of data sources is presented and the selected data source is determined to be the data source associated with the respective layer; in response to a triggering operation of the second associated configuration control, a list of data models is presented and the selected data model is determined to be the data model associated with the respective layer.

Second, the data models in the data model list can be configured by the developer independently or can be pulled from the database. In addition, each layer can also be provided with a corresponding deletion control, so that a developer can delete part of the layers according to the requirement.

In another embodiment of the present application, in order to make the developer more intuitively understand the association effect between the layer data and the data source and the data model, after determining the data source and the data model associated with the layer data, the association effect after the layer data, the data source and the data model is also shown.

As an example, after associating the data sources and the data models for all the layers, the page generating method provided by the embodiment of the application further includes: content data is obtained from the at least one layer-associated data source and is presented by at least one layer in the first sub-area based on the presentation indicated by the at least one layer-associated data model.

For example, if the target layout component is a waterfall flow component, the data model associated with each layer is used to indicate that each row of the layer exhibits a number rule. After determining the data source and data model associated with the target layout component, each layer in the target layout component automatically obtains content data from the associated data source and circularly displays the obtained content data according to the display number rule of each row indicated by the associated data model.

For another example, taking fig. 4C as an example, after binding layer 2 with a corresponding data source and data model, content data to be exposed through layer 2 is acquired from the data source and synchronously updated into layer 2 of the first sub-region. After binding layer 3 with the corresponding data source and data model, the content data to be presented through layer 3 is acquired from the data source "accessed" and synchronously updated into layer 3 of the first sub-region.

As another example, after associating the data source and the data model for the second target layer, the page generating method provided by the embodiment of the present application further includes: acquiring content data to be displayed through the second target layer from a data source associated with the second target layer; and displaying the acquired content data through the second target layer in the first subarea based on the display mode indicated by the data model associated with the second target layer.

Therefore, each time after the corresponding data source and the data model are associated for any layer, content data are acquired from the associated data source immediately and are displayed in the first subarea according to the display mode indicated by the associated data model, so that a developer can timely and intuitively know the association effect between the layer and the data source and the data model so as to modify the association effect in time.

In another embodiment of the present application, as shown in fig. 4A-4D, the configuration interface of the target layout component also provides a validation control for the developer to confirm whether to associate the layers in the target layout component with the selected data sources and data models. In this case, in response to a triggering operation of the validation control, for each layer in the target layout component, the selected data source is determined to be the data source associated with that layer, and the selected data model is determined to be the data model associated with that layer.

In the embodiment of the present application, the data source and the data model may be preconfigured in various manners, which is not limited in the embodiment of the present application.

In one embodiment, as shown in FIG. 4D, the configuration interface also includes a data definition area. Before the data source list and the data model list are displayed in response to the triggering operation of the associated configuration control of the second target layer, the page generation method provided by the embodiment of the application further comprises the following steps: displaying a data source configuration control and a model configuration control in a data definition area; determining at least one data source corresponding to the content data in response to an editing operation of the data source configuration control; at least one data model corresponding to the content data is determined in response to an editing operation of the model configuration control.

Under the situation, a developer can configure at least one data source for acquiring the content data for the target layout component based on the data source configuration control according to the content data of the image area to be displayed through the target layout, and configure at least one data model for representing the display mode for the target layout component based on the model configuration control according to the display mode of the content data, so that visual configuration of the attribute of the target layout component is realized, a series of complicated operations such as cutting, code development, testing and the like are not needed for the design drawing of the target page, the component configuration process is simplified, the configuration cost is reduced, and the configuration efficiency is improved.

In practice, the data source configuration control may include a variety of configuration sub-controls, including, for example, but not limited to: text entry boxes for configuring data source names, text entry boxes for configuring data source addresses, radio boxes for configuring data source types, and the like.

The data model configuration control may include a variety of configuration sub-controls including, for example, but not limited to: a text input box for configuring the name of the data model, a menu box for configuring the icon of the data model, a text input box for configuring the description information of the data model, a menu box for configuring the presentation mode of the content data, and the like.

In addition, the data definition area and the layer configuration area may be displayed in parallel on the configuration interface of the target layout component, or the data definition area and the layer configuration area may be displayed in an overlapping manner on the configuration interface of the target layout component. For example, in the event that a layer in the first sub-region is not selected, the data definition region overlay is displayed on the second sub-region.

It should be noted that the same data source may be associated with layers in different layout components, or may be associated with different layers in the same layout component. In this case, each layer may obtain and present the corresponding content data from the data source. For example, multiple tab switch components may be associated with the same data source from which each tab switch component may obtain and present content data.

The same data model may be associated with layers in different layout components or with different layers in the same layout component. In this case, each layer may present the corresponding content data in the presentation manner indicated by the data model. For example, a plurality of tab switch components are associated with a data model that filters the presentation data list, each tab switch component may present corresponding content data in a manner that filters the presentation data list.

And S208, generating a target page file corresponding to the target page design diagram based on the layer data of the layout component in the design interface, the data source and the data model associated with the layer data.

In one embodiment, the layer data of the layout component, the data source associated with the layer data and the data model may be packaged to obtain the target page file corresponding to the target page design drawing.

In another embodiment, considering that the structure and content of the page are generally expressed in the form of document object model nodes (Document Object Model, DOM), in order to improve the versatility of the target page file and the page presentation effect, the step S208 may include the following steps: converting layer data of the layout component into cascading style data and adding the cascading style data into a document object model node corresponding to the layout component; respectively associating a data source and a data model associated with the layer data of the layout component with the document object model nodes; and packaging the document object model nodes, the data sources associated with the document object model and the data model to obtain the target page file.

As one example, each layer has a corresponding DOM node. For each layer in the target layout component, adding structural data for the layer to the DOM node for the layer; then, binding DOM nodes of the layer with data sources and data models associated with the layer; and further, packaging based on DOM nodes of all the components in the target layout component, data sources and data models associated with the DOM nodes, and obtaining the target page file. When the page corresponding to the target page design drawing needs to be displayed, the structure and the style of the page can be determined by analyzing DOM nodes of all layers in the layout assembly, and content data corresponding to all layers are obtained and displayed in all layers by analyzing data sources and data models associated with the DOM nodes of all layers, so that page display is realized.

In another embodiment of the present application, in order to enable a developer to more intuitively understand the page generating effect, before S208, the page generating method provided by the embodiment of the present application may further include: updating the structural style of the layout component in the design interface based on the layer data of the layout component; the content data presented by the layout component in the design interface is updated based on the data sources and data models associated with the layers of the layout component.

As an example, in connection with fig. 6, after configuration of layout component a is completed through the configuration interface of layout component a, for each layer in layout component a, the structural style of that layer is synchronously updated in the page layout area based on the structural data of that layer; further, the content data to be displayed through the layer is obtained from the data source associated with the layer, and the obtained content data is displayed in the layer according to the display mode indicated by the data model associated with the layer. In this way, the developer is facilitated to intuitively understand the page generation effect, so as to decide whether modification is required.

The design interface also provides a release control, so that a developer confirms the page generation effect through the release control. In this case, the visualization management platform generates the target page file based on the page style of the page arrangement region, the layer data of the layout component contained in the page arrangement region, the data source and the data model associated with the layer data, and the like in response to the trigger operation on the release control.

In another embodiment of the present application, in order to realize sharing and multiplexing of the target page file among different users, that is, developing multiple uses at one place, after S208, the page generating method provided by the embodiment of the present application may further include: the method comprises the steps of sending a target page file to a server for storage, and obtaining a storage address of the target page file in the server; based on the storage address, a uniform resource locator for the target page file is generated.

In practical applications, the server may comprise a CDN. After receiving the target page file, the server can store the target page file in the CDN, obtain a corresponding storage address and return the corresponding storage address to the visual management platform.

As one example, the visualization management platform may generate the URL of the target page file based on the received storage address and directly present in the design interface.

As another example, the visualization management platform may generate a URL of the target page file based on the received storage address; then, a corresponding identification code image, such as a two-dimensional code image, a bar code image and the like, is generated based on the URL, and is displayed on a design interface, so that a developer can acquire the URL by scanning the identification code image, and access security to the target page file is improved.

According to the page generation method provided by one or more embodiments of the application, a visual development technology is utilized to provide a design interface for configuring page styles, so that a developer can add various layout components on the design interface according to a target page design drawing (namely a UI design draft) to display the image content of the target page design drawing through the layout components; secondly, a configuration interface for configuring the attribute of the layout component is provided, the configuration interface for displaying the layout component is triggered according to the selected layout component in the design interface, and the image layer data of the layout component is determined and displayed on the configuration interface for a developer to edit based on the image area to be displayed by the layout component in the target page design drawing, so that the developer can associate corresponding data sources and data models for the image layer data according to the requirements, and accordingly, the layout component can acquire corresponding content data from the data sources and display the content data according to a display mode indicated by the data models; further, based on the layer data of the layout component in the design interface, the data source and the data model associated with the layer data, a target page file corresponding to the target page design drawing is generated, and the page designed by the target page design drawing can be displayed through the target page file. Therefore, by the method provided by the embodiment of the application, the page generation can be realized by only determining the layer data of the layout component according to the UI design manuscript and arranging and binding the layout component according to the layer data, and a series of complicated operations such as cutting pictures, developing codes, testing and the like are not required to be carried out on the UI design manuscript, so that the page generation process is simplified, the development cost is reduced, and the page generation efficiency is improved.

Referring to fig. 7, a flow chart of a page display method according to an embodiment of the application is provided, and the method can be applied to a client. As shown in fig. 7, the method may include the steps of:

S702, receiving an access request to a target page.

The access request carries a uniform resource locator for the target page file. As one example, a user may trigger an access request to a target page by entering a uniform resource locator for the target page into a client.

S704, acquiring the target page file based on the uniform resource locator.

The target page file is generated based on the page generation method provided by the embodiment of the application.

As one example, the client, upon receiving the access request, may obtain the target page file from the server based on the uniform resource locator of the target page.

S706, displaying the target page based on the target page file.

As an example, a client may parse a target page file to determine attributes of a target page, layout components included in the target page, and layer data of the layout components; further, a page is created based on the attribute of the target page, and the layout components are added to the page based on the layout components contained in the target page and layer data of the layout components, so that the target page is displayed.

According to the page display method provided by the embodiment of the application, when the client needs to display the page, the target page file of the page can be obtained to generate and display the page, and development, testing, packaging, publishing and the like of related codes of the page are not needed to be carried out again at the client, so that the page display process is simplified, the page display cost is reduced, and the page display efficiency is improved.

The foregoing describes specific embodiments of the present disclosure. Other embodiments are within the scope of the following claims. In some cases, the actions or steps recited in the claims can be performed in a different order than in the embodiments and still achieve desirable results. In addition, the processes depicted in the accompanying figures do not necessarily require the particular order shown, or sequential order, to achieve desirable results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

Corresponding to the page generation method shown in fig. 2, the embodiment of the application also provides a page generation device. Referring to fig. 8, a schematic structural diagram of a page generating apparatus 800 according to an embodiment of the present application is provided, where the apparatus 800 may include: the display unit 810, the first determining unit 820, the second determining unit 830, and the generating unit 840.

And a display unit 810 for displaying a configuration interface of the selected target layout component in response to a component selection operation on a design interface including a layout component for displaying a target page design drawing.

The first determining unit 820 is configured to determine, based on the image area displayed by the target layout component in the target page design drawing, layer data of the target layout component and display the layer data on the configuration interface.

A second determining unit 830, configured to determine, in response to an operation on the layer data at the configuration interface, a data source and a data model associated with the layer data, where the data source is used to obtain content data of the image area, and the data model is used to represent a presentation manner of the content data.

And the generating unit 840 is configured to generate a target page file corresponding to the target page design drawing based on the layer data of the layout component in the design interface, the data source associated with the layer data, and the data model.

In one embodiment, the design interface includes a component selection area and a page layout area, the component selection area including a plurality of layout components;

The display unit 810 is specifically configured to:

In response to a component selection operation on the component selection area, adding the selected layout component in the component selection area to the page arrangement area;

And responding to the component selection operation of the page arrangement area, and displaying a configuration interface of the selected target layout component in the page arrangement area.

In one embodiment, the design interface further includes a page configuration area;

The display unit 810 is further configured to:

displaying a page configuration control in the page configuration area;

determining page attribute data of the page arrangement area in response to an editing operation of the page configuration control;

and displaying the page arrangement area on the design interface based on the page attribute data.

In one embodiment, the first determining unit 820 is specifically configured to:

displaying the target page design drawing through a page design tool;

responding to the selection operation of the target page design drawing, taking the selected image area as the image area displayed by the target layout component, and acquiring design parameters of the selected image area;

and analyzing the design parameters to obtain the layer data of the target layout component and displaying the layer data on the configuration interface.

In one embodiment, the configuration interface includes an analysis area and a layer configuration area;

The first determining unit 820 analyzes the design parameters to obtain the layer data of the target layout component and displays the layer data on the configuration interface in the following manner:

Converting the design parameters into a markup language code in a preset vector graphic format;

Loading the markup language code into the analysis area for analysis to obtain layer data of the target layout component;

the layer data is shown in the layer configuration region.

In one embodiment, the layer data includes structure data of at least one layer in the target layout component;

The first determination unit displays the layer data in the layer configuration area by:

displaying the structural style indicated by the structural data of the at least one layer in a first subarea of the layer configuration area;

And displaying the structural data of the at least one layer in a second subarea of the layer configuration area.

In an embodiment, the first determining unit 820 is further configured to:

After the second subarea of the layer configuration area displays the structural data of the at least one layer, determining a first target layer selected in the at least one layer in response to layer selection operation in the first subarea;

And highlighting the structural data of the first target layer in the second subarea.

In an embodiment, the data sources associated with the layer data include the at least one data source associated with the layer, and the data model associated with the layer data includes the at least one data model associated with the layer;

The second determining unit 830 is specifically configured to:

Displaying the associated configuration control of the at least one layer in the second sub-region;

Responding to the triggering operation of the associated configuration control of a second target layer, and displaying a data source list and a data model list corresponding to the content data, wherein the second target layer is any one of the at least one layer, the data source list comprises at least one data source corresponding to the content data, and the data model list comprises at least one data model corresponding to the content data;

Determining the selected data source in the data source list as the data source associated with the second target layer in response to the selection operation of the data source list;

And in response to a selection operation of the data model list, determining the selected data model in the data model list as the data model associated with the second target layer.

In an embodiment, the second determining unit 830 is further configured to:

After determining a data source and a data model associated with the layer data in response to an operation on the layer data at the configuration interface, obtaining content data to be presented by the second target layer from the data source associated with the second target layer;

And displaying the acquired content data through the second target layer in the first subarea based on the display mode indicated by the data model associated with the second target layer.

In one embodiment, the configuration interface further includes a data definition area;

The second determining unit 830 is further configured to:

Before the data source list and the data model list are displayed in response to the triggering operation of the associated configuration control of the second target layer, the data source configuration control and the model configuration control are displayed in the data definition area;

Determining at least one data source corresponding to the content data in response to an editing operation of the data source configuration control;

and responding to the editing operation of the model configuration control, and determining at least one data model corresponding to the content data.

In one embodiment, the generating unit 840 is specifically configured to:

converting the layer data of the layout component into cascading style data and adding the cascading style data into a document object model node corresponding to the layout component;

Respectively associating a data source and a data model associated with the layer data of the layout component with the document object model node;

And packaging the document object model node, the data source and the data model associated with the document object model to obtain the target page file.

In one embodiment, the generating unit 840 is further configured to:

Updating the structural style of the layout component in the design interface based on the layer data of the layout component before generating a target page file corresponding to the target page design drawing based on the layer data of the layout component, a data source and a data model associated with the layer data in the design interface;

and updating the content data displayed in the design interface by the layout component based on the data source and the data model associated with the layer data of the layout component.

In one embodiment, the page generating apparatus 800 further includes:

A sending unit, configured to send, after the generating unit 840 generates a target page file corresponding to the target page design drawing based on the layer data of the layout component in the design interface, the data source and the data model associated with the layer data, the target page file is sent to a server to be stored, and a storage address of the target page file in the server is obtained;

The generating unit 840 is further configured to generate a uniform resource locator of the target page file based on the storage address.

Obviously, the page generating apparatus provided by the embodiment of the present application may be used as an execution body of the page generating method shown in fig. 2, so that the function of the page generating method implemented in fig. 2 can be implemented. Since the principle is the same, the description is not repeated here.

Corresponding to the page display method shown in fig. 7, the embodiment of the application further provides a page display device. Referring to fig. 9, a schematic structural diagram of a page display device 900 according to an embodiment of the present application is provided, where the device 900 may include: a receiving unit 910, an acquiring unit 920 and a displaying unit 930.

A receiving unit 910, configured to receive an access request to a target page, where the access request carries a uniform resource locator of the target page.

The obtaining unit 920 is configured to obtain, based on the uniform resource locator, a target page file corresponding to the target page, where the target page file is generated based on the page generating method provided by the embodiment of the present application.

And the display unit 930 is configured to display the target page based on the target page file.

Obviously, the page display device provided by the embodiment of the application can be used as an execution main body of the page display method shown in fig. 7, so that the functions of the page display method in fig. 7 can be realized. Since the principle is the same, the description is not repeated here.

Fig. 10 is a schematic structural view of an electronic device according to an embodiment of the present application. Referring to fig. 10, at the hardware level, the electronic device includes a processor, and optionally an internal bus, a network interface, and a memory. The Memory may include a Memory, such as a Random-Access Memory (RAM), and may further include a non-volatile Memory (non-volatile Memory), such as at least 1 disk Memory. Of course, the electronic device may also include hardware required for other services.

The processor, network interface, and memory may be interconnected by an internal bus, which may be an ISA (Industry Standard Architecture ) bus, a PCI (PERIPHERAL COMPONENT INTERCONNECT, peripheral component interconnect standard) bus, or EISA (Extended Industry Standard Architecture ) bus, among others. The buses may be classified as address buses, data buses, control buses, etc. For ease of illustration, only one bi-directional arrow is shown in FIG. 10, but not only one bus or type of bus.

And the memory is used for storing programs. In particular, the program may include program code including computer-operating instructions. The memory may include memory and non-volatile storage and provide instructions and data to the processor.

The processor reads the corresponding computer program from the nonvolatile memory into the memory and then runs the computer program to form the page generating device on the logic level. The processor is used for executing the programs stored in the memory and is specifically used for executing the following operations:

Or the processor reads the corresponding computer program from the nonvolatile memory to the memory and then runs the computer program to form the page display device on the logic level. The processor is used for executing the programs stored in the memory and is specifically used for executing the following operations:

Acquiring a target page file corresponding to the target page based on the uniform resource locator, wherein the target page file is generated based on the page generation method provided by the embodiment of the application;

and displaying the target page based on the target page file.

The method performed by the page generating apparatus disclosed in the embodiment of fig. 2 of the present application or the method performed by the page displaying apparatus disclosed in the embodiment of fig. 7 of the present application may be applied to a processor or implemented by a processor. The processor may be an integrated circuit chip having signal processing capabilities. In implementation, the steps of the above method may be performed by integrated logic circuits of hardware in a processor or by instructions in the form of software. The processor may be a general-purpose processor, including a central processing unit (Central Processing Unit, CPU), a network processor (Network Processor, NP), etc.; but may also be a digital signal Processor (DIGITAL SIGNAL Processor, DSP), application SPECIFIC INTEGRATED Circuit (ASIC), field-Programmable gate array (Field-Programmable GATE ARRAY, FPGA) or other Programmable logic device, discrete gate or transistor logic device, discrete hardware components. The disclosed methods, steps, and logic blocks in the embodiments of the present application may be implemented or performed. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like. The steps of the method disclosed in connection with the embodiments of the present application may be embodied directly in the execution of a hardware decoding processor, or in the execution of a combination of hardware and software modules in a decoding processor. The software modules may be located in a random access memory, flash memory, read only memory, programmable read only memory, or electrically erasable programmable memory, registers, etc. as well known in the art. The storage medium is located in a memory, and the processor reads the information in the memory and, in combination with its hardware, performs the steps of the above method.

The electronic device may further perform the method of fig. 2 and implement the function of the embodiment of fig. 2 of the page generating apparatus, or the electronic device may further perform the method of fig. 7 and implement the function of the embodiment of fig. 7 of the page generating apparatus, which is not described herein.

Of course, other implementations, such as a logic device or a combination of hardware and software, are not excluded from the electronic device of the present application, that is, the execution subject of the following processing flows is not limited to each logic unit, but may be hardware or a logic device.

The embodiments of the present application also provide a computer-readable storage medium storing one or more programs, the one or more programs comprising instructions, which when executed by a portable electronic device comprising a plurality of application programs, enable the portable electronic device to perform the method of the embodiment of fig. 2, and in particular to perform the operations of:

Or instructions that, when executed by a portable electronic device comprising a plurality of applications, enable the portable electronic device to perform the method of the embodiment shown in fig. 7, and in particular to:

and displaying the target page based on the target page file.

In summary, the foregoing description is only of the preferred embodiments of the present application, and is not intended to limit the scope of the present application. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the protection scope of the present application.

The system, apparatus, module or unit set forth in the above embodiments may be implemented in particular by a computer chip or entity, or by a product having a certain function. One typical implementation is a computer. In particular, the computer may be, for example, a personal computer, a laptop computer, a cellular telephone, a camera phone, a smart phone, a personal digital assistant, a media player, a navigation device, an email device, a game console, a tablet computer, a wearable device, or a combination of any of these devices.

Computer readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of storage media for a computer include, but are not limited to, phase change memory (PRAM), static Random Access Memory (SRAM), dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), read Only Memory (ROM), electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape disk storage or other magnetic storage devices, or any other non-transmission medium, which can be used to store information that can be accessed by a computing device. Computer-readable media, as defined herein, does not include transitory computer-readable media (transmission media), such as modulated data signals and carrier waves.

It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article or apparatus that comprises the element.

In this specification, each embodiment is described in a progressive manner, and identical and similar parts of each embodiment are all referred to each other, and each embodiment mainly describes differences from other embodiments. In particular, for system embodiments, since they are substantially similar to method embodiments, the description is relatively simple, as relevant to see a section of the description of method embodiments.

Claims

1. A page generation method, comprising:

2. The method of claim 1, wherein the design interface comprises a component selection area and a page layout area, the component selection area comprising a plurality of layout components;

the responding to the component selection operation of the design interface displays the configuration interface of the selected target layout component, and the method comprises the following steps:

3. The method of claim 2, wherein the design interface further comprises a page configuration area;

before exposing the configuration interface of the selected target layout component in response to the component selection operation on the design interface, the method further comprises:

displaying a page configuration control in the page configuration area;

4. The method of claim 1, wherein determining the layer data of the target layout component based on the image region presented by the target layout component in the target page design drawing and presented in the configuration interface comprises:

displaying the target page design drawing through a page design tool;

5. The method of claim 4, wherein the configuration interface comprises a resolution area and a layer configuration area;

The analyzing the design parameters to obtain the layer data of the target layout component and displaying the layer data on the configuration interface comprises the following steps:

the layer data is shown in the layer configuration region.

6. The method of claim 5, wherein the layer data comprises structural data of at least one layer in the target layout component;

the displaying the layer data in the layer configuration area comprises:

7. The method of claim 6, wherein after the second sub-region of the layer configuration region reveals the structural data of the at least one layer, the method further comprises:

Determining a first target layer selected from the at least one layer in response to a layer selection operation at the first sub-region;

8. The method of claim 6, wherein the layer data-associated data sources comprise the at least one layer-associated data source, and wherein the layer data-associated data model comprises the at least one layer-associated data model;

The determining, in response to an operation on the layer data at the configuration interface, a data source and a data model associated with the layer data, comprising:

9. The method of claim 8, wherein after determining the data source and data model associated with the layer data in response to manipulation of the layer data at the configuration interface, the method further comprises:

acquiring content data to be displayed through the second target layer from a data source associated with the second target layer;

10. The method of claim 8, wherein the configuration interface further comprises a data definition area;

Before exposing the list of data sources and the list of data models in response to a triggering operation of the associated configuration control for the second target layer, the method further comprises:

displaying a data source configuration control and a model configuration control in the data definition area;

11. The method of claim 1, wherein the generating the target page file corresponding to the target page design drawing based on the layer data of the layout component in the design interface, the data source associated with the layer data, and the data model comprises:

12. The method of claim 1, wherein prior to generating the target page file corresponding to the target page design drawing based on the layer data of the layout component in the design interface, the data source associated with the layer data, and the data model, the method further comprises:

Updating the structural style of the layout component in the design interface based on the layer data of the layout component;

13. The method of any of claims 1 to 12, wherein after generating a target page file corresponding to the target page design drawing based on the layer data of a layout component in the design interface, a data source associated with the layer data, and a data model, the method further comprises:

The target page file is sent to a server for storage, and a storage address of the target page file in the server is obtained;

And generating a uniform resource locator of the target page file based on the storage address.

14. A method for displaying a page, comprising:

Acquiring a target page file corresponding to the target page based on the uniform resource locator, wherein the target page file is generated based on the page generation method of any one of claims 1 to 13;

and displaying the target page based on the target page file.

15. A page generating apparatus, comprising:

16. A page display device, comprising:

an obtaining unit, configured to obtain, based on the uniform resource locator, a target page file corresponding to the target page, where the target page file is generated based on the page generation method according to any one of claims 1 to 13;

17. An electronic device, comprising:

A processor;

A memory for storing the processor-executable instructions;

Wherein the processor is configured to execute the instructions to implement the page generation method of any one of claims 1 to 13; or the processor is configured to execute the instructions to implement the page presentation method of claim 14.

18. A computer readable storage medium, characterized in that instructions in the storage medium, when executed by a processor of an electronic device, enable the electronic device to perform the page generation method of any one of claims 1 to 13; the instructions in the storage medium, when executed by a processor of an electronic device, enable the electronic device to perform the page presentation method of claim 14.