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

Abstract

The invention provides a page dynamic generation method and device, electronic equipment and a storage medium, and the method comprises the steps: configuring an optional component for each configurable region in a page in advance, and in the page configuration process of a first user, pulling the optional component corresponding to a target item for display after the first user selects the target item, the first user can select the target component needing to be displayed in the target page based on the displayed selectable component, and dynamically load the target component in the actual page loading process to generate the target page. Through the pre-page configuration, the method does not need to depend on a traditional development process in a page change scene, so that rapid updating and adjustment are realized, and the network page generation efficiency is improved. In addition, page change can take effect in real time, the system does not need to be online again, the risk of system instability caused by the traditional online process is completely avoided, and the page change stability is improved.

Description

Technical Field

[0001] The present invention relates to the technical field of network page generation, and in particular to a page dynamic generation method, device, electronic equipment and storage medium. Background Art

[0002] During the daily R&D process, when business requirements change or updated requirements require adjustments to web pages, a series of development and testing tasks typically occur. First, the product or requirements team communicates the requirement changes to the R&D team, detailing the specific content and objectives of the additions or changes. Next, the R&D team conducts secondary development on the existing code to ensure that the page modules are adjusted and optimized to meet the new requirements. After development is complete, the testing team develops test cases based on the requirements changes and performs functional testing to ensure that the modified page modules meet business requirements, operate properly, and are free of new defects.

[0003] The demand delivery process often involves the collaboration of multiple links and teams. The processes of demand communication, solution design, development and implementation, and testing and verification are gradually advanced, resulting in a long overall delivery time. Furthermore, the investment of personnel and resources is distributed across different stages, forming a long investment chain, which makes the response speed of demand relatively slow.

[0004] It can be seen that current business demands need to go through a long process of development, testing, approval, etc. before they can be officially launched. It is impossible to achieve rapid release and instant feedback, resulting in slow page generation efficiency. Summary of the Invention

[0005] In view of this, embodiments of the present invention provide a method, device, electronic device, and storage medium for dynamically generating a page to improve page generation efficiency.

[0006] According to one aspect of the present invention, a method for dynamically generating a page is provided, the method comprising:

[0007] receiving a page configuration request, wherein the page configuration request includes target project information;

[0008] Obtaining and displaying a candidate component set corresponding to the target project information, wherein the candidate component set includes a plurality of optional components corresponding to each preset configurable area;

[0009] Determining target components corresponding to the preset configurable areas based on a selection operation of the first user on the displayed candidate component set, and storing the target components in correspondence with the target project information;

[0010] When a page generation request is received, each target component corresponding to the target project information is loaded, and each target component is rendered using style data corresponding to the target component to generate a target page.

[0011] In a possible embodiment, each candidate component set is generated in advance by the following steps:

[0012] Configure multiple optional components corresponding to each preset configurable area;

[0013] Generate, using a component compiler, an optional component in a UMD format corresponding to each of the optional components;

[0014] Uploading each optional component in the UMD format to the CDN, and storing the CDN address of each optional component in the UMD format in correspondence with the project information; and,

[0015] Each optional component in the UMD format is stored in the NPM private server of the corresponding project according to a preset naming specification, wherein the preset naming specification includes a component identifier and a style identifier of the optional component.

[0016] In a possible embodiment, the step of storing the target component and the target project information in correspondence with each other includes:

[0017] Using the CDN address of the target component as the target configuration information of the target project;

[0018] The method further comprises:

[0019] The target configuration information is transmitted to a backend server so that the backend server adds the target configuration information to the target project information.

[0020] In a possible embodiment, the loading of each target component corresponding to the target project information, and rendering each target component using style data corresponding to the target component to generate a target page includes:

[0021] Based on the target configuration information in the target project information, insert the CDN address of the target component in the UMD format into the target page;

[0022] Generate a module instance based on the target component and its corresponding style identifier;

[0023] The module instance is called, and the target page is rendered based on the node information of the preset configurable area corresponding to the target component to generate the target page.

[0024] According to another aspect of the present invention, a device for dynamically generating a page is provided, the device comprising:

[0025] A receiving module, configured to receive a page configuration request, wherein the page configuration request includes target project information;

[0026] An acquisition module, configured to acquire and display a set of candidate components corresponding to the target project information, wherein the set of candidate components includes a plurality of optional components corresponding to each preset configurable area;

[0027] a storage module, configured to determine, based on a selection operation of the first user on the displayed candidate component set, a target component corresponding to each of the preset configurable areas, and store the target component in correspondence with the target project information;

[0028] The generation module is used to load each target component corresponding to the target project information when receiving a page generation request, and render each target component using style data corresponding to the target component to generate a target page.

[0029] In a possible embodiment, each candidate component set is generated in advance by the following steps:

[0030] Configure multiple optional components corresponding to each preset configurable area;

[0031] Generate, using a component compiler, an optional component in a UMD format corresponding to each of the optional components;

[0032] Uploading each optional component in the UMD format to the CDN, and storing the CDN address of each optional component in the UMD format in correspondence with the project information; and,

[0033] Each optional component in the UMD format is stored in the NPM private server of the corresponding project according to a preset naming specification, wherein the preset naming specification includes a component identifier and a style identifier of the optional component.

[0034] In a possible embodiment, storing the target component and the target project information in correspondence with each other includes:

[0035] Using the CDN address of the target component as the target configuration information of the target project;

[0036] The device further includes: a transmission module, configured to transmit the target configuration information to a back-end server, so that the back-end server adds the target configuration information to the target project information.

[0037] In a possible embodiment, the loading of each target component corresponding to the target project information, and rendering each target component using style data corresponding to the target component to generate a target page includes:

[0038] Based on the target configuration information in the target project information, insert the CDN address of the target component in the UMD format into the target page;

[0039] Generate a module instance based on the target component and its corresponding style identifier;

[0040] The module instance is called, and the target page is rendered based on the node information of the preset configurable area corresponding to the target component to generate the target page.

[0041] According to another aspect of the present invention, there is provided an electronic device, comprising:

[0042] processor; and

[0043] Memory for storing programs,

[0044] The program includes instructions, which, when executed by the processor, enable the processor to execute any of the above-mentioned methods for dynamically generating pages.

[0045] According to another aspect of the present invention, a non-transitory computer-readable storage medium storing computer instructions is provided, wherein the computer instructions are used to enable a computer to execute any of the above-mentioned methods for dynamically generating pages.

[0046] One or more technical solutions provided in the embodiments of the present invention pre-configure optional components for each configurable area in the page. During the page configuration process of the first user, after the first user selects the target project, the optional components corresponding to the target project are pulled for display. The first user can select the target components to be displayed in the target page based on the displayed optional components, and dynamically load the target components during the actual page loading process to generate the target page. Through pre-configured page configuration, in the case of page changes, there is no need to rely on the traditional development process, thereby achieving rapid updates and adjustments and improving the efficiency of network page generation. In addition, page changes can take effect in real time without the need for the entire system to be re-online, completely avoiding the risk of system instability brought about by the traditional online process and improving the stability of page changes. BRIEF DESCRIPTION OF THE DRAWINGS

[0047] Further details, features and advantages of the present invention are disclosed in the following description of exemplary embodiments in conjunction with the accompanying drawings, in which:

[0048] Figure 1 A schematic diagram of a process flow of a method for dynamically generating a page according to an embodiment of the present invention;

[0049] Figure 2 A schematic diagram of another process of the method for dynamically generating a page according to an embodiment of the present invention;

[0050] Figure 3 A schematic diagram of the structure of a device for dynamically generating pages provided by an embodiment of the present invention;

[0051] Figure 4 A block diagram of an exemplary electronic device capable of implementing the embodiments of the present invention is shown. DETAILED DESCRIPTION

[0052] Embodiments of the present invention will be described in more detail below with reference to the accompanying drawings. Although certain embodiments of the present invention are shown in the accompanying drawings, it should be understood that the present invention can be implemented in various forms and should not be construed as limited to the embodiments described herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of the present invention. It should be understood that the drawings and embodiments of the present invention are for illustrative purposes only and are not intended to limit the scope of protection of the present invention.

[0053] It should be understood that the various steps described in the method embodiments of the present invention may be performed in different orders and / or in parallel. In addition, the method embodiments may include additional steps and / or omit the steps shown. The scope of the present invention is not limited in this respect.

[0054] The term "including" and its variations used in this document are open inclusions, that is, "including but not limited to". The term "based on" means "based at least in part on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one other embodiment"; the term "some embodiments" means "at least some embodiments". The relevant definitions of other terms will be given in the following description. It should be noted that the concepts of "first", "second", etc. mentioned in the present invention are only used to distinguish different devices, modules or units, and are not used to limit the order or interdependence of the functions performed by these devices, modules or units.

[0055] It should be noted that the modifications of "one" and "multiple" mentioned in the present invention are illustrative rather than restrictive. Those skilled in the art should understand that unless otherwise clearly indicated in the context, it should be understood as "one or more".

[0056] The names of the messages or information exchanged between multiple devices in the embodiments of the present invention are only used for illustrative purposes and are not used to limit the scope of these messages or information.

[0057] To improve the efficiency of web page generation, embodiments of the present invention provide a method, apparatus, electronic device, and storage medium for dynamically generating web pages. The method for dynamically generating web pages provided by embodiments of the present invention can be applied to any electronic device capable of dynamically generating web pages, such as a server, a computer, or a mobile terminal. The following describes the solutions of the present invention with reference to the accompanying drawings.

[0058] Figure 1A schematic flow chart of a method for dynamically generating a page according to an embodiment of the present invention may include the following steps:

[0059] S101, receiving a page configuration request, wherein the page configuration request includes target project information;

[0060] S102: Obtain and display a candidate component set corresponding to the target project information, wherein the candidate component set includes a plurality of optional components corresponding to each preset configurable area;

[0061] S103: Determine a target component corresponding to each of the preset configurable areas based on a selection operation of the first user on the displayed candidate component set, and store the target component in correspondence with the target project information;

[0062] S104: When a page generation request is received, target components corresponding to the target project information are loaded, and style data corresponding to the target components are used to render the target components to generate a target page.

[0063] By applying the embodiment of the present invention, optional components are pre-configured for each configurable area in the page. During the page configuration process of the first user, after the first user selects the target project, the optional components corresponding to the target project are pulled for display. The first user can select the target components to be displayed in the target page based on the displayed optional components, and dynamically load the target components during the actual page loading process to generate the target page. Through the pre-configured page, in the page change scenario, there is no need to rely on the traditional development process, thereby achieving rapid updates and adjustments and improving the efficiency of network page generation. In addition, page changes can take effect in real time without the need for the entire system to be re-online, completely avoiding the risk of system instability brought about by the traditional online process and improving the stability of page changes.

[0064] The above S101-S104 are exemplarily described below:

[0065] In S101, the page configuration request may be sent by the business personnel during the page configuration process. The page configuration request may include the user information sending the request, target project information, etc. The user information may be the user's work number or other identifier that can uniquely identify the user's identity. The target project information may be the project name or project code entered by the user, etc. Different projects may correspond to different pages or different display positions in the page.

[0066] In one possible embodiment, a network configuration platform can be pre-set. A business operator can log in to the network configuration platform using their user information and select or enter target project information on the configuration page to submit the page configuration request. The business operator can also submit the page configuration request in other feasible ways, which are not specifically limited by the present invention.

[0067] After receiving the page configuration request, the electronic device can pull a corresponding candidate component set based on the target project information. This component set is pre-configured for different projects. Specifically, the component set can include multiple optional components for each configurable area on the page corresponding to the project. In actual application scenarios, the display format of each display area on the web page can be pre-set or flexibly configured by business personnel. Therefore, the areas on each page that can be flexibly configured by business personnel can be set as configurable areas.

[0068] As a possible implementation method, a page is usually represented in the form of a DOM tree (Document Object Model). The DOM tree is a hierarchical structure representation of a web page document. The elements, attributes, text, etc. in the HTML or XML document of the web page are abstracted as tree nodes and organized through parent-child relationships. Each node can correspond to a unique identifier. Therefore, when setting a configurable area, the node identifier corresponding to the configurable area can be specifically stored in the configuration information of the page. During the research and development stage, optional components can be set for the configurable areas included in the configuration information of the web page. The optional components can include tables, charts, etc.

[0069] After setting up the optional components corresponding to the configurable areas in each page during the research and development phase, the optional component identifiers and the node identifiers of the configurable areas can be stored in the project configuration information in correspondence. The above-mentioned component identifier can be the file identifier of the component, such as the file name of the component's JS file (JavaScript file), css file (Cascading Style Sheets File), etc.

[0070] In a possible embodiment, the component set corresponding to the project may also be generated by the following steps:

[0071] S11. Configure multiple optional components corresponding to each preset configurable area.

[0072] The configuration process of optional components is described above and will not be repeated here. Only a brief explanation will be given.

[0073] In one possible embodiment, the optional components can be subjected to visual interaction validation and unit testing. Visual Interaction Validation is a testing method that verifies whether the system functionality or user experience meets expectations through visual feedback and interactive behavior in the user interface (UI). It combines visual inspection and interactive operations to ensure that the product performs consistently and meets design requirements in different scenarios. Unit testing is a code verification method used to verify the security and stability of small, isolated application code blocks.

[0074] S12. Generate, using a component compiler, an optional component in a UMD format corresponding to each of the optional components.

[0075] Different development environments and projects may use different module loading methods, and the coding format of the component may be JS, CSS, etc. Therefore, in order to enhance the compatibility of components in different projects or development environments, the format of each optional component can be converted to UMD (Universal Module Definition) format. The UMD format is a universal module definition method that is compatible with these different module loading specifications, so that components can be correctly loaded and used in various environments. For example, a component in the UMD format can be introduced in a CommonJS-based Node.js project through the require statement, can be used in modern browsers that support ES6 modules through the import statement, and can also be used like a normal script through <script>标签在浏览器中直接引入并使用。

[0076] S13、将各所述UMD格式的可选组件上传至CDN，并将各所述UMD格式的可选组件的CDN地址与项目信息对应存储；并，

[0077] S14、按照预设命名规范将各所述UMD格式的可选组件存储至对应的项目的NPM私服，其中，所述预设命名规范包括组件标识以及可选组件的样式标识。

[0078] CDN(Content Delivery Network，内容分发网络)是一种构建在数据网络上的分布式系统，通过智能DNS解析或HTTP重定向实现内容分发的负载均衡，提升系统的并发流数目并减少单点失效的不良影响。S13中可以将UMD格式的各可选组件上传至CDN后，获取UMD格式的各可选组件的CDN地址，并将各可选组件的CDN地址写入项目信息中，作为项目的配置信息。具体的，可以将节点标识与CDN地址对应存储，作为项目的配置信息。

[0079] 在一种可能的实施例中，还可以针对各可选组件设置对应的样式标识，不同的样式标识对应于不同的样式数据，该样式数据可以包含组件的外观、布局形式等信息。得到项目对应的可选组件后，可以将可选组件的编码文件按照预设命名规范存储至项目对应的NPM(Node Package Manager，Node包管理器)私服中，NPM私服是企业或个人搭建的私有NPM仓库，用于托管和管理内部或私有的Node.js包。上述预设命名规范中可以包含组件的文件名以及样式标识，即可以通过组件的JS文件名或CSS文件名+样式标识的形式将可选组件上传至项目对应的NPM私服中。

[0080] 通过上述技术方案，通过将可选组件的编码文件上传至项目对应的NPM私服中，实现了以项目为单位对可选组件进行管理，在进行组件选择、变更时需要处理的数据量较少，数据处理速度较快。

[0081] 在研发阶段中，还可以开发动态加载SDK(Software Development Kit，软件开发工具包)，该动态加载SDK用于加载目标页面。

[0082] 在一种可能的实施例中，电子设备接收到页面配置请求的情况下，可以从目标项目的NPM私服中拉取各个可选组件，并将可选组件的标识显示在显示界面中，示例性的，可以将可选组件的标识与可配置区域标识对应显示在显示界面中，业务人员可以基于显示的各可选组件标识选择所需的目标组件。在业务人员选中某一可选组件时，可以基于可选组件对应的预设模拟数据将可选组件动态展示在页面中，以使业务人员能够预览组件内容。

[0083] 得到业务人员选择的目标组件后，可以将目标组件标识写入目标项目信息中，作为目标项目的配置，同时可以将该目标项目信息上传至CDN进行存储，同时将目标项目与目标项目信息的CDN地址对应存储在电子设备中。

[0084] 在一种可能的实施例中，生成目标项目的上述目标项目信息后，可以将所述目标配置信息传递至后端服务器，以使所述后端服务器将所述目标配置信息加入至所述目标项目信息中。由于最终的目标页面生成需要依靠后端服务器，因此，在业务人员在前端的网络配置平台中选定目标组件后，需要将该目标组件与目标项目的关联信息发送至目标项目对应的后端服务器中。

[0085] 在电子设备接收到页面生成请求的情况下，可以开始目标页面加载，该页面生成请求具体由用户侧发出。该页面生成请求的发送方式可以根据实际应用场景决定，示例性的，在APP页面加载场景中，用户进入APP或点击页面链接即生成上述页面生成请求。该页面生成请求中可以包括目标页面信息以及用户信息等，此处的用户信息为进入目标页面的用户，为与业务人员进行区分，可以称该用户成为第二用户，将相应的用户信息称为第二用户信息，上述目标页面信息中可以包含目标页面中包含的各项目标识。

[0086] 在目标页面的加载过程中，可以调用上述动态加载SDK，通过该动态加载SDK获取目标页面信息中包含的各项目标识对应的目标项目信息。该目标项目信息中包含目标项目对应的多个目标组件信息，因此，通过获取各个目标项目信息，能够获取到目标页面所需的各目标组件信息。该目标组件信息具体为目标组件的CDN地址以及目标项目的NPM私服中包含的目标组件的文件标识以及样式标识。将目标组件的文件动态加载至目标页面中，并利用目标组件对应的样式数据对目标组件进行渲染，以得到目标页面。

[0087] 作为一种可能的实施方式，可以通过以下步骤加载目标页面：

[0088] S41、基于所述目标项目信息中的目标配置信息，将UMD格式的目标组件的CDN地址插入至目标页面中。

[0089] 目标组件的CDN地址对应于目标组件的编码文件，该编码文件可以是JS文件、CSS文件等，将目标组件的CDN地址插入至目标页面中即可实现将目标组件的编码文件加载至目标页面中。示例性的，具体可以将目标组件的CDN地址插入至目标页面的DOM书中，若该编码文件加载成功，则可以继续进行后续的渲染等步骤，若编码文件加载失败，则不进行渲染。

[0090] S42、基于所述目标组件及其对应的样式标识生成模块实例。

[0091] 本步骤中可以动过上述动态加载SDK基于目标配置信息中包含的目标组件的编码文件标识以及样式标识，以及目标页面中的预设接口数据生成模块实例。其中，目标页面中的预设接口数据可以包括目标页面的固定配置、访问权限信息等。该模块实例代表需要渲染的页面的一部分，具体的，该模块实例代表了将要渲染到页面上的一个独立单元或组件，包含了目标组件必要的配置以及状态信息。

[0092] S43、调用所述模块实例，基于所述目标组件对应的预设可配置区域的节点信息对所述目标页面进行渲染，生成目标页面。

[0093] S42中生成的模块实例中包含了目标组件必要的配置以及状态信息，预设可配置区域的节点信息标识了组件的渲染位置，通过将预设可配置区域的节点信息传入至模块实例中，并调用模块实例的渲染方法，该渲染方法可以根据模块实例的配置以及传入的节点信息，将目标组件按照样式标识对应的样式渲染至节点信息指示的可配置区域中，从而使得目标组件被成功地显示在目标页面中。

[0094] 通过上述技术方案，通过配置化的方式直接定义和下发页面所需的渲染组件，无需依赖传统的开发流程，从而实现快速更新和调整。这样的方式使业务设想能够及时上线验证，方便进行快速实验和调整，为AB测试等业务优化提供高效支持，并且大大加快了需求交付的效率。通过引入动态组件替换机制，业务变更可以实时生效，无需系统整体上线，从而完全避免了传统上线过程带来的系统不稳定风险。动态替换不仅提高了需求响应速度，还降低了系统故障的可能性，使系统运行更加平稳。通过精简资源文件、按需加载等优化方式，减少上线资源文件的体积，降低页面加载时长。资源文件的轻量化不仅缩短了加载时间，还有效提升了页面渲染速度，为用户提供更流畅的使用体验。

[0095] 如图2所示，图2为本发明实施例提供的页面动态生成方法的又一种流程示意图，具体可以包括前端研发侧流程、业务配置侧流程以及用户使用方流程。

[0096] 前端研发测流程可以包括：预先开发动态加载SDK以及公共组件模块，并对公共组件模块进行视觉交互规范性验证，通过单元测试验证稳定性。公共组件通过组件编译器生成UMD格式的组件，并将UMD格式组件文件上传CDN管理，将UMD格式组件文件的CDN地址写入项目中作为配置文件，最后按照命名规范上传到项目对应的NPM私服进行管理。该命名规范包括组件文件标识以及样式标识。

[0097] 业务配置侧流程可以包括：业务侧登陆配置管理平台，首先进行项目创建或者项目关联，配置平台会拉取项目对应的NPM私服中公共组件内容。业务选择关联项目所需组件，基于项目页面，所需组件会基于模拟数据动态展示页面中，起到预览效果。确定选择的组件与项目进行关联，将项目与组件关联信息写入项目配置文件后上传CDN进行存储，并将CDN地址与当前项目做关联，生成配置信息后，传递给项目的后端，并写入数据中。

[0098] 用户使用方流程可以包括：用户侧进入系统后，首先会加载动态组件SDK内容，调用首页接口，获取关联动态组件的配置信息以及关键渲染数据。读取配置信息后，将UMD动态组件地址，动态插入页面中进行加载。调用SDK的渲染能力，传入动态组件信息内容以及首页接口的关键数据至SDK进行模块实例生成。基于模块实例内容，传入页面的待渲染的节点信息，模块实例执行相应的渲染方法将动态组件模块渲染到页面中，用户侧整体样式呈现与交互效果展示。

[0099] 应用本发明实施例，基于组件模块通过动态编译生成可用组件，并利用单元测试确保组件的高可用性和稳定性。生成的组件会上传至云服务，形成可直接访问的CDN链接，供业务端调用。业务侧通过配置平台灵活定义特定场景下所需展示的组件模块。用户在初始化页面时，会根据配置平台的内容动态渲染相应的页面模块。若需变更模块展示，仅需通过配置平台完成设置，无需依赖传统研发流程。这种方式大幅缩短了业务响应时间，实现快速验证模块的用户反馈，加速达成业务目标，同时显著降低了上线风险和提升交付效率。这种方式可快速更新和调整。这样的方式使业务设想能够及时上线验证，方便进行快速实验和调整，为AB测试等业务优化提供高效支持。

[0100] 基于相同的发明构思，本发明实施例还提供了一种页面动态生成装置，如图3所示，该装置300可以包括：

[0101] 接收模块301，用于接收页面配置请求，其中，所述页面配置请求中包括目标项目信息；

[0102] 获取模块302，用于获取所述目标项目信息对应候选组件集合并显示，所述候选组件集合中包括各预设可配置区域对应的多个可选组件；

[0103] 存储模块303，用于基于第一用户对显示的所述候选组件集合的选定操作，确定各所述预设可配置区域对应的目标组件，并将所述目标组件与所述目标项目信息对应存储；

[0104] 生成模块304，用于在接收到页面生成请求的情况下，加载所述目标项目信息对应的各目标组件，并采用所述目标组件对应的样式数据对各所述目标组件进行渲染，生成目标页面。

[0105] 在一种可能的实施例中，各所述候选组件集合预先通过以下步骤生成：

[0106] 配置各预设可配置区域对应的多个可选组件；

[0107] 利用组件编译器生成各所述可选组件对应的UMD格式的可选组件；

[0108] 将各所述UMD格式的可选组件上传至CDN，并将各所述UMD格式的可选组件的CDN地址与项目信息对应存储；并，

[0109] 按照预设命名规范将各所述UMD格式的可选组件存储至对应的项目的NPM私服，其中，所述预设命名规范包括组件标识以及可选组件的样式标识。

[0110] 在一种可能的实施例中，所述将所述目标组件与所述目标项目信息对应存储，包括：

[0111] 将所述目标组件的CDN地址作为所述目标项目的目标配置信息；

[0112] 所述装置还包括：传递模块，用于将所述目标配置信息传递至后端服务器，以使所述后端服务器将所述目标配置信息加入至所述目标项目信息中。

[0113] 在一种可能的实施例中，所述加载所述目标项目信息对应的各目标组件，并采用所述目标组件对应的样式数据对各所述目标组件进行渲染，生成目标页面，包括：

[0114] 基于所述目标项目信息中的目标配置信息，将UMD格式的目标组件的CDN地址插入至目标页面中；

[0115] 基于所述目标组件及其对应的样式标识生成模块实例；

[0116] 调用所述模块实例，基于所述目标组件对应的预设可配置区域的节点信息对所述目标页面进行渲染，生成目标页面。

[0117] 其中，在本发明中所涉及的用户个人信息的收集、存储、使用、加工、传输、提供和公开等处理，均符合相关法律法规的规定，且不违背公序良俗。

[0118] 本发明示例性实施例还提供一种电子设备，包括：至少一个处理器；以及与至少一个处理器通信连接的存储器。所述存储器存储有能够被所述至少一个处理器执行的计算机程序，所述计算机程序在被所述至少一个处理器执行时用于使所述电子设备执行根据本发明实施例的方法。

[0119] 本发明示例性实施例还提供一种存储有计算机程序的非瞬时计算机可读存储介质，其中，所述计算机程序在被计算机的处理器执行时用于使所述计算机执行根据本发明实施例的方法。

[0120] 本发明示例性实施例还提供一种计算机程序产品，包括计算机程序，其中，所述计算机程序在被计算机的处理器执行时用于使所述计算机执行根据本发明实施例的方法。

[0121] 参考图4，现将描述可以作为本发明的服务器或客户端的电子设备400的结构框图，其是可以应用于本发明的各方面的硬件设备的示例。电子设备旨在表示各种形式的数字电子的计算机设备，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和 / 或者要求的本发明的实现。

[0122] 如图4所示，电子设备400包括计算单元401，其可以根据存储在只读存储器(ROM)402中的计算机程序或者从存储单元408加载到随机访问存储器(RAM)403中的计算机程序，来执行各种适当的动作和处理。在RAM 403中，还可存储电子设备400操作所需的各种程序和数据。计算单元401、ROM 402以及RAM 403通过总线404彼此相连。输入 / 输出(I / O)接口405也连接至总线404。

[0123] 电子设备400中的多个部件连接至I / O接口405，包括：输入单元406、输出单元407、存储单元408以及通信单元409。输入单元406可以是能向电子设备400输入信息的任何类型的设备，输入单元406可以接收输入的数字或字符信息，以及产生与电子设备的用户设置和 / 或功能控制有关的键信号输入。输出单元407可以是能呈现信息的任何类型的设备，并且可以包括但不限于显示器、扬声器、视频 / 音频输出终端、振动器和 / 或打印机。存储单元408可以包括但不限于磁盘、光盘。通信单元409允许电子设备400通过诸如因特网的计算机网络和 / 或各种电信网络与其他设备交换信息 / 数据，并且可以包括但不限于调制解调器、网卡、红外通信设备、无线通信收发机和 / 或芯片组，例如蓝牙TM设备、WiFi设备、WiMax设备、蜂窝通信设备和 / 或类似物。

[0124] 计算单元401可以是各种具有处理和计算能力的通用和 / 或专用处理组件。计算单元401的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元401执行上文所描述的各个方法和处理。例如，在一些实施例中，上述任一所述的页面动态生成方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元408。在一些实施例中，计算机程序的部分或者全部可以经由ROM 402和 / 或通信单元409而被载入和 / 或安装到电子设备400上。在一些实施例中，计算单元401可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行上述任一所述的页面动态生成方法。

[0125] 用于实施本发明的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和 / 或框图中所规定的功能 / 操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

[0126] 在本发明的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

[0127] 如本发明使用的，术语"机器可读介质”和"计算机可读介质”指的是用于将机器指令和 / 或数据提供给可编程处理器的任何计算机程序产品、设备、和 / 或装置(例如，磁盘、光盘、存储器、可编程逻辑装置(PLD))，包括，接收作为机器可读信号的机器指令的机器可读介质。术语"机器可读信号”指的是用于将机器指令和 / 或数据提供给可编程处理器的任何信号。

[0128] 为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

[0129] 可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

[0130] 计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。< / script>

Claims

1. A page dynamic generation method, characterized in that: The method comprises: receiving a page configuration request, wherein the page configuration request includes target project information; Obtaining and displaying a candidate component set corresponding to the target project information, wherein the candidate component set includes a plurality of optional components corresponding to each preset configurable area; Determining target components corresponding to the preset configurable areas based on a selection operation of the first user on the displayed candidate component set, and storing the target components in correspondence with the target project information; When a page generation request is received, each target component corresponding to the target project information is loaded, and each target component is rendered using style data corresponding to the target component to generate a target page.

2. The method according to claim 1, characterized in that Each candidate component set is generated in advance by the following steps: Configure multiple optional components corresponding to each preset configurable area; Generate, using a component compiler, an optional component in a UMD format corresponding to each of the optional components; Uploading each optional component in the UMD format to the CDN, and storing the CDN address of each optional component in the UMD format in correspondence with the project information; and, Each optional component in the UMD format is stored in the NPM private server of the corresponding project according to a preset naming specification, wherein the preset naming specification includes a component identifier and a style identifier of the optional component.

3. The method according to claim 2, characterized in that The storing the target component and the target project information in correspondence with each other includes: Using the CDN address of the target component as the target configuration information of the target project; The method further comprises: The target configuration information is transmitted to a backend server so that the backend server adds the target configuration information to the target project information.

4. The method according to claim 3, characterized in that The loading of each target component corresponding to the target project information and rendering each target component using style data corresponding to the target component to generate a target page includes: Based on the target configuration information in the target project information, insert the CDN address of the target component in the UMD format into the target page; Generate a module instance based on the target component and its corresponding style identifier; The module instance is called, and the target page is rendered based on the node information of the preset configurable area corresponding to the target component to generate the target page.

5. A page dynamic generation device, characterized in that: The device comprises: A receiving module, configured to receive a page configuration request, wherein the page configuration request includes target project information; An acquisition module, configured to acquire and display a set of candidate components corresponding to the target project information, wherein the set of candidate components includes a plurality of optional components corresponding to each preset configurable area; a storage module, configured to determine, based on a selection operation of the first user on the displayed candidate component set, a target component corresponding to each of the preset configurable areas, and store the target component in correspondence with the target project information; The generation module is used to load each target component corresponding to the target project information when receiving a page generation request, and render each target component using style data corresponding to the target component to generate a target page.

6. The device according to claim 5, characterized in that Each candidate component set is generated in advance by the following steps: Configure multiple optional components corresponding to each preset configurable area; Generate, using a component compiler, an optional component in a UMD format corresponding to each of the optional components; Uploading each optional component in the UMD format to the CDN, and storing the CDN address of each optional component in the UMD format in correspondence with the project information; and, Each optional component in the UMD format is stored in the NPM private server of the corresponding project according to a preset naming specification, wherein the preset naming specification includes a component identifier and a style identifier of the optional component.

7. The device according to claim 6, characterized in that The storing the target component and the target project information in correspondence with each other includes: Using the CDN address of the target component as the target configuration information of the target project; The device further includes: a transmission module, configured to transmit the target configuration information to a back-end server, so that the back-end server adds the target configuration information to the target project information.

8. The device according to claim 7, characterized in that The loading of each target component corresponding to the target project information and rendering each target component using style data corresponding to the target component to generate a target page includes: Based on the target configuration information in the target project information, insert the CDN address of the target component in the UMD format into the target page; Generate a module instance based on the target component and its corresponding style identifier; The module instance is called, and the target page is rendered based on the node information of the preset configurable area corresponding to the target component to generate the target page.

9. An electronic device comprising: processor; as well as Memory for storing programs, The program includes instructions, which, when executed by the processor, cause the processor to perform the method according to any one of claims 1 to 4.

10. A non-transitory computer-readable storage medium storing computer instructions, wherein: The computer instructions are used to enable a computer to execute the method according to any one of claims 1 to 4.

Images