Page generation method and system based on server, electronic equipment and storage medium

Abstract

The invention relates to a server-based page generation method and system, electronic equipment and a storage medium, and the generation method and system comprises the steps: obtaining a page request sent by a client through a node server, obtaining an inline resource from a target file generated by a static module packer according to the page request, and initializing the target file based on an initialization request of the inline resource, obtaining global initialization data through a Nest development framework layer; generating an HTML page according to inline resources and the global initialization data, directly rendering a complete HTML page layout and style through a server, and returning the HTML page layout and style to a front-end browser, so that the time for requesting JS and CSS files by the front-end browser and executing and rendering the JS and CSS files is shortened, and the problem of page jitter caused by the HTML page requesting the initialization data is solved; the Nestjs service is added to the server side, so that the basic logic processing capacity of the server side is enhanced, and the Nginx pressure is reduced.

Description

Technical Field

[0001] Embodiments of the present invention relate to the technical field of web page development, and in particular to a server-based page generation method, a server-based page generation system, an electronic device, and a storage medium. Background Art

[0002] Currently, when a common web application loads a page in a browser, it usually accesses the Nginx service request page and related JS (JavaScript) and CSS (Cascading Style Sheets) code files. After requesting the resources, the page will present a chaotic layout if JS and CSS have not yet been executed. The page can only be displayed normally after JS and CSS are loaded and executed. This seriously affects the first screen loading speed and puts a lot of pressure on Nginx. It is also easy to cause page jitter caused by HTML page request initialization data.

[0003] The traditional way is to unpack and compress files during packaging to increase the file loading speed, set up browser cache to reduce network requests, and improve page performance by performing lazy loading or on-demand loading of JS. However, these methods cannot fundamentally solve the problems of first screen loading speed and page jitter caused by HTML page request initialization data. Summary of the invention

[0004] In view of the above problems, a server-based page generation method, a server-based page generation system, an electronic device and a storage medium are proposed to overcome the above problems or at least partially solve the above problems.

[0005] According to a first aspect of the present invention, a server-based page generation method is provided, the page generation method comprising:

[0006] The node server obtains the page request sent by the client;

[0007] Obtaining inline resources from a target file generated by a static module packager according to the page request;

[0008] The node server obtains global initialization data through the Nest development framework layer based on the initialization request of the inline resource;

[0009] A hypertext markup language page is generated according to the inline resource and the global initialization data.

[0010] Optionally, the target file includes: a server-side running file, a client-side running file and a page template file.

[0011] Optionally, obtaining the inline resource from the target file generated by the static module packager according to the page request includes:

[0012] Obtain the path of the page request, perform route matching, and obtain the route configuration file;

[0013] Based on the routing configuration file, search the target file resource path corresponding to the path from the server running file;

[0014] Acquire the corresponding target file page content according to the target file resource path;

[0015] The target file page content is written into the page template file to form the inline resource.

[0016] Optionally, the target file includes: a JS scripting language file and a CSS cascading style sheet file;

[0017] The obtaining of inline resources from a target file generated by a static module packager according to the page request includes:

[0018] Obtain the path of the page request, perform route matching, and obtain the route configuration file;

[0019] Searching for the corresponding JS script language file from the server-side running file based on the routing configuration file, and reading the corresponding hypertext markup language component according to the routing configuration file;

[0020] Searching for the corresponding CSS cascading style sheet file from the server-side running file based on the routing configuration file;

[0021] The JS scripting language file and the CSS cascading style sheet file are written into the page template file to form the inline resource.

[0022] Optionally, the node server obtains global initialization data through the Nest development framework layer based on the initialization request of the inline resource, including:

[0023] After acquiring the inline resource, determining an initialization request for the inline resource;

[0024] The node server sends the initialization request to the Nest development framework layer;

[0025] The Nest development framework layer obtains the global initialization data corresponding to the initialization request from a database, and sends the global initialization data to a node server.

[0026] Optionally, generating a hypertext markup language page according to the inline resource and the global initialization data includes:

[0027] Preload the business data required by the current page according to the JS script language file in the inline resource, and mount the business data to the window object;

[0028] The node server writes the CSS cascading style sheet file content in the inline resource, the business data output mounted to the window object and the global initialization data into a hypertext markup language, thereby generating a hypertext markup language page.

[0029] Optionally, the node server configures a status management file and a routing management file;

[0030] After the node server obtains the page request sent by the client, it also includes:

[0031] After the page request reaches the node server, the status management file is triggered;

[0032] Determine whether the page is a login page. If the page is the login page, return the page request; if the page is not the login page, read the page request and parse its token field for authentication.

[0033] According to a second aspect of the present invention, a server-based page generation system is provided, the page generation system comprising:

[0034] The request acquisition module is used by the node server to obtain the page request sent by the client;

[0035] An inline resource acquisition module, used to acquire inline resources from a target file generated by a static module packager according to the page request;

[0036] A global initialization data acquisition module, used by the node server to acquire global initialization data through the Nest development framework layer based on the initialization request of the inline resource;

[0037] The page generation module is used to generate a hypertext markup language page according to the inline resource and the global initialization data.

[0038] According to a third aspect of the present invention, there is provided an electronic device, comprising a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory communicate with each other via the communication bus; the memory is used to store computer programs; and the processor is used to implement any one of the page generation methods when executing the program stored in the memory.

[0039] According to a fourth aspect of the present invention, a computer-readable storage medium is provided, on which a computer program is stored, and when the computer program is executed by a processor, any one of the page generation methods is implemented.

[0040] The embodiments of the present invention include the following advantages:

[0041] In an embodiment of the present invention, a page request sent by a client is obtained through a node server, inline resources are obtained from a target file generated by a static module packager according to the page request, and global initialization data is obtained through the Nest development framework layer based on the initialization request of the inline resources; an HTML page is generated according to the inline resources and the global initialization data, and a complete HTML page layout and style are directly rendered through the server, and returned to the front-end browser, thereby reducing the time for the front-end browser to request JS and CSS files and execute and render them, and solving the problem of page jitter caused by HTML page request initialization data; the Nestjs service is added to the server to enhance the server's ability to process basic logic and reduce the pressure on Nginx.

[0042] The above description is only an overview of the technical solution of the present invention. In order to more clearly understand the technical means of the present invention, it can be implemented according to the contents of the specification. In order to make the above and other purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] The drawings constituting a part of the present application are used to provide a further understanding of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application.

[0044] In order to more clearly illustrate the technical solution of the present application, the drawings required for use in the description of the present application will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0045] Figure 1 is an overall flow chart of a page generation method provided in an embodiment of the present invention;

[0046] Figure 2 It is a flow chart of the steps of a method for generating a page based on a server provided in an embodiment of the present invention;

[0047] Figure 3 It is a structural diagram of a server-based page generation system provided in an embodiment of the present invention;

[0048] Figure 4is a schematic diagram of the hardware structure of an electronic device for implementing various embodiments of the present invention;

[0049] Figure 5 is a schematic diagram of a computer-readable medium provided in an embodiment of the present invention. DETAILED DESCRIPTION

[0050] In order to make the above-mentioned purposes, features and advantages of the present invention more obvious and easy to understand, the present invention is further described in detail below in conjunction with the accompanying drawings and specific embodiments. Obviously, the described embodiments are part of the embodiments of the present invention, rather than all the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0051] Currently, when a common web application loads a page in a browser, it usually accesses the Nginx service to request the page and related JS (JavaScript) and CSS (Cascading Style Sheets) code files. After requesting the resources, the page will present a chaotic layout if JS and CSS have not yet been executed. The page can only be displayed normally after JS and CSS are loaded and executed, which seriously affects the loading speed of the first screen.

[0052] The traditional way is to unpack and compress files during packaging to increase the file loading speed, set up browser cache to reduce network requests, and improve page performance by performing lazy loading or on-demand loading of JS. However, these methods cannot fundamentally solve the performance problem of first-screen loading.

[0053] In view of the problems existing in the prior art, we propose a server-based page generation method, which includes: obtaining the page request sent by the client through the node server, obtaining the inline resources from the target file generated by the static module packager according to the page request, and obtaining the global initialization data through the Nest development framework layer based on the initialization request of the inline resources; generating an HTML page according to the inline resources and the global initialization data, directly rendering the complete HTML page layout and style through the server, and returning it to the front-end browser, thereby reducing the time for the front-end browser to request JS and CSS files and execute and render them, and solving the problem of page jitter caused by HTML page request initialization data; adding the Nestjs service on the server to enhance the server's ability to process basic logic and reduce the pressure on Nginx.

[0054] Reference Figure 1 , showing an overall flow chart of a page generation method provided in an embodiment of the present invention

[0055] The Store page cache data management module, App.vue page entry component module and Router routing component module are uniformly assembled by the application entry point file (main.ts), and are referenced and processed by the client entry file (entry-client) and (server entry file) entry-server respectively. The server running file (server-bundle.json), the client running file (client-manifest.json) and the page template file (index.template.html) are packaged and separated by the static module packager (webpack). When the client sends a page request to the server, the node server (Nodeserver) will request data from the Nest development framework layer (Nestjs sever), obtain data from the database or redis through the Nestjs server, and then assemble and generate the corresponding hypertext markup language (html) file according to the page template file and return it to the client browser. The client browser can directly load the complete page without layout disorder, and asynchronously load non-essential js and css files.

[0056] Reference Figure 2 , shows a flow chart of the steps of a server-based page generation method provided in an embodiment of the present invention, which may specifically include the following steps:

[0057] Step 101: The node server obtains a page request sent by the client;

[0058] In the embodiment of the present invention, when the client and the server interact, the server first obtains data, so the token verification information cannot be transmitted through header or localStorage. Therefore, after the Node server obtains the page request sent by the client, it can also use the js-cookie component to maintain the cookie.

[0059] Step 102: Obtain inline resources from a target file generated by a static module packager according to the page request;

[0060] In SSR server-side rendering, Vue.js is the framework for building client applications. Based on VueSSR, the corresponding webpack will be configured to specify the corresponding entry files of the server and the client, and webpack will package and separate the target files, from which the inline resources required to generate the web page can be obtained.

[0061] Step 103: The node server obtains global initialization data through the Nest development framework layer based on the initialization request of the inline resource;

[0062] After the Node server obtains the inline resources, it sends the request to the Nest layer according to the initialization requirements of the JS components in the inline resources, and then obtains the global initialization data in the database or redis through the Nestjs server.

[0063] Step 104: Generate a hypertext markup language page according to the inline resource and the global initialization data.

[0064] After obtaining the global initialization data, the Nest layer returns the global initialization data to the Node server. The Node server executes the JS components in the inline resources according to the global initialization data to generate a complete HTML page.

[0065] The embodiment of the present invention obtains the page request sent by the client through the node server, obtains the inline resource from the target file generated by the static module packager according to the page request, and obtains the global initialization data through the Nest development framework layer based on the initialization request of the inline resource; generates an HTML page according to the inline resource and the global initialization data, directly renders the complete HTML page layout and style through the server, and returns it to the front-end browser, thereby reducing the time for the front-end browser to request JS and CSS files and execute and render them, and solving the problem of page jitter caused by HTML page request initialization data; adds the Nestjs service through the server to enhance the server's ability to process basic logic and reduce the pressure on Nginx.

[0066] In an embodiment of the present invention, the target file includes: a server-side running file, a client-side running file and a page template file.

[0067] In an embodiment of the present invention, webpack packages server-bundle.json (server-side running file), client-manifest.json (client-side running file) and index.template.html (page template file), and deploys server-bundle.json, client-manifest.json and index.template.html as target files to the server.

[0068] In one embodiment of the present invention, obtaining the inline resource from the target file generated by the static module packager according to the page request includes:

[0069] Obtain the path of the page request, perform route matching, and obtain the route configuration file;

[0070] Based on the routing configuration file, search the target file resource path corresponding to the path from the server running file;

[0071] Acquire the corresponding target file page content according to the target file resource path;

[0072] The target file page content is written into the page template file to form the inline resource.

[0073] Due to the need to use VueSSR, the corresponding webpack will be configured in the embodiment of the present invention, specifying the entry-server server entry file and the entry-client client's respective entry files, installing the corresponding dependency packages, and configuring the Store and Router routing files. The Store supports module configuration, while the Router has no manual configuration and is automatically generated according to the components in the src / pages folder. Manual configuration of the router can add other attributes, such as meta, to configure whether the current page requires authentication and login, etc. If both manual and pages files exist, the two will be merged. Among them, entry-client can handle the pre-generation logic of the Store through the following code;

[0074] if (window.__INITIAL_DATA__) {

[0075] store.replaceState(window.__INITIAL_DATA__)

[0076] }

[0077] Entry-server can manually handle route matching through the following code

[0078] constcombineRoutes=declareRoutesType.FeRoutes.map(route=>manualRoutesType.FeRoutes.find(e=>e.path===route.path)??route)

[0079] manualRoutesType.FeRoutes.forEach(route=>{

[0080] constfound=combineRoutes.find(e=>e.path===route.path)

[0081] if(!found){combineRoutes.push(route)}

[0082] })

[0083] After the Node server receives the page request, it will perform route matching according to the path of the page request, match the corresponding route, then read the chunkName of the route configuration, and search for the corresponding target file resource path in the server-bundle.json server-side running file according to the chunkName; and obtain the corresponding target file content based on the target file resource path, and then write the target file content into the index.template.html page template file to form an inline resource.

[0084] By writing the required target file content into the index.template.html page template file to form an inline resource, the server-side rendered page can be obtained, the page loading time can be reduced, and the page jitter effect can be avoided.

[0085] In one embodiment of the present invention, the target file includes: a JS scripting language file and a CSS cascading style sheet file;

[0086] The obtaining of inline resources from a target file generated by a static module packager according to the page request includes:

[0087] Obtain the path of the page request, perform route matching, and obtain the route configuration file;

[0088] Searching for the corresponding JS script language file from the server-side running file based on the routing configuration file, and reading the corresponding hypertext markup language component according to the routing configuration file;

[0089] Searching for the corresponding CSS cascading style sheet file from the server-side running file based on the routing configuration file;

[0090] The JS scripting language file and the CSS cascading style sheet file are written into the page template file to form the inline resource.

[0091] After receiving the page request, the Node server reads the server-bundle.json file to read the JS file corresponding to the chunkName, then reads the chunkName configured in the route to match the corresponding JS file, traverses all JS files according to the dependency, and reads the server-bundle.json to obtain the required CSS file content, inserts the JS file and CSS file resources into the htm page template file to form inline resources

[0092] By inserting the required js and css resources into the htm template, inline resources are formed, so that the front-end browser no longer needs to request the css file when generating the page.

[0093] In one embodiment of the present invention, the node server obtains global initialization data through the Nest development framework layer based on the initialization request of the inline resource, including:

[0094] After acquiring the inline resource, determining an initialization request for the inline resource;

[0095] The node server sends the initialization request to the Nest development framework layer;

[0096] The Nest development framework layer obtains the global initialization data corresponding to the initialization request from a database, and sends the global initialization data to a node server.

[0097] In an embodiment of the present invention, after obtaining the inline resources, a data loading request is sent to the Nest layer according to the initialization requirements of the JS file in the inline resources. After receiving the request, the Nest layer obtains the global initialization data in the database or redis through the Nestjs service, such as: currently logged-in user information, global menu and other data.

[0098] When the Nestjs service obtains the global initialization data in the database or redis, the Nestjs service will intercept and verify the token to determine the legitimacy and expiration of the token. If it is illegal, it will jump to the login page.

[0099] Optionally, when the Node server requests the Nestjs service, since the Nestjs interface needs to perform authentication verification, the Nestjs service can read the token information through the js-cookie, and intercept all API requests by configuring a unified interceptor, and read the token in the interceptor, where the interceptor inherits the CanActive class and implements the CanActive method.

[0100] Optionally, the Nestjs service uses typeorm to connect to the database to obtain the data required for the request, and sets or obtains the redis cache data through redi-io and returns it to the front-end request.

[0101] By adding Nestjs service on the server side, the server's ability to process basic logic is enhanced and the dependence on other services is reduced. For example, data can be obtained directly without the need to transfer through the Java service again, which also reduces the pressure on nginx. In addition, by reading the global initialization data required by the component through VueSSR, calling the nest interface can achieve the technical effect of returning global data by calling the interface once, reducing the number of interface calls, reducing network overhead, and improving the overall performance of the system.

[0102] In one embodiment of the present invention, generating a hypertext markup language page according to the inline resource and the global initialization data includes:

[0103] Preload the business data required by the current page according to the JS script language file in the inline resource, and mount the business data to the window object;

[0104] The node server writes the CSS cascading style sheet file content in the inline resource, the business data output mounted to the window object and the global initialization data into a hypertext markup language, thereby generating a hypertext markup language page.

[0105] After receiving the page request, the Node server reads the server-bundle.json file to read the target file corresponding to the chunkName, then reads the chunkName configured in the route to match the corresponding JS file, and traverses all JS files according to the dependencies, preloads the business data required for the current page according to the asynData method configured in the JS file, and reads the corresponding html component content according to the component configured in the route, and then assembles and splices the html page content according to the index.template.html page template file generated by webpack and the html component corresponding to the route, replaces the data required for the page, and mounts the required data on the window object; and the Node server will also read the server-bundle.json to obtain the required CSS file content, and output it into an html string to the front-end page as an inline resource through the renderToString function of VueSSR.

[0106] By inserting the required js and css resources into the htm template to form inline resources and binding the query data to the window object through tags for the front-end to generate Store global data, the front-end browser no longer needs to request the css file when generating the page, which can solve the technical problem of page jitter caused by page request initialization data and achieve a better user experience.

[0107] In one embodiment of the present invention, the node server configures a state management file and a routing management file;

[0108] After the node server obtains the page request sent by the client, it also includes:

[0109] After the page request reaches the node server, the status management file is triggered;

[0110] Determine whether the page is a login page. If the page is the login page, return the page request; if the page is not the login page, read the page request and parse its token field for authentication.

[0111] In this embodiment, the Store state management file and the Router routing management file are configured in VueSSR. After the page request is sent to the server, the preset method in the action configured in the configured Store state management file is triggered to determine whether the page is a login page. If it is a login page, the page request is returned; if it is not a login page, the page request is read and its token field is parsed for authentication. Among them, the preset method can be the serverInit method.

[0112] Optionally, the Node server will match the path judgment, read the meta metadata to determine whether authentication is required. If authentication is required, the Store status management file will be read to determine whether it contains a token. If not, the token information in the cookie in the request will be read. If the token information is invalid, the login page string page will be directly selected and returned to the front end, and redirect information will be returned to change the browser address bar address.

[0113] In an embodiment of the present invention, a page generation method based on a server is proposed, and the method includes: obtaining a page request sent by a client through a node server, obtaining inline resources from a target file generated by a static module packager according to the page request, and obtaining global initialization data through a Nest development framework layer based on an initialization request for the inline resources; generating an HTML page according to the inline resources and the global initialization data, directly rendering a complete HTML page layout and style through the server, and returning it to a front-end browser, thereby reducing the time for the front-end browser to request JS and CSS files and execute and render them, and solving the problem of page jitter caused by HTML page request initialization data; and enhancing the ability of the server to process basic logic by adding a Nestjs service through the server, thereby reducing the pressure on Nginx.

[0114] It should be noted that, for the sake of simplicity, the method embodiments are described as a series of action combinations, but those skilled in the art should be aware that the embodiments of the present invention are not limited by the order of the actions described, because according to the embodiments of the present invention, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions involved are not necessarily required by the embodiments of the present invention.

[0115] Reference Figure 3 , shows a schematic diagram of the structure of a server-based page generation system provided in an embodiment of the present invention, which may specifically include the following modules:

[0116] Request acquisition module 301, used for the node server to obtain the page request sent by the client;

[0117] An inline resource acquisition module, used to acquire inline resources from a target file generated by a static module packager according to the page request;

[0118] A global initialization data acquisition module 302 is used for the node server to acquire global initialization data through the Nest development framework layer based on the initialization request of the inline resource;

[0119] The page generation module 303 is used to generate a hypertext markup language page according to the inline resource and the global initialization data.

[0120] As for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0121] In addition, an embodiment of the present invention further provides an electronic device, including: a processor, a memory, and a computer program stored in the memory and executable on the processor. When the computer program is executed by the processor, the various processes of the above-mentioned server-based page generation method embodiment are implemented, and the same technical effect can be achieved. To avoid repetition, it will not be described here.

[0122] The embodiment of the present invention further provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, each process of the above-mentioned server-based page generation method embodiment is implemented, and the same technical effect can be achieved. To avoid repetition, it is not repeated here. The computer-readable storage medium is, for example, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.

[0123] An embodiment of the present invention also provides a computer program product, which is stored in a storage medium and is executed by at least one processor to implement the various processes of the above-mentioned server-based page generation method embodiment, and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0124] Figure 4 A schematic diagram of the hardware structure of an electronic device for implementing various embodiments of the present invention.

[0125] The electronic device 800 includes but is not limited to: a radio frequency unit 801, a network module 802, an audio output unit 803, an input unit 804, a sensor 805, a display unit 806, a user input unit 807, an interface unit 808, a memory 809, a processor 810, and a power supply 811. Those skilled in the art will appreciate that Figure 4 The electronic device structure shown in the figure does not constitute a limitation on the electronic device, and the electronic device may include more or fewer components than shown in the figure, or combine certain components, or arrange the components differently. In the embodiments of the present invention, the electronic device includes but is not limited to a mobile phone, a tablet computer, a laptop computer, a PDA, a vehicle-mounted terminal, a wearable device, and a pedometer.

[0126] It should be understood that in the embodiment of the present invention, the radio frequency unit 801 can be used for receiving and sending signals during information transmission or communication. Specifically, after receiving downlink data from the base station, it is sent to the processor 810 for processing; in addition, uplink data is sent to the base station. Generally, the radio frequency unit 801 includes but is not limited to an antenna, at least one amplifier, a transceiver, a coupler, a low noise amplifier, a duplexer, etc. In addition, the radio frequency unit 801 can also communicate with the network and other devices through a wireless communication system.

[0127] The electronic device provides users with wireless broadband Internet access through the network module 802, such as helping users to send and receive emails, browse web pages, and access streaming media.

[0128] The audio output unit 803 can convert the audio data received by the RF unit 801 or the network module 802 or stored in the memory 809 into an audio signal and output it as sound. Moreover, the audio output unit 803 can also provide audio output related to a specific function performed by the electronic device 800 (for example, a call signal reception sound, a message reception sound, etc.). The audio output unit 803 includes a speaker, a buzzer, a receiver, etc.

[0129] The input unit 804 is used to receive audio or video signals. The input unit 804 may include a graphics processor (GPU) 8041 and a microphone 8042, and the graphics processor 8041 processes the image data of a static picture or video obtained by an image capture device (such as a camera) in a video capture mode or an image capture mode. The processed image frame can be displayed on the display unit 806. The image frame processed by the graphics processor 8041 can be stored in the memory 809 (or other storage medium) or sent via the radio frequency unit 801 or the network module 802. The microphone 8042 can receive sound and can process such sound into audio data. The processed audio data can be converted into a format output that can be sent to a mobile communication base station via the radio frequency unit 801 in the case of a telephone call mode.

[0130] The electronic device 800 also includes at least one sensor 805, such as a light sensor, a motion sensor, and other sensors. Specifically, the light sensor includes an ambient light sensor and a proximity sensor, wherein the ambient light sensor can adjust the brightness of the display panel 8061 according to the brightness of the ambient light, and the proximity sensor can turn off the display panel 8061 and / or the backlight when the electronic device 800 is moved to the ear. As a type of motion sensor, the accelerometer sensor can detect the magnitude of acceleration in each direction (generally three axes), and can detect the magnitude and direction of gravity when stationary, which can be used to identify the posture of the electronic device (such as horizontal and vertical screen switching, related games, magnetometer posture calibration), vibration recognition related functions (such as pedometer, tapping), etc.; the sensor 805 can also include a fingerprint sensor, a pressure sensor, an iris sensor, a molecular sensor, a gyroscope, a barometer, a hygrometer, a thermometer, an infrared sensor, etc., which will not be repeated here.

[0131] The display unit 806 is used to display information input by the user or information provided to the user. The display unit 806 may include a display panel 8061, which may be configured in the form of a liquid crystal display (LCD), an organic light-emitting diode (OLED), or the like.

[0132] The user input unit 807 can be used to receive input digital or character information, and to generate key signal input related to user settings and function control of the electronic device. Specifically, the user input unit 807 includes a touch panel 8071 and other input devices 8072. The touch panel 8071, also known as a touch screen, can collect the user's touch operation on or near it (such as the user's operation on the touch panel 8071 or near the touch panel 8071 using any suitable object or accessory such as a finger, stylus, etc.). The touch panel 8071 may include two parts: a touch detection device and a touch controller. Among them, the touch detection device detects the user's touch orientation, detects the signal brought by the touch operation, and transmits the signal to the touch controller; the touch controller receives the touch information from the touch detection device, converts it into the contact point coordinates, and then sends it to the processor 810, receives the command sent by the processor 810 and executes it. In addition, the touch panel 8071 can be implemented using multiple types such as resistive, capacitive, infrared and surface acoustic waves. In addition to the touch panel 8071, the user input unit 807 may also include other input devices 8072. Specifically, other input devices 8072 may include but are not limited to a physical keyboard, function keys (such as volume control keys, switch keys, etc.), a trackball, a mouse, and a joystick, which will not be described in detail here.

[0133] Furthermore, the touch panel 8071 may be overlaid on the display panel 8061. When the touch panel 8071 detects a touch operation on or near it, it transmits the information to the processor 810 to determine the type of the touch event. Then, the processor 810 provides a corresponding visual output on the display panel 8061 according to the type of the touch event. Figure 4 In the figure, the touch panel 8071 and the display panel 8061 are used as two independent components to realize the input and output functions of the electronic device. However, in some embodiments, the touch panel 8071 and the display panel 8061 can be integrated to realize the input and output functions of the electronic device, which is not limited here.

[0134] The interface unit 808 is an interface for connecting an external device to the electronic device 800. For example, the external device may include a wired or wireless headset port, an external power supply (or battery charger) port, a wired or wireless data port, a memory card port, a port for connecting a device with an identification module, an audio input / output (I / O) port, a video I / O port, a headphone port, etc. The interface unit 808 may be used to receive input (e.g., data information, power, etc.) from an external device and transmit the received input to one or more elements within the electronic device 800 or may be used to transmit data between the electronic device 800 and an external device.

[0135] The memory 809 can be used to store software programs and various data. The memory 809 can mainly include a program storage area and a data storage area, wherein the program storage area can store an operating system, at least one application required for a function (such as a sound playback function, an image playback function, etc.), etc.; the data storage area can store data created according to the use of the mobile phone (such as audio data, a phone book, etc.), etc. In addition, the memory 809 can include a high-speed random access memory, and can also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other volatile solid-state storage devices.

[0136] The processor 810 is the control center of the electronic device. It uses various interfaces and lines to connect various parts of the entire electronic device. By running or executing software programs and / or modules stored in the memory 809 and calling data stored in the memory 809, it performs various functions of the electronic device and processes data, thereby monitoring the electronic device as a whole. The processor 810 may include one or more processing units; preferably, the processor 810 may integrate an application processor and a modem processor, wherein the application processor mainly processes the operating system, user interface, and application programs, and the modem processor mainly processes wireless communications. It is understandable that the above-mentioned modem processor may not be integrated into the processor 810.

[0137] The electronic device 800 may also include a power supply 811 (such as a battery) for supplying power to each component. Preferably, the power supply 811 may be logically connected to the processor 810 through a power management system, thereby implementing functions such as charging, discharging, and power consumption management through the power management system.

[0138] In addition, the electronic device 800 includes some functional modules not shown, which will not be described in detail here.

[0139] like Figure 5 As shown, in another embodiment provided by the present invention, a computer-readable storage medium 901 is also provided, in which instructions are stored. When the computer-readable storage medium is run on a computer, the computer executes the server-based page generation method described in the above embodiment.

[0140] It should be noted that, in this article, the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "comprises a ..." does not exclude the existence of other identical elements in the process, method, article or device including the element.

[0141] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present invention, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, a magnetic disk, or an optical disk), and includes a number of instructions for enabling a terminal (which can be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to execute the methods described in each embodiment of the present invention.

[0142] The embodiments of the present invention are described above in conjunction with the accompanying drawings, but the present invention is not limited to the above-mentioned specific implementation modes, which are merely illustrative rather than restrictive. Under the guidance of the present invention, ordinary technicians in this field can also make many forms without departing from the scope of protection of the present invention and the claims, all of which are within the protection of the present invention.

[0143] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed in the embodiments of the present invention can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the present invention.

[0144] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0145] In the embodiments provided in the present application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

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

[0147] In addition, each functional unit in each embodiment of the present invention may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit.

[0148] If the functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, or the part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium, including several instructions for a computer device (which can be a personal computer, server, or network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: various media that can store program codes, such as USB flash drives, mobile hard disks, ROM, RAM, magnetic disks, or optical disks.

[0149] The above is only a specific embodiment of the present invention, but the protection scope of the present invention is not limited thereto. Any person skilled in the art can easily think of changes or substitutions within the technical scope disclosed by the present invention, which should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention should be based on the protection scope of the claims.

Claims

1. A page generation method based on a server, characterized in that: The page generation method comprises: The node server obtains the page request sent by the client; Obtaining inline resources from a target file generated by a static module packager according to the page request; The node server obtains global initialization data through the Nest development framework layer based on the initialization request of the inline resource; A hypertext markup language page is generated according to the inline resource and the global initialization data.

2. The page generation method according to claim 1, characterized in that: The target files include: server-side running files, client-side running files and page template files.

3. The page generation method according to claim 2, characterized in that: The obtaining of inline resources from a target file generated by a static module packager according to the page request includes: Obtain the path of the page request, perform route matching, and obtain the route configuration file; Based on the routing configuration file, search the target file resource path corresponding to the path from the server running file; Acquire the corresponding target file page content according to the target file resource path; The target file page content is written into the page template file to form the inline resource.

4. The page generation method according to claim 2, characterized in that: The target files include: JS scripting language files and CSS cascading style sheet files; The obtaining of inline resources from a target file generated by a static module packager according to the page request includes: Obtain the path of the page request, perform route matching, and obtain the route configuration file; Searching for the corresponding JS script language file from the server-side running file based on the routing configuration file, and reading the corresponding hypertext markup language component according to the routing configuration file; Searching for the corresponding CSS cascading style sheet file from the server-side running file based on the routing configuration file; The JS scripting language file and the CSS cascading style sheet file are written into the page template file to form the inline resource.

5. The page generation method according to claim 1, characterized in that: The node server obtains global initialization data through the Nest development framework layer based on the initialization request of the inline resource, including: After acquiring the inline resource, determining an initialization request for the inline resource; The node server sends the initialization request to the Nest development framework layer; The Nest development framework layer obtains the global initialization data corresponding to the initialization request from a database, and sends the global initialization data to a node server.

6. The page generation method according to claim 1, characterized in that: The generating of a hypertext markup language page according to the inline resource and the global initialization data comprises: Preload the business data required by the current page according to the JS script language file in the inline resource, and mount the business data to the window object; The node server writes the CSS cascading style sheet file content in the inline resource, the business data output mounted to the window object and the global initialization data into a hypertext markup language, thereby generating a hypertext markup language page.

7. The page generation method according to claim 1, characterized in that: The node server configures a status management file and a routing management file; After the node server obtains the page request sent by the client, it also includes: After the page request reaches the node server, the status management file is triggered; Determine whether the page is a login page. If the page is the login page, return the page request; if the page is not the login page, read the page request and parse its token field for authentication.

8. A server-based page generation system, characterized in that: The page generation system comprises: The request acquisition module is used by the node server to obtain the page request sent by the client; An inline resource acquisition module, used to acquire inline resources from a target file generated by a static module packager according to the page request; A global initialization data acquisition module, used by the node server to acquire global initialization data through the Nest development framework layer based on the initialization request of the inline resource; The page generation module is used to generate a hypertext markup language page according to the inline resource and the global initialization data.

9. An electronic device, characterized in that: It includes a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory communicate with each other through the communication bus; The memory is used to store computer programs; The processor is used to implement the page generation method according to any one of claims 1 to 7 when executing the program stored in the memory.

10. A computer-readable storage medium having instructions stored thereon, which, when executed by one or more processors, enable the processors to execute the page generation method according to any one of claims 1 to 7.

Images