Page rendering method, device, equipment and storage medium

Abstract

The present application discloses a page rendering method, apparatus, device and storage medium. The method is applied to a server, which includes an ES module file and a corresponding target path file. The ES module file and the corresponding target path file are determined based on the following steps: the server uses a preset mirror source to install a first dependency library, and generates an ES module file and a target path file based on the first dependency library. A specific implementation of the method includes: in response to receiving a rendering request sent by a browser, parsing the business file code indicated by the rendering request to obtain a rendering path; in response to the presence of a rendering path in the target path file, obtaining a corresponding rendering code from the ES module file; and sending the rendering code to the browser so that the browser displays the rendering code.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to page rendering methods, devices, equipment, and storage media. Background Art

[0002] In daily R&D, in addition to local code development, the advantages of online code development and debugging are becoming increasingly prominent. For example, online code development and debugging can eliminate the need for cumbersome environment configuration, provide real-time preview of development results, and publish online for others to browse.

[0003] Currently, online development and debugging of code is achieved based on the following methods: (1) The Javascript (JS) script file and Cascading Style Sheets (CSS) style resources entered by the user are spliced ​​into Hypertext Markup Language (HTML), and then the browser uses the HTML <iframe>(2) By developing a set of Webpack core tools on the browser side, the code can be packaged and compiled on the browser side and previewed in real time. However, ( 1) only simple HTML, Javascript and CSS rendering are supported. (2) The code logic is complex and the implementation cost is too large. In order to realize browser preview, it is necessary to redevelop a set of webpack packaging framework on the browser side, which is too costly. Summary of the Invention

[0005] The embodiments of the present application provide a page rendering method, apparatus, device, and storage medium.

[0006] In a first aspect, an embodiment of the present application provides a page rendering method, which is applied to a server, the server including an ES module file and a corresponding target path file, the ES module file and the corresponding target path file being determined based on the following steps: the server uses a preset mirror source to install a first dependency library, and generates an ES module file and a target path file according to the first dependency library, the method including: in response to receiving a rendering request sent by a browser, parsing the business file code indicated by the rendering request to obtain a rendering path; in response to the presence of a rendering path in the target path file, obtaining a corresponding rendering code from the ES module file; and sending the rendering code to the browser so that the browser displays the rendering code.

[0007] In some embodiments, before responding to receiving a rendering request sent by a browser, the method also includes: in response to receiving a GET request sent by the browser, obtaining a business file code indicated by the GET request and a hypertext markup language HTML file corresponding to the business file code; mounting the business file code on an entry file path in the HTML file to obtain a processed HTML file, wherein the entry file code in the business file code includes the entry file path; and sending the processed HTML file to the browser. <bclass="d_n">

[0008] In some embodiments, the method further includes: in response to the absence of a rendering path in the target path file, mounting the component file code and style file code in the business file code on the rendering path; sending the component file code and style file code mounted on the rendering path to the browser; in response to receiving a first path sent by the browser, mounting the component file code and style file code on the first path; sending the component file code and style file code mounted on the first path to the browser; in response to receiving a parsing request sent by the browser, parsing the component file code mounted on the first path to obtain the parsed component file code; and parsing the style file code mounted on the first path to obtain the parsed style file code; using the parsed component file code and the parsed style file code as the rendering code.

[0009] In some embodiments, the type of the component file code in the business file code is Vue or React; parsing the component file code mounted on the first path to obtain the parsed component file code includes: using Vue or React to parse the component file code to obtain the parsed component file code.

[0010] In some embodiments, parsing the style file code mounted on the first path to obtain the parsed style file code includes: using node-sass to compile the style file code into a preset style file code.

[0011] In a second aspect, an embodiment of the present application provides a page rendering method, which is applied to a browser, and the method includes: sending a rendering request to a server, wherein the rendering request is used to instruct the server to parse the business file code indicated by the rendering request to obtain a rendering path, and when the rendering path exists in the target path file, obtain the corresponding rendering code from the ES module file, wherein the ES module file and the target path file are determined based on the following steps: the server uses a preset mirror source to install a first dependency library, and generates an ES module file and a target path file according to the first dependency library; receiving the rendering code sent by the server, and displaying the rendering code.

[0012] In some embodiments, the business file code includes at least one of the following: an entry file code, a component file code, and a style file code. <bclass="d_n">

[0013] In some embodiments, the method further includes: in response to detecting that the browser is running the business file code, sending a GET request to the server, wherein the GET request is used to instruct the server to obtain the business file code and the hypertext markup language HTML file corresponding to the business file code, and mounting the business file code on the entry file path in the HTML file to obtain a processed HTML file; in response to receiving the processed HTML file sent by the server, parsing the processed HTML file; sending a rendering request to the server, including: in response to detecting that the browser parses the entry file code in the processed HTML file, sending a rendering request to the server.

[0014] In some embodiments, the method also includes: sending a first path in response to receiving the component file code and style file code in the business file code mounted on the rendering path sent by the server; sending a parsing request to the server in response to receiving the component file code and style file code in the business file code mounted on the first path sent by the server; receiving the parsed component file code and parsed style file code sent by the server, wherein the rendering code includes the parsed component file code and the parsed style file code.

[0015] In some embodiments, at least one of the entry file code, the component file code, and the style file code includes a second dependent library imported through the import function.

[0016] In some embodiments, the second dependent library is a dependent library imported by the import function according to the name of the second dependent library.

[0017] In a third aspect, an embodiment of the present application provides a page rendering device, which is applied to a server, and the server includes an ES module file and a corresponding target path file. The ES module file and the corresponding target path file are determined based on the following steps: the server uses a preset mirror source to install a first dependency library, and generates an ES module file and a target path file according to the first dependency library. The device includes: a request receiving module, which is configured to receive a rendering request sent by a browser; a path obtaining module, which is configured to parse the business file code indicated by the rendering request in response to receiving the rendering request sent by the browser, and obtain a rendering path; a code obtaining module, which is configured to obtain the corresponding rendering code from the ES module file in response to the presence of a rendering path in the target path file; and a code sending module, which is configured to send the rendering code to the browser so that the browser displays the rendering code. <bclass="d_n">

[0018] In some embodiments, before responding to a rendering request sent by a browser, the device further includes: a request receiving module, configured to receive a GET request sent by the browser; a file acquiring module, configured to acquire the business file code indicated by the GET request and a hypertext markup language HTML file corresponding to the business file code in response to receiving the GET request sent by the browser; a file processing module, configured to mount the business file code on an entry file path in the HTML file to obtain a processed HTML file, wherein the entry file code in the business file code includes the entry file path; and a file sending module, configured to send the processed HTML file to the browser.

[0019] In some embodiments, the device also includes: a code processing module, configured to mount the component file code and style file code in the business file code on the rendering path in response to the absence of the rendering path in the target path file; a code sending module, configured to send the component file code and style file code mounted on the rendering path to the browser; the code processing module, configured to mount the component file code and style file code on the first path in response to receiving the first path sent by the browser; the code sending module, configured to send the component file code and style file code mounted on the first path to the browser; a code parsing module, configured to parse the component file code mounted on the first path in response to receiving the parsing request sent by the browser to obtain the parsed component file code; and parse the style file code mounted on the first path to obtain the parsed style file code; a code determination module, configured to use the parsed component file code and the parsed style file code as the rendering code.

[0020] In some embodiments, the type of the component file code in the business file code is Vue or React; the code parsing module is further configured to: parse the component file code using Vue or React to obtain the parsed component file code.

[0021] In some embodiments, the code parsing module is further configured to: use node-sass to compile the style file code into a preset style file code. <b

[0022] In a fourth aspect, an embodiment of the present application provides a page rendering device, which is applied to a browser, and the device includes: a request sending module, which is configured to send a rendering request to a server, wherein the rendering request is used to instruct the server to parse the business file code indicated by the rendering request, obtain a rendering path, and when the rendering path exists in the target path file, obtain the corresponding rendering code from the ES module file, wherein the ES module file and the target path file are determined based on the following steps: the server uses a preset mirror source to install a first dependency library, and generates an ES module file and a target path file according to the first dependency library; a code receiving module, which is configured to receive the rendering code sent by the server; and a code display module, which is configured to display the rendering code.

[0023] In some embodiments, the business file code includes at least one of the following: an entry file code, a component file code, and a style file code.

[0024] In some embodiments, the device also includes: a request sending module, configured to send a GET request to the server in response to detecting that the browser is running the business file code, wherein the GET request is used to instruct the server to obtain the business file code and the hypertext markup language HTML file corresponding to the business file code, and mount the business file code on the entry file path in the HTML file to obtain the processed HTML file; a file parsing module, configured to parse the processed HTML file in response to receiving the processed HTML file sent by the server; the request sending module is further configured to: send a rendering request to the server in response to detecting that the browser parses the entry file code in the processed HTML file.

[0025] In some embodiments, the device also includes: a path sending module, configured to send a first path in response to receiving a component file code and a style file code in a business file code mounted on a rendering path sent by a server; a request sending module, configured to send a parsing request to the server in response to receiving a component file code and a style file code in a business file code mounted on the first path sent by a server; a code receiving module, configured to receive the parsed component file code and the parsed style file code sent by the server, wherein the rendering code includes the parsed component file code and the parsed style file code.

[0026] In some embodiments, at least one of the entry file code, the component file code, and the style file code includes a second dependent library imported through the import function. <bclass="d_n">

[0027] In some embodiments, the second dependent library is a dependent library imported by the import function according to the name of the second dependent library.

[0028] In a fifth aspect, an embodiment of the present application provides a page rendering system, which includes: a server uses a preset mirror source to install a first dependency library, and generates an ES module file and a target path file according to the first dependency library; the browser sends a rendering request to the server; the server receives the rendering request, parses the business file code indicated by the rendering request, and obtains a rendering path; in response to the presence of a rendering path in the target path file, the server obtains a corresponding rendering code from the ES module file; the server sends the rendering code to the browser; the browser receives the rendering code sent by the server, and displays the rendering code.

[0029] In a sixth aspect, an embodiment of the present application provides 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, and the instructions are executed by the at least one processor so that the at least one processor can execute the method described in the first aspect or the second aspect.

[0030] In the seventh aspect, an embodiment of the present application provides a non-transitory computer-readable storage medium storing computer instructions, characterized in that the computer instructions are used to enable a computer to execute the method described in the first aspect or the second aspect.

[0031] The page rendering method, device, equipment and storage medium provided by the embodiment of the present application first parse the business file code indicated by the rendering request when the server receives the rendering request sent by the browser to obtain a rendering path; then when the rendering path exists in the target path file, the corresponding rendering code is obtained from the ES module file; then the rendering code is sent to the browser so that the browser displays the rendering code. Wherein, the ES module file and the corresponding target path file are determined based on the following steps: the server uses a preset mirror source to install a first dependency library, and generates an ES module file and a target path file according to the first dependency library. The ES module file and the corresponding target path file generated by the third-party dependency library (i.e., the first dependency library) constructed by the server using a preset mirror source can parse the business file code indicated by the rendering request on the server to obtain a rendering path, and when the rendering path exists in the target path file, the corresponding rendering code is obtained from the ES module file, and finally the rendering code that the browser can recognize and parse is obtained, completing the real-time preview effect of the code. BRIEF DESCRIPTION OF THE DRAWINGS <b

[0032] Other features, objects, and advantages of the present application will become more apparent by reading the detailed description of the non-limiting embodiments with reference to the following drawings:

[0033] Figure 1 is an exemplary system architecture diagram to which the present application can be applied;

[0034] Figure 2 is a flowchart of an embodiment of the page rendering method of the present application;

[0035] Figure 3 is a flowchart of an embodiment of the page rendering method of the present application;

[0036] Figure 4 is a flowchart of an embodiment of the page rendering method of the present application;

[0037] Figure 5 is a flowchart of an embodiment of the page rendering method of the present application;

[0038] Figure 6 is a flowchart of an embodiment of the page rendering method of the present application;<b

[0039] Figure 7 is a flowchart of an embodiment of the page rendering method of this application;

[0040] Figure 8 is a schematic structural diagram of an embodiment of the page rendering apparatus of this application;

[0041] Figure 9 is a schematic structural diagram of an embodiment of the page rendering apparatus of this application;

[0042] Figure 10 is a schematic structural diagram of an electronic device suitable for implementing the embodiments of this application. Detailed implementation manners

[0043] The following further elaborates on this application in conjunction with the accompanying drawings and embodiments. It can be understood that the specific embodiments described herein are only used to explain the relevant invention and not to limit the invention. Additionally, it should be noted that for the sake of convenience of description, only parts related to the relevant invention are shown in the drawings.

[0044] It should be noted that, without conflict, the embodiments in this application and the features in the embodiments can be combined with each other. The following will elaborate on this application in detail by referring to the drawings and in conjunction with the embodiments.

[0045] <a href='javascript:;' class="see-img-anchor" img-id="HDA0003376873810000011"Figure 1 shows an exemplary system architecture 100 of an embodiment where the page rendering method or page rendering device of the present application can be applied.

[0046] As shown in Figure 1, the system architecture 100 may include a browser 101, a network 102, and a server 103. The network 102 is used to provide a medium for the communication link between the browser 101 and the server 103. The network 102 may include various connection types, such as wired, wireless communication links, or fiber optic cables, etc.

[0047] The user can use the browser 101 to interact with the server 103 through the network 102, such as sending a rendering request, etc.

[0048] The browser 101 can be hardware or software. When the browser 101 is hardware, the browser can be an electronic product that interacts with the user in one or more ways such as a keyboard, touchpad, touch screen, remote control, voice interaction, or handwriting device, such as a PC (Personal Computer), mobile phone, smart phone, PDA (Personal Digital Assistant), wearable device, PPC (Pocket PC), tablet computer, smart car machine, smart TV, smart speaker, tablet computer, laptop computer, and desktop computer, etc. When the browser 101 is software, it can be installed in the above electronic devices. It can be implemented as multiple software or software modules, or as a single software or software module. No specific limitation is made here.

[0049] The server 103 can provide various services. For example, the server 103, in response to receiving a rendering request sent by the browser, analyzes the service file code indicated by the rendering request to obtain a rendering path; in response to the existence of a rendering path in the target path file, obtains the corresponding rendering code from the ES module file; and sends the rendering code to the browser so that the browser displays the rendering code. <b

[0050] It should be noted that the server 103 can be hardware or software. When the server 103 is hardware, it can be implemented as a distributed server cluster composed of multiple servers or as a single server. When the server 103 is software, it can be implemented as multiple software or software modules (such as those used to provide distributed services) or as a single software or software module. Specific limitations are not made here.

[0051] It should be noted that the method for updating the service processing model or the service processing method provided in the embodiments of the present application is generally executed by the server 103. Correspondingly, the device for updating the service processing model or the service processing device is generally arranged in the server 103.

[0052] It should be understood that the numbers of browsers, networks, and servers in Figure 1 are merely illustrative. According to the implementation requirements, there can be any number of browsers, networks, and servers.

[0053] Continuing to refer to Figure 2, it shows a flowchart 200 of an embodiment of the page rendering method according to the present application. The page rendering method can be applied to a server, and the page rendering method can include the following steps:

[0054] Step 201, in response to receiving a rendering request sent by a browser, parse the service file code indicated by the rendering request to obtain a rendering path.

[0055] In this embodiment, the execution subject of the method for updating the service processing model (such as <a href='javascript:;' class="see-img-anchor" img-id="HDA00033768738100Upon receiving a rendering request from a browser, the server 103 (shown in FIG. 1 ) parses the service code file indicated by the rendering request to obtain a rendering path. The rendering request instructs the server to parse the service file code sent by the browser to obtain a rendering path. The service file code may be a code related to the service type. Here, parsing the business file code indicated by the rendering request may include: parsing the business file code indicated by the rendering request to obtain program elements included in the business file code, such as the path of the business file code included in the business file code, and the content included in the business file code, such as the entry file code, the component file code, and the style file code.

[0057] It should be noted that the mirror source can be the URL of the dependent package obtained when the module is developed, initialized or added, and the URL is used as the mirror source.

[0058] Step 202: In response to the presence of a rendering path in the target path file, obtain the corresponding rendering code from the ES module file.

[0059] In this embodiment, when the execution subject determines that the target path folder includes the rendering path, it obtains the rendering code corresponding to the rendering path from the ES module file.

[0060] It should be noted that before matching the rendering path with the target path file, the page rendering method may further include: pre-installing a first dependency library using a preset mirror source; thereafter, generating an ES module file and a target path file according to the first dependency library.

[0061] Correspondingly, in this instance, generating an ES module file and a target path file based on the first dependency library may include: precompiling the dependencies of the first dependency library, converting the dependencies in the first dependency library into an ES module file and a target path file that can be recognized by the browser, and the target path file can be the correspondence between the path of the ES module file and the dependency package.

[0062] Here, esbuild or other precompilation methods can be used to precompile the first dependency library; wherein esbuild is a javascript and typescript packaging tool written in go language.

[0063] It should be noted that the dependencies in the first dependency library can be published by at least one of the following: Commons, CMD (command prompt), AMD, and UMD. <b

[0064] Step 203: Send the rendering code to the browser so that the browser displays the rendering code.

[0065] In this embodiment, the above execution subject can send the rendering code to the browser so that when the browser receives the rendering code, it displays the rendering code to present the rendering effect corresponding to the business file code on the browser.

[0066] The page rendering method provided by the embodiments of this application first parses the business file code indicated by the rendering request when the server receives the rendering request from the browser to obtain the rendering path; then when the rendering path exists in the target path file, obtains the corresponding rendering code from the ES module file; and then sends the rendering code to the browser so that the browser displays the rendering code. Among them, the ES module file and the corresponding target path file are determined based on the following steps: The server installs the first dependency library using a preset mirror source and generates the ES module file and the target path file according to the first dependency library. It is possible to use the ES module file and the corresponding target path file generated by the third-party dependency library (i.e., the first dependency library) constructed by the server using the preset mirror source to parse the business file code indicated by the rendering request on the server to obtain the rendering path, and when the rendering path exists in the target path file, obtain the corresponding rendering code from the ES module file, and finally obtain the rendering code that the browser can recognize and parse to complete the real-time preview effect of the code.

[0067] As shown in Figure 3, a flowchart 300 of an embodiment of the page rendering method according to this application is shown. This page rendering method can be applied to a server, and this page rendering method can include the following steps:

[0068] Step 301: In response to receiving a GET request sent by the browser, obtain the business file code indicated by the GET request and the corresponding HyperText Markup Language (HTML) file.

[0069] In this embodiment, the execution subject of the page rendering method (such as <a href='javascript:;' class="see-img-anchor" img-id="HDA0003376873810000011"The server 103 shown in Figure 1 (img-title="Figure 1">Figure 1) can obtain the service file code indicated by the GET request when receiving the GET request sent by the browser, so as to store the HyperText Markup Language (HTML) file corresponding to the service file code in the server (such as the server 103 shown in Figure 1).

[0070] Specifically, when the user runs the service file code in the browser, the following operations need to be performed on the running service file code: compression, encoding, etc. Then, the processed service file code is mounted on the Uniform Resource Locator (URL) parameter and a GET request is sent to the server; after receiving the GET request, the server obtains the service file code indicated by the GET request and the HTML file corresponding to the service file code, and returns the HTML file and the service file code to the browser.

[0071] It should be noted that the service file code can be compressed by using LZUTF8 or other ways of compressing code, where LZUTF8 is a Javascript string compression library.

[0072] Step 302: Mount the service file code on the entry file path in the HTML file to obtain the processed HTML file. The entry file code in the service file code includes the entry file path.

[0073] In this embodiment, the above execution subject can obtain the processed HTML file on the entry file path referenced in the HTML file after returning the HTML file to the browser; where the entry file code in the service file code can include the entry file path.

[0074] In an example, taking the Vue technology stack as an example, after receiving the GET request, the server obtains the service file code mounted on the URL, returns the HTML file stored in the server, and mounts the received service file code on the entry file main.js path referenced in the HTML file to obtain the processed HTML file.

[0075] It should be noted that main.js can be the entry file type corresponding to the Vue technology stack. <b

[0076] Step 303: Send the processed HTML file to the browser.

[0077] In this embodiment, the above execution entity can send the processed HTML file to the browser so that the browser can parse the processed HTML file. During the parsing of the HTML file by the browser, when the entry file code is parsed, a rendering request is sent to the server to instruct the server to parse the entry file code in the service file code.

[0078] Step 304: In response to receiving the rendering request sent by the browser, parse the service file code indicated by the rendering request to obtain a rendering path.

[0079] In this embodiment, when it is detected that the browser is parsing the entry file code in the processed HTML file, a rendering request is sent to the server to request the server to parse the service file code to obtain the rendering path of the service file code.

[0080] Step 305: In response to the existence of a rendering path in the target path file, obtain the corresponding rendering code from the ES module file.

[0081] Step 306: Send the rendering code to the browser so that the browser can display the rendering code.

[0082] In this embodiment, the specific operations of steps 304, 305, and 306 are basically the same as the operations of steps 201, 202, and 203 in the embodiment shown in Figure 2, and will not be elaborated here.

[0083] It should be noted that when parsing the HTML file, the above steps 201 to 203 can be executed when parsing different entry file codes (i.e., resources) in the HTML file.

[0084] As can be seen from Figure 3, compared with <a href='javascript:;' class="see-img-anchor"Compared with the embodiment corresponding to Figure 2, in the page rendering method 300 of this embodiment, when the server receives a GET request sent by the browser, it obtains the service file code indicated by the GET request and the HyperText Markup Language (HTML) file corresponding to the service file code. Then, it mounts the service file code on the entry file path in the HTML file to obtain the processed HTML file. The entry file code in the service file code includes the entry file path. After that, it sends the processed HTML file to the browser, enabling the parsing of the HTML file.

[0085] As shown in Figure 4, a flowchart 400 of an embodiment of the page rendering method according to this application is shown. This page rendering method can be applied to a server and may include the following steps:

[0086] Step 401, in response to receiving a rendering request sent by the browser, parse the service file code indicated by the rendering request to obtain a rendering path.

[0087] In this embodiment, the above execution subject can parse the service file code indicated by the rendering request when receiving the rendering request sent by the browser to obtain a rendering path.

[0088] Step 402, in response to the existence of a rendering path in the target path file, obtain the corresponding rendering code from the ES module file.

[0089] Step 403, in response to the non-existence of a rendering path in the target path file, mount the component file code and style file code in the service file code on the rendering path.

[0090] In this embodiment, after step 402 is executed, if there is no rendering path in the target path file, the page rendering method may further include: when there is no rendering path in the target path file, mount the component file code and style file code in the service file code on the rendering path to return to the browser. <b

[0091] In this embodiment, since the rendering path cannot be found in the target path file, it means that the rendering path of the business file code is a relative path. At this time, the server cannot obtain the corresponding rendering code based on the relative path, and thus cannot perform rendering and parsing on the business file code. The above-mentioned component file code may include code related to the framework of the technology stack adopted by the business file code. For example, app.vue, app.jsx, etc. The above-mentioned style file code may include code related to the style of the business file code. For example, app.scss, app.scss.

[0092] Step 404: Send the component file code and style file code mounted on the rendering path to the browser.

[0093] In this embodiment, the above-mentioned execution entity can mount the component file code and the style file code on the rendering path to send them to the browser.

[0094] Step 405: In response to receiving the first path sent by the browser, the component file code and the style file code are mounted on the first path.

[0095] In this embodiment, the above-mentioned execution entity can send a first path to the server when receiving the component file code and style file code mounted on the rendering path. The first path can be an absolute path. Through the absolute path (that is, the real path where the rendering code is stored), the corresponding rendering code can be obtained.

[0096] Step 406: Send the component file code and style file code mounted on the first path to the browser.

[0097] In this embodiment, the above-mentioned execution entity can send the component file code and style file code mounted on the first path to the browser.

[0098] Step 407: In response to receiving the parsing request sent by the browser, the component file code mounted on the first path is parsed to obtain the parsed component file code; and the style file code mounted on the first path is parsed to obtain the parsed style file code.

[0099] In this embodiment, when the above-mentioned execution entity receives the parsing request sent by the browser, it parses the component file code and the style file code mounted on the first path respectively to obtain the parsed component file code and the parsed style file code. <b

[0100] Step 408: Use the parsed component file code and the parsed style file code as the rendering code.

[0101] In this embodiment, after the above-mentioned execution entity parses the component file code and the style file code, and obtains the parsed component file code and the parsed style file code, it sends the parsed component file code and the parsed style file code to the browser for rendering and display.

[0102] Step 409: Send the rendering code to the browser to enable the browser to display the rendering code.

[0103] It should be noted that when the browser encounters a resource referenced in an HTML file during compilation and continues to request the server, if the referenced dependency library (i.e., the second dependency library), framework code (i.e., the component file code), and style file code cannot obtain the corresponding rendering path from the target path file after parsing, the server can still execute steps 401 to 409, parse the referenced dependency library and framework code into code that the browser can recognize, and return it to the browser, so that the code running online can be rendered in real time in the browser.

[0104] When any one of the referenced dependency library, framework code (i.e., the component file code), and style file code can obtain the corresponding rendering path from the target path file, step 402 can be executed to return the rendering code to the browser, so that the code running online can be rendered in real time in the browser.

[0105] In an example, when the referenced dependency library can obtain the corresponding rendering path from the target path file, step 402 can be executed to return the rendering code to the browser, so that the code running online can be rendered in real time in the browser.

[0106] In this embodiment, the specific operations of steps 401, 402, and 403 are basically the same as the operations of steps 201, 202, and 203 in the embodiment shown in Figure 2, and will not be elaborated here.

[0107] From <a href='javascript:;' class="see-img-anchor" img-id="HDA0003376873810000031"As can be seen from Figure 2 corresponding to <img-title="Figure 4">Figure 4, compared with the embodiment corresponding to Figure 2, for the page rendering method 400 in this embodiment, when there is no rendering path in the target path file, the server mounts the component file code and the style file code in the business file code on the rendering path; then, the server sends the component file code and the style file code mounted on the rendering path to the browser; then, when the server receives the first path sent by the browser, it mounts the component file code and the style file code on the first path; then, the server sends the component file code and the style file code mounted on the first path to the browser; then, when the server receives the parsing request sent by the browser, it parses the component file code mounted on the first path to obtain the parsed component file code; and parses the style file code mounted on the first path to obtain the parsed style file code; then, the server uses the parsed component file code and the parsed style file code as the rendering code. It can hang the remaining code on the path when the corresponding file path cannot be found in the target path file, so as to obtain the absolute path corresponding to the remaining code, thereby realizing the rendering of the code with relative paths and completing the real-time preview effect of the code.

[0108] In some optional implementation manners of this embodiment, the type of the component file code in the business file code is Vue or React; parsing the component file code mounted on the first path to obtain the parsed component file code may include: using Vue or React to parse the component file code to obtain the parsed component file code.

[0109] In this implementation manner, the above execution subject can parse the component file code by using the parsing method corresponding to the type of the component file code to obtain the parsed component file code. The type of the above component file code can be the type corresponding to the Vue or React technology stack.

[0110] In this implementation manner, the component file code can be parsed by using the parsing method corresponding to the type of the component file code to obtain the parsed component file code.

[0111] In some optional implementation manners of this embodiment, parsing the style file code mounted on the first path to obtain the parsed style file code may include: using node-sass to compile the style file code into a preset style file code <b

[0112] In this implementation, node-sass can be used to compile the style file code into a preset style file code.

[0113] Here, the preset style file code can be code that can be supported and displayed by a browser. For example, css file code.

[0114] In one example, the style file code corresponding to the Vue technology stack is parsed into css file code. Or, the style file code corresponding to the React technology stack is parsed into a css file.

[0115] In this implementation, node-sass can be used to compile the style file code into a preset style file code to obtain rendering code recognizable by a browser.

[0116] Continuing to refer to Figure 5, it shows a flowchart 500 of an embodiment of the page rendering method according to the present application. This page rendering method can be applied to a browser. This page rendering method may include the following steps:

[0117] Step 501, send a rendering request to the server.

[0118] In this embodiment, the execution subject of the method for updating the business processing model (such as the browser 101 shown in Figure 1) sends a rendering request to the server.

[0119] Here, the above-mentioned rendering request is used to instruct the server to parse the business file code indicated by the rendering request to obtain a rendering path, and when the rendering path exists in the target path file, obtain the corresponding rendering code from the ES module file; among them, the ES module file and the target path file can be determined based on the following steps: The server installs the first dependency library using a preset image source and generates the ES module file and the target path file according to the first dependency library. The above-mentioned rendering request is used to instruct the server to parse the business file code sent by the browser to obtain a rendering path. The above-mentioned business file code can be code related to the type of business.<b

[0120] Here, parsing the business file code indicated by the rendering request may include: parsing the business file code indicated by the rendering request to obtain program elements included in the business file code. For example, the path of the business file code included in the business file code, the content included in the business file code, such as the entry file code, the component file code, and the style file code.

[0121] It should be noted that before matching the rendering path with the target path file, the server pre-installs the first dependency library using a preset mirror source; thereafter, the ES module file and the target path file are generated according to the first dependency library.

[0122] Correspondingly, in this instance, generating an ES module file and a target path file based on the first dependency library may include: precompiling the dependencies of the first dependency library, converting the dependencies in the first dependency library into an ES module file and a target path file that can be recognized by the browser, and the target path file can be the correspondence between the path of the ES module file and the dependency package.

[0123] Here, esbuild or other precompilation methods can be used to precompile the first dependent library; wherein esbuild is a JavaScript and Typescript packaging tool written in Go language.

[0124] Step 502: Receive the rendering code sent by the server and display the rendering code.

[0125] In this embodiment, the execution entity may receive a rendering code returned by the server after sending a rendering request. The rendering code may be a code for rendering and displaying a page on a browser. <b

[0126] The page rendering method provided by the embodiments of this application first sends a rendering request to the server. This rendering request is used to instruct the server to parse the business file code indicated by the rendering request, obtain the rendering path, and when the rendering path exists in the target path file, obtain the corresponding rendering code from the ES module file. Among them, the ES module file and the target path file can be determined based on the following steps: The server installs the first dependency library using a preset mirror source, and generates the ES module file and the target path file according to the first dependency library. Then, it receives the rendering code sent by the server and displays the rendering code. It can generate the ES module file and the corresponding target path file through the third-party dependency library (i.e., the first dependency library) constructed by the server using the preset mirror source, so that the server can parse the business file code indicated by the rendering request to obtain the rendering path, and when the rendering path exists in the target path file, obtain the corresponding rendering code from the ES module file, and finally obtain the rendering code that can be recognized and parsed by the browser, completing the real-time preview effect of the code.

[0127] As shown in Figure 6, it shows a flowchart 600 of an embodiment of the page rendering method according to this application. This page rendering method can be applied to a browser, and this page rendering method can include the following steps:

[0128] Step 601, in response to detecting that the browser is running the business file code, send a GET request to the server. Among them, the GET request is used to instruct the server to obtain the business file code and the corresponding Hypertext Markup Language (HTML) file, and mount the business file code on the entry file path in the HTML file to obtain the processed HTML file.

[0129] In this embodiment, when the execution entity of the page rendering method (such as the browser 101 shown in Figure 1) detects that the browser is running the business file code, it sends a GET request to the server. This GET request is used to instruct the server (such as <a href='javascript:;' class="see-img-anchor"The server 103 shown in FIG1 ) obtains the business file code and the HTML file stored in the server, and mounts the business file code on the entry file path in the HTML file to obtain the processed HTML file.

[0130] Specifically, when a user runs a business file code in a browser, the user needs to perform the following operations on the running business file code: compression, encoding, etc. Then, the processed business file code is mounted on a Uniform Resource Locator (URL) parameter and a GET request is sent to the server. After receiving the GET request, the server obtains the business file code indicated by the GET request and the HTML file corresponding to the business file code, and returns the HTML file and the business file code to the browser. The above-mentioned HTML file may include at least one entry file code. When parsing an entry file code each time, each entry file code can be parsed by sending a GET request.

[0131] It should be noted that the business file code can be compressed using LZUTF8 or other compression codes, where LZUTF8 is a Javascript string compression library.

[0132] Step 602: In response to receiving the processed HTML file sent by the server, the processed HTML file is parsed.

[0133] In this embodiment, when the above-mentioned execution entity obtains the processed HTML file, it parses the processed HTML file.

[0134] Step 603, sending a rendering request to the server, includes: in response to detecting that the browser parses the entry file code in the processed HTML file, sending a rendering request to the server.

[0135] In this embodiment, the above-mentioned execution entity can send a rendering request to the server in response to detecting that the browser parses the entry file code in the processed HTML file, requesting the server to parse the business file code to obtain the rendering path of the business file code.

[0136] Step 604: Receive the rendering code sent by the server and display the rendering code.

[0137] In this embodiment, when the above-mentioned execution entity receives the rendering code sent by the server, it displays the rendering code. <b

[0138] In this embodiment, the specific operation of step 604 is basically the same as that of step 503 in the embodiment shown in Figure 5, and will not be elaborated here.

[0139] As can be seen from Figure 6, compared with the corresponding embodiment of Figure 5, for the page rendering method 600 in this embodiment, when it is detected that the browser is running business file code, the browser sends a GET request to the server, where the GET request is used to instruct the server to obtain the business file code and the corresponding Hypertext Markup Language (HTML) file, and mount the business file code on the entry file path in the HTML file to obtain the processed HTML file; then, when the browser receives the processed HTML file sent by the server, it parses the processed HTML file; then, when it is detected that the browser parses the entry file code in the processed HTML file, it sends a rendering request to the server; then, it receives the rendering code sent by the server and displays the rendering code. It is possible to use the ES module file and the corresponding target path file generated by the third-party dependency library (i.e., the first dependency library) constructed by the server using the preset mirror source. When the server parses the business file code indicated by the rendering request to obtain the rendering path, and when the rendering path exists in the target path file, obtain the corresponding rendering code from the ES module file, and finally obtain the rendering code that can be recognized and parsed by the browser to complete the real-time preview effect of the code.

[0140] In some optional implementation manners of this embodiment, the business file code includes at least one of the following: entry file code, component file code, and style file code. [I0141]In this implementation manner, the business file code may include at least one of the following: entry file code, component file code, and style file code. <bclass="d_n">

[0142] In this implementation, by parsing at least one of the entry file code, component file code and style file code, a code that can be recognized and parsed by the browser is obtained, thereby achieving a real-time preview effect of the code.

[0143] In some optional implementations of this embodiment, the page rendering method also includes: sending a first path in response to receiving the component file code and style file code in the business file code mounted on the rendering path sent by the server; sending a parsing request to the server in response to receiving the component file code and style file code in the business file code mounted on the first path sent by the server; receiving the parsed component file code and parsed style file code sent by the server, wherein the rendering code includes the parsed component file code and the parsed style file code.

[0144] In this implementation, upon receiving the component file code and style file code in the business file code mounted on the rendering path sent by the server, the execution subject sends a first path; thereafter, upon receiving the component file code and style file code in the business file code mounted on the first path sent by the server, the execution subject sends a parsing request to the server; and receives the parsed component file code and parsed style file code sent by the server, wherein the rendering code includes the parsed component file code and the parsed style file code. As mentioned above, the first path can be an absolute path corresponding to the actual storage of the component file code and the style file code.

[0145] In this implementation method, when the corresponding file path cannot be found from the target path file, the remaining code can be hung on the path to obtain the absolute path corresponding to the remaining code, so that the rendering of the code of the relative path can be realized and the real-time preview effect of the code can be completed.

[0146] In some optional implementations of this embodiment, at least one of the entry file code, the component file code, and the style file code includes a second dependent library imported through the import function.

[0147] In this implementation, at least one of the entry file code, component file code, and style file code includes a second dependent library imported through the import function. <b

[0148] In one example, for the file introduced by import, look for the corresponding file path after compilation in the "target path file" generated when the server starts. If the corresponding file path is found, return the saved compiled dependency library path; if not found, it means that the relative path does not exist in the dependency library, then add the remaining compressed code except the already parsed code to the parameter of this path.

[0149] In this implementation, the ES module file and the corresponding target path file generated by the server using the preset image source to build the third-party dependency library (i.e., the first dependency library) can be used to parse the second dependency library on the server to obtain the rendering path. And when the rendering path exists in the target path file, obtain the corresponding rendering code from the ES module file, and finally obtain the rendering code that can be recognized and parsed by the browser to complete the real-time preview effect of the code.

[0150] In some optional implementation manners of this embodiment, the second dependency library is a dependency library imported according to the name of the second dependency library through the import function.

[0151] In this implementation, the second dependency library is a dependency library imported according to the name of the second dependency library through the import function.

[0152] In this implementation, mount the file exported on demand to the import by name to avoid the variables imported on demand from being unable to be parsed.

[0153] In this application, the page rendering system may include a browser (such as the browser 101 shown in Figure 1) and a server (such as the server 702 shown in Figure 1); the page rendering system will be described below with reference to Figure 7. As shown in <a href='javascript:;' class="see-img-anchor"Figure 7 shows a flow chart of an embodiment of a page rendering method according to the present application.

[0154] Server 702 uses a preset mirror source to install a first dependency library and generates an ES module file and a target path file according to the first dependency library. Browser 701 sends a rendering request to server 702; in response to server 702 receiving the rendering request, the business file code indicated by the rendering request is parsed to obtain a rendering path; in response to the presence of a rendering path in the target path file, server 702 obtains the corresponding rendering code from the ES module file; server 702 sends the rendering code to browser 701; browser 701 receives the rendering code sent by server 702 and displays the rendering code.

[0155] In this embodiment, the server 702 uses a preset mirror source to install the required first dependency library, and uses esbuild to precompile the dependencies, converting the dependencies published by CommonJS or UMD into ES module files that can be recognized by the browser. This process generates two types of files: one is the "ES module file" that can be recognized by the browser, and the other is the file that saves the "correspondence between the above ES Module file path and the dependency package (i.e., the target path file)".

[0156] In some optional implementations of this embodiment, before responding to receiving a rendering request sent by the browser, in response to detecting that the browser 701 is running the business file code, the browser 701 sends a GET request to the server 702; in response to the server 702 receiving the GET request sent by the browser 701, the business file code indicated by the GET request and the hypertext markup language HTML file corresponding to the business file code are obtained; the server 702 mounts the business file code on the entry file path in the HTML file to obtain the processed HTML file, and the entry file code in the business file code includes the entry file path; the server 702 sends the processed HTML file to the browser 701; in response to the browser 701 receiving the processed HTML file sent by the server 702, the browser 701 parses the processed HTML file; the browser 701 sends a rendering request to the server 702, including: in response to detecting that the browser 701 parses the entry file code in the processed HTML file, sending a rendering request to the server 702. <b

[0157] Specifically, the code online running platform is accessed in the browser 701, and the technology stack Vue or React to be developed is selected. The Vue technology stack generates three code areas, namely, the entry point main.js, the framework component app.vue, and the style file app.scss. The React technology stack generates three code areas, namely, the entry point main.jsx, the framework component app.jsx, and the style file app.scss. After the user has developed the code, click Run Code, and use LZUTF8[5] to compress the included code, and then encode it through encodeBase64 and mount it to the URL parameter. At this time, the URL contains the compressed entry file code, component file code, and style file code, and requests HTML to the server 702 through GET. After receiving the HTML request, server 702 obtains the code mounted on the URL, returns the HTML file saved on server 702, and mounts the received compressed code on the entry file main.js path (i.e., entry file path) referenced in the HTML file. Browser 701 receives the processed HTML file and parses it. After encountering the entry main.js resource (i.e., entry file code) mounted with the compressed code, it continues to request server 702. <b

[0158] In some optional implementation manners of this embodiment, in response to the absence of a rendering path in the target path file, the server 702 mounts the component file code and the style file code in the service file code on the rendering path; the server 702 sends the component file code and the style file code mounted on the rendering path to the browser 701; in response to the browser 701 receiving the component file code and the style file code in the service file code mounted on the rendering path sent by the server 702, the browser 701 sends a first path; in response to the server 702 receiving the first path sent by the browser 701, the server 702 mounts the component file code and the style file code on the first path; the server 702 sends the component file code and the style file code mounted on the first path to the browser 701; in response to the browser 701 receiving the component file code and the style file code in the service file code mounted on the first path sent by the server 702, the browser 701 sends a parsing request to the server 702; in response to the server 702 receiving the parsing request sent by the browser 701, the server 702 parses the component file code mounted on the first path to obtain the parsed component file code; and the server 702 parses the style file code mounted on the first path to obtain the parsed style file code; the server 702 uses the parsed component file code and the parsed style file code as rendering code; the browser 701 receives the parsed component file code and the parsed style file code sent by the server 702, wherein the rendering code includes the parsed component file code and the parsed style file code.

[0159] In some optional implementation manners of this embodiment, the type of the component file code in the service file code is Vue or React; the server 702 uses Vue or React to parse the component file code to obtain the parsed component file code.

[0160] In some optional implementation manners of this embodiment, the server 702 uses node-sass to compile the style file code into a preset style file code.

[0161] The server 702 parses the introduced scss style file in the file. The server can use node-sass to compile it into a css file, and then in the returned js code, mount the style file to the body through the generated <style> tag.

[0162] In this embodiment, after the above processing, returning the rendering code file to the browser enables real-time rendering of the online-running code in the browser.

[0163] For further reference, see <a href='javascript:;'Figure 8. As an implementation of the methods shown in the above figures, an embodiment of a page rendering device is disclosed in this application. This device embodiment corresponds to the method embodiment shown in Figure 2, and this device can be specifically applied to various electronic devices.

[0164] As shown in Figure 8, an embodiment of this application provides a page rendering device 800. The device 800 includes: a request receiving module 801, a path obtaining module 802, a code obtaining module 803, and a code sending module 804. Among them, the device 800 is applied to a server. The server includes an ES module file and a corresponding target path file, and the ES module file and the corresponding target path file are determined based on the following steps: The server installs a first dependency library using a preset image source, and generates an ES module file and a target path file based on the first dependency library. The page rendering device includes: a request receiving module 801, configured to receive a rendering request sent by a browser; a path obtaining module 802, configured to parse the service file code indicated by the rendering request in response to receiving the rendering request sent by the browser, and obtain a rendering path; a code obtaining module 803, configured to obtain the corresponding rendering code from the ES module file in response to the existence of the rendering path in the target path file; a code sending module 804, configured to send the rendering code to the browser so that the browser displays the rendering code.

[0165] In this embodiment, in the page rendering device 800, the specific processing of the request receiving module 801, the path obtaining module 802, the code obtaining module 803, and the code sending module 804 and the technical effects brought by them can be respectively referred to the steps 201 to step 203 in the corresponding embodiment of <a href='javascript:;' class="see-img-anchor" img-id="HDA0003376873810000012" img-title="Figure

[0166] In some embodiments, before responding to a rendering request sent by a browser, the device 800 further includes: a request receiving module 801, configured to receive a GET request sent by the browser; a file acquiring module, configured to acquire the business file code indicated by the GET request and a hypertext markup language HTML file corresponding to the business file code in response to receiving the GET request sent by the browser; a file processing module, configured to mount the business file code on an entry file path in the HTML file to obtain a processed HTML file, wherein the entry file code in the business file code includes the entry file path; and a file sending module, configured to send the processed HTML file to the browser.

[0167] In some embodiments, the device 800 also includes: a code processing module, configured to mount the component file code and style file code in the business file code on the rendering path in response to the absence of a rendering path in the target path file; a code sending module 804, configured to send the component file code and style file code mounted on the rendering path to the browser; the code processing module, configured to mount the component file code and style file code on the first path in response to receiving a first path sent by the browser; the code sending module 804, configured to send the component file code and style file code mounted on the first path to the browser; a code parsing module, configured to parse the component file code mounted on the first path in response to receiving a parsing request sent by the browser to obtain the parsed component file code; and parse the style file code mounted on the first path to obtain the parsed style file code; a code determination module, configured to use the parsed component file code and the parsed style file code as the rendering code.

[0168] In some embodiments, the type of the component file code in the business file code is Vue or React; the code parsing module is further configured to: use Vue or React to parse the component file code to obtain the parsed component file code.

[0169] In some embodiments, the code parsing module is further configured to: use node-sass to compile the style file code into a preset style file code. Further references <a href='javascript:;' class="see-img-anchor" img-id="HDA0003376873810000062"Figure 5, as an implementation of the methods shown in the above figures, this application discloses an embodiment of a page rendering device. This device embodiment corresponds to the method embodiment shown in Figure 5, and this device can be specifically applied to various electronic devices.

[0171] As shown in Figure 9, an embodiment of this application provides a page rendering device 900, and this device 900 includes: a request sending module 901, a code receiving module 902, and a code display module 903. Among them, this device 900 is applied to a browser. The page rendering device 900 includes: a request sending module 901, configured to send a rendering request to a server. Among them, the rendering request is used to instruct the server to parse the service file code indicated by the rendering request to obtain a rendering path, and when the rendering path exists in the target path file, obtain the corresponding rendering code from the ES module file. The ES module file and the target path file are determined based on the following steps: The server installs a first dependency library using a preset mirror source, and generates an ES module file and a target path file according to the first dependency library; a code receiving module 902, configured to receive the rendering code sent by the server; a code display module 903, configured to display the rendering code.

[0172] In this embodiment, in the page rendering device 900, the specific processing of the request sending module 901, the code receiving module 902, and the code display module 903 and the technical effects brought by them can respectively refer to steps 501 to step 502 in the corresponding embodiment of Figure 5.

[0173] In some embodiments, the service file code includes at least one of the following: entry file code, component file code, style file code. <b

[0174] In some embodiments, the device 900 further includes: a request sending module 901, configured to send a GET request to the server in response to detecting that the browser is running the business file code, wherein the GET request is used to instruct the server to obtain the business file code and the hypertext markup language HTML file corresponding to the business file code, and mount the business file code on the entry file path in the HTML file to obtain the processed HTML file; a file parsing module, configured to parse the processed HTML file in response to receiving the processed HTML file sent by the server; the request sending module 901 is further configured to: send a rendering request to the server in response to detecting that the browser parses the entry file code in the processed HTML file.

[0175] In some embodiments, the device 900 also includes: a path sending module, configured to send a first path in response to receiving a component file code and a style file code in a business file code mounted on a rendering path sent by a server; a request sending module 901, configured to send a parsing request to the server in response to receiving a component file code and a style file code in a business file code mounted on a first path sent by a server; a code receiving module 902, configured to receive the parsed component file code and the parsed style file code sent by the server, wherein the rendering code includes the parsed component file code and the parsed style file code.

[0176] In some embodiments, at least one of the entry file code, the component file code, and the style file code includes a second dependent library imported through the import function.

[0177] In some embodiments, the second dependent library is a dependent library imported through the import function according to the name of the second dependent library.

[0178] <a href='javascript:;' class="see-img-anchor" img-id="HDA0003376873810000071"As shown in <img-title="Figure 10">Figure 10, it is a block diagram of an electronic device for a page rendering method according to an embodiment of the present application. 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 can also represent various forms of mobile devices, such as, personal digital processors, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the present application described herein and / or claimed.

[0179] As shown in <img-title="Figure 10">Figure 10, the electronic device includes: one or more processors 1001, a memory 1002, and interfaces for connecting the various components, including high-speed interfaces and low-speed interfaces. The various components are interconnected using different buses and can be mounted on a common motherboard or otherwise mounted as needed. The processor can process instructions executed within the electronic device, including instructions stored in the memory or on the memory to display graphical information of a GUI on an external input / output device (such as, a display device coupled to the interface). In other embodiments, if necessary, multiple processors and / or multiple buses can be used with multiple memories and multiple memories. Similarly, multiple electronic devices can be connected, each device providing some necessary operations (such as, as a server array, a set of blade servers, or a multi-processor system). <img-title="Figure 10">Figure 10 shows an example of one processor 1001.

[0180] The memory 1002 is the non-transitory computer-readable storage medium provided by the present application. Among them, the memory stores instructions executable by at least one processor, so that at least one processor executes the page rendering method provided by the present application. The non-transitory computer-readable storage medium of the present application stores computer instructions, and the computer instructions are used to cause the computer to execute the page rendering method provided by the present application. <bThe memory 1002, as a non-transitory computer-readable storage medium, can be used to store non-transitory software programs, non-transitory computer-executable programs, and modules, such as the program instructions / modules corresponding to the page rendering method in the embodiments of the present application (for example, the request receiving module 801, path obtaining module 802, code obtaining module 803, and code sending module 804 shown in Figure 8; or the request sending module 901, code receiving module 902, and code display module 903 shown in Figure 9). By running the non-transitory software programs, instructions, and modules stored in the memory 1002, the processor 1001 executes various functional applications and data processing of the server, that is, implements the page rendering method in the above method embodiments.

[0182] The memory 1002 may include a program storage area and a data storage area. Among them, the program storage area can store an operating system and application programs required for at least one function; the data storage area can store data created according to the use of the blockchain-based information processing electronic device, etc. In addition, the memory 1002 may include high-speed random access memory, and may also include non-transitory memory, such as at least one magnetic disk storage device, flash memory device, or other non-transitory solid-state storage devices. In some embodiments, the memory 1002 optionally includes a memory remotely set relative to the processor 1001, and these remote memories can be connected to the blockchain-based information processing electronic device through a network. Examples of the above network include but are not limited to the Internet, enterprise intranet, local area network, mobile communication network, and their combinations.

[0183] The electronic device for the page rendering method may further include: an input device 1003 and an output device 1004. The processor 1001, memory 1002, input device 1003, and output device 1004 can be connected through a bus or other means. Figure 10 takes the connection through a bus as an example.<b

[0184] The input device 1003 can receive input digital or character information and generate key signal input related to user settings and function control of the blockchain-based information processing electronic device, such as a touch screen, a keypad, a mouse, a trackpad, a touch pad, an indicator stick, one or more mouse buttons, a trackball, a joystick, and other input devices. The output device 1004 may include a display device, an auxiliary lighting device (e.g., an LED), and a tactile feedback device (e.g., a vibration motor). The display device may include, but is not limited to, a liquid crystal display (LCD), a light emitting diode (LED) display, and a plasma display. In some embodiments, the display device may be a touch screen.

[0185] Various embodiments of the systems and techniques described herein can be implemented in digital electronic circuit systems, integrated circuit systems, dedicated ASICs (application specific integrated circuits), computer hardware, firmware, software, and / or combinations thereof. These various embodiments can include implementation in one or more computer programs that can be executed and / or interpreted on a programmable system comprising at least one programmable processor, which can be a special purpose or general purpose programmable processor that can receive data and instructions from a storage system, at least one input device, and at least one output device, and transmit data and instructions to the storage system, the at least one input device, and the at least one output device. These computing programs ( also referred to as programs, software, software applications, or codes) include machine instructions for programmable processors and can be implemented using high-level procedural and / or object-oriented programming languages, and / or assembly / machine languages. As used herein, the terms "machine-readable medium" and "computer-readable medium" refer to any computer program product, device, and / or apparatus (e.g., disk, optical disk, memory, programmable logic device (PLD)) for providing machine instructions and / or data to a programmable processor, including a machine-readable medium that receives machine instructions as machine-readable signals. The term "machine-readable signal" refers to any signal for providing machine instructions and / or data to a programmable processor. <b

[0187] To provide for interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the user can provide input to the computer. Other types of devices can also be used to provide for interaction with the user; for example, the 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 acoustic input, voice input, or tactile input).

[0188] The systems and techniques described herein can be implemented in a computing system that includes back-end components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes front-end components (e.g., a user computer with a graphical user interface or a web browser through which a user can interact with embodiments of the systems and techniques described herein), or a computing system that includes any combination of such back-end components, middleware components, or front-end components. The components of the system can be interconnected by digital data communication (e.g., a communication network) in any form or medium. Examples of communication networks include: a local area network (LAN), a wide area network (WAN), and the Internet. The computer system may include a client and a server. The client and the server are generally remote from each other and typically interact via a communication network. The relationship between the client and the server is generated by computer programs that run on corresponding computers and have a client-server relationship with each other.

[0190] It should be understood that the various forms of the processes shown above can be used to reorder, add, or delete steps. For example, the steps described in this application can be performed in parallel, sequentially, or in a different order, as long as the desired results of the technical solutions disclosed in this application can be achieved, and this is not limited herein.

[0191] The above specific embodiments do not constitute a limitation on the scope of protection of this application. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations, and substitutions may be made based on design requirements and other factors. Any modifications, equivalent replacements, and improvements made within the spirit and principles of this application should be included within the scope of protection of this application.< / iframe>

Claims

1. A page rendering method, applied to a server, the server including an ES module file and a corresponding target path file, wherein the ES module file and the corresponding target path file are determined based on the following steps: the server uses a preset mirror source to install a first dependency library, and generates the ES module file and the target path file based on the first dependency library, the method comprising: In response to receiving a rendering request sent by the browser, parsing the business file code indicated by the rendering request to obtain a rendering path, wherein parsing the business file code indicated by the rendering request includes: parsing program elements included in the business file code, the program elements including: a path of the business file code, an entry file code, a component file code, and a style file code included in the business file code; In response to the presence of the rendering path in the target path file, obtaining corresponding rendering code from the ES module file; or In response to the absence of the rendering path in the target path file, mounting the component file code and the style file code in the business file code on the rendering path; sending the component file code and the style file code mounted on the rendering path to the browser; in response to receiving the first path sent by the browser, mounting the component file code and the style file code on the first path; sending the component file code and the style file code mounted on the first path to the browser; in response to receiving the parsing request sent by the browser, parsing the component file code mounted on the first path to obtain a parsed component file code; and parsing the style file code mounted on the first path to obtain a parsed style file code; using the parsed component file code and the parsed style file code as the rendering code; The rendering code is sent to the browser, so that the browser displays the rendering code.

2. The method according to claim 1, wherein Before responding to receiving the rendering request sent by the browser, the method further includes: In response to receiving a GET request sent by the browser, obtaining a business file code indicated by the GET request and a hypertext markup language HTML file corresponding to the business file code; Mounting the business file code on the entry file path in the HTML file to obtain a processed HTML file, wherein the entry file code in the business file code includes the entry file path; The processed HTML file is sent to the browser.

3. The method according to claim 1, wherein The type of the component file code in the business file code is Vue or React; and the component file code mounted on the first path is parsed to obtain the parsed component file code, including: The component file code is parsed using Vue or React to obtain the parsed component file code.

4. The method according to claim 1, wherein The parsing of the style file code mounted on the first path to obtain the parsed style file code includes: Utilize node-sass to compile the style file code into a preset style file code.

5. A page rendering method, applied to a browser, comprising: A rendering request is sent to a server, wherein the rendering request is used to instruct the server to parse the business file code indicated by the rendering request to obtain a rendering path, wherein parsing the business file code indicated by the rendering request includes: parsing the program elements included in the business file code, the program elements including: the path of the business file code, the entry file code, component file code and style file code included in the business file code; and when the rendering path exists in the target path file, obtaining the corresponding rendering code from the ES module file; or when the rendering path does not exist in the target path file, mounting the component file code and style file code in the business file code on the rendering path; sending the component file code and style file code mounted on the rendering path to the browser. code; in response to receiving the first path sent by the browser, mounting the component file code and the style file code on the first path; sending the component file code and the style file code mounted on the first path to the browser; in response to receiving the parsing request sent by the browser, parsing the component file code mounted on the first path to obtain the parsed component file code; and parsing the style file code mounted on the first path to obtain the parsed style file code; using the parsed component file code and the parsed style file code as rendering code, wherein the ES module file and the target path file are determined based on the following steps: the server uses a preset mirror source to install a first dependency library, and generates the ES module file and the target path file according to the first dependency library; Receive the rendering code sent by the server, and display the rendering code.

6. The method according to claim 5, wherein: The business file code includes at least one of the following: an entry file code, a component file code, and a style file code.

7. The method according to claim 5 or 6, further comprising: In response to detecting that the browser is running the business file code, sending a GET request to the server, wherein the GET request is used to instruct the server to obtain the business file code and a hypertext markup language HTML file corresponding to the business file code, and mounting the business file code on the entry file path in the HTML file to obtain a processed HTML file; In response to receiving the processed HTML file sent by the server, parsing the processed HTML file; Sending a rendering request to the server includes: in response to detecting that the browser parses the entry file code in the processed HTML file, sending the rendering request to the server.

8. The method according to claim 5 or 6, further comprising: In response to receiving the component file code and the style file code in the business file code mounted on the rendering path sent by the server, sending a first path; In response to receiving the component file code and the style file code in the business file code mounted on the first path sent by the server, sending a parsing request to the server; The parsed component file code and the parsed style file code sent by the server are received, wherein the rendering code includes the parsed component file code and the parsed style file code.

9. The method according to claim 6, wherein: At least one of the entry file code, the component file code, and the style file code includes a second dependent library imported through the import function.

10. The method according to claim 9, wherein: The second dependent library is a dependent library imported by the import function according to the name of the second dependent library.

11. A page rendering device, applied to a server, the server including an ES module file and a corresponding target path file, wherein the ES module file and the corresponding target path file are determined based on the following steps: the server installs a first dependency library using a preset mirror source, and generates the ES module file and the target path file based on the first dependency library, the device comprising: A request receiving module is configured to receive a rendering request sent by a browser; A path obtaining module is configured to, in response to receiving a rendering request sent by a browser, parse the business file code indicated by the rendering request to obtain a rendering path, wherein parsing the business file code indicated by the rendering request includes: parsing program elements included in the business file code, the program elements including: a path of the business file code, an entry file code, a component file code, and a style file code included in the business file code; a code acquisition module, configured to acquire corresponding rendering code from the ES module file in response to the presence of the rendering path in the target path file; a code sending module, configured to send the rendering code to the browser, so that the browser displays the rendering code; Also includes: A code processing module is configured to mount the component file code and the style file code in the business file code on the rendering path in response to the absence of the rendering path in the target path file; The code sending module is configured to send the component file code and style file code mounted on the rendering path to the browser; The code processing module is configured to mount the component file code and the style file code on the first path in response to receiving the first path sent by the browser; The code sending module is configured to send the component file code and the style file code mounted on the first path to the browser; a code parsing module configured to, in response to receiving a parsing request sent by the browser, parse the component file code mounted on the first path to obtain parsed component file code; and parse the style file code mounted on the first path to obtain parsed style file code; The code determination module is configured to use the parsed component file code and the parsed style file code as rendering code.

12. The device according to claim 11, wherein Before responding to receiving the rendering request sent by the browser, the apparatus further includes: The request receiving module is configured to receive a GET request sent by the browser; A file acquisition module is configured to, in response to receiving a GET request sent by the browser, acquire the business file code indicated by the GET request and a hypertext markup language HTML file corresponding to the business file code; A file processing module is configured to mount the business file code on the entry file path in the HTML file to obtain a processed HTML file, wherein the entry file code in the business file code includes the entry file path; The file sending module is configured to send the processed HTML file to the browser.

13. The device according to claim 11, wherein The type of the component file code in the business file code is Vue or React; the code parsing module is further configured to: The component file code is parsed using Vue or React to obtain the parsed component file code.

14. The device according to claim 11, wherein The code parsing module is further configured to: Utilize node-sass to compile the style file code into a preset style file code.

15. A page rendering device, applied to a browser, comprising: A request sending module is configured to send a rendering request to a server, wherein the rendering request is used to instruct the server to parse the business file code indicated by the rendering request to obtain a rendering path, wherein parsing the business file code indicated by the rendering request includes: parsing the program elements included in the business file code, the program elements including: the path of the business file code, the entry file code, the component file code and the style file code included in the business file code; and when the rendering path exists in the target path file, obtaining the corresponding rendering code from the ES module file; or when the rendering path does not exist in the target path file, mounting the component file code and the style file code in the business file code on the rendering path; and sending the component file code mounted on the rendering path to the browser. and style file code; in response to receiving the first path sent by the browser, mounting the component file code and the style file code on the first path; sending the component file code and the style file code mounted on the first path to the browser; in response to receiving the parsing request sent by the browser, parsing the component file code mounted on the first path to obtain the parsed component file code; and parsing the style file code mounted on the first path to obtain the parsed style file code; using the parsed component file code and the parsed style file code as rendering code, wherein the ES module file and the target path file are determined based on the following steps: the server uses a preset mirror source to install a first dependency library, and generates the ES module file and the target path file according to the first dependency library; A code receiving module, configured to receive the rendering code sent by the server; The code display module is configured to display the rendering code.

16. The device according to claim 15, wherein The business file code includes at least one of the following: an entry file code, a component file code, and a style file code.

17. The apparatus according to claim 15 or 16, further comprising: a request sending module configured to, in response to detecting that the browser is running the business file code, send a GET request to the server, wherein the GET request is used to instruct the server to obtain the business file code and a hypertext markup language HTML file corresponding to the business file code, and mount the business file code on an entry file path in the HTML file to obtain a processed HTML file; a file parsing module configured to parse the processed HTML file in response to receiving the processed HTML file sent by the server; The request sending module is further configured to: in response to detecting that the browser parses the entry file code in the processed HTML file, send the rendering request to the server.

18. The apparatus according to claim 15 or 16, further comprising: a path sending module configured to send a first path in response to receiving the component file code and the style file code in the business file code mounted on the rendering path sent by the server; The request sending module is configured to send a parsing request to the server in response to receiving the component file code and the style file code in the business file code mounted on the first path sent by the server; The code receiving module is configured to receive the parsed component file code and the parsed style file code sent by the server, wherein the rendering code includes the parsed component file code and the parsed style file code.

19. The device according to claim 16, wherein At least one of the entry file code, the component file code, and the style file code includes a second dependent library imported through the import function.

20. The device according to claim 19, wherein The second dependent library is a dependent library imported by the import function according to the name of the second dependent library.

21. A page rendering system, comprising: The server uses a preset mirror source to install the first dependency library, and generates an ES module file and a target path file according to the first dependency library; The browser sends a rendering request to the server; The server receives the rendering request, parses the business file code indicated by the rendering request, and obtains a rendering path, wherein parsing the business file code indicated by the rendering request includes: parsing program elements included in the business file code, the program elements including: the path of the business file code, the entry file code, the component file code, and the style file code included in the business file code; in response to the presence of the rendering path in the target path file, the server obtains the corresponding rendering code from the ES module file; the server sends the rendering code to the browser; or in response to the absence of the rendering path in the target path file, the component file code and the style file code in the business file code are parsed. Mounting the component file code on the rendering path; sending the component file code and style file code mounted on the rendering path to the browser; in response to receiving the first path sent by the browser, mounting the component file code and style file code on the first path; sending the component file code and style file code mounted on the first path to the browser; in response to receiving the parsing request sent by the browser, parsing the component file code mounted on the first path to obtain parsed component file code; and parsing the style file code mounted on the first path to obtain parsed style file code; using the parsed component file code and the parsed style file code as rendering code; The browser receives the rendering code sent by the server and displays the rendering code.

22. An electronic device comprising: one or more processors; a storage device having one or more programs stored thereon; When the one or more programs are executed by the one or more processors, the one or more processors implement the method according to any one of claims 1 to 4 or 5 to 10.

23. A non-transitory computer-readable storage medium storing computer instructions, having a computer program stored thereon, wherein: When the program is executed by a processor, the method according to any one of claims 1 to 4 or 5 to 10 is implemented.

Images