A page generation method and device, electronic equipment and storage medium

Abstract

This application provides a page generation method, apparatus, electronic device, and storage medium. The method includes: inputting an original page description file generated by a UI design tool into the parsing layer of a page description conversion model to obtain the page layout strategy, page component information, and data field information corresponding to the target page; inputting the data field information into the generation layer of the page description conversion model to generate a target page description file conforming to the rendering engine standard; and combining the target page description file, page layout strategy, and page component information to complete the automated construction and rendering generation of the target page. This application can automatically generate a target page description file conforming to the rendering engine standard from the original page description file output by the UI design tool using a page description conversion model, thereby completing page generation, lowering the threshold for page construction, and improving page generation efficiency.

Description

Technical Field

[0001] This invention relates to the field of front-end automation development technology, and more specifically, to a page generation method, apparatus, electronic device, and storage medium. Background Technology

[0002] Existing low-code development platforms (such as the Yuanqi Front-end Development Platform) generally adopt a model-driven page development architecture. Developers need to manually build business data entity models first, and then complete the page layout, component attribute binding and style configuration through visual drag-and-drop components. The platform automatically outputs front-end component code such as Vue based on the manual configuration results, which reduces the workload of native front-end coding to a certain extent.

[0003] However, existing technical solutions still have significant technical shortcomings: the entire process, including data entity modeling, page component drag-and-drop, layout rule configuration, and field binding, highly depends on the user's professional technical expertise. Operators need to master multiple types of professional knowledge, such as entity modeling theory, front-end framework syntax, and platform-specific configuration specifications, in order to complete the development of a complete business page.

[0004] Therefore, the high barrier to entry for existing low-code development platforms directly prevents non-technical personnel such as UI designers and business requirements analysts from independently completing page building. There is a gap between the page design and the front-end development implementation, requiring the intervention of professional developers for secondary translation, manual modeling, and page configuration. This significantly increases team collaboration and communication costs, lengthens the business page delivery cycle, and severely restricts the ease of use and business promotion efficiency of low-code platforms. Summary of the Invention

[0005] In view of this, the purpose of this application is to provide a page generation method, apparatus, electronic device, and storage medium that can automatically generate a target page description file conforming to the rendering engine standard from the original page description file output by the UI design tool using a page description conversion model, thereby completing page generation. Lower the barrier to entry for page creation and improve page generation efficiency.

[0006] In a first aspect, embodiments of this application provide a page generation method, the method comprising: The receiving layer of the page description transformation model receives the original page description file generated by the UI design tool for the target page; The original page description file is input into the parsing layer of the page description transformation model to obtain the page layout strategy, page component information, and data field information corresponding to the target page; the data field information refers to the set of field information corresponding to the business data entity bound to the target page; The data field information is input into the generation layer of the page description conversion model to generate a target page description file that conforms to the rendering engine standard. By combining the target page description file, page layout strategy, and page component information, the target page is automatically constructed and rendered.

[0007] In one possible implementation, the step of inputting the data field information into the generation layer of the page description transformation model to generate a target page description file that conforms to the rendering engine standard includes: Based on the preset standard entity model structure, an initial entity model is obtained through initialization; The data field information is used to assign values ​​to each preset attribute of the initial entity model to generate the target entity model; Based on the target entity model, a target page description file conforming to the rendering engine standard is generated.

[0008] In one possible implementation, the step of assigning values ​​to various preset attributes of the initial entity model using the data field information to generate the target entity model includes: The data field information is used as field metadata to populate the entity field set in the initial entity model to obtain the first entity model; Based on the field metadata corresponding to the entity field set in the first entity model, display control parameters for each field under each page type to be generated are generated, and the display control parameters are filled into the page parameter set of the first entity model to obtain the second entity model; Read the pre-configured list of page types to be generated for the target page and fill it into the list of page types of the second entity model to obtain the target entity model.

[0009] In one possible implementation, generating a target page description file conforming to the rendering engine standard based on the target entity model includes: A global context instance is constructed using the target entity model as the data source; the global context instance stores the page attribute information of the target page under each page type to be generated. Combining the global context instance and the target entity model, target page description files for each page type to be generated are generated sequentially according to a preset page type generation order.

[0010] In one possible implementation, constructing a global context instance using the target entity model as a data source includes: The target entity model is used as input parameter to instantiate the initial global context; Iterate through the page type list attributes in the target entity model, generate page attribute information for the target page under each page type to be generated, update it to the initial global context, and obtain the final global context instance.

[0011] In one possible implementation, a target page description file for any page type to be generated is generated according to the following steps: Using the generator corresponding to the page type to be generated, the target page description file under the page type to be generated is generated according to the component nesting rules of the page type to be generated.

[0012] Secondly, embodiments of this application also provide a page generation apparatus, the apparatus comprising: The receiving module is used as the receiving layer of the page description transformation model to receive the original page description file generated by the UI design tool for the target page; The input module is used to input the original page description file into the parsing layer of the page description conversion model to obtain the page layout strategy, page component information and data field information corresponding to the target page; the data field information refers to the set of field information corresponding to the business data entity bound to the target page; The input module is also used to input the data field information into the generation layer of the page description conversion model to generate a target page description file that conforms to the rendering engine standard; The generation module is used to combine the target page description file, page layout strategy, and page component information to complete the automated construction and rendering of the target page.

[0013] Thirdly, embodiments of this application also provide an electronic device, including: a processor, a storage medium, and a bus, wherein the storage medium stores machine-readable instructions executable by the processor, and when the electronic device is running, the processor communicates with the storage medium via the bus, and the processor executes the machine-readable instructions to perform the steps of the page generation method as described in any of the first aspects.

[0014] Fourthly, embodiments of this application also provide a computer-readable storage medium storing a computer program, which, when executed by a processor, performs the steps of the page generation method as described in any of the first aspects.

[0015] This application provides a page generation method, apparatus, electronic device, and storage medium. The method includes: receiving an original page description file generated by a UI design tool for a target page through a receiving layer of a page description conversion model; inputting the original page description file into a parsing layer of the page description conversion model to obtain page layout strategy, page component information, and data field information corresponding to the target page; wherein the data field information refers to a set of field information corresponding to the business data entities bound to the target page; inputting the data field information into a generation layer in the page description conversion model to generate a target page description file conforming to the rendering engine standard; and combining the target page description file, page layout strategy, and page component information to complete the automated construction and rendering generation of the target page. Compared with the prior art, the page generation method provided in this application has the following beneficial effects: (1) Eliminate the barrier of manual modeling: The parsing layer automatically extracts the business entity and field set from the original UI design description file. Users do not need to master the professional knowledge of entity modeling and data structure. UI designers and business personnel can complete the data layer definition without the assistance of developers. (2) Connect UI design and front-end development: Relying only on the native output files of UI design tools as input, the model automatically completes the whole process of parsing and generation, eliminating the need for manual translation of design drafts and secondary development operations, eliminating the gap in job collaboration, and reducing communication costs; (3) Automatic parsing of layout and component structure: Synchronously parses page layout strategy and page component information, eliminating the need for manual dragging and dropping of components, manual configuration of grid and style layout rules, greatly reducing the learning cost of front-end configuration; (4) Generate standardized page description files: Based on the parsed field information, standard files adapted to the rendering engine are automatically generated. Combined with layout and component information, the page is automatically rendered in one stop, improving the usability of the low-code platform and expanding the applicable users. Attached Figure Description

[0016] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments will be briefly introduced below. It should be understood that the following drawings only show some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0017] Figure 1 A flowchart of a page generation method provided in an embodiment of this application is shown; Figure 2 This paper illustrates a flowchart of the process for generating a target page description file according to an embodiment of this application. Figure 3This paper shows a schematic diagram of the structure of a page generation apparatus provided in an embodiment of this application; Figure 4 A schematic diagram of the structure of an electronic device provided in an embodiment of this application is shown. Detailed Implementation

[0018] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. It should be understood that the accompanying drawings in this application are for illustrative and descriptive purposes only and are not intended to limit the scope of protection of this application. Furthermore, it should be understood that the schematic drawings are not drawn to scale. The flowcharts used in this application illustrate operations implemented according to some embodiments of this application. It should be understood that the operations in the flowcharts may not be implemented in sequence, and steps without logical contextual relationships may be reversed or implemented simultaneously. In addition, those skilled in the art, guided by the content of this application, may add one or more other operations to the flowcharts, or remove one or more operations from the flowcharts.

[0019] Furthermore, the described embodiments are merely some, not all, of the embodiments of this application. The components of the embodiments of this application described and illustrated herein can typically be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of this application provided in the accompanying drawings is not intended to limit the scope of the claimed application, but merely to illustrate selected embodiments of the application. All other embodiments obtained by those skilled in the art based on the embodiments of this application without inventive effort are within the scope of protection of this application.

[0020] To enable those skilled in the art to utilize the content of this application, and in conjunction with the specific application scenario of "front-end automation development technology," the following implementation methods are provided. For those skilled in the art, the general principles defined herein can be applied to other embodiments and application scenarios without departing from the spirit and scope of this application. Although this application is primarily described within the "front-end automation development technology field," it should be understood that this is merely an exemplary embodiment.

[0021] It should be noted that the term "comprising" will be used in the embodiments of this application to indicate the presence of the features declared thereafter, but does not exclude the addition of other features.

[0022] The following is a detailed description of a page generation method provided by an embodiment of this application.

[0023] Reference Figure 1 The diagram shown is a flowchart illustrating a page generation method provided in an embodiment of this application. The exemplary steps of this embodiment are described below: S101, The receiving layer of the page description conversion model receives the original page description file generated by the UI design tool for the target page.

[0024] In this embodiment, the page description conversion model is a layered parsing model oriented towards a domain-specific language (DSL) for front-end code generation. It enables end-to-end conversion capabilities, including receiving the original UI design DSL file, jointly parsing the page's visual and business semantics, and automatically generating a standardized page description file. The model consists of three functional modules: a receiving layer, a parsing layer, and a generation layer. During this step, the target page is first visually designed using UI design tools such as Figma, and the design tool outputs a Domain-Specific Language (DSL) format file as the original page description file. Then, the receiving layer of the page description conversion model reads and loads this original page description file.

[0025] The original page description file is a standardized DSL file that carries complete page information. It encapsulates two types of core information about the target page: first, visual design information, including component type, component coordinates, size, fill color, border style, and other visual node data; second, business semantic attributes, including bound field names, field data types, field validation rules, and other business configuration data. The original page description file internally stores the page hierarchy layout and component visual information using a visual tree, and uses semantic annotations to attach the corresponding business data association configurations for each component.

[0026] S102. Input the original page description file into the parsing layer of the page description transformation model to obtain the page layout strategy, page component information and data field information corresponding to the target page.

[0027] In this embodiment, the page layout strategy is a set of rules for the overall layout and constraints of the target page. It is used to define the arrangement logic, grid ratio, spacing specifications, hierarchical relationship and adaptive adaptation rules of each component within the page. It includes layout dimension configuration information such as component grid layout parameters, page margin parameters, component spacing parameters, hierarchical stacking rules and adaptive layout strategies. For example, the root form node node_form_root is configured with S.layoutMode='GRID', cols=2, pad=24, which can directly parse and generate the core strategy parameters of the page grid layout.

[0028] The page component information (componentMap) is a set of structured attributes of all visual components that make up the target page. It is used to fully represent the type characteristics, hierarchical structure, and interactive behavior of the page rendering elements. The component information is mainly obtained by parsing the type, componentName, and semantic.actionType fields of each visual node in the original page description file. Specifically, it includes the specific type of the component (button, input box, selector, etc.), the unique identifier of the component, the nesting hierarchy of the component, basic style parameters, and interactive logic and behavioral constraints such as click and submit.

[0029] The data field information refers to the set of field information corresponding to the business data entities bound to the target page. It is the core business metadata for implementing page data backfilling, form validation, and interface interaction. The field information is completely extracted from the data binding relationships and validation constraint rules in the semantic annotation of the original page description file. Specifically, it includes business configurations such as the front-end display field name, the original field code corresponding to the back-end API, the field data type, the rendering component type, and the mandatory field validation rules. For example, the text displayed on the page "Payment Date" corresponds to the back-end field "payment_time", which has the data type DATETIME and is a mandatory field; the text displayed for "Applicant" corresponds to the back-end field "applicant", which has the data type STRING and is a non-mandatory field, achieving a precise mapping between UI display fields and the back-end data model.

[0030] Furthermore, the parsing layer parses the original page description file to obtain the page layout strategy, page component information, and data field information. The parsing process is as follows: (1) Page layout strategy extraction: Traverse the visual node tree of the original page description file, read the style and layout parameters in the styles field of each node layer by layer, summarize the global layout constraints based on the node hierarchy inheritance relationship, parse and extract the Grid / Flex layout mode, grid column number, margin, inner margin, responsive adaptation rules and CSS style configuration, abstract and encapsulate them into a standardized page layout strategy, and complete the structured extraction of the overall page layout style.

[0031] (2) Page Component Information Extraction: Traverse all independent component nodes in the visual node tree of the original page description file to complete the accurate parsing and aggregation of multi-dimensional component data. Specifically: Read the type field of each component node to accurately identify the specific categories of components such as buttons, input boxes, and selectors; read the componentName field to generate a unique identifier for each component, achieving accurate component positioning; read the styles field of the node to parse the component size, coordinate position, style color scheme, and other visual style parameters; based on the hierarchical structure of the visual node tree, sort out the nesting relationship of each component and the page layout hierarchy; further parse the semantic.actionType field of the node to identify interactive behaviors and trigger logic such as component clicks and form submissions. Finally, integrate the categories, styles, levels, unique identifiers, and interaction rules of all components to generate a structured and complete set of page component information.

[0032] (3) Data Field Information Extraction: Accurately read the semantic annotation data of the original page description file, parse the core metadata such as the backend data field encoding, field data type, and required field validation identifier bound to each input component, establish a one-to-one mapping relationship between the front-end display text and the backend API fields, integrate the business field configurations of all components, and aggregate to generate a complete set of data field information for the target page that can be directly used for modeling and rendering. Exemplary parsing results include: payment date field payment_time (DATETIME type, required) and applicant field applicant (STRING type, optional).

[0033] S103. Input the data field information into the generation layer of the page description transformation model to generate a target page description file that conforms to the rendering engine standard.

[0034] In this embodiment, the target page description file is a standardized engine-recognizable DSL file generated after structured modeling, field configuration rendering, and multi-page scenario adaptation. It serves as a unified intermediate description carrier that adapts to the front-end rendering engine parsing specifications and can directly drive the automated construction and rendering of pages. Unlike the original page description files output by UI design tools, which only contain visual and shallow semantic information, the target page description file completes business data modeling, field display control, page type adaptation, and standardized structure normalization processing. It has the ability to be directly compiled and rendered, automatically derived from multiple pages, and linked with backend entity models.

[0035] Furthermore, referring to Figure 2 The diagram shown is a flowchart of the generation process of the target page description file provided in this application embodiment, which specifically includes the following steps: S201. Initialize the initial entity model based on the preset standard entity model structure.

[0036] In this embodiment, the preset standard entity model structure is a dedicated structured data template adapted to the UI design DSL automatic page conversion scenario of this application. It pre-standardizes the core attribute fields, field types, data levels, and filling rules required for the entire automated page generation process. It can uniformly accept page business data, rendering configuration data, and page generation configuration data output from the parsing layer, shielding the format differences of the original UI design files. This provides a unified structured data foundation for subsequent standardized assignment, multi-scenario page adaptation, and engine-level page description file generation. Instance initialization based on this preset standard entity model structure yields a blank initial entity model with only standard attribute structures and no business or rendering data.

[0037] Specifically, the initial entity model has built-in core attribute fields adapted to the page generation logic of this application embodiment, including appId, dataModelId, dataModelCode, dataModelName, primaryKey, fields, appParamList, and generateItemList.

[0038] Among them, appId is the unique identifier of the application to which the target page belongs; dataModelId is the unique identifier of the business data model corresponding to the target page, which can be automatically generated by the system or preset manually; dataModelCode and dataModelName serve as the basic code and page name of the target page, respectively, providing basic information for standardized naming and classification management of page files; primaryKey is the primary key field of the business data entity, with the default value being id, used to bind the unique index of the page's business data; fields is the entity field collection, used to store the core data field information extracted by the parsing layer, retaining only pure business field metadata and not carrying redundant information of the front-end visual nodes; appParamList is the page parameter collection, used to store the front-end page configuration parameters generated by the mapping of business fields, carrying the association mapping relationship between the front-end visual nodes and the back-end business fields, as well as the display control parameters for multiple page type scenarios; generateItemList is the page type list, used to store the page types to be generated for this target page, such as paginated query pages, form entry pages, etc., limiting the scope of scenarios for batch generation of pages.

[0039] S202. Assign values ​​to each preset attribute of the initial entity model using data field information to generate the target entity model.

[0040] In this embodiment, the initial entity model obtained during initialization only has a standard structural framework and is not populated with any business or page configuration data. The generation layer uses the parsed data field information as the core data source, and sequentially assigns values ​​to the entity field set, page parameter set, and page type list of the initial entity model in a hierarchical manner. It progressively populates structured data such as field metadata, multi-page display control parameters, and the types of pages to be generated, completing the transformation from a blank template to an entity model carrying complete business and rendering configurations, ultimately obtaining a target entity model with complete parameters and a standardized structure. The specific assignment process is as follows: Step 1: Populate the data field information as field metadata into the entity field set in the initial entity model to obtain the first entity model.

[0041] In this embodiment, the data field information includes pure business metadata such as field codes, field names, data types, and validation rules. In this step, the generation layer imports all standardized data field information in batches into the fields entity field set attribute of the initial entity model, completing the initialization and filling of the underlying business data of the initial entity model. This ensures that the initial entity model has a complete business data entity basic structure, retaining only the core business field dimension data and avoiding redundant front-end visual configurations, thus completing the first stage of assignment and generating the first entity model.

[0042] Step 2: Based on the metadata of the corresponding fields in the entity field set in the first entity model, generate the display control parameters for each field under each page type to be generated, and fill the display control parameters into the page parameter set of the first entity model to obtain the second entity model.

[0043] In this embodiment, the first entity model only populates the business field metadata and has not yet configured page rendering and scene adaptation parameters. This step relies on the existing entity field set in the first entity model and, combined with preset multi-page rendering adaptation rules, automatically generates dedicated display control parameters for each business field for different page types such as paginated queries, form entry, detail display, and conditional filtering. These parameters include page rendering constraints such as field visibility status, edit read-only permissions, display sorting, style adaptation, and filter availability. All generated display control parameters are then uniformly encapsulated and populated into the appParamList page parameter set attribute of the first entity model, completing the assignment of page rendering configuration dimensions and obtaining a second entity model that combines business field data and page rendering control data.

[0044] Step 3: Read the pre-configured list of page types to be generated for the target page and fill it into the list of page types for the second entity model to obtain the target entity model.

[0045] In this embodiment, the second entity model has fully stored business field data and multi-scenario page control parameters, but it has not yet defined the specific page scenario for this automated generation. This step reads the pre-configured page generation task list of the target page, clarifies the page types that need to be generated in batches, such as paginated query pages and form entry pages, and completely fills the list of page types to be generated into the `generateItemList` page type list attribute of the second entity model, thus locking the scenario scope and generation task for this page generation. At this point, the three core dimensions of the entity model—business data, rendering parameters, and generation scenario—have all been assigned values, resulting in a target entity model with a complete structure, comprehensive parameters, and direct usability for standardized DSL generation.

[0046] S203. Generate a target page description file that conforms to the rendering engine standard based on the target entity model.

[0047] In this embodiment, the target entity model centrally carries all structured data, including page field metadata, multi-scene display control rules, page type list, layout, and component configuration. The generation layer uses the target entity model as the sole data input source. Following the front-end rendering engine's parsing specifications and DSL compilation rules, it organizes, maps, serializes, and encapsulates the structured data within the target entity model, automatically adapting to various page rendering scenarios such as forms, lists, details, and filters. Ultimately, it batch-generates target page description files that are structurally unified, formatted correctly, and directly recognizable and parsed by the rendering engine. The specific generation process is as follows: Step 1: Construct a global context instance using the target entity model as the data source; the global context instance stores the page attribute information of the target page under each page type to be generated.

[0048] In this embodiment, the target entity model is used as input parameter to instantiate an initial global context; the page type list attributes in the target entity model are traversed to generate page attribute information of the target page under each page type to be generated, and updated to the initial global context to obtain the final global context instance.

[0049] Here, all page types to be generated are traversed in the `generateItemList` page type list of the target entity model. A corresponding page information (PageInfo) structure is pre-generated for each page type to obtain the page attribute information of the target page under each page type. Here, `PageInfo` serves as the unique basic configuration carrier for a single page, mainly containing the core page identifier parameters `pageId`, `pageName`, and `pageCode`. The naming rule uses the superposition of basic model information and page type: `pageId` is the unique generation identifier for the page type to be generated; `pageName` is obtained by concatenating the name of the page type to be generated with the `dataModelName` of the target entity model, ensuring clear business semantics and distinguishable scenarios; `pageCode` is obtained by concatenating the code of the page type to be generated with the `dataModelCode` of the target entity model, achieving unique and standardized page coding across multiple scenarios.

[0050] Step 2: Combining the global context instance and the target entity model, generate target page description files for each page type to be generated.

[0051] In this embodiment, the target entity model is first validated for legality, checking whether core parameters such as dataModelCode and dataModelName are complete and compliant, and eliminating abnormal data configurations. If the target entity model passes the validity validation, the target page description files for each page type to be generated are generated sequentially according to the preset page type generation order, based on the global context instance and the target entity model.

[0052] The page type generation order is a standardized priority and timing constraint of the page DSL compilation, following the compilation logic of "form-type pages first, list operation pages later". This ensures that the list page can be normally associated with the unique page identifier of the form and detail page to complete cross-page event binding. This compilation timing belongs to the backend DSL file generation logic and is independent of the frontend page rendering order.

[0053] Here, relying on the generation sequence of "form page first, then list page," the list page's events are configured only after the add, edit, and detail pages are built and their PageInfo information is fixed. The add, row edit, and row preview buttons on the list page are associated with the pageId and pageCode of the corresponding add, edit, and detail pages in the global context, respectively, and page navigation events such as addItemOfListView, editItemOfListView, and reviewItemOfListView are configured. At the same time, for operations such as table query, data reset, pagination switching, single row deletion, and batch deletion, the built-in interactive events searchListView, resetListView, triggerTask, deleteItemOfListView, and deleteItemOfListViewByBatch are matched respectively, realizing the linkage and closed loop of business interaction between multiple pages.

[0054] Specifically, a target page description file for any page type to be generated is generated according to the following steps: Using the generator corresponding to the page type to be generated, a target page description file for that page type is generated according to the component nesting rules of that page type. The component nesting rules are standardized component hierarchy arrangement, adaptive component matching, field control mapping, layout constraints, and event binding specifications specific to the corresponding page type. These rules are used to automatically assemble a page component tree with a valid hierarchy, unified structure, and normal parsing by the rendering engine based on business field attributes and page layout parameters, achieving differentiated and standardized automatic construction of page components in different business scenarios. The implementation process is as follows: (1) Retrieve the PageInfo information corresponding to the page type to be generated from the dslBuildTypePageIdMap of the global context instance, and obtain the unique pageId, pageName, and pageCode parameters of the current page. Based on this set of unique identifier parameters, initialize and generate the top-level DSL root node of the target page description file corresponding to the page type to be generated, build the basic framework of the target page description file, and provide the top-level carrier for the subsequent nested mounting of business components and general components.

[0055] (2) Combining the appParamList field configuration, field data type, default layout column number, and other parameters of the target entity model, a standardized business component tree is generated according to the component nesting rules of the page type to be generated. The custom business component tree and the platform's default basic sub-components are then synchronously mounted in the children array of the root node of the target page description file to obtain the final target page description file. The specific component nesting rules for different page types are as follows: a. Component nesting rules for page types "Add" and "Edit" forms: Based on the preset number of form columns, all editable business fields are filtered from the appParamList of the target entity model, sorted according to their unique identifiers, and broken down into multi-row two-dimensional collections; LcRower row layout nodes are generated row by row and attached to the child nodes of the LcForm form component; each business field generates an independent LcFormItem form item node, nested inside the corresponding LcRower node. Simultaneously, the control type is adaptively matched according to the field data type: LcSelect dropdown component for string dictionary types, LcInput input component for ordinary string types, LcNumber numeric input component for various numeric types, and LcDateTimePicker time selection component for date and time types. Finally, a default LcButtonGroup button group component is uniformly attached to the bottom of the form, with built-in cancel and save buttons, respectively bound to resetForm and submitForm form submission events, with the event scope limited to the current form page instance.

[0056] b. Component nesting rules for detail display pages: Generate an LcDetail detail display component as the business root node. Following the default column count rules for forms, decompose the display fields into multi-row LcRower layout nodes. Each LcRower node nests a corresponding LcFormItem node, and each form item internally mounts an LcLabel text display component for statically rendering field values. Simultaneously, write the complete configuration of the target entity model into the boundModel property of the LcDetail component, including the model's unique identifier, data source, encoding, name, full field set, and primary key information, thus achieving data binding between the detail component and the business entity model.

[0057] c. Component nesting rules for list-type operation pages: Generate an LcSingleTableOperation single-table operation component as the business root node, and write the complete entity model information into its boundModel property. Assemble child nodes from top to bottom: First, attach the page title and icon LcRower node; then nest the LcListFilter filter area component, which contains a filter LcForm form and a filter button group. The filter form follows the form column number rules to nest layout nodes and field filter controls; continue to attach the LcBlock operation area node containing data statistics, add, and batch delete functions; then generate the LcTable table node, which automatically generates the table column configuration based on the entity fields, and includes built-in row editing, preview, and delete operation buttons; finally, attach the LcPagination pagination component to complete the complete component structure of the list page.

[0058] There is a fixed pre-defined page type generation order, which is the standardized priority and timing constraint for page DSL compilation. Specifically, form type pages are generated first, followed by list operation type pages. That is, target page description files for page types such as add, edit, and detail pages are generated first, and target page description files for list page types are generated last.

[0059] Here, because the navigation events of the list page need to be bound to the pageId and pageCode identifier parameters of the form / details page, the form-type page's DSL construction must be completed in advance during the independent generation stage of the subpage to solidify the page's unique information. Only then can the associated parameters be read correctly and the cross-page event configuration be completed when building the list page's DSL. This sequence belongs to the backend DSL file compilation and generation logic and is independent of the frontend page rendering order. The generation layer relies on this preset page type generation order, links the global context instance and the target entity model, and performs DSL structured compilation for each page type one by one, generating corresponding target page description files in a differentiated manner. The specific implementation steps are as follows: S104. Combine the target page description file, page layout strategy, and page component information to complete the automated construction and rendering of the target page.

[0060] In this embodiment, the target page description file contains a complete multi-scenario page component tree, field data binding relationships, page event configurations, and multi-page linkage rules. The page layout strategy fixes the overall grid layout, Flex / Grid layout rules, style constraints, spacing margins, and responsive adaptation parameters. The page component information stores the type characteristics, size coordinates, style color scheme, nesting level, and interaction attributes of each component. After the rendering engine starts the rendering process, it first reads the standardized DSL structure in the target page description file, automatically parses the component nesting structure, business field mapping relationships, and preset interaction events of each page, then loads the matching page layout strategy, and performs global constraint rendering on the overall page layout structure, component arrangement rules, and responsive adaptation styles. At the same time, it retrieves the page component information corresponding to each component to complete the accurate instantiation of components, style restoration, position adaptation, and interaction logic mounting.

[0061] This application provides a page generation method, which includes: inputting an original page description file generated by a UI design tool into the parsing layer of a page description conversion model to obtain the page layout strategy, page component information, and data field information corresponding to the target page; inputting the data field information into the generation layer of the page description conversion model to generate a target page description file that conforms to the rendering engine standard; and combining the target page description file, page layout strategy, and page component information to complete the automated construction and rendering generation of the target page. This application can automatically generate a target page description file that conforms to the rendering engine standard from the original page description file output by the UI design tool using a page description conversion model, thereby completing page generation, reducing the threshold for page construction, and improving page generation efficiency.

[0062] Based on the same inventive concept, this application also provides a page generation device corresponding to the page generation method. Since the principle of the device in this application is similar to that of the page generation method described above, the implementation of the device can refer to the implementation of the method, and the repeated parts will not be described again.

[0063] Reference Figure 3 The diagram shown is a schematic representation of a page generation apparatus provided in an embodiment of this application. The page generation apparatus includes: The receiving module 301 is used as the receiving layer of the page description conversion model to receive the original page description file generated by the UI design tool for the target page; Input module 302 is used to input the original page description file into the parsing layer of the page description conversion model to obtain the page layout strategy, page component information and data field information corresponding to the target page; the data field information refers to the set of field information corresponding to the business data entity bound to the target page; The input module 302 is also used to input the data field information into the generation layer in the page description conversion model to generate a target page description file that conforms to the rendering engine standard; The generation module 303 is used to combine the target page description file, page layout strategy and page component information to complete the automated construction and rendering generation of the target page.

[0064] In one possible implementation, the input module 302 is specifically used to initialize an initial entity model based on a preset standard entity model structure; assign values ​​to each preset attribute of the initial entity model using the data field information to generate a target entity model; and generate a target page description file that conforms to the rendering engine standard based on the target entity model.

[0065] In one possible implementation, the input module 302 is specifically used to fill the data field information as field metadata into the entity field set in the initial entity model to obtain a first entity model; based on the field metadata corresponding to the entity field set in the first entity model, generate display control parameters for each field under each page type to be generated, and fill the display control parameters into the page parameter set of the first entity model to obtain a second entity model; read the pre-configured list of page types to be generated for the target page, and fill it into the page type list of the second entity model to obtain a target entity model.

[0066] In one possible implementation, the input module 302 is specifically used to construct a global context instance using the target entity model as a data source; the global context instance stores the page attribute information of the target page under each page type to be generated; and, in combination with the global context instance and the target entity model, sequentially generates the target page description file of the target page under each page type to be generated according to a preset page type generation order.

[0067] In one possible implementation, the input module 302 is specifically used to instantiate the target entity model as an input parameter to obtain an initial global context; traverse the page type list attributes in the target entity model, generate page attribute information of the target page under each page type to be generated, update the initial global context, and obtain the final global context instance.

[0068] In one possible implementation, the input module 302 is specifically configured to generate a target page description file for any page type to be generated according to the following steps: by using the generator corresponding to the page type to be generated, the target page description file for the page type to be generated is generated according to the component nesting rules of the page type to be generated.

[0069] This application provides a page generation apparatus, comprising: a receiving module 301, used to receive an original page description file generated by a UI design tool for a target page through a receiving layer of a page description conversion model; an input module 302, used to input the original page description file into a parsing layer of the page description conversion model to obtain page layout strategy, page component information, and data field information corresponding to the target page; wherein the data field information refers to a set of field information corresponding to the business data entity bound to the target page; the input module 302 is further used to input the data field information into a generation layer in the page description conversion model to generate a target page description file conforming to the rendering engine standard; and a generation module 303, used to combine the target page description file, page layout strategy, and page component information to complete the automated construction and rendering generation of the target page. This application can automatically generate a target page description file conforming to the rendering engine standard from the original page description file output by the UI design tool using a page description conversion model, thereby completing page generation, lowering the threshold for page construction, and improving page generation efficiency.

[0070] like Figure 4 As shown in the embodiment of this application, an electronic device 400 includes a processor 401, a memory 402, and a bus. The memory 402 stores machine-readable instructions executable by the processor 401. When the electronic device is running, the processor 401 communicates with the memory 402 via the bus, and the processor 401 executes the machine-readable instructions to perform the steps of the page generation method described above.

[0071] Specifically, the memory 402 and processor 401 described above can be general-purpose memory and processor, without any specific limitations. When the processor 401 runs the computer program stored in the memory 402, it can execute the page generation method described above.

[0072] Corresponding to the above page generation method, this application embodiment also provides a computer-readable storage medium storing a computer program, which, when executed by a processor, performs the steps of the above page generation method.

[0073] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems and devices described above can be referred to the corresponding processes in the method embodiments, and will not be repeated here. In the several embodiments provided in this application, it should be understood that the disclosed systems, devices, and methods can be implemented in other ways. The device embodiments described above are merely illustrative. For example, the division of modules is only a logical functional division, and in actual implementation, there may be other division methods. Furthermore, multiple modules or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the displayed or discussed mutual coupling or direct coupling or communication connection can be through some communication interfaces; the indirect coupling or communication connection of devices or modules can be electrical, mechanical, or other forms.

[0074] The modules described as separate components may or may not be physically separate. The components shown as modules may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0075] In addition, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.

[0076] If the aforementioned function is implemented as a software functional unit and sold or used as an independent product, it can be stored in a processor-executable, non-volatile, computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the page generation method described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, external hard drives, ROM, RAM, magnetic disks, or optical disks.

[0077] The above are merely specific embodiments of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the technical scope disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. A page generation method, characterized in that, The method includes: The receiving layer of the page description transformation model receives the original page description file generated by the UI design tool for the target page; The original page description file is input into the parsing layer of the page description transformation model to obtain the page layout strategy, page component information, and data field information corresponding to the target page; the data field information refers to the set of field information corresponding to the business data entity bound to the target page; The data field information is input into the generation layer of the page description conversion model to generate a target page description file that conforms to the rendering engine standard. By combining the target page description file, page layout strategy, and page component information, the target page is automatically constructed and rendered.

2. The page generation method according to claim 1, characterized in that, The step of inputting the data field information into the generation layer of the page description transformation model to generate a target page description file that conforms to the rendering engine standard includes: Based on the preset standard entity model structure, an initial entity model is obtained through initialization; The data field information is used to assign values ​​to each preset attribute of the initial entity model to generate the target entity model; Based on the target entity model, a target page description file conforming to the rendering engine standard is generated.

3. The page generation method according to claim 2, characterized in that, The step of assigning values ​​to various preset attributes of the initial entity model using the data field information to generate the target entity model includes: The data field information is used as field metadata to populate the entity field set in the initial entity model to obtain the first entity model; Based on the field metadata corresponding to the entity field set in the first entity model, display control parameters for each field under each page type to be generated are generated, and the display control parameters are filled into the page parameter set of the first entity model to obtain the second entity model; Read the pre-configured list of page types to be generated for the target page and fill it into the list of page types of the second entity model to obtain the target entity model.

4. The page generation method according to claim 2, characterized in that, The step of generating a target page description file that conforms to the rendering engine standard based on the target entity model includes: A global context instance is constructed using the target entity model as the data source; the global context instance stores the page attribute information of the target page under each page type to be generated. Combining the global context instance and the target entity model, target page description files for each page type to be generated are generated sequentially according to a preset page type generation order.

5. The page generation method according to claim 4, characterized in that, The step of constructing a global context instance using the target entity model as a data source includes: The target entity model is used as input parameter to instantiate the initial global context; Iterate through the page type list attributes in the target entity model, generate page attribute information for the target page under each page type to be generated, update it to the initial global context, and obtain the final global context instance.

6. The page generation method according to claim 4, characterized in that, Generate a target page description file for any page type to be generated by following these steps: Using the generator corresponding to the page type to be generated, the target page description file under the page type to be generated is generated according to the component nesting rules of the page type to be generated.

7. A page generation apparatus, characterized in that, The device includes: The receiving module is used as the receiving layer of the page description transformation model to receive the original page description file generated by the UI design tool for the target page; The input module is used to input the original page description file into the parsing layer of the page description conversion model to obtain the page layout strategy, page component information and data field information corresponding to the target page; the data field information refers to the set of field information corresponding to the business data entity bound to the target page; The input module is also used to input the data field information into the generation layer of the page description conversion model to generate a target page description file that conforms to the rendering engine standard; The generation module is used to combine the target page description file, page layout strategy, and page component information to complete the automated construction and rendering of the target page.

8. The page generation apparatus according to claim 7, characterized in that, The step of inputting the data field information into the generation layer of the page description transformation model to generate a target page description file that conforms to the rendering engine standard includes: Based on the preset standard entity model structure, an initial entity model is obtained through initialization; The data field information is used to assign values ​​to each preset attribute of the initial entity model to generate the target entity model; Based on the target entity model, a target page description file conforming to the rendering engine standard is generated.

9. An electronic device, characterized in that, include: The device includes a processor, a storage medium, and a bus, wherein the storage medium stores machine-readable instructions executable by the processor, and when the electronic device is running, the processor communicates with the storage medium via the bus, and the processor executes the machine-readable instructions to perform the steps of the page generation method as described in any one of claims 1 to 6.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, performs the steps of the page generation method as described in any one of claims 1 to 6.

Images