Page generation method and device based on combination of zero code and source code, equipment and medium

Abstract

The invention relates to the technical field of UI design, can be applied to business system platforms of financial science and technology, medical health and the like, and discloses a page generation method and device based on combination of zero codes and source codes, equipment and a medium. Splitting the to-be-integrated page frame into a zero code component unit and a source code development unit; performing visual configuration on the zero code component unit, and extracting corresponding component configuration data; determining a component rendering logic according to the component configuration data, and generating a component online link according to the component configuration data and the component rendering logic; loading a component resource file corresponding to the component online link in a source code project of the source code development unit, and determining a zero-code component instance according to the component resource file; and mounting the zero code component instance and a function module of the source code development unit into the to-be-integrated page frame to obtain a target business page. According to the invention, the accuracy of the target business page generation result in application development can be improved.

Description

Technical Field

[0001] This invention relates to the field of UI design technology, and in particular to a method, apparatus, device, and medium for generating pages based on a combination of zero-code and source code. Background Technology

[0002] Currently, there are three main technical models in the field of web application development: traditional source code development offers the highest flexibility and can implement complex business logic, but it has lower development efficiency and requires stringent programming skills; low-code platforms combine visual development with code writing, forming a compromise between development efficiency and functional scalability, suitable for applications of moderate complexity; and no-code platforms significantly lower the technical threshold through drag-and-drop component development and configuration-based development, offering outstanding development efficiency, especially suitable for quickly building standardized application interfaces. These three technical paths each have their own focus and together constitute the technical system of modern application development.

[0003] In the healthcare field, no-code platforms often encounter field mapping errors when developing electronic medical record templates due to the difficulty in handling complex medical order logic and the association rules of test indicators. Low-code platforms, when building patient follow-up systems, lack sufficient support for the dynamic calculation logic of multi-dimensional disease data, which can easily lead to inaccurate data validation in follow-up forms. Although traditional development is flexible, manual coding to handle medical terminology mapping can easily cause page field matching errors due to misunderstandings of business concepts. All three types of technologies suffer from low accuracy in generating results for target business pages due to their limitations.

[0004] In the fintech business field, when developing intelligent risk control pages using no-code platforms, errors in risk indicator mapping often occur due to the inability to efficiently integrate real-time risk control models and multi-source data verification rules. When building cross-border payment and settlement pages using low-code platforms, insufficient visualization configuration capabilities for complex logic can easily lead to errors in settlement field verification. Although traditional development supports deep customization, manually writing code to process financial derivative pricing formulas and regulatory report mappings often results in distorted page data calculation and display logic due to rapid iteration and misunderstanding of business rules. The limitations of these three technologies in adapting to the complexity of financial businesses lead to low accuracy in the generated results of target business pages.

[0005] No-code platforms struggle to handle the visual configuration of complex business logic, low-code platforms have limitations in deep customization capabilities, and traditional development is susceptible to biases in understanding the business due to manual coding. These three types of technologies are not well adapted to complex business scenarios, resulting in low accuracy of the target business page generation results in application development. Summary of the Invention

[0006] This invention provides a page generation method, apparatus, device, and medium based on a combination of zero-code and source code to solve the problem of low accuracy in the generation results of target business pages in application development.

[0007] Firstly, a page generation method based on a combination of zero-code and source code is provided, including: Obtain the page framework to be integrated for the target business page, and split the page framework to be integrated into zero-code component units and source code development units; The zero-code component unit is configured visually according to the preset business logic, and the component configuration data corresponding to the zero-code component unit after the visual configuration is extracted. The component rendering logic of the zero-code component unit is determined based on the component configuration data, and the online component link of the zero-code component unit is generated based on the component configuration data and the component rendering logic. Load the component resource file corresponding to the online link of the component into the source code project of the source code development unit, and determine the zero-code component instance of the zero-code component unit based on the component resource file; The zero-code component instance and the functional module of the source code development unit are attached to the page framework to be integrated to obtain the target business page.

[0008] Secondly, a page generation device based on a combination of zero-code and source code is provided, including: The zero-code component unit and source code development unit splitting module is used to obtain the page framework to be integrated of the target business page and split the page framework to be integrated into a zero-code component unit and a source code development unit. The component configuration data extraction module is used to perform visual configuration of the zero-code component unit according to the preset business logic, and extract the component configuration data corresponding to the visually configured zero-code component unit. The component online link generation module is used to determine the component rendering logic of the zero-code component unit based on the component configuration data, and generate the component online link of the zero-code component unit based on the component configuration data and the component rendering logic. The zero-code component instance analysis module is used to load the component resource file corresponding to the online link of the component in the source code project of the source code development unit, and determine the zero-code component instance of the zero-code component unit based on the component resource file; The target business page generation module is used to mount the zero-code component instance and the functional module of the source code development unit to the page framework to be integrated, so as to obtain the target business page.

[0009] Thirdly, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of the page generation method based on the combination of zero code and source code described above.

[0010] Fourthly, a computer-readable storage medium is provided, which stores a computer program that, when executed by a processor, implements the steps of the page generation method based on the combination of zero code and source code described above.

[0011] In the above-described page generation method, apparatus, device, and medium based on the combination of zero-code and source code, the client can obtain the page framework to be integrated for the target business page, and split the page framework into a zero-code component unit and a source code development unit. The zero-code component unit is then visually configured according to preset business logic, and the component configuration data corresponding to the visualized zero-code component unit is extracted. The component rendering logic of the zero-code component unit is determined based on the component configuration data, and the online component link of the zero-code component unit is generated based on the component configuration data and the component rendering logic. The component resource file corresponding to the online component link is loaded into the source code project of the source code development unit, and the zero-code component implementation of the zero-code component unit is determined based on the component resource file. For example, by attaching the zero-code component instance and the functional module of the source code development unit to the page framework to be integrated, the target business page is obtained. In this invention, by splitting the page framework into zero-code and source code units, the development efficiency of simple components can be improved by utilizing the visual configuration of the zero-code platform, while the flexibility of functions can be ensured by handling complex logic through source code development. Online links for generated components enable standardized component reuse and centralized updates, and dynamic integration is achieved by loading links from the source code project. This avoids the inefficiency of traditional full-code development and the functional limitations of the zero-code platform, achieving a balance between efficiency, flexibility, and accuracy in page generation. At the same time, it lowers the technical threshold and optimizes front-end and back-end collaboration, effectively improving the development and iteration efficiency of the target business page and solving the problem of low accuracy of the target business page generation results in application development. Attached Figure Description

[0012] To more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings used in the description of the embodiments of the present invention will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0013] Figure 1 This is a schematic diagram of an application environment for a page generation method based on the combination of zero code and source code in one embodiment of the present invention; Figure 2 This is a flowchart illustrating a page generation method based on the combination of zero-code and source code in one embodiment of the present invention. Figure 3 yes Figure 2 A flowchart illustrating a specific implementation method of step S2; Figure 4 yes Figure 2 A flowchart illustrating a specific implementation method of step S3; Figure 5 This is a schematic diagram of a page generation device based on the combination of zero code and source code in one embodiment of the present invention; Figure 6 This is a schematic diagram of the structure of a computer device according to an embodiment of the present invention; Figure 7 This is another structural schematic diagram of a computer device according to one embodiment of the present invention. Detailed Implementation

[0014] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0015] The page generation method based on the combination of zero-code and source code provided in this invention can be applied to applications such as... Figure 1In this application environment, the client communicates with the server via a network. The server can obtain the page framework to be integrated from the target business page through the client, and split the page framework into zero-code component units and source code development units. It then performs visual configuration on the zero-code component units according to preset business logic and extracts the component configuration data corresponding to the visualized zero-code component units. Based on the component configuration data, it determines the component rendering logic of the zero-code component units and generates online component links for the zero-code component units based on the component configuration data and the component rendering logic. Finally, it loads the component resource files corresponding to the online component links into the source code project of the source code development unit and determines the zero-code component instances of the zero-code component units based on the component resource files. The zero-code component instance and the functional modules of the source code development unit are mounted into the page framework to be integrated to obtain the target business page. In this invention, by splitting the page framework into zero-code and source code units, the development efficiency of simple components can be improved by utilizing the visual configuration of the zero-code platform, while the flexibility of functions can be ensured by handling complex logic through source code development. Online component links are generated to achieve standardized component reuse and centralized updates, and the source code project loads links to achieve dynamic integration. This avoids the inefficiency of traditional full-code development and the functional limitations of the zero-code platform, achieving a balance between efficiency, flexibility, and accuracy in page generation. It also lowers the technical threshold and optimizes front-end and back-end collaboration, effectively improving the development and iteration efficiency of the target business page. The client can be, but is not limited to, various personal computers, laptops, smartphones, tablets, and portable wearable devices. The server can be implemented using a separate server or a server cluster composed of multiple servers. The invention will be described in detail below through specific embodiments.

[0016] Please see Figure 2 As shown, Figure 2 A flowchart illustrating a page generation method based on a combination of zero-code and source code provided in an embodiment of the present invention includes the following steps: S1. Obtain the page framework to be integrated for the target business page, and split the page framework to be integrated into zero-code component units and source code development units.

[0017] In this embodiment of the invention, the target business page refers to a specific business function page that needs to be integrated; the page framework to be integrated refers to the page structure framework of the target business page that has not yet been integrated and needs to be integrated with other systems or modules, which is used to carry the basic architecture such as page layout, components and interaction logic.

[0018] In detail, obtaining the integration framework of the target business page is the process by which developers, based on the actual needs of the project, distinguish between the relatively independent and simple interactive parts of the target business page (such as simple blocks like titles and banner carousels) and the parts containing complex business logic (such as complex blocks like multi-condition filtering and dynamic data processing). This results in an integration framework composed of different types of components, which clarifies the development methods and integration basis for each part of the page.

[0019] For example, in a medical setting, when developing a patient diagnosis page for an electronic medical record system, the page structure to be integrated for the target business page needs to be clearly defined first. The functionally independent and easily interactive blocks, such as the patient basic information display area and the standardized examination indicator entry form, should be separated from the complex logical modules involving dynamic analysis of pathological data and correlation of multi-dimensional diagnostic results, thus forming a page framework that includes basic components and complex functional modules.

[0020] For example, in a financial scenario, when developing a bank wealth management product page, the page structure to be integrated for the target business page needs to be clearly defined first. The functionally independent and easily interactive blocks such as the product basic information display area (such as static blocks such as product name, term, and yield) and standardized purchase process forms should be separated from the complex logic modules involving dynamic risk level assessment and multi-dimensional product return comparison, thus forming a page framework that includes basic components and complex functional modules.

[0021] In this embodiment of the invention, the zero-code component unit refers to the component part in the page framework to be integrated, which has relatively independent functions, simple interaction logic, and can be generated through a zero-code platform, such as static information display blocks and standardized interactive forms in the page; the source code development unit is the component part in the framework that contains complex business logic and needs to be implemented through traditional programming methods.

[0022] In detail, the page framework to be integrated is divided into zero-code component units and source code development units. Developers divide the functionally independent and simple interactive parts of the page framework into zero-code component units according to the criteria of simple and complex blocks. These units are generated through the zero-code platform. The parts containing complex business logic and requiring a large amount of data processing are divided into source code development units and implemented using traditional programming. This completes the decomposition of the page framework.

[0023] For example, in a medical setting, when developing a patient report page for a medical imaging diagnostic system, functionally independent and easily interactive blocks such as the patient basic information column and the standardized examination item list in the page framework to be integrated are broken down into zero-code component units and generated through a zero-code platform. Complex modules involving 3D reconstruction algorithms for image data and intelligent association of multimodal diagnostic results are broken down into source code development units and implemented using traditional programming, thereby completing the decomposition of the page framework.

[0024] For example, in a financial scenario, when developing a post-loan management page for a bank's credit risk control system, the independent and simple interactive blocks in the page framework to be integrated, such as the display of borrower's basic information and standardized repayment record forms, are broken down into zero-code component units and generated through a zero-code platform. Complex modules involving dynamic calculation of multi-dimensional risk indicators and a post-loan early warning rule engine are broken down into source code development units and implemented using traditional programming, thereby completing the decomposition of the page framework.

[0025] S2. Perform visual configuration on the zero-code component unit according to the preset business logic, and extract the component configuration data corresponding to the zero-code component unit after visual configuration.

[0026] In this embodiment of the invention, the preset business logic refers to the functional rules and interaction logic that the zero-code component unit needs to implement, which is determined in advance by the developer according to the actual needs of the project. Specifically, it includes the static display logic of the component, the basic form interaction, the processing logic of simple business scenarios such as standardized UI operations. These logics do not need to be written through complex code and can be completed by visual configuration of the zero-code platform.

[0027] In detail, on the zero-code platform, for zero-code component units, after determining whether they are simple blocks such as static display types or standardized interactive components (such as basic forms and buttons) based on preset business logic, the corresponding components can be dragged and dropped through the platform's visual tools and their styles, data, and basic interactive logic can be configured, so as to change the traditional form of generating pages to the form of generating components to complete the visual configuration.

[0028] For example, in a medical scenario, the basic drug information display area is divided into zero-code component units. Based on the business logic of inventory counting, developers can visually configure static display fields such as drug name, specifications, and batch number, as well as basic form components for inventory quantity on the zero-code platform. By dragging and dropping components and configuring styles and data associations, the basic drug information display module can be quickly generated.

[0029] For example, in a financial scenario, the basic information display area for wealth management products is divided into zero-code component units. Developers, based on the business logic of the wealth management product display, can visually configure static display fields such as product name, yield, and term, as well as the basic form component for the minimum investment amount, on the zero-code platform. By dragging and dropping components and configuring styles and data associations, they can quickly generate the basic information display module for wealth management products.

[0030] In this embodiment of the invention, the component configuration data refers to the parameter set generated after configuring the component through the zero-code platform visualization tool. It includes component type (such as static text, form input box), style attributes (color, size, layout), data association rules (bound data source fields, data mapping relationship), basic interaction logic (button click event triggered operation, form submission rules), and structured information such as the component's position coordinates on the page. This data is stored in JSON or a specific configuration file format and is used to describe the component's display form and basic functional logic.

[0031] In this embodiment of the invention, reference is made to Figure 3 As shown, the component configuration data corresponding to the zero-code component unit after extracting the visualization configuration includes: S31. Perform structured parsing on the configuration content of the zero-code component unit after visualization configuration to obtain the basic data set; S32. Determine the component structure data of the zero-code component unit based on the component type identifier and attribute parameter information in the basic data set; S33. Analyze the interaction configuration and style configuration of the zero-code component unit, and determine the component behavior data of the zero-code component unit according to the event triggering conditions in the interaction configuration and the visual presentation rules in the style configuration; S34. The component structure data and the component behavior data are associated and fused to obtain the component configuration data corresponding to the zero-code component unit.

[0032] In detail, the basic data set is a basic data aggregate containing the original configuration elements of the components, obtained by structurally parsing the configuration content of the zero-code component units after visualization configuration; the component type identifier is an identifier in the basic data set used to represent the component category to which the zero-code component unit belongs (such as type labels for buttons, text boxes, etc.); the attribute parameter information is the specific parameters and corresponding values ​​(such as size, color, interactive events, etc.) in the basic data set that describe the characteristics of the component's appearance, behavior, and functions; the component structure data is structured data (such as component hierarchy relationships, structured descriptions required for rendering, etc.) further determined based on the component type identifier and attribute parameter information in the basic data set, used to define the internal composition structure, rendering strategy, and operating logic of the zero-code component unit.

[0033] Specifically, the configuration content of the zero-code component unit after visualization configuration is subjected to structured parsing in accordance with preset rules. The data is extracted and integrated to form a basic data set containing the original configuration elements of the component. This set contains component type identifiers that represent the component category and attribute parameter information that describes the characteristics of the component. Based on the component type identifiers and attribute parameter information in the basic data set, the type identifiers are mapped to the corresponding component constructors, and component structure data that defines the internal composition structure, rendering strategy and running logic of the component is generated in combination with the attribute parameters.

[0034] Furthermore, the interaction configuration is the setting content in the zero-code component unit regarding the way users interact with the component; the style configuration is the setting content regarding the visual appearance of the component; the event triggering condition is the specific situation that triggers the component's interactive behavior as specified in the interaction configuration; the visual presentation rule is the standard for the presentation of the component's visual effect as defined in the style configuration; and the component behavior data is a comprehensive data that describes how the component presents visual effects and performs corresponding behaviors under interactive operations, determined by parsing the interaction configuration and style configuration, based on the event triggering conditions and visual presentation rules therein.

[0035] Furthermore, the interaction configuration and style configuration of the zero-code component unit are analyzed to extract the event triggering conditions in the interaction configuration and the visual presentation rules in the style configuration. Based on these conditions and rules, the component behavior data is determined. Then, the determined component structure data and component behavior data are associated and integrated to combine the information of the two, thereby obtaining the component configuration data corresponding to the zero-code component unit.

[0036] S3. Determine the component rendering logic of the zero-code component unit based on the component configuration data, and generate the component online link of the zero-code component unit based on the component configuration data and the component rendering logic.

[0037] In this embodiment of the invention, the component rendering logic refers to the entire process and logic rules for determining the construction method, display form, dynamic update mechanism, and interactive response rules of the zero-code component unit on the interface based on the provided component configuration data. Its core is to transform the configuration data into specific interface rendering behaviors and component running logic.

[0038] In this embodiment of the invention, determining the component rendering logic of the zero-code component unit based on the component configuration data includes: Extract the component type string and attribute configuration information from the component configuration data respectively; The component constructor corresponding to the component type string is generated using a preset component registration mechanism; Based on the component constructor and the attribute configuration information, generate the component rendering unit corresponding to the component type string; Bind the event handling function in the attribute configuration information to the component rendering unit, perform component configuration verification on the bound component rendering unit, and obtain the component rendering instance; The component rendering logic of the zero-code component unit is determined based on the component rendering instance.

[0039] In detail, the component type string is a string used to identify the component category and specify the type of component to be created; the attribute configuration information is a set of parameters describing the component's appearance, behavior, and other characteristics and is used to define the component's specific behavior; the preset component registration mechanism is a system-predefined mapping registration rule between component types and constructors, used to establish the association between the component type string and the corresponding creation logic; the component constructor is a function used to instantiate the component, which generates a specific component instance by receiving the attribute configuration information, and realizes the component's initialization and construction.

[0040] Specifically, the component type string representing the component category and the attribute configuration information containing parameters such as component appearance and behavior are separated from the component configuration data. With the help of a pre-established component registration mechanism that maintains the mapping relationship between component type and creation logic, a component constructor that matches the component type string is retrieved and generated. This constructor can be used to instantiate the component and inject the corresponding attribute configuration information.

[0041] Furthermore, a component rendering unit is a renderable basic unit generated based on the component constructor and property configuration information, used to describe the component structure and initial state; an event handling function is a function logic defined in the property configuration information, used to respond to component interaction events (such as clicks, inputs, etc.); a component rendering instance is the final renderable component entity after the event handling function is bound to the component rendering unit and the configuration verification ensures that the property and event bindings are legal and valid.

[0042] Furthermore, based on the component constructor and property configuration information, a component rendering unit is generated by calling the constructor and passing in the property configuration; event handling functions are extracted from the property configuration information and bound to the corresponding events of the component rendering unit; at the same time, the bound rendering unit is verified for property integrity, type validity, and other configurations to obtain a component rendering instance that meets the requirements; based on the structure, methods, and bound event logic of the component rendering instance, the specific execution flow and rules of the zero-code component unit during interface rendering are determined, i.e., the component rendering logic.

[0043] In this embodiment of the invention, the online component link refers to a unique link address of a component instance that can be accessed via the network, generated based on component configuration data and component rendering logic. This link points to an online running instance of the component that has completed configuration verification, event binding, and other processing and has been rendered.

[0044] In this embodiment of the invention, reference is made to Figure 4 As shown, the step of generating the online link of the zero-code component unit based on the component configuration data and the component rendering logic includes: S41. Dynamically integrate the component configuration data with the component rendering logic to obtain the rendering result of the zero-code component unit; S42. Package the rendering results using a pre-built general module definition format to obtain a general module component package; S43. Generate online component links for the zero-code component unit based on the general module component package.

[0045] In detail, the rendering result is the final visual presentation of the component obtained by dynamically integrating the component configuration data and the component rendering logic; the pre-built general module definition format is a standardized template set before project development to standardize the component module structure and export method, and to unify the organization of component code; the general module component package is a reusable component unit formed by packaging the code, resources, configuration, etc. related to the rendering result according to the standardized format, containing all the contents required for component operation so as to be deployed and used in different project environments.

[0046] Specifically, the component configuration data and component rendering logic are dynamically integrated for rendering, so that the component type, attributes, and events in the configuration data are merged with the display interaction rules defined in the rendering logic to obtain the rendering result of the zero-code component unit. The code, resources, and configuration related to the rendering result are packaged using a pre-built general module definition format to form a general module component package containing the contents required for the complete operation of the component. Based on the deployment information and access rules of the components in the general module component package, an online link of the zero-code component unit that can be accessed through the network is generated. This link points to the online running instance address of the packaged component.

[0047] S4. Load the component resource file corresponding to the online link of the component into the source code project of the source code development unit, and determine the zero-code component instance of the zero-code component unit according to the component resource file.

[0048] In this embodiment of the invention, the source code project refers to a complete project structure consisting of source code files, configuration files, dependencies, etc., used to organize and manage various code resources in the software development process and support project compilation and building; the component resource file refers to a collection of non-code resources required for component operation, including but not limited to style files, script files, image materials, etc., which can provide the static resource support required for component runtime after being loaded through online links.

[0049] In this embodiment of the invention, loading the component resource file corresponding to the online link of the component into the source code project of the source code development unit includes: The loading carrier corresponding to the online link of the component is generated dynamically through a preset script tag creation method; The loading carrier is used to load the general module format file of the online link of the component through a network request to obtain the component resource data; Mount the component resource object corresponding to the component resource data to the preset global window object of the browser; Based on the project activity identifier of the source code project, the component resource file corresponding to the online link of the component is parsed from the global window object.

[0050] In detail, the preset dynamic creation method of script tags refers to the pre-defined method of dynamically generating tags via JavaScript. <script>标签的方法；加载载体即通过该方式创建的<script>标签，用于承载网络资源加载功能；通用模块格式文件是遵循标准化模块规范的组件文件；组件资源数据是通过网络请求从该文件中获取并解析出的组件相关代码、样式、配置等资源信息。

[0051] 具体地，通过使用预先设定好的动态创建脚本标签的方式生成用于加载组件资源的载体（即动态创建的script标签），再借助该载体向组件在线链接对应的通用模块格式文件发起网络请求加载操作，从而获取到包含组件功能代码、样式等内容的组件资源数据。

[0052] 进一步地，组件资源对象是将组件资源数据转换为可操作的对象形式（如包含组件逻辑、样式、配置等信息的JavaScript对象）；预设的浏览器的全局窗口对象是浏览器环境中默认存在的顶级全局对象（window），用于存储可全局访问的数据；项目活动标识是源码工程中用于唯一标识特定项目活动或模块的标识符（如字符串、编号等），用于从全局窗口对象中定位对应组件资源。

[0053] 更进一步地，将组件资源数据转换为组件资源对象后，把该对象作为属性添加到浏览器默认的window全局窗口对象中，再依据源码工程里用于标识项目活动的唯一标识符，从全局窗口对象中查找并提取出与组件在线链接对应的组件资源文件。

[0054] 本发明实施例中，所述零码组件实例是依据组件资源文件中包含的组件定义、配置或代码等内容，在零码组件单元中生成的可直接使用的具体组件实例。

[0055] 本发明实施例中，所述根据所述组件资源文件确定所述零码组件单元的零码组件实例，包括：对所述组件资源文件进行标准化校验解析，得到标准化组件资源集合；分别提取所述标准化组件资源集合中每个组件的组件元信息和依赖关系，根据所述组件元信息和所述依赖关系生成每个组件的实例化环境参数；通过预设的动态映射引擎将所述组件元信息中的组件信息标识转换为所述零码组件单元的组件构造指令；根据所述组件构造指令和所述实例化环境参数确定所述零码组件单元的生命周期管理单元；根据所述生命周期管理单元对所述组件构造指令进行实例化组装，得到所述零码组件单元的零码组件实例。

[0056] 详细地，标准化组件资源集合是对组件资源文件进行符合既定规范的校验与解析后得到的结构化资源组合（如按统一格式整理的组件代码、样式等资源）；组件元信息是描述组件基本属性的信息（如组件名称、版本、标识、功能定义等）；依赖关系指组件运行时所需依赖的其他组件、模块或资源及其关联关系（如依赖的组件路径、版本约束等）；实例化环境参数是根据组件元信息和依赖关系生成的用于创建组件实例的环境配置数据（如依赖解析规则、运行时参数、上下文环境标识等）。

[0057] 具体地，对组件资源文件按预设标准规范进行校验与解析（如语法检查、格式转换、结构验证等），将其转化为符合统一标准的标准化组件资源集合，从该集合中逐个提取每个组件的基本描述信息（即组件元信息）及所需外部资源的关联关系（即依赖关系），基于提取的组件元信息和依赖关系计算生成各组件实例化所需的环境配置数据（即实例化环境参数）。

[0058] 进一步地，预设的动态映射引擎是预先部署的具备动态转换逻辑的处理模块，内部封装了组件信息标识与构造指令的映射规则，可基于规则将输入信息转换为目标指令格式；组件信息标识是组件元信息中用于唯一表征组件身份的特征数据，通常包括组件 ID、类型编码、版本号等唯一性标识字段；组件构造指令是由动态映射引擎生成的组件实例化操作指令集，包含组件创建所需的参数配置、结构定义和初始化逻辑；生命周期管理单元是零码组件单元中负责管理组件全生命周期的功能模块，基于组件构造指令和实例化环境参数，集成了组件初始化、挂载、更新、卸载等各阶段的处理逻辑。

[0059] 更进一步地，通过预设的动态映射引擎按照预定义的映射规则将组件元信息里的组件信息标识转换为零码组件单元可执行的组件构造指令，依据该组件构造指令和实例化环境参数确定零码组件单元中负责管理组件生命周期各阶段的生命周期管理单元，由该生命周期管理单元依据组件构造指令中定义的结构、参数和初始化逻辑进行组件实例化组装操作，从而得到零码组件单元的零码组件实例。

[0060] S5、将所述零码组件实例与所述源码开发单元的功能模块挂载至所述待集成页面框架中，得到目标业务页面。

[0061] 本发明实施例中，所述功能模块指通过传统编程方式实现的复杂业务逻辑处理、高级交互功能或特殊算法实现单元（如多条件筛选商品列表、动态数据查询模块）；所述目标业务页面是将零码平台生成的组件实例（如标题、Banner等简单区块）与源码开发的功能模块，按业务逻辑挂载至待集成页面框架后形成的完整业务页面（如商城首页、产品详情页）。

[0062] 本发明实施例中，所述将所述零码组件实例与所述源码开发单元的功能模块挂载至所述待集成页面框架中，得到目标业务页面，包括：对所述零码组件实例的接口定义数据和所述源码开发单元的功能模块中的功能接口进行协议解析，得到挂载配置数据；根据所述待集成页面框架的路由结构和渲染策略确定所述零码组件实例的挂载节点位置和所述源码开发单元的功能模块的逻辑调用入口；在所述挂载节点位置执行组件实例化挂载操作，得到组件运行实例，以及在所述逻辑调用入口执行模块初始化操作，得到所述源码开发单元的功能模块的模块初始化实体；将所述挂载配置数据中的组件通信参数与预设的源码模块调用规则进行映射关联，得到双向通信映射关系；将所述组件运行实例和所述模块初始化实体进行数据链路校验，得到数据链路授权标识；根据所述数据链路授权标识对所述双向通信映射关系中的事件触发规则与所述待集成页面框架中的事件处理机制进行动态集成绑定，得到目标业务页面。

[0063] 详细地，接口定义数据是零码组件实例对其对外接口的参数、协议等规范的定义数据；功能接口是源码开发单元的功能模块中实现具体功能的可调用接口；挂载配置数据是对接口定义数据和功能接口进行协议解析后得到的用于确定挂载方式的配置信息；路由结构是待集成页面框架中定义的页面路由跳转与组织架构；渲染策略是页面框架规定的元素渲染布局、显示逻辑等规则；挂载节点位置是根据路由结构和渲染策略确定的零码组件实例在页面框架中挂载的具体位置（如DOM节点位置）；逻辑调用入口是根据路由结构和渲染策略确定的源码开发单元功能模块的功能接口在页面框架中的逻辑触发与调用起点。

[0064] 具体地，对零码组件实例的接口定义数据和源码开发单元功能模块中的功能接口进行协议解析，以明确两者交互的协议规则，从而得到用于指导挂载方式的挂载配置数据，同时依据待集成页面框架的路由结构和渲染策略，分析确定零码组件实例在页面框架中具体的挂载节点位置以及源码开发单元功能模块的功能接口在页面框架中的逻辑调用入口。

[0065] 进一步地，组件运行实例是在挂载节点位置完成组件实例化挂载操作后得到的可运行的零码组件实例；模块初始化实体是在逻辑调用入口执行模块初始化操作后得到的源码开发单元功能模块的初始化功能实体；组件通信参数是挂载配置数据中用于定义组件间通信规则的参数信息；预设的源码模块调用规则是预先设定的关于源码模块调用方式、参数传递等的规范准则；双向通信映射关系是将组件通信参数与源码模块调用规则进行映射关联后形成的支持双向数据交互的对应关系。

[0066] 更进一步地，数据链路授权标识是对组件运行实例和模块初始化实体进行数据链路校验后生成的用于确认数据交互合法性的授权凭证；事件触发规则是双向通信映射关系中定义的触发事件的条件与逻辑，如用户操作、数据变化等触发场景的规则设定；事件处理机制是待集成页面框架中预设的对事件进行捕获、解析及响应处理的系统性机制，用于对接收到的事件执行相应的处理逻辑。

[0067] 此外，在挂载节点位置执行组件实例化挂载操作以生成零码组件实例的组件运行实例，同时在逻辑调用入口执行模块初始化操作得到源码开发单元功能模块的模块初始化实体；将挂载配置数据里的组件通信参数与预设的源码模块调用规则进行映射关联，从而形成双向通信映射关系；对组件运行实例和模块初始化实体开展数据链路校验，生成用于确认数据交互合法性的数据链路授权标识；依据该数据链路授权标识，把双向通信映射关系中的事件触发规则与待集成页面框架的事件处理机制进行动态集成绑定，最终构建出目标业务页面。

[0068] 可见，在上述方案中，通过拆分页面框架为零码与源码单元，既能利用零码平台可视化配置提升简单组件开发效率，又通过源码开发处理复杂逻辑保证功能灵活性，生成组件在线链接实现标准化组件复用与中心化更新，源码工程加载链接实现动态集成，避免传统开发全代码编写的低效与零码平台的功能局限，使页面生成在效率、灵活性及准确性间达成平衡，同时降低技术门槛并优化前后端协作，有效提升目标业务页面开发与迭代效率。

[0069] 应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。

[0070] 在一实施例中，提供一种基于零码与源码结合的页面生成装置，该基于零码与源码结合的页面生成装置与上述实施例中基于零码与源码结合的页面生成方法一一对应。如图5所示，该基于零码与源码结合的页面生成装置100包括零码组件单元与源码开发单元拆分模块101、组件配置数据提取模块102、组件在线链接生成模块103、零码组件实例分析模块104和目标业务页面生成模块105。各功能模块详细说明如下：零码组件单元与源码开发单元拆分模块101，用于获取目标业务页面的待集成页面框架，将所述待集成页面框架拆分为零码组件单元与源码开发单元；组件配置数据提取模块102，用于根据预设的业务逻辑对所述零码组件单元进行可视化配置，并提取可视化配置后的零码组件单元对应的组件配置数据；组件在线链接生成模块103，用于根据所述组件配置数据确定所述零码组件单元的组件渲染逻辑，根据所述组件配置数据和所述组件渲染逻辑生成所述零码组件单元的组件在线链接；零码组件实例分析模块104，用于在所述源码开发单元的源码工程中加载所述组件在线链接对应的组件资源文件，根据所述组件资源文件确定所述零码组件单元的零码组件实例；目标业务页面生成模块105，用于将所述零码组件实例与所述源码开发单元的功能模块挂载至所述待集成页面框架中，得到目标业务页面。

[0071] 在一实施例中，组件配置数据提取模块102，在执行提取可视化配置后的零码组件单元对应的组件配置数据时，用于：对可视化配置后的零码组件单元的配置内容进行结构化解析，得到基础数据集合；根据所述基础数据集合中的组件类型标识和属性参数信息确定所述零码组件单元的组件结构数据；解析所述零码组件单元的交互配置和样式配置，根据所述交互配置中的事件触发条件和所述样式配置中的视觉呈现规则确定所述零码组件单元的组件行为数据；将所述组件结构数据与所述组件行为数据进行关联融合，得到所述零码组件单元对应的组件配置数据。

[0072] 在一实施例中，组件在线链接生成模块103，在执行根据所述组件配置数据确定所述零码组件单元的组件渲染逻辑时，用于：分别提取所述组件配置数据中的组件类型字符串和属性配置信息；利用预设的组件注册机制生成所述组件类型字符串对应的组件构造函数；根据所述组件构造函数和所述属性配置信息，生成所述组件类型字符串对应的组件渲染单元；将所述属性配置信息中的事件处理函数绑定至所述组件渲染单元中，对绑定后的组件渲染单元进行组件配置验证，得到组件渲染实例；根据所述组件渲染实例确定所述零码组件单元的组件渲染逻辑。

[0073] 在一实施例中，组件在线链接生成模块103，在执行根据所述组件配置数据和所述组件渲染逻辑生成所述零码组件单元的组件在线链接时，还用于：将所述组件配置数据与所述组件渲染逻辑进行动态渲染整合，得到所述零码组件单元的渲染结果；利用预先构建的通用模块定义格式对所述渲染结果进行打包处理，得到通用模块组件包；根据所述通用模块组件包生成所述零码组件单元的组件在线链接。

[0074] 在一实施例中，零码组件实例分析模块104，在执行在所述源码开发单元的源码工程中加载所述组件在线链接对应的组件资源文件时，用于：通过预设的脚本标签动态创建方式生成所述组件在线链接对应的加载载体；利用所述加载载体对所述组件在线链接的通用模块格式文件进行网络请求加载，得到组件资源数据；将所述组件资源数据对应的组件资源对象挂载至预设的浏览器的全局窗口对象中；根据所述源码工程的项目活动标识从所述全局窗口对象中解析出所述组件在线链接对应的组件资源文件。

[0075] 在一实施例中，零码组件实例分析模块104，在执行根据所述组件资源文件确定所述零码组件单元的零码组件实例时，还用于：对所述组件资源文件进行标准化校验解析，得到标准化组件资源集合；分别提取所述标准化组件资源集合中每个组件的组件元信息和依赖关系，根据所述组件元信息和所述依赖关系生成每个组件的实例化环境参数；通过预设的动态映射引擎将所述组件元信息中的组件信息标识转换为所述零码组件单元的组件构造指令；根据所述组件构造指令和所述实例化环境参数确定所述零码组件单元的生命周期管理单元；根据所述生命周期管理单元对所述组件构造指令进行实例化组装，得到所述零码组件单元的零码组件实例。

[0076] 在一实施例中，目标业务页面生成模块105，在执行将所述零码组件实例与所述源码开发单元的功能模块挂载至所述待集成页面框架中，得到目标业务页面时，用于：对所述零码组件实例的接口定义数据和所述源码开发单元的功能模块中的功能接口进行协议解析，得到挂载配置数据；根据所述待集成页面框架的路由结构和渲染策略确定所述零码组件实例的挂载节点位置和所述源码开发单元的功能模块的逻辑调用入口；在所述挂载节点位置执行组件实例化挂载操作，得到组件运行实例，以及在所述逻辑调用入口执行模块初始化操作，得到所述源码开发单元的功能模块的模块初始化实体；将所述挂载配置数据中的组件通信参数与预设的源码模块调用规则进行映射关联，得到双向通信映射关系；将所述组件运行实例和所述模块初始化实体进行数据链路校验，得到数据链路授权标识；根据所述数据链路授权标识对所述双向通信映射关系中的事件触发规则与所述待集成页面框架中的事件处理机制进行动态集成绑定，得到目标业务页面。

[0077] 本发明提供了一种基于零码与源码结合的页面生成装置，通过拆分页面框架为零码与源码单元，既能利用零码平台可视化配置提升简单组件开发效率，又通过源码开发处理复杂逻辑保证功能灵活性，生成组件在线链接实现标准化组件复用与中心化更新，源码工程加载链接实现动态集成，避免传统开发全代码编写的低效与零码平台的功能局限，使页面生成在效率、灵活性及准确性间达成平衡，同时降低技术门槛并优化前后端协作，有效提升目标业务页面开发与迭代效率。

[0078] 关于基于零码与源码结合的页面生成装置的具体限定可以参见上文中对于基于零码与源码结合的页面生成方法的限定，在此不再赘述。上述基于零码与源码结合的页面生成装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

[0079] 在一个实施例中，提供了一种计算机设备，该计算机设备可以是服务端，其内部结构图可以如图6所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性和 / 或易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部的客户端通过网络连接通信。该计算机程序被处理器执行时以实现一种基于零码与源码结合的页面生成方法服务端侧的功能或步骤。

[0080] 在一个实施例中，提供了一种计算机设备，该计算机设备可以是客户端，其内部结构图可以如图7所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部服务器通过网络连接通信。该计算机程序被处理器执行时以实现一种基于零码与源码结合的页面生成方法客户端侧的功能或步骤。

[0081] 在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现以下步骤：获取目标业务页面的待集成页面框架，将所述待集成页面框架拆分为零码组件单元与源码开发单元；根据预设的业务逻辑对所述零码组件单元进行可视化配置，并提取可视化配置后的零码组件单元对应的组件配置数据；根据所述组件配置数据确定所述零码组件单元的组件渲染逻辑，根据所述组件配置数据和所述组件渲染逻辑生成所述零码组件单元的组件在线链接；在所述源码开发单元的源码工程中加载所述组件在线链接对应的组件资源文件，根据所述组件资源文件确定所述零码组件单元的零码组件实例；将所述零码组件实例与所述源码开发单元的功能模块挂载至所述待集成页面框架中，得到目标业务页面。

[0082] 在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：获取目标业务页面的待集成页面框架，将所述待集成页面框架拆分为零码组件单元与源码开发单元；根据预设的业务逻辑对所述零码组件单元进行可视化配置，并提取可视化配置后的零码组件单元对应的组件配置数据；根据所述组件配置数据确定所述零码组件单元的组件渲染逻辑，根据所述组件配置数据和所述组件渲染逻辑生成所述零码组件单元的组件在线链接；在所述源码开发单元的源码工程中加载所述组件在线链接对应的组件资源文件，根据所述组件资源文件确定所述零码组件单元的零码组件实例；将所述零码组件实例与所述源码开发单元的功能模块挂载至所述待集成页面框架中，得到目标业务页面。

[0083] 需要说明的是，上述关于计算机可读存储介质或计算机设备所能实现的功能或步骤，可对应参阅前述方法实施例中，服务端侧以及客户端侧的相关描述，为避免重复，这里不再一一描述。

[0084] 本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和 / 或易失性存储器。非易失性存储器可包括只读存储器（ROM）、可编程ROM（PROM）、电可编程ROM（EPROM）、电可擦除可编程ROM（EEPROM）或闪存。易失性存储器可包括随机存取存储器（RAM）或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM（SRAM）、动态RAM（DRAM）、同步DRAM（SDRAM）、双数据率SDRAM（DDRSDRAM）、增强型SDRAM（ESDRAM）、同步链路（Synchlink） DRAM（SLDRAM）、存储器总线（Rambus）直接RAM（RDRAM）、直接存储器总线动态RAM（DRDRAM）、以及存储器总线动态RAM（RDRAM）等。

[0085] 所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。

[0086] 应当说明的是，本申请实施例中若出现了非本公司的软件工具或组件，仅仅是用于举例介绍，并不代表实际使用。

[0087] 以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。< / script>

Claims

1. A page generation method based on a combination of zero-code and source code, characterized in that, include: Obtain the page framework to be integrated for the target business page, and split the page framework to be integrated into zero-code component units and source code development units; The zero-code component unit is configured visually according to the preset business logic, and the component configuration data corresponding to the zero-code component unit after the visual configuration is extracted. The component rendering logic of the zero-code component unit is determined based on the component configuration data, and the online component link of the zero-code component unit is generated based on the component configuration data and the component rendering logic. In the source code project of the source code development unit, load the component resource file corresponding to the online link of the component, and determine the zero-code component instance of the zero-code component unit based on the component resource file; The zero-code component instance and the functional module of the source code development unit are attached to the page framework to be integrated to obtain the target business page.

2. The page generation method based on the combination of zero-code and source code as described in claim 1, characterized in that, The component configuration data corresponding to the zero-code component unit after extracting the visualization configuration includes: The configuration content of the zero-code component unit after visualization configuration is parsed in a structured manner to obtain the basic data set; The component structure data of the zero-code component unit is determined based on the component type identifier and attribute parameter information in the basic data set; The interaction configuration and style configuration of the zero-code component unit are analyzed, and the component behavior data of the zero-code component unit is determined according to the event triggering conditions in the interaction configuration and the visual presentation rules in the style configuration. The component structure data and the component behavior data are correlated and fused to obtain the component configuration data corresponding to the zero-code component unit.

3. The page generation method based on the combination of zero-code and source code as described in claim 1, characterized in that, The component rendering logic for determining the zero-code component unit based on the component configuration data includes: Extract the component type string and attribute configuration information from the component configuration data respectively; The component constructor corresponding to the component type string is generated using a preset component registration mechanism; Based on the component constructor and the attribute configuration information, generate the component rendering unit corresponding to the component type string; Bind the event handling function in the attribute configuration information to the component rendering unit, perform component configuration verification on the bound component rendering unit, and obtain the component rendering instance; The component rendering logic of the zero-code component unit is determined based on the component rendering instance.

4. The page generation method based on the combination of zero-code and source code as described in claim 1, characterized in that, The step of generating the online link for the zero-code component unit based on the component configuration data and the component rendering logic includes: The component configuration data and the component rendering logic are dynamically integrated to obtain the rendering result of the zero-code component unit; The rendering results are packaged using a pre-built generic module definition format to obtain a generic module component package; The online link of the zero-code component unit is generated based on the general module component package.

5. The page generation method based on the combination of zero-code and source code as described in claim 1, characterized in that, The step of loading the component resource file corresponding to the online link of the component into the source code project of the source code development unit includes: The loading carrier corresponding to the online link of the component is generated dynamically through a preset script tag creation method; The loading carrier is used to load the general module format file of the online link of the component through a network request to obtain the component resource data; Mount the component resource object corresponding to the component resource data to the preset global window object of the browser; Based on the project activity identifier of the source code project, the component resource file corresponding to the online link of the component is parsed from the global window object.

6. The page generation method based on the combination of zero-code and source code as described in claim 1, characterized in that, The step of determining the zero-code component instance of the zero-code component unit based on the component resource file includes: The component resource files are subjected to standardized verification and parsing to obtain a standardized set of component resources; Extract the component meta-information and dependencies of each component in the standardized component resource set, and generate instantiation environment parameters for each component based on the component meta-information and dependencies; The component information identifier in the component meta-information is converted into the component construction instruction of the zero-code component unit through a preset dynamic mapping engine. The lifecycle management unit of the zero-code component unit is determined based on the component construction instructions and the instantiation environment parameters; The component construction instructions are instantiated and assembled according to the lifecycle management unit to obtain the zero-code component instance of the zero-code component unit.

7. The page generation method based on the combination of zero-code and source code as described in claim 1, characterized in that, The step of attaching the zero-code component instance and the functional module of the source code development unit to the page framework to be integrated to obtain the target business page includes: Protocol parsing is performed on the interface definition data of the zero-code component instance and the functional interfaces in the functional modules of the source code development unit to obtain the mounting configuration data; The mounting node position of the zero-code component instance and the logical call entry point of the functional module of the source code development unit are determined based on the routing structure and rendering strategy of the page framework to be integrated. Component instantiation and mounting operations are performed at the mounting node location to obtain a component running instance, and module initialization operations are performed at the logical call entry point to obtain the module initialization entity of the functional module of the source code development unit; The component communication parameters in the mounting configuration data are mapped and associated with the preset source code module calling rules to obtain a bidirectional communication mapping relationship; Perform data link verification on the component runtime instance and the module initialization entity to obtain the data link authorization identifier; Based on the data link authorization identifier, the event triggering rules in the bidirectional communication mapping relationship are dynamically integrated and bound with the event handling mechanism in the page framework to be integrated, thereby obtaining the target business page.

8. A page generation device based on a combination of zero-code and source code, characterized in that, include: The zero-code component unit and source code development unit splitting module is used to obtain the page framework to be integrated of the target business page and split the page framework to be integrated into a zero-code component unit and a source code development unit. The component configuration data extraction module is used to perform visual configuration of the zero-code component unit according to the preset business logic, and extract the component configuration data corresponding to the visually configured zero-code component unit. The component online link generation module is used to determine the component rendering logic of the zero-code component unit based on the component configuration data, and generate the component online link of the zero-code component unit based on the component configuration data and the component rendering logic. The zero-code component instance analysis module is used to load the component resource file corresponding to the online link of the component in the source code project of the source code development unit, and determine the zero-code component instance of the zero-code component unit based on the component resource file; The target business page generation module is used to mount the zero-code component instance and the functional module of the source code development unit to the page framework to be integrated, so as to obtain the target business page.

9. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the page generation method based on the combination of zero code and source code as described in any one of claims 1 to 7.

10. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by the processor, it implements the page generation method based on the combination of zero code and source code as described in any one of claims 1 to 7.

Images