Page generation method and device, equipment, storage medium and program product

Abstract

The invention provides a page generation method and device, electronic equipment, a computer readable storage medium and a computer program product, and relates to the technical field of computers, in particular to the technical field of webpage development. The method comprises the steps of generating a component template file of a single file component based on a static resource file of the single file component; determining a user-defined component tag matched with the single file component, mounting a name attribute of the user-defined component tag to an attribute variable of a code of the component template file, initializing the single file component, and generating an initialized component code; and combining the initialized component code with the rendered page code received from the server to generate a target page. According to the method, the page generation flexibility can be improved.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, specifically to the field of web page development technology, and more particularly to a page generation method, apparatus, electronic device, and computer-readable storage medium. Background Technology

[0002] In the field of application development, various rendering technologies are involved, such as client-side rendering (CSR), server-side rendering (SSR), and static site generation (SSG). These rendering technologies each have their own advantages, but they also have some obvious shortcomings. Summary of the Invention

[0003] This disclosure provides a page generation method, apparatus, electronic device, computer-readable storage medium, and computer program product that can improve the flexibility of page generation.

[0004] In a first aspect, this disclosure proposes a page generation method, including: generating a component template file for a single-file component based on a static resource file of the single-file component; determining a custom component tag that matches the single-file component; attaching the name attribute of the custom component tag to the attribute variable of the code in the component template file; initializing the single-file component; generating initialized component code; and combining the initialized component code with rendered page code received from the server to generate a target page.

[0005] Secondly, this disclosure provides a page generation apparatus, including: a first generation module, a second generation module, and a third generation module. The first generation module is configured to generate a component template file for a single-file component based on a static resource file of that component. The second generation module is configured to determine a custom component tag matching the single-file component, attach the name attribute of the custom component tag to an attribute variable of the code in the component template file, initialize the single-file component, and generate initialized component code. The third generation module is configured to combine the initialized component code with rendered page code received from a server to generate a target page.

[0006] Thirdly, embodiments of this disclosure provide an electronic device comprising: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to implement the page generation method described in any implementation of the first aspect.

[0007] Fourthly, embodiments of this disclosure provide a non-transitory computer-readable storage medium storing computer instructions that enable a computer to implement the page generation method described in any implementation of the first aspect when executed.

[0008] Fifthly, embodiments of this disclosure provide a computer program product including a computer program that, when executed by a processor, can implement the page generation method as described in any implementation of the first aspect.

[0009] It should be understood that the description in this section is not intended to identify key or essential features of the embodiments of this disclosure, nor is it intended to limit the scope of this disclosure. Other features of this disclosure will become readily apparent from the following description. Attached Figure Description

[0010] Other features, objects, and advantages of this disclosure will become more apparent from the following detailed description of non-limiting embodiments with reference to the accompanying drawings:

[0011] Figure 1 This is an exemplary system architecture to which this disclosure can be applied;

[0012] Figure 2 A flowchart illustrating a page generation method provided in this embodiment of the disclosure;

[0013] Figure 3 A flowchart illustrating another page generation method provided in this disclosure embodiment;

[0014] Figure 4 A schematic flowchart illustrating a page generation method in an application scenario provided by an embodiment of this disclosure;

[0015] Figure 5 A structural block diagram of a page generation apparatus provided in an embodiment of this disclosure;

[0016] Figure 6 This is a schematic diagram of the structure of an electronic device suitable for performing a page generation method, provided as an embodiment of the present disclosure. Detailed Implementation

[0017] The exemplary embodiments of this disclosure are described below with reference to the accompanying drawings, including various details of the embodiments to aid understanding; these should be considered merely exemplary. Therefore, those skilled in the art will recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of this disclosure. Similarly, for clarity and brevity, descriptions of well-known functions and structures are omitted in the following description. It should be noted that, unless otherwise specified, the embodiments and features described in this disclosure can be combined with each other.

[0018] The collection, storage, use, processing, transmission, provision, and disclosure of user personal information involved in the technical solution disclosed herein comply with the provisions of relevant laws and regulations and do not violate public order and good morals.

[0019] Figure 1 An exemplary system architecture 100 is shown, in which embodiments of the page generation methods, apparatuses, electronic devices, and computer-readable storage media of this disclosure can be applied.

[0020] like Figure 1 As shown, system architecture 100 may include terminal devices 101, 102, and 103, a network 104, and a server 105. Network 104 serves as the medium for providing communication links between terminal devices 101, 102, and 103 and server 105. Network 104 may include various connection types, such as wired or wireless communication links, or fiber optic cables, etc.

[0021] Users can use terminal devices 101, 102, and 103 to interact with server 105 via network 104 to receive or send messages, etc. Various applications for enabling information communication between the terminal devices 101, 102, and 103 and server 105 can be installed. These applications include real-time communication applications.

[0022] Terminal devices 101, 102, and 103 and server 105 can be either hardware or software. When terminal devices 101, 102, and 103 are hardware, they can be various electronic devices with displays, including but not limited to smartphones, tablets, laptops, and desktop computers. When terminal devices 101, 102, and 103 are software, they can be installed in the aforementioned electronic devices, and can be implemented as multiple software programs or software modules, or as a single software program or software module; no specific limitation is made here. When server 105 is hardware, it can be implemented as a distributed server cluster composed of multiple servers, or as a single server. When server 105 is software, it can be implemented as multiple software programs or software modules, or as a single software program or software module; no specific limitation is made here.

[0023] Terminal devices 101, 102, and 103 can provide various services through built-in applications. Taking a rendering application as an example, when running this rendering application, terminal devices 101, 102, and 103 can achieve the following effects: Based on the static resource file of the single-file component, a component template file for the single-file component is generated; a custom component tag matching the single-file component is determined; the name attribute of the custom component tag is attached to the attribute variable of the code in the component template file; the single-file component is initialized; the initialized component code is generated; and the initialized component code is combined with the rendered page code received from the server to generate the target page. Since generating the target page requires a lot of computing resources and strong computing power, the page generation method provided in the subsequent embodiments of this disclosure is generally executed by terminal devices 101, 102, and 103, which have strong computing power and abundant computing resources. Correspondingly, the page generation device is also generally set in terminal devices 101, 102, and 103.

[0024] It should be understood that Figure 1 The number of terminal devices, networks, and servers shown is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and servers can be included.

[0025] Please refer to Figure 2 , Figure 2 A flowchart of a page generation method provided in this disclosure embodiment, wherein process 200 includes the following steps:

[0026] Step 201: Generate the component template file of the single-file component based on the static resource file of the single-file component.

[0027] In this embodiment, the execution entity can generate a component template file for the single-file component based on the static resource file of the single-file component. For example, the execution entity can be a browser (or client) of a terminal device.

[0028] For example, as the core building blocks of a webpage, a component typically corresponds to a part of the user interface (UI), such as the header or footer. From a code implementation perspective, a component can be mapped to a single-file component in .jsx or .vue that exports a component instance.

[0029] Optionally, a single-file component refers to a file containing only one component, which can be, but is not limited to, a .jsx file (a file with the .jsx extension) or a .vue file (a file with the .vue extension).

[0030] For example, a component template file may include code for initializing the component.

[0031] In some embodiments, the generated component template file may also include a component container identifier, which may contain components and may place components in the component container.

[0032] In some embodiments, step 201 above, which generates a component template file for a single-file component based on the static resource file of the single-file component, may include: obtaining the static resource file of the single-file component, converting the static resource file of the single-file component into a static resource file in a file format supported by the browser, and generating a component template file for the single-file component based on the static resource file in the file format supported by the browser.

[0033] Optionally, static resource files can be deployed on a Content Delivery Network (CDN) or a static file server, eliminating the need for complex server configurations, simplifying deployment and maintenance processes, and reducing costs. Static resource files can be images, fonts, style files, etc. Alternatively, static resource files can be generated by the aforementioned execution entity, which can reduce the load on online servers and improve system stability and reliability.

[0034] Optionally, the browser may support file formats including JavaScript (.js) format, and the converted static resource file may be a .js file.

[0035] In this embodiment, the execution entity can obtain static resource files from CDN or server, convert the static resource files into static resource files that can be recognized by the browser, and then generate component template files for single-file components based on the recognizable static resource files.

[0036] Optionally, the aforementioned execution entity can generate component template files based on static resource files in the Common Module Definition (CMD) specification and file formats supported by the browser.

[0037] Thus, by converting the static resource files of single-file components into static resource files in a file format supported by the browser, the client can successfully generate the component template file through the browser.

[0038] Optionally, the aforementioned execution entity can generate component template files for each of the multiple single-file components based on their respective static resource files.

[0039] Step 202: Identify the custom component tag that matches the single-file component, attach the name attribute of the custom component tag to the attribute variable of the code in the component template file, initialize the single-file component, and generate the initialized component code.

[0040] For example, a custom component tag can be <widget-app>The tag and its attribute variable can be a $prop variable. The execution body mentioned above can retrieve the custom component tag. <widget-app>The name attribute is passed to the $props variable attached to the component template file, which automatically implements the component initialization process.

[0041] Step 203: Combine the initialized component code with the rendered page code received from the server to generate the target page.

[0042] For example, the rendered page code received from the server can be rendered Hyper Text Markup Language (HTML) page code received from the server, such as the HTML obtained after the server performs the initial screen rendering. The aforementioned execution entity can combine the initialized component code and the rendered HTML page code received from the server to generate the target page.

[0043] The page generation method provided in this disclosure initializes single-file components by attaching the name attribute of a custom component tag to the attribute variable of the code in the component template file, enabling flexible component construction. Then, the initialized component code is combined with the rendered page code received from the server to generate the target page, which can improve the flexibility and efficiency of page generation.

[0044] In some embodiments, the component template file also includes a component container identifier. Determining the custom component tag that matches the single-file component in step 202 above may include: obtaining the component path identifier from the name attribute of the configuration file of the custom component tag, and determining the custom component tag that matches the single-file component based on the component path identifier that matches the component container identifier.

[0045] Optionally, a component container can contain components, and components can be placed inside a component container.

[0046] In this embodiment, the name attribute can be used to declare the component path identifier (e.g., name = "widget / multi-frameworks / App.jsx"), and the aforementioned execution entity can be derived from custom component tags (e.g., <widget-app>The component path identifier is obtained from the name attribute of the configuration file. The component path identifier indicates the path of the component. The component is in the component container. If the path of the component path identifier includes the component container, then the component path identifier is considered to match the component path identifier. The custom component tag corresponding to the component path identifier is determined as the custom component tag that matches the single-file component. Based on the obtained custom component tag, the name attribute of the custom component tag can be obtained.

[0047] In some embodiments, the steps to obtain the name attribute of a custom component tag are as follows: convert the configuration file of the custom component tag into a file format supported by the template engine, and obtain the name attribute of the custom component tag from the converted configuration file of the custom component tag through the template engine.

[0048] Alternatively, there are many ways to implement a template engine. A template engine can enable (website) programs to separate the interface from the data, and separate business code from the logic code, etc.

[0049] In this embodiment, the aforementioned execution entity can customize component tags (e.g., <widget-app>The configuration file is converted into a file format supported by the template engine. For example, for the template engine Smarty, it is converted into the syntax {include}. The template engine then collects the name attribute of the custom component tag from the configuration file of the converted custom component tag, thus successfully obtaining the name attribute of the custom component tag.

[0050] For example, after collecting the name attribute of a custom component tag, the name attribute of the custom component tag can be mounted to the attribute variable of the code in the component template file through the template engine.

[0051] In some embodiments, step 203 above, which combines the initialized component code with the rendered page code received from the server to generate the target page, may include: converting the file format of the initialized component code into a file format supported by the browser, and combining the converted component code with the rendered HTML page code received from the server through the browser to generate the target page.

[0052] For example, the aforementioned execution entity can use build tools (such as Rollup) and related plugins (such as rollup-plugin-vue, rollup-plugin-babel, etc.) to convert the file format of the initialized component code into a recognizable JavaScript file.

[0053] In this way, by converting the file format of the initialized component code to a file format supported by the browser, specific format files can be generated for different target environments, thereby optimizing rendering performance and improving user experience.

[0054] In some embodiments, step 203 above, which combines the initialized component code and the rendered page code received from the server to generate the target page, may include: in response to a single-file component being marked as supporting server-side rendering, combining the initialized code, the pre-rendered HTML component fragment containing text placeholders, and the rendered HTML page code received from the server to generate the target page; and in response to a single-file component being marked as supporting client-side rendering, combining the initialized code and the rendered HTML page code received from the server to generate the target page.

[0055] In this embodiment, the execution entity can determine whether the single-file component is marked as supporting Server-Side Rendering (SSR). If so, it combines the initialized code, the pre-rendered HTML component fragment containing text placeholders, and the rendered HTML page code received from the server to generate the target page. If not, it is considered to be Client-Side Rendering (CSR), and step 203 is executed. This allows for flexible application in different scenarios.

[0056] In some embodiments, the above-described method of combining the initialized code, the pre-rendered HTML component fragment containing text placeholders, and the rendered HTML page code received from the server to generate the target page may include: filling the pre-rendered HTML component fragment containing text placeholders with text based on dynamic data, and combining the initialized code, the filled pre-rendered HTML component fragment, and the rendered HTML page code received from the server to generate the target page.

[0057] In this embodiment, the aforementioned execution entity can generate HTML fragments by dynamically filling pre-rendered HTML component fragments containing text placeholders. When there are multiple components, multiple HTML fragments can be generated accordingly. One or more HTML fragments can be integrated into the page through progressive integration. The server does not need to refactor the HTML page code, which can improve page generation efficiency.

[0058] In some embodiments, combined with Figure 3 Obtaining a pre-rendered HTML component fragment containing text placeholders can include the following steps:

[0059] Step 301: Convert the single-file component into a server-side component with a file format supported by the browser.

[0060] Optionally, the aforementioned execution entity can convert the single-file component into a server-side component in a file format supported by the browser. The server-side component can be a temporary .js file and does not need to be deployed to the server.

[0061] For example, the aforementioned execution entity can use build tools (such as Rollup) and related plugins (such as rollup-plugin-vue, rollup-plugin-babel, etc.) to convert single-file components such as .vue, .jsx, .svelte, and other file formats that are not directly supported by browsers or Node.js into recognizable JavaScript files.

[0062] Step 302: Render the server-side components to generate a pre-rendered HTML structure.

[0063] In this embodiment, the aforementioned execution entity can utilize the pre-rendering function to render the server-side components and generate a pre-rendered HTML structure.

[0064] Optionally, the generated component template file can also reserve pre-rendering tags. After generating the pre-rendered HTML structure, the pre-rendered HTML structure is filled into the reserved pre-rendering tags.

[0065] Step 303: Based on the component parameters and the pre-rendered HTML structure, generate a pre-rendered HTML component fragment containing text placeholders.

[0066] In this embodiment, the aforementioned execution entity can generate a pre-rendered HTML component fragment containing text placeholders based on component parameters and a pre-rendered HTML structure.

[0067] Optionally, component parameters can be defined in specific functions during component development, and the aforementioned execution entity can obtain the component parameters from these specific functions.

[0068] In this way, client-side rendering can quickly present component content to users, achieve dynamic interactive effects, support a more flexible user interaction experience, reduce First Contentful Paint (FCP) time, improve first-screen rendering performance, and adapt to more complex business needs, such as portal websites or content-based websites (such as Q&A businesses).

[0069] In some embodiments, step 303 above, which generates a pre-rendered HTML component fragment containing text placeholders based on component parameters and a pre-rendered HTML structure, may include: generating template text placeholder code based on component parameters, and generating a pre-rendered HTML component fragment containing text placeholders based on the template text placeholder code and the pre-rendered HTML structure.

[0070] In this embodiment, the execution entity can automatically generate template text placeholder code based on component parameters, thus eliminating the need to manually write template engine placeholder syntax and reducing the reconstruction cost caused by switching template engines. Then, based on the template text placeholder code and the pre-rendered HTML structure, text placeholders are generated to produce a pre-rendered HTML component fragment containing text placeholders. The placeholder text in the pre-rendered HTML component fragment containing text placeholders can be used to fill data.

[0071] For ease of understanding, the following provides application scenarios in which the page generation method of the present disclosure embodiments can be implemented.

[0072] Please refer to Figure 4 , Figure 4 A flowchart of a page generation method provided in this disclosure embodiment, wherein process 400 includes the following steps:

[0073] The aforementioned execution entity (e.g., the client) may develop one or more components using the following steps 401-403 and 405-406. The server executes step 408 to generate the rendered HTML page code. The aforementioned execution entity receives the rendered HTML page code from the server and then generates the target page based on the rendered HTML page code using step 404 or 407.

[0074] Step 401: Determine whether the single-file component is marked as supporting server-side rendering.

[0075] Optionally, for React components (.jsx components), you can declare SSR by adding 'use server' (supports server-side rendering) at the top of the configuration file of the single-file component. For .vue files, you can declare support for server-side rendering by adding instructions such as 'prerender' (pre-render).

[0076] In some embodiments, if 'use server' is found at the top of the file, the single-file component is determined to support server-side rendering; if 'use server' is not found at the top of the file, the single-file component is determined to support client-side rendering. Alternatively, if 'prerender' is included in the file, the single-file component is determined to support server-side rendering; if 'prerender' is not included in the file, the single-file component is determined to support client-side rendering.

[0077] Step 402: If yes, then based on the static resource file of the single-file component, generate the component template file of the single-file component and obtain the pre-rendered HTML component fragment containing text placeholders.

[0078] In this embodiment, the execution entity can perform step 201 when the single-file component is marked as supporting server-side rendering, and can also obtain a pre-rendered HTML component fragment containing text placeholders. Steps 403 and 404 can then be executed.

[0079] The specific implementation method for generating the component template file of a single-file component based on its static resource file can be found in step 201 above, and will not be elaborated further here. The specific implementation method for obtaining the pre-rendered HTML component fragment containing text placeholders can also be found in the above... Figure 3 The explanation.

[0080] Step 403: Identify the custom component tag that matches the single-file component, attach the name attribute of the custom component tag to the attribute variable of the code in the component template file, initialize the single-file component, and generate the initialized component code.

[0081] The above steps 404 and as follows Figure 2 The steps shown in step 202 are the same. For the same parts, please refer to the corresponding parts of the previous embodiment. They will not be repeated here.

[0082] Step 404: Combine the initialized code, the pre-rendered HTML component fragment containing text placeholders, and the rendered HTML page code received from the server to generate the target page.

[0083] For details on how step 404 is implemented, please refer to the corresponding part of the previous embodiment; it will not be repeated here.

[0084] Step 405: If not, generate the component template file for the single-file component based on the static resource file of the single-file component.

[0085] In this embodiment, the execution entity can perform step 201 if the single-file component is marked as supporting client-side rendering. Steps 406 and 407 can also be performed.

[0086] Step 406: Identify the custom component tag that matches the single-file component, attach the name attribute of the custom component tag to the attribute variable of the code in the component template file, initialize the single-file component, and generate the initialized component code.

[0087] The above steps 404 and as follows Figure 2 The steps shown in step 202 are the same. For the same parts, please refer to the corresponding parts of the previous embodiment. They will not be repeated here.

[0088] Step 407: Combine the initialized component code with the rendered page code received from the server to generate the target page.

[0089] The above steps 404 and as follows Figure 2 The steps shown in step 203 are the same. For the same parts, please refer to the corresponding parts of the previous embodiment. They will not be repeated here.

[0090] Further reference Figure 5 As an implementation of the methods shown in the above figures, this disclosure provides an embodiment of a page generation apparatus, which is similar to... Figure 2 Corresponding to the method embodiments shown, this device can be specifically applied to various electronic devices.

[0091] like Figure 5 As shown, the page generation device 500 of this embodiment may include: a first generation module 501, a second generation module 502, and a third generation module 503. The first generation module 501 is configured to generate a component template file for a single-file component based on a static resource file of the single-file component. The second generation module 502 is configured to determine a custom component tag matching the single-file component, attach the name attribute of the custom component tag to the attribute variable of the code in the component template file, initialize the single-file component, and generate initialized component code. The third generation module 503 is configured to combine the initialized component code with the rendered page code received from the server to generate the target page.

[0092] In this embodiment, the specific processing of the first generation module 501, the second generation module 502, and the third generation module 503 in the page generation device 500 and the resulting technical effects can be referred to the relevant descriptions of the steps in the above embodiments, and will not be repeated here.

[0093] In some optional implementations of this embodiment, the first conversion module is configured to convert the configuration file of the custom component tag into a file format supported by the template engine. The obtaining module is configured to obtain the name attribute of the custom component tag from the converted configuration file of the custom component tag through the template engine.

[0094] In some optional implementations of this embodiment, the component template file further includes a component container identifier. The second generation module 502 is also configured to obtain a component path identifier from the name attribute of the configuration file of the custom component tag. Based on the component path identifier that matches the component container identifier, a custom component tag matching the single-file component is determined.

[0095] In some optional implementations of this embodiment, the third generation module 503 is further configured to convert the file format of the initialized component code into a browser-supported file format. The browser then combines the converted component code with the rendered HTML page code received from the server to generate the target page.

[0096] In some optional implementations of this embodiment, the third generation module 503 is further configured to, in response to the single-file component being marked as supporting server-side rendering, combine the initialized code, the pre-rendered HTML component fragment containing text placeholders, and the rendered HTML page code received from the server to generate the target page. In response to the single-file component being marked as supporting client-side rendering, the initialized code and the rendered HTML page code received from the server are combined to generate the target page.

[0097] In some optional implementations of this embodiment, the third generation module 503 is further configured to fill the pre-rendered HTML component fragment containing text placeholders with text based on dynamic data. The initialized code, the filled pre-rendered HTML component fragment, and the rendered HTML page code received from the server are combined to generate the target page.

[0098] In some optional implementations of this embodiment, the page generation apparatus 500 may further include: a second conversion module configured to convert a single-file component into a server-side component in a file format supported by a browser; a rendering module configured to render the server-side component to generate a pre-rendered HTML structure; and a fourth generation module configured to generate a pre-rendered HTML component fragment containing text placeholders based on component parameters and the pre-rendered HTML structure.

[0099] In some optional implementations of this embodiment, the page generation device 500 may further include: a fourth generation module, configured to generate template text placeholder code based on component parameters. Based on the template text placeholder code and the pre-rendered HTML structure, text placeholders are generated to produce a pre-rendered HTML component fragment containing text placeholders.

[0100] In some optional implementations of this embodiment, the first generation module 501 is further configured to obtain the static resource file of the single-file component. The static resource file of the single-file component is then converted into a static resource file in a browser-supported file format. Based on the browser-supported file format static resource file, a component template file for the single-file component is generated.

[0101] In some optional implementations of this embodiment, the file formats supported by the browser include: JavaScript scripting language format.

[0102] This embodiment exists as a device embodiment corresponding to the above method embodiments. The technical effects brought about by the page generation device provided in this embodiment can be referred to the relevant descriptions in the above method embodiments, which will not be repeated here.

[0103] According to embodiments of this disclosure, this disclosure also provides an electronic device, which includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, which, when executed by the at least one processor, enable the at least one processor to implement the page generation method described in any of the above embodiments.

[0104] According to embodiments of this disclosure, this disclosure also provides a readable storage medium storing computer instructions that enable a computer to implement the page generation method described in any of the above embodiments when executed.

[0105] According to embodiments of this disclosure, this disclosure also provides a computer program product that, when executed by a processor, can implement the page generation method described in any of the above embodiments.

[0106] Figure 6 A schematic block diagram of an example electronic device 600 that can be used to implement embodiments of the present disclosure is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device may also represent various forms of mobile devices, such as personal digital processors, cellular phones, smartphones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely illustrative and are not intended to limit the implementation of the present disclosure described and / or claimed herein.

[0107] like Figure 6 As shown, device 600 includes a computing unit 601, which can perform various appropriate actions and processes based on a computer program stored in read-only memory (ROM) 602 or a computer program loaded from storage unit 608 into random access memory (RAM) 603. RAM 603 may also store various programs and data required for the operation of device 600. The computing unit 601, ROM 602, and RAM 603 are interconnected via bus 604. Input / output (I / O) interface 605 is also connected to bus 604.

[0108] Multiple components in device 600 are connected to I / O interface 605, including: input unit 606, such as keyboard, mouse, etc.; output unit 607, such as various types of monitors, speakers, etc.; storage unit 608, such as disk, optical disk, etc.; and communication unit 609, such as network card, modem, wireless transceiver, etc. Communication unit 609 allows device 600 to exchange information / data with other devices through computer networks such as the Internet and / or various telecommunications networks.

[0109] The computing unit 601 can be a variety of general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of the computing unit 601 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. The computing unit 601 performs the various methods and processes described above, such as page generation methods. For example, in some embodiments, the page generation method may be implemented as a computer software program tangibly contained in a machine-readable medium, such as storage unit 608. In some embodiments, part or all of the computer program may be loaded and / or installed on device 600 via ROM 602 and / or communication unit 609. When the computer program is loaded into RAM 603 and executed by the computing unit 601, one or more steps of the page generation method described above may be performed. Alternatively, in other embodiments, the computing unit 601 may be configured to perform page generation methods by any other suitable means (e.g., by means of firmware).

[0110] Various embodiments of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), systems-on-a-chip (SoCs), payload-programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments may include implementations in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which may be a dedicated or general-purpose programmable processor, capable of receiving data and instructions from a storage system, at least one input device, and at least one output device, and transmitting data and instructions to the storage system, the at least one input device, and the at least one output device.

[0111] The program code used to implement the methods of this disclosure may be written in any combination of one or more programming languages. This program code may be provided to a processor or controller of a general-purpose computer, special-purpose computer, or other programmable data processing apparatus, such that when executed by the processor or controller, the program code causes the functions / operations specified in the flowcharts and / or block diagrams to be implemented. The program code may be executed entirely on a machine, partially on a machine, as a standalone software package partially on a machine and partially on a remote machine, or entirely on a remote machine or server.

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

[0113] To provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device for displaying information to the user (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor); and a keyboard and pointing device (e.g., a mouse or trackball) through which the user provides input to the computer. Other types of devices can also be used to provide interaction with the user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including sound input, voice input, or tactile input).

[0114] The systems and technologies described herein can be implemented in computing systems that include backend components (e.g., as a data server), or computing systems that include middleware components (e.g., an application server), or computing systems that include frontend components (e.g., a user computer with a graphical user interface or web browser through which a user can interact with embodiments of the systems and technologies described herein), or any combination of such backend, middleware, or frontend components. The components of the system can be interconnected via digital data communication of any form or medium (e.g., a communication network). Examples of communication networks include local area networks (LANs), wide area networks (WANs), and the Internet.

[0115] Computer systems can include clients and servers. Clients and servers are generally geographically separated and typically interact via communication networks. The client-server relationship is created by computer programs running on the respective computers and having a client-server relationship with each other. A server can be a cloud server, also known as a cloud computing server or cloud host, a hosting product within the cloud computing service ecosystem to address the management difficulties and weak business scalability inherent in traditional physical hosts and Virtual Private Servers (VPS) services. Servers can also be servers for distributed systems or servers integrated with blockchain technology.

[0116] According to the technical solution of this disclosure, by attaching the name attribute of the custom component tag to the attribute variable of the code in the component template file, the single-file component is initialized, enabling flexible component construction. Then, the initialized component code is combined with the rendered page code received from the server to generate the target page, which can improve the flexibility and efficiency of page generation.

[0117] It should be understood that the various processes shown above can be used, with steps rearranged, added, or deleted. For example, the steps described in this disclosure can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution disclosed in this disclosure is achieved, and this is not limited herein. The specific embodiments described above do not constitute a limitation on the scope of protection of this disclosure. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this disclosure should be included within the scope of protection of this disclosure.

Claims

1. A page generation method, comprising: Based on the static resource file of the single-file component, generate the component template file of the single-file component; Identify the custom component tag that matches the single-file component, attach the name attribute of the custom component tag to the attribute variable of the code in the component template file, initialize the single-file component, and generate the initialized component code; The initialized component code and the rendered page code received from the server are combined to generate the target page.

2. The method according to claim 1, wherein, The steps to obtain the name attribute of the custom component tag are as follows: Convert the configuration file of the custom component tag into a file format supported by the template engine; The template engine obtains the name attribute of the custom component tag from the configuration file of the transformed custom component tag.

3. The method according to claim 1, wherein, The component template file also includes a component container identifier, and the step of determining the custom component tag that matches the single-file component includes: Obtain the component path identifier from the name attribute of the configuration file of the custom component tag; Based on the component path identifier that matches the component container identifier, a custom component tag that matches the single-file component is determined.

4. The method according to claim 1, wherein, The step of combining the initialized component code with the rendered page code received from the server to generate the target page includes: Convert the file format of the initialized component code into a file format supported by the browser; The browser combines the component code (after converting the file format) with the rendered HTML page code received from the server to generate the target page.

5. The method according to any one of claims 1-4, wherein, The step of combining the initialized component code with the rendered page code received from the server to generate the target page includes: In response to the single-file component being marked as supporting server-side rendering, the initialized code, the pre-rendered HTML component fragment containing text placeholders, and the rendered HTML page code received from the server are combined to generate the target page. In response to the single-file component being marked as supporting client-side rendering, the initialized code and the rendered HTML page code received from the server are combined to generate the target page.

6. The method according to claim 5, wherein, The step of combining the initialized code, the pre-rendered HTML component fragment containing text placeholders, and the rendered HTML page code received from the server to generate the target page includes: The text is filled into the pre-rendered HTML component fragment containing text placeholders based on dynamic data; The target page is generated by combining the initialized code, the pre-rendered HTML component fragments, and the rendered HTML page code received from the server.

7. The method according to claim 5, wherein, The steps to obtain a pre-rendered HTML component fragment containing text placeholders are as follows: The single-file component is converted into a server-side component that supports a browser file format. The server-side component is rendered to generate a pre-rendered HTML structure; Based on the component parameters and the pre-rendered HTML structure, text placeholders are generated to produce the pre-rendered HTML component fragment containing text placeholders.

8. The method according to claim 7, wherein, The step of generating the pre-rendered HTML component fragment containing text placeholders based on component parameters and the pre-rendered HTML structure includes: Generate template text placeholder code based on the component parameters; Based on the template text placeholder code and the pre-rendered HTML structure, text placeholders are generated to produce the pre-rendered HTML component fragment containing text placeholders.

9. The method according to any one of claims 1-4, wherein, The static resource file based on the single-file component generates the component template file of the single-file component, including: Obtain the static resource files of a single-file component; Convert the static resource files of the single-file component into static resource files in a file format supported by the browser; Based on the static resource files of the file formats supported by the browser, the component template file of the single-file component is generated.

10. The method according to claim 4 or 7, wherein, The browser supports file formats including JavaScript.

11. A page generation apparatus, comprising: The first generation module is configured to generate a component template file for the single-file component based on a static resource file of the single-file component. The second generation module is configured to determine the custom component tag that matches the single-file component, attach the name attribute of the custom component tag to the attribute variable of the code in the component template file, initialize the single-file component, and generate the initialized component code; The third generation module is configured to combine the initialized component code with the rendered page code received from the server to generate the target page.

12. The apparatus of claim 11, further comprising: The first conversion module is configured to convert the configuration file of the custom component tag into a file format supported by the template engine; The module is configured to obtain the name attribute of the custom component tag from the configuration file of the transformed custom component tag via the template engine.

13. The apparatus according to claim 11, wherein, The component template file also includes a component container identifier; the second generation module is further configured to obtain a component path identifier from the name attribute of the configuration file of the custom component tag; and determine a custom component tag that matches the single-file component based on the component path identifier that matches the component container identifier.

14. The apparatus according to claim 11, wherein, The third generation module is further configured to convert the file format of the initialized component code into a file format supported by the browser; and to combine the converted component code with the rendered Hypertext Markup Language (HTML) page code received from the server through the browser to generate the target page.

15. The apparatus according to any one of claims 11-14, wherein, The third generation module is further configured to, in response to the single-file component being marked as supporting server-side rendering, combine the initialized code, the pre-rendered HTML component fragment containing text placeholders, and the rendered HTML page code received from the server to generate the target page; and in response to the single-file component being marked as supporting client-side rendering, combine the initialized code and the rendered HTML page code received from the server to generate the target page.

16. The apparatus according to claim 15, wherein, The third generation module is further configured to fill the pre-rendered HTML component fragment containing text placeholders with text based on dynamic data; and to combine the initialized code, the filled pre-rendered HTML component fragment, and the rendered HTML page code received from the server to generate the target page.

17. The apparatus of claim 15, further comprising: The second conversion module is configured to convert the single-file component into a server-side component that supports a browser file format. The rendering module is configured to render the server-side components and generate a pre-rendered HTML structure. The fourth generation module is configured to generate the pre-rendered HTML component fragment containing text placeholders based on component parameters and the pre-rendered HTML structure.

18. The apparatus of claim 17, further comprising: The fourth generation module is configured to generate template text placeholder codes based on the component parameters; Based on the template text placeholder code and the pre-rendered HTML structure, text placeholders are generated to produce the pre-rendered HTML component fragment containing text placeholders.

19. The apparatus according to any one of claims 11-14, wherein, The first generation module is further configured to obtain the static resource file of the single-file component; convert the static resource file of the single-file component into a static resource file in a file format supported by the browser; and generate the component template file of the single-file component based on the static resource file in the file format supported by the browser.

20. The apparatus according to claim 14 or 17, wherein, The browser supports file formats including JavaScript.

21. An electronic device, comprising: At least one processor; as well as A memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor to enable the at least one processor to perform the page generation method according to any one of claims 1-10.

22. A non-transitory computer-readable storage medium storing computer instructions for causing the computer to perform the page generation method of any one of claims 1-10.

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

Images