WO2023005163A1 - 应用页面的加载方法、存储介质、及其相关设备 - Google Patents

应用页面的加载方法、存储介质、及其相关设备 Download PDF

Info

Publication number
WO2023005163A1
WO2023005163A1 PCT/CN2022/071877 CN2022071877W WO2023005163A1 WO 2023005163 A1 WO2023005163 A1 WO 2023005163A1 CN 2022071877 W CN2022071877 W CN 2022071877W WO 2023005163 A1 WO2023005163 A1 WO 2023005163A1
Authority
WO
WIPO (PCT)
Prior art keywords
page
access request
browser
target
page file
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Ceased
Application number
PCT/CN2022/071877
Other languages
English (en)
French (fr)
Inventor
卓根生
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Ping An Technology Shenzhen Co Ltd
Original Assignee
Ping An Technology Shenzhen Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Ping An Technology Shenzhen Co Ltd filed Critical Ping An Technology Shenzhen Co Ltd
Publication of WO2023005163A1 publication Critical patent/WO2023005163A1/zh
Anticipated expiration legal-status Critical
Ceased legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • G06F9/44526—Plug-ins; Add-ons

Definitions

  • the present application relates to the field of computer technology, and in particular to a method for loading an application page, a system for loading an application page, a terminal device, a server, a computer device, and a storage medium.
  • the purpose of the embodiments of the present application is to propose a method for loading application pages, a loading system for application pages, terminal equipment, servers, computer equipment, and storage media. time development efficiency.
  • the first aspect of the embodiment of the present application provides a method for loading an application page, and the method for loading an application page may include:
  • the target page file may include public page content and proprietary page content, and the public page content may include content pre-created for multiple different applications.
  • the browser is used to render and display the target page file.
  • the application page loading method may include:
  • the public page content may include the header component and the NavMenu component shared by the pages of the multiple different applications, the header component and the NavMenu component both use a common module Define the standard umd format package;
  • the target page file When it is determined that the access request is valid, determine the target page file according to the access request, and return the target page file to the browser, so that the browser can render and display the target page file, wherein the target page file can It includes the public page content and the private page content, and the private page content is the specific page content of each application page.
  • the application page loading method may include:
  • the server obtains and stores the public page content set for the pages of multiple different applications.
  • the public page content may include the header component and the NavMenu component shared by the pages of the multiple different applications.
  • the header component and the NavMenu component both use a common Module definition specification umd format encapsulation;
  • the terminal device uses the browser to initiate an access request to the server for the page of the target application
  • the server obtains the access request sent by the browser to the page of the target application, and judges whether the access request is valid;
  • the server determines the target page file according to the access request, and returns the target page file to the browser, wherein the target page file may include the public page content and the proprietary page content, the proprietary Some page content refers to the page content specific to the respective pages of each application;
  • the terminal device uses the browser to render and display the target page file.
  • the terminal device may include:
  • a sending module configured to use the browser to initiate an access request to the server for the page of the target application
  • the receiving module is used to obtain the target page file returned by the server according to the access request after determining that the access request is valid, wherein the target page file may include public page content and proprietary page content, and the public page content may include pre-
  • the content of the exclusive page is the specific page content of each application page.
  • the header component and the NavMenu component are defined by common modules Standardize the umd format package;
  • the display module is used for rendering and displaying the target page file by using the browser.
  • the server may include:
  • the storage module is used to obtain and store the public page content set for the pages of multiple different applications.
  • the public page content may include the header component and the NavMenu component shared by the pages of the multiple different applications.
  • the header component and the NavMenu The components are packaged in the UMD format of the Universal Module Definition Specification;
  • a judging module configured to obtain an access request sent by the browser to the page of the target application, and judge whether the access request is valid;
  • the sending module is used to determine the target page file according to the access request when it is determined that the access request is valid, and return the target page file to the browser, so that the browser can render and display the target page file, wherein,
  • the target page file may include the public page content and the private page content, and the private page content is the specific page content of each page of each application.
  • the sixth aspect of the embodiment of the present application provides an application page loading system
  • the application page loading system includes:
  • the terminal device as described in the fourth aspect above and the server as described in the fifth aspect above.
  • the seventh aspect of the embodiment of the present application also provides a computer device, which adopts the following technical solutions:
  • a computer device comprising a memory and a processor, wherein computer-readable instructions are stored in the memory, and when the processor executes the computer-readable instructions, the following steps of the method for loading an application page are implemented:
  • the target page file includes public page content and private page content
  • the public page content includes multiple
  • the shared head header component and the navigation menu NavMenu component set by the pages of different applications, the content of the exclusive page is the specific page content of the respective pages of each application, and the header component and the NavMenu component both use a common module Define the standard umd format package;
  • the browser is used to render and display the target page file.
  • the eighth aspect of the embodiment of the present application also provides a computer-readable storage medium, which adopts the following technical solution:
  • a computer-readable storage medium where computer-readable instructions are stored on the computer-readable storage medium, and when the computer-readable instructions are executed by a processor, the following steps of the method for loading an application page are implemented:
  • the target page file includes public page content and private page content
  • the public page content includes multiple
  • the shared head header component and the navigation menu NavMenu component set by the pages of different applications, the content of the exclusive page is the specific page content of the respective pages of each application, and the header component and the NavMenu component both use a common module Define the standard umd format package;
  • the browser is used to render and display the target page file.
  • the target page file returned by the server according to the access request after determining that the access request is valid may be obtained.
  • the browser is used to render and display the target page file.
  • the target page file includes public page content and exclusive page content
  • the public page content includes a common head header component and a navigation menu NavMenu component pre-set for pages of multiple different applications, and the exclusive page content
  • the header component and the NavMenu component are encapsulated in the umd format of the general module definition specification.
  • the universal module definition specification (universal module definition, UMD) is a Javascript module specification
  • the packaged module code can be reused between different projects. Therefore, the content of the public page can be reused among different applications, avoiding the repeated development of this part of the code, thereby improving the development efficiency.
  • FIG. 1 is an exemplary system architecture diagram to which the present application can be applied;
  • FIG. 2 is a flowchart of an embodiment of a method for loading an application page according to the present application
  • FIG. 3 is a flow chart of another embodiment of a method for loading an application page according to the present application.
  • FIG. 4 is a flow chart of another embodiment of a method for loading an application page according to the present application.
  • FIG. 5 is a schematic structural diagram of an embodiment of a terminal device 500 according to the present application.
  • FIG. 6 is a schematic structural diagram of an embodiment of a server 600 according to the present application.
  • FIG. 7 is a schematic structural diagram of an embodiment of a system 700 for loading an application page according to the present application.
  • FIG. 8 is a schematic structural diagram of an embodiment of a computer device 800 according to the present application.
  • a system architecture 100 may include terminal devices 101 , 102 , 103 , a network 104 and a server 105 .
  • the network 104 is used as a medium for providing communication links between the terminal devices 101 , 102 , 103 and the server 105 .
  • Network 104 may include various connection types, such as wires, wireless communication links, or fiber optic cables, among others.
  • Terminal devices 101 , 102 , 103 Users can use terminal devices 101 , 102 , 103 to interact with server 105 via network 104 to receive or send messages and the like.
  • Various communication client applications can be installed on the terminal devices 101, 102, 103, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social platform software, and the like.
  • Terminal devices 101, 102, 103 can be various electronic devices with display screens and support web browsing, including but not limited to smartphones, tablet computers, e-book readers, MP3 players (Moving Picture Experts Group Audio Layer III, dynamic Video experts compress standard audio layer 3), MP4 (Moving Picture Experts Group Audio Layer IV, moving picture experts compress standard audio layer 4) players, laptops and desktop computers, etc.
  • MP3 players Moving Picture Experts Group Audio Layer III, dynamic Video experts compress standard audio layer 3
  • MP4 Moving Picture Experts Group Audio Layer IV, moving picture experts compress standard audio layer 4
  • laptops and desktop computers etc.
  • the server 105 may be a server that provides various services, such as a background server that provides support for pages displayed on the terminal devices 101 , 102 , 103 .
  • the method for loading an application page provided in the embodiment of the present application is generally performed by a server/terminal device.
  • terminal devices, networks and servers in Fig. 1 are only illustrative. According to the implementation needs, there can be any number of terminal devices, networks and servers.
  • FIG. 2 shows a flow chart of an embodiment of an application page loading method according to the present application.
  • the application page loading method described includes the following steps:
  • Step S201 using a browser to initiate an access request to a server for a page of a target application.
  • the method for loading an application page may be run on an electronic device (such as the terminal device shown in FIG. 1 ), and the electronic device may perform data interaction with the server through a wired connection or a wireless connection.
  • the electronic device may initiate a request to the server for accessing a page of the target application through a browser application or a browser module embedded in other types of applications.
  • Step S202 obtain the target page file returned by the server according to the access request after determining that the access request is valid, wherein the target page file includes public page content and private page content, and the public page content includes pre-set pages for multiple different applications
  • the shared head header component and navigation menu NavMenu component, the exclusive page content is the specific page content of each application page, the header component and the NavMenu component are encapsulated in the umd format of the general module definition specification.
  • the server may first determine whether the access request is valid according to the link address in the access request. After it is determined to be valid, the query determines the target page file indicated by the link address, and returns the target page file to the electronic device.
  • the target page file that is, the HTML file may include two parts: public page content and proprietary page content.
  • the public page content includes a common header component pre-set for multiple pages of different applications and the NavMenu component used to provide navigation for pages and functions.
  • the proprietary page content is the page content specific to each page of each application.
  • the header component Both the NavMenu and the NavMenu components are encapsulated in the umd format of the Universal Module Definition Specification.
  • Javascript code embedded in the webpage is getting larger and more complex, so developers have to use software engineering methods, such as modular programming, to manage the business logic of the webpage , improve development efficiency.
  • modular programming developers only need to implement the core business logic, and other modules can be loaded by others.
  • Javascript is not a modular programming language, it does not support "class (class)” and "module (module)”, so Javascript programming is mostly non-modular programming.
  • non-modular programming all component files in a normal application page, such as the js files corresponding to the header component and NavMenu component, need to be placed in the large directory of the application. In this way, if the pages of multiple applications have the same components, these components also need to be repeatedly deployed in the directories of the multiple applications, and must be deployed repeatedly after each modification.
  • Javascript module specifications there are currently multiple Javascript module specifications defined. Developers can implement Javascript "class modular programming" by following the Javascript module specification for development and code packaging. Among them, UMD is a Javascript module specification, and a module is a set of methods for realizing specific functions.
  • the header component and the NavMenu component in the public page content are packaged in umd format.
  • the encapsulated JS files can be deployed independently without being deployed in the directory of each application, so that cross-module and cross-application references can be realized, and the deployment is simpler.
  • Step S203 using the browser to render and display the target page file.
  • the browser may be used to analyze the code of the target page file, and then render and display the target page file.
  • the browser executes the code in the target page file line by line, sequentially executes the processes of building the dom tree, building the rendering (render) tree, laying out the render tree, and drawing the render tree to generate and display the page view.
  • the browser's rendering engine first parses the target page file, that is, the html file, and converts these tags into dom nodes in the content tree according to the tag structure under the body attribute. After that, further parse the style information in the external CSS file and the style tag. This style information along with the visibility directives in html will be used to build another tree - the render tree.
  • the Render tree consists of rectangles that contain properties such as color and size, and they will be displayed on the screen in the correct order.
  • the rendering engine will perform the layout process, which will determine the exact coordinates of each node on the screen.
  • the next step is to draw, which is to traverse the render tree and use the UI backend layer to draw each node. It should be noted that this process is completed step by step.
  • the rendering engine will render the content to the screen as early as possible, and will not wait until all the html is parsed before building and layout render tree. It displays part of the content after parsing part of the content, and at the same time, may still be downloading the rest of the content through the network.
  • the step of using the browser to render and display the target page file includes: using the browser to parse the code in the target page file, and after parsing the public
  • an XHR request for the header component and the NavMenu component is initiated to the server; the header component and the NavMenu component returned by the server are received, and the header component, the NavMenu component, and the proprietary The page content is rendered and displayed.
  • the browser when it parses the code corresponding to the public page content in the target page file, it can trigger an XHR (XML Http Request) request to the server to initiate the header component and the NavMenu component. Afterwards, after receiving the header component and the NavMenu component returned by the server, render and display the header component, the NavMenu component and the content of the exclusive page.
  • XHR XML Http Request
  • the loading method further includes: receiving the public page file returned after the server determines that the access request is invalid, and the public
  • the page file is a pre-set page file shared by multiple different applications, and the public page file includes a shared login page file or an error handling page file; the browser is used to render and display the public page file.
  • multiple applications may also be set to have a common public page file, and the common page file may include a shared login page file or an error handling page file.
  • the server determines that the access request is invalid, it directs the access request to the public page file, and returns the public page file to the browser. Afterwards, the browser renders and displays the public page file. Due to the use of a shared login page file or error handling page file, the styles of web pages of multiple applications can be unified, and repeated development of these pages for different applications can be avoided, thereby improving development efficiency.
  • the target page file returned by the server according to the access request after determining that the access request is valid may be obtained.
  • the browser is used to render and display the target page file.
  • the target page file includes public page content and exclusive page content
  • the public page content includes a common head header component and a navigation menu NavMenu component pre-set for pages of multiple different applications, and the exclusive page content
  • the header component and the NavMenu component are encapsulated in the umd format of the general module definition specification.
  • UMD is a Javascript module specification
  • the packaged module code can be reused between different projects. Therefore, the content of the public page can be reused among different applications, avoiding the repeated development of this part of the code, thereby improving the development efficiency.
  • FIG. 3 show the loading method of the application page according to the flowchart of an embodiment of the loading method of the application page of the present application, comprise the following steps:
  • Step S301 acquire and store the public page content set for pages of multiple different applications
  • the public page content includes a header component and a NavMenu component shared by multiple pages of different applications
  • the header component and the NavMenu component both use a common module Define specification umd format encapsulation.
  • the method for loading an application page may run on a server thereon, and the server may perform data interaction with the electronic device through a wired connection or a wireless connection.
  • the server is configured through an external device. For example, it can obtain and store public page content set by the external device for pages of multiple different applications.
  • the public page content includes header components and NavMenu components shared by multiple pages of different applications.
  • Step S302 obtaining the access request to the page of the target application sent by the browser, and judging whether the access request is valid.
  • the electronic device may initiate an access request to the server for a page of the target application through a browser application or a browser module embedded in other types of applications. After that, the browser determines whether the access request is valid.
  • the step of obtaining the access request sent by the browser to the page of the target application and judging whether the access request is valid includes: obtaining the access request sent by the browser to the page of the target application , extract the application ID of the target application in the access request; use the reverse proxy server ngnix to query whether the page file of the target application can be matched according to the application ID; if the match is successful, then determine the target page according to the link address carried in the query access request file; determine whether the token token of the target page file is valid; if the token is valid, determine that the access request is valid; if the match is unsuccessful, or the token is invalid, determine that the access request is invalid.
  • the following settings need to be made first: (1) Modify the packaging webpack configuration for each old application, and add a unique application prefix as the unique identifier for each application, such as /A, /B, /C, etc. ; (2) Increase the reverse proxy server ngnix, which is used to match application paths such as /A, so that after the access request is confirmed to be valid, it can jump to each application page.
  • the server can first extract the link address in the access request, such as the /A/home address, and check whether the "/A" application identifier is pre-configured in ngnix, that is, whether the query can be matched The page file of the A application.
  • the token of the target page file is extracted to judge whether the token is valid, that is, whether it exists and expires, and if valid, then determine that the access request is valid. If the foregoing matching is unsuccessful or the token is invalid, it is determined that the access request is invalid.
  • the token can be used to further determine whether the target webpage file is valid, which can also further improve the server's access request. safety.
  • Step S303 when it is determined that the access request is valid, determine the target page file according to the access request, and return the target page file to the browser, so that the browser can render and display the target page file, wherein the target page file includes public page content and Exclusive page content, the exclusive page content is the page content specific to each page of each application.
  • the server determines that the access request is valid through the above steps, it returns to the browser the target page file determined according to the link address query in the access request. Therefore, after the browser receives the target page file, the browser can use the browser to analyze the code of the target page file, and then render and display the target page file.
  • the browser executes the code in the target page file line by line, and sequentially executes the processes of building the dom tree, building the render tree, laying out the render tree, and drawing the render tree to generate and display the page view.
  • the target page file when it is determined that the access request is valid, the target page file is determined according to the access request, and the target page file is returned to the browser, so that the browser performs a step of rendering and displaying the target page file , including: when the access request is determined to be valid, determine the target page file according to the access request, and return the target page file to the browser; obtain the header component triggered by the browser when parsing the code corresponding to the public page content in the target page file and the XHR request of the NavMenu component; send the header component and the NavMenu component to the browser, so that the browser can render and display the header component, NavMenu component and the content of the exclusive page.
  • the header component and the NavMenu component in the public page content are packaged in umd format.
  • the encapsulated JS file can be deployed independently in the server without being deployed in the directory of each application, so that cross-module and cross-application references can be realized, and the deployment is simpler.
  • the browser when rendering, when the browser parses the code corresponding to the public page content in the target page file, it can trigger an XHR (XML Http Request) request to the server for the header component and the NavMenu component. Afterwards, the server queries and determines the JS file corresponding to the header component and the NavMenu component, and returns it to the browser, so that the browser renders and displays the header component, the NavMenu component and the content of the exclusive page.
  • XHR XML Http Request
  • the loading method before obtaining the access request sent by the browser to the page of the target application and judging whether the access request is valid, the loading method further includes: obtaining and storing a public page file, public The page file is a pre-set page file shared by multiple different applications, and the public page file includes a shared login page file or error handling page file; obtain the access request sent by the browser to the page of the target application, and determine whether the access request is After the effective steps, the loading method further includes: when the access request is determined to be invalid, returning the public page file to the browser, so that the browser can render and display the public page file.
  • this public page file includes shared login page file or error handling page file, this path is for example /main/login, /main/404, /main/502 etc.; (2) increase reverse proxy server ngnix, it is used for The above-mentioned path of the public page file enables the access request to jump to the path of the public page file after it is determined to be invalid.
  • the server may automatically redirect the link address of the access request to the path of the public page file if it is determined that the access request is invalid through the aforementioned judging method. Afterwards, the server extracts the public page file, and returns the public page file to the browser, so that the browser renders and displays the public page file.
  • the above-mentioned public page files can also be stored in nodes of a block chain.
  • Blockchain essentially a decentralized database, is a series of data blocks associated with each other using cryptographic methods. Each data block contains a batch of network transaction information, which is used to verify its Validity of information (anti-counterfeiting) and generation of the next block.
  • the blockchain can include the underlying platform of the blockchain, the platform product service layer, and the application service layer.
  • the server after receiving the access request to the page of the target application initiated by the browser, the server can judge whether the access request is valid, and if it is valid, return the target page file to the browser according to the access request, so as to Make the browser render and display the target page file.
  • the target page file includes public page content and exclusive page content
  • the public page content includes a common head header component and a navigation menu NavMenu component pre-set for pages of multiple different applications, and the exclusive page content
  • the header component and the NavMenu component are encapsulated in the umd format of the general module definition specification.
  • UMD is a Javascript module specification
  • the packaged module code can be reused between different projects. Therefore, the content of the public page can be reused by multiple applications, avoiding the repeated development of this part of the code, and thus improving the development efficiency.
  • FIG. 4 shows a flow chart of an embodiment of a method for loading an application page according to the present application.
  • the method for loading an application page includes the following steps:
  • Step S401 the server acquires and stores the public page content set for pages of multiple different applications, the public page content includes the header component and NavMenu component shared by multiple pages of different applications, and the header component and NavMenu component are both defined by common modules Standardized umd format encapsulation.
  • step S402 the terminal device uses a browser to initiate an access request to the server for the page of the target application.
  • step S403 the server obtains the access request sent by the browser to the page of the target application, and determines whether the access request is valid.
  • Step S404 when the server determines that the access request is valid, it determines the target page file according to the access request, and returns the target page file to the browser, wherein the target page file includes public page content and private page content, and the private page content is the content of each application Page content specific to the respective pages.
  • Step S405 the terminal device uses the browser to render and display the target page file.
  • step S401, step S403 and step S404 are similar to the above-mentioned step S301, step S302 and step S303 in the embodiment shown in FIG.
  • step S201 is similar to step S203, and details are not repeated here.
  • the server after receiving the access request to the page of the target application initiated by the terminal device through the browser, the server can determine whether the access request is valid, and if it is valid, return the target page to the browser according to the access request file, so that the browser renders and displays the target page file.
  • the target page file includes public page content and exclusive page content
  • the public page content includes a common head header component and a navigation menu NavMenu component pre-set for pages of multiple different applications, and the exclusive page content
  • the header component and the NavMenu component are encapsulated in the umd format of the general module definition specification.
  • UMD is a Javascript module specification
  • the packaged module code can be reused between different projects. Therefore, the content of the public page can be reused by multiple applications, avoiding the repeated development of this part of the code, and thus improving the development efficiency.
  • the application can be used in numerous general purpose or special purpose computer system environments or configurations. Examples: personal computers, server computers, handheld or portable devices, tablet-type devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, including A distributed computing environment for any of the above systems or devices, etc.
  • the present application may be described in the general context of computer-executable instructions, such as process modules, being executed by a computer.
  • process modules include routines, processes, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types.
  • the application may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, process modules may be located in both local and remote computer storage media including storage devices.
  • the aforementioned storage medium may be a nonvolatile storage medium such as a magnetic disk, an optical disk, a read-only memory (Read-Only Memory, ROM), or a random access memory (Random Access Memory, RAM).
  • the present application provides an embodiment of a terminal device.
  • the terminal device 500 described in this embodiment includes:
  • the sending module 501 is configured to use the browser to initiate an access request to the server for the page of the target application;
  • the receiving module 502 is configured to acquire the target page file returned by the server according to the access request after determining that the access request is valid, wherein the target page file includes public page content and private page content, and the public page content includes pre-set
  • the common header component and navigation menu NavMenu component set by multiple pages of different applications.
  • the content of this exclusive page is the specific page content of each application’s page.
  • the header component and the NavMenu component both adopt the general module definition specification umd format package;
  • the display module 503 is configured to use the browser to render and display the target page file.
  • the display module 503 includes:
  • the parsing submodule is used to analyze the code in the target page file by using the browser, and when parsing the code corresponding to the public page content, triggers an XHR request to the server to initiate the header component and the NavMenu component;
  • the rendering sub-module is used to receive the header component and the NavMenu component returned by the server, and perform rendering and display processing on the header component, the NavMenu component and the exclusive page content.
  • the display module 503 is also configured to receive the public page file returned by the server after determining that the access request is invalid, and the public page file is a pre-set page shared by multiple different applications files, the public page files include shared login page files or error handling page files;
  • the display module 503 is further configured to use the browser to render and display the public page file.
  • the terminal device uses a browser to initiate an access request to the server for the page of the target application, it can obtain the target page file returned by the server according to the access request after the server determines that the access request is valid. Afterwards, the browser is used to render and display the target page file.
  • the target page file includes public page content and exclusive page content
  • the public page content includes a common head header component and a navigation menu NavMenu component pre-set for pages of multiple different applications, and the exclusive page content
  • the header component and the NavMenu component are encapsulated in the umd format of the general module definition specification.
  • UMD is a Javascript module specification
  • the packaged module code can be reused between different projects. Therefore, the content of the public page can be reused by multiple applications, avoiding the repeated development of this part of the code, thereby improving the development efficiency.
  • the present application provides an embodiment of a server.
  • the server 600 described in this embodiment includes:
  • the storage module 601 is configured to obtain and store public page content set for pages of multiple different applications, the public page content includes a header component and a NavMenu component shared by the pages of multiple different applications, the header component and the NavMenu
  • the components are packaged in the UMD format of the Universal Module Definition Specification;
  • a judging module 602 configured to obtain an access request sent by the browser to the page of the target application, and judge whether the access request is valid;
  • the sending module 603 is configured to determine the target page file according to the access request when it is determined that the access request is valid, and return the target page file to the browser, so that the browser performs rendering and display processing on the target page file, wherein , the target page file includes the public page content and the private page content, and the private page content is the specific page content of each page of each application.
  • the sending module 603 includes:
  • the first sending submodule is used to determine the target page file according to the access request when determining that the access request is valid, and return the target page file to the browser;
  • the receiving sub-module is used to obtain the XHR request initiated by the browser to trigger the header component and the NavMenu component when parsing the code corresponding to the public page content in the target page file;
  • the second sending sub-module is used to send the header component and the NavMenu component to the browser, so that the browser can render and display the header component, the NavMenu component and the exclusive page content.
  • the storage module 601 is also used to obtain and store a public page file, the public page file is a pre-set page file shared by multiple different applications, and the public page file includes a shared login page file or an error handling page file;
  • the sending module 603 is further configured to return the public page file to the browser when it is determined that the access request is invalid, so that the browser renders and displays the public page file.
  • the judging module 602 includes
  • the extracting submodule is used to obtain the access request sent by the browser to the page of the target application, and extract the application identifier of the target application in the access request;
  • the reverse proxy submodule is used to use the reverse proxy server ngnix to query whether the page file of the target application can be matched according to the application identification;
  • the query sub-module is used to determine the target page file according to the link address query carried in the query request if the matching is successful;
  • the judging sub-module is used to judge whether the token token of the target page file is valid; if the token is valid, it is determined that the access request is valid; if the matching is unsuccessful or the token is invalid, it is determined that the access request is invalid.
  • the server after receiving the access request to the page of the target application initiated by the browser, the server can judge whether the access request is valid, and if it is valid, return the target page file to the browser according to the access request, so as to Make the browser render and display the target page file.
  • the target page file includes public page content and exclusive page content
  • the public page content includes a common head header component and a navigation menu NavMenu component pre-set for pages of multiple different applications, and the exclusive page content
  • the header component and the NavMenu component are encapsulated in the umd format of the general module definition specification.
  • UMD is a Javascript module specification
  • the packaged module code can be reused between different projects. Therefore, the content of the public page can be reused by multiple applications, avoiding the repeated development of this part of the code, and thus improving the development efficiency.
  • the present application provides an embodiment of an application page loading system.
  • the application page loading system 700 described in this embodiment include:
  • the server after receiving the access request to the page of the target application initiated by the terminal device through the browser, the server can determine whether the access request is valid, and if it is valid, return the target page to the browser according to the access request file, so that the browser renders and displays the target page file.
  • the target page file includes public page content and exclusive page content
  • the public page content includes a common head header component and a navigation menu NavMenu component pre-set for pages of multiple different applications, and the exclusive page content
  • the header component and the NavMenu component are encapsulated in the umd format of the general module definition specification.
  • UMD is a Javascript module specification
  • the packaged module code can be reused between different projects. Therefore, the content of the public page can be reused by multiple applications, avoiding the repeated development of this part of the code, and thus improving the development efficiency.
  • FIG. 8 is a block diagram of the basic structure of the computer device in this embodiment.
  • the computer device 800 includes a memory 801 , a processor 802 , and a network interface 803 connected to each other through a system bus for communication. It should be noted that only computer device 800 is shown with components 801-803, but it should be understood that implementation of all illustrated components is not required and that more or fewer components may be implemented instead. Among them, those skilled in the art can understand that the computer device here is a device that can automatically perform numerical calculation and/or information processing according to preset or stored instructions, and its hardware includes but is not limited to microprocessors, dedicated Integrated circuit (Application Specific Integrated Circuit, ASIC), programmable gate array (Field-Programmable Gate Array, FPGA), digital processor (Digital Signal Processor, DSP), embedded devices, etc.
  • ASIC Application Specific Integrated Circuit
  • FPGA Field-Programmable Gate Array
  • DSP Digital Signal Processor
  • the computer equipment may be computing equipment such as a desktop computer, a notebook, a palmtop computer, and a cloud server.
  • the computer device can perform human-computer interaction with the user through keyboard, mouse, remote controller, touch panel or voice control device.
  • the memory 801 includes at least one type of readable storage medium, and the readable storage medium includes flash memory, hard disk, multimedia card, card-type memory (for example, SD or DX memory, etc.), random access memory (RAM), static Random Access Memory (SRAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), Programmable Read Only Memory (PROM), Magnetic Memory, Magnetic Disk, Optical Disk, etc.
  • the computer readable storage Media can be non-volatile or volatile.
  • the memory 801 may be an internal storage unit of the computer device 800, such as a hard disk or memory of the computer device 800.
  • the memory 801 can also be an external storage device of the computer device 800, such as a plug-in hard disk equipped on the computer device 800, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) card, flash memory card (Flash Card), etc.
  • the memory 801 may also include both the internal storage unit of the computer device 800 and its external storage device.
  • the memory 801 is usually used to store the operating system and various application software installed on the computer device 800, such as the computer of the loading method of the application page described in the aforementioned Figure 2, Figure 3 or Figure 4 Readable instructions, etc.
  • the memory 801 can also be used to temporarily store various types of data that have been output or will be output.
  • the processor 802 may be a central processing unit (Central Processing Unit, CPU), controller, microcontroller, microprocessor, or other data processing chips in some embodiments.
  • the processor 802 is generally used to control the overall operation of the computer device 800 .
  • the processor 802 is configured to execute computer-readable instructions stored in the memory 801 or process data, for example, execute computer-readable instructions of the method for loading the application page.
  • the network interface 803 may include a wireless network interface or a wired network interface, and the network interface 803 is generally used to establish a communication connection between the computer device 800 and other electronic devices.
  • the computer when the computer executes the computer-readable instructions, after receiving the access request to the page of the target application initiated by the terminal device through the browser, it can judge whether the access request is valid, and if it is valid, then according to the The access request returns the target page file to the browser, so that the browser renders and displays the target page file.
  • the target page file since the target page file includes public page content and exclusive page content, the public page content includes a common head header component and a navigation menu NavMenu component pre-set for pages of multiple different applications, and the exclusive page content
  • the header component and the NavMenu component are encapsulated in the umd format of the general module definition specification.
  • UMD is a Javascript module specification
  • the packaged module code can be reused between different projects. Therefore, the content of the public page can be reused by multiple applications, avoiding the repeated development of this part of the code, and thus improving the development efficiency.
  • the present application also provides another implementation manner, which is to provide a computer-readable storage medium, the computer-readable storage medium stores computer-readable instructions, and the computer-readable instructions can be executed by at least one processor to The at least one processor is made to execute the steps of the method for loading an application page as described above in FIG. 2 , FIG. 3 or FIG. 4 .
  • the computer-readable instructions can be executed by at least one processor, and after receiving the access request to the page of the target application initiated by the terminal device through the browser, it can be judged whether the access request is valid, and if it is valid, then The target page file is returned to the browser according to the access request, so that the browser renders and displays the target page file.
  • the target page file includes public page content and exclusive page content
  • the public page content includes a common head header component and a navigation menu NavMenu component pre-set for pages of multiple different applications, and the exclusive page content
  • the header component and the NavMenu component are encapsulated in the umd format of the general module definition specification.
  • UMD is a Javascript module specification
  • the packaged module code can be reused between different projects. Therefore, the content of the public page can be reused by multiple applications, avoiding the repeated development of this part of the code, and thus improving the development efficiency.
  • the methods of the above embodiments can be implemented by means of software plus a necessary general-purpose hardware platform, and of course also by hardware, but in many cases the former is better implementation.
  • the technical solution of the present application can be embodied in the form of a software product in essence or the part that contributes to the prior art, and the computer software product is stored in a storage medium (such as ROM/RAM, disk, CD) contains several instructions to make a terminal device (which may be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) execute the methods described in the various embodiments of the present application.
  • a terminal device which may be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

一种应用页面的加载方法、系统、终端设备、服务器、计算机设备及存储介质，该方法包括：采用浏览器向服务器发起对目标应用的页面的访问请求（S201）；获取所述服务器在确定所述访问请求有效后，根据所述访问请求返回的目标页面文件，其中，所述目标页面文件包括公有页面内容和专有页面内容，所述公有页面内容包括预先为多个不同应用的页面所设置的共用的头部header组件和导航菜单NavMenu组件，所述专有页面内容为各个应用各自页面特定具有的页面内容，所述header组件和所述NavMenu组件均采用通用模块定义规范umd格式封装（S202）；采用所述浏览器对所述目标页面文件进行渲染显示处理（S203）。

Description

应用页面的加载方法、存储介质、及其相关设备
本申请以2021年7月28日提交的申请号为202110857091.0，名称为“应用页面的加载方法、存储介质、及其相关设备”的中国发明专利申请为基础，并要求其优先权。
技术领域
本申请涉及计算机技术领域，尤其涉及一种应用页面的加载方法、应用页面的加载系统、终端设备、服务器、计算机设备及存储介质。
背景技术
随着基于各种目的开发的管理应用越来越多，由于很多项目在初期时项目上线仓促、考虑不够周全、人员变动等多种原因，以及技术更新换代等因素，这些管理应用形态各异，登录形式也各异，访问不同功能需要来回切换不同的应用，使用者用起来就很不方便。
这时自然就提出了整合这些管理应用的诉求，但申请人意识到目前前端开发所通常采用的Javascript语言，由于其不支持"类(class)"和"模块(module)"，因此导致不同项目之间，难以实现跨项目的模块代码的引用。这样就导致不同项目之间，具有相同功能或者可以理论上可以共用的模块，仍需要重复开发和部署，不利于提高开发效率。
发明内容
本申请实施例的目的在于提出一种应用页面的加载方法、应用页面的加载系统、终端设备、服务器、计算机设备及存储介质，其主要目的用于提高现有技术中在开发多个应用的页面时的开发效率。
为了解决上述技术问题，本申请实施例第一方面提供一种应用页面的加载方法，该应用页面的加载方法可以包括：
采用浏览器向服务器发起对目标应用的页面的访问请求；
获取该服务器在确定该访问请求有效后，根据该访问请求返回的目标页面文件，其中，该目标页面文件可以包括公有页面内容和专有页面内容，该公有页面内容可以包括预先为多个不同应用的页面所设置的共用的头部header组件和导航菜单NavMenu组件，该专有页面内容为各个应用各自页面特定具有的页面内容，该header组件和该NavMenu组件均采用通用模块定义规范umd格式封装；
采用该浏览器对该目标页面文件进行渲染显示处理。
为了解决上述技术问题，本申请实施例第二方面提供另一种应用页面的加载方法，该应用页面的加载方法可以包括：
获取并存储为多个不同应用的页面所设置的公有页面内容，该公有页面内容可以包括该多个不同应用的页面所共用的header组件和NavMenu组件，该header组件和该NavMenu组件均采用通用模块定义规范umd格式封装；
获取浏览器发送的对目标应用的页面的访问请求，并判断该访问请求是否有效；
在确定该访问请求有效时，根据该访问请求确定目标页面文件，并向该浏览器返回该目标页面文件，以使该浏览器对该目标页面文件进行渲染显示处理，其中，该目标页面文件可以包括该公有页面内容和专有页面内容，该专有页面内容为各个应用各自页面特定具有的页面内容。
为了解决上述技术问题，本申请实施例第三方面提供另一种应用页面的加载方法，该应用页面的加载方法可以包括：
服务器获取并存储为多个不同应用的页面所设置的公有页面内容，该公有页面内容可以包括该多个不同应用的页面所共用的header组件和NavMenu组件，该header组件和该NavMenu组件均采用通用模块定义规范umd格式封装；
终端设备采用浏览器向该服务器发起对目标应用的页面的访问请求；
该服务器获取浏览器发送的对目标应用的页面的访问请求，并判断该访问请求是否有效；
该服务器在确定该访问请求有效时，根据该访问请求确定目标页面文件，并向该浏览器返回该目标页面文件，其中，该目标页面文件可以包括该公有页面内容和专有页面内容，该专有页面内容为各个应用各自页面特定具有的页面内容；
该终端设备采用该浏览器对该目标页面文件进行渲染显示处理。
为了解决上述技术问题，本申请实施例第四方面提供一种终端设备，该终端设备可以包括：
发送模块，用于采用浏览器向服务器发起对目标应用的页面的访问请求；
接收模块，用于获取该服务器在确定该访问请求有效后，根据该访问请求返回的目标页面文件，其中，该目标页面文件可以包括公有页面内容和专有页面内容，该公有页面内容可以包括预先为多个不同应用的页面所设置的共用的头部header组件和导航菜单NavMenu组件，该专有页面内容为各个应用各自页面特定具有的页面内容，该header组件和该NavMenu组件均采用通用模块定义规范umd格式封装；
显示模块，用于采用该浏览器对该目标页面文件进行渲染显示处理。
为了解决上述技术问题，本申请实施例第五方面提供一种服务器，该服务器可以包括：
存储模块，用于获取并存储为多个不同应用的页面所设置的公有页面内容，该公有页面内容可以包括该多个不同应用的页面所共用的header组件和NavMenu组件，该header组件和该NavMenu组件均采用通用模块定义规范umd格式封装；
判断模块，用于获取浏览器发送的对目标应用的页面的访问请求，并判断该访问请求是否有效；
发送模块，用于在确定该访问请求有效时，根据该访问请求确定目标页面文件，并向该浏览器返回该目标页面文件，以使该浏览器对该目标页面文件进行渲染显示处理，其中，该目标页面文件可以包括该公有页面内容和专有页面内容，该专有页面内容为各个应用各自页面特定具有的页面内容。
为了解决上述技术问题，本申请实施例第六方面提供一种应用页面的加载系统，该应用页面的加载系统包括：
如上述第四方面中所述的终端设备和如上述第五方面中所述的服务器。
为了解决上述技术问题，本申请实施例第七方面还提供一种计算机设备，采用了如下所述的技术方案：
一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如下所述的应用页面的加载方法的步骤：
采用浏览器向服务器发起对目标应用的页面的访问请求；
获取所述服务器在确定所述访问请求有效后，根据所述访问请求返回的目标页面文件，其中，所述目标页面文件包括公有页面内容和专有页面内容，所述公有页面内容包括预先为多个不同应用的页面所设置的共用的头部header组件和导航菜单NavMenu组件，所述专有页面内容为各个应用各自页面特定具有的页面内容，所述header组件和所述NavMenu组件均采用通用模块定义规范umd格式封装；
采用所述浏览器对所述目标页面文件进行渲染显示处理。
为了解决上述技术问题，本申请实施例第八方面还提供一种计算机可读存储介质，采用了如下所述的技术方案：
一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如下所述的应用页面的加载方法的步骤：
采用浏览器向服务器发起对目标应用的页面的访问请求；
获取所述服务器在确定所述访问请求有效后，根据所述访问请求返回的目标页面文件， 其中，所述目标页面文件包括公有页面内容和专有页面内容，所述公有页面内容包括预先为多个不同应用的页面所设置的共用的头部header组件和导航菜单NavMenu组件，所述专有页面内容为各个应用各自页面特定具有的页面内容，所述header组件和所述NavMenu组件均采用通用模块定义规范umd格式封装；
采用所述浏览器对所述目标页面文件进行渲染显示处理。
与现有技术相比，本申请实施例主要有以下有益效果：
本申请实施例中，在采用浏览器向服务器发起对目标应用的页面的访问请求后，可以获取该服务器在确定该访问请求有效后，根据该访问请求返回的目标页面文件。之后，再采用该浏览器对该目标页面文件进行渲染显示处理。其中，由于该目标页面文件包括公有页面内容和专有页面内容，该公有页面内容包括预先为多个不同应用的页面所设置的共用的头部header组件和导航菜单NavMenu组件，该专有页面内容为各个应用各自页面特定具有的页面内容，该header组件和该NavMenu组件均采用通用模块定义规范umd格式封装。由于通用模块定义规范(universal module definition，UMD)是一种Javascript模块规范，遵循该模块规范对代码进行打包后，可以实现打包的模块代码可以在不同项目之间复用的效果。从而使得，公有页面内容可以实现不同应用之间的复用，避免了这一部分代码的重复开发，从而提高了开发效率。
附图说明
为了更清楚地说明本申请中的方案，下面将对本申请实施例描述中所需要使用的附图作一个简单介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本申请可以应用于其中的示例性系统架构图；
图2根据本申请的应用页面的加载方法的一个实施例的流程图；
图3根据本申请的应用页面的加载方法的又一个实施例的流程图；
图4根据本申请的应用页面的加载方法的又一个实施例的流程图；
图5是根据本申请的终端设备500的一个实施例的结构示意图；
图6是根据本申请的服务器600的一个实施例的结构示意图；
图7是根据本申请的应用页面的加载系统700的一个实施例的结构示意图；
图8是根据本申请的计算机设备800的一个实施例的结构示意图。
具体实施方式
除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同；本文中在申请的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本申请；本申请的说明书和权利要求书及上述附图说明中的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。本申请的说明书和权利要求书或上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。
在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。
为了使本技术领域的人员更好地理解本申请方案，下面将结合附图，对本申请实施例中的技术方案进行清楚、完整地描述。
如图1所示，系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。
用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如网页浏览器应用、购物类应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。
终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、电子书阅读器、MP3播放器(Moving Picture Experts Group Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。
服务器105可以是提供各种服务的服务器，例如对终端设备101、102、103上显示的页面提供支持的后台服务器。
需要说明的是，本申请实施例所提供的应用页面的加载方法一般由服务器/终端设备执行。
应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
继续参考图2，示出了根据本申请的应用页面的加载方法的一个实施例的流程图所述的应用页面的加载方法，包括以下步骤：
步骤S201，采用浏览器向服务器发起对目标应用的页面的访问请求。
在本实施例中，应用页面的加载方法可以运行于其上的电子设备(例如图1所示的终端设备)上，该电子设备可以通过有线连接方式或者无线连接方式与服务器进行数据交互。其中，电子设备与服务器建立http连接后，电子设备可以通过浏览器应用或者其他类型应用中嵌入的浏览器模块，向服务器发起对目标应用的页面的访问请求。
步骤S202，获取服务器在确定访问请求有效后，根据访问请求返回的目标页面文件，其中，目标页面文件包括公有页面内容和专有页面内容，公有页面内容包括预先为多个不同应用的页面所设置的共用的头部header组件和导航菜单NavMenu组件，专有页面内容为各个应用各自页面特定具有的页面内容，该header组件和该NavMenu组件均采用通用模块定义规范umd格式封装。
在本实施例中，服务器在接收到该访问请求后，可以先依据该访问请求中的链接地址，确定该次访问请求是否有效。在确定有效后，查询确定该链接地址指示的目标页面文件，并向电子设备返回该目标页面文件。其中，为了减少不同应用对应的页面中相同部分内容的重复开发以及统一不同应用之间的样式风格，该目标页面文件，即HTML文件可以包括公有页面内容和专有页面内容两部分。公有页面内容包括预先为多个不同应用的页面所设置的共用的header组件和用于为页面和功能提供导航的NavMenu组件，专有页面内容为各个应用各自页面特定具有的页面内容，该header组件和该NavMenu组件均采用通用模块定义规范umd格式封装。
具体的，由于目前的网页越来越像桌面流程，嵌入网页的Javascript代码越来越庞大，越来越复杂，因此开发者不得不使用软件工程的方法，如模块化编程，管理网页的业务逻辑，提高开发效率。通过模块化编程，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但Javascript不是一种模块化编程语言，其不支持"类(class)"和"模块(module)"，因此Javascript编程多为非模块化编程。非模块化编程时，正常某个应用页面中所有的组件文件，如header组件和NavMenu组件对应的js文件，都需要放在该应用的大目录下。这样一来，如果多个应用的页面具有相同的组件，那这些组件也需要重复部署在该多个应用的目录下，且每次修改之后都要重复部署。
基于上述情况，目前定义有多种Javascript模块规范，开发人员通过遵循Javascript模块规范来进行开发和代码打包，可以实现Javascript的“类模块化编程”。其中，UMD是一种Javascript模块规范，模块是实现特定功能的一组方法。
本申请实施例中，为实现公有页面内容在多个应用的网页之间的共用，公有页面内容 中的header组件和该NavMenu组件均采用umd格式封装。封装后的JS文件，可以单独部署，无需部署在各个应用的目录中，从而可以实现跨模块和跨应用引用，且部署更为简单。
步骤S203，采用浏览器对目标页面文件进行渲染显示处理。
在本实施例中，接收到目标页面文件后，可以采用浏览器对目标页面文件的代码进行解析，进而对目标页面文件进行渲染和显示处理。在渲染时，浏览器逐行执行目标页面文件中的代码，依次执行构建dom树、构建渲染(render)树、布局render树和绘制render树等过程，生成和显示页面视图。具体的，浏览器的渲染引擎首先解析目标页面文件，即html文件，按照body属性下标签的结构将这些标签转化为内容树中的dom节点。之后，进一步解析外部CSS文件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。Render树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。Render树构建好了之后，该渲染引擎会执行布局过程，它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。需要说明的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早地将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。
在本申请实施例一些可能的实现方式中，该采用该浏览器对该目标页面文件进行渲染显示处理的步骤，包括：采用该浏览器对该目标页面文件中的代码进行解析，在解析该公有页面内容对应的代码时，触发向该服务器发起对该header组件和该NavMenu组件的XHR请求；接收该服务器返回的该header组件和该NavMenu组件，并对该header组件、该NavMenu组件以及该专有页面内容进行渲染显示处理。
本申请实施例中，具体在渲染时，在浏览器解析目标页面文件中公有页面内容对应的代码时，可以触发向服务器发起对该header组件和该NavMenu组件的XHR(XML Http Request)请求。之后，在接收到服务器返回的该header组件和该NavMenu组件，对该header组件、该NavMenu组件以及该专有页面内容进行渲染显示处理。
在本申请实施例一些可能的实现方式中，在采用浏览器向服务器发起对目标应用的页面的访问请求的步骤之后，加载方法还包括：接收服务器确定访问请求无效后返回的公有页面文件，公有页面文件为预先设置的多个不同应用所共用的页面文件，公有页面文件包括共用的登录页文件或错误处理页文件；采用浏览器对公有页面文件进行渲染显示处理。
具体的，为统一多个应用的网页之间的风格样式，还可以设置多个应用具有共用的公有页面文件，该公有页面文件可以包括共用的登录页文件或错误处理页文件。在通过浏览器向服务器发送访问请求后，若服务器确定该访问请求无效，则将访问请求指向该公有页面文件，并向浏览器返回该公有页面文件。之后，浏览器对该公有页面文件进行渲染显示处理。由于采用了共用的登录页文件或错误处理页文件，可以统一多个应用的网页之间的风格样式，并且也避免为不同应用重复开发这些页面，提高了开发效率。
与现有技术相比，本申请实施例主要有以下有益效果：
本申请实施例中，在采用浏览器向服务器发起对目标应用的页面的访问请求后，可以获取该服务器在确定该访问请求有效后，根据该访问请求返回的目标页面文件。之后，再采用该浏览器对该目标页面文件进行渲染显示处理。其中，由于该目标页面文件包括公有页面内容和专有页面内容，该公有页面内容包括预先为多个不同应用的页面所设置的共用的头部header组件和导航菜单NavMenu组件，该专有页面内容为各个应用各自页面特定具有的页面内容，该header组件和该NavMenu组件均采用通用模块定义规范umd格式封装。由于UMD是一种Javascript模块规范，遵循该模块规范对代码进行打包后，可以实现打包的模块代码可以在不同项目之间复用的效果。从而使得，公有页面内容可以实现不同应用之间的复用，避免了这一部分代码的重复开发，从而提高了开发效率。
继续参考图3，示出了根据本申请的应用页面的加载方法的一个实施例的流程图的应 用页面的加载方法，包括以下步骤：
步骤S301，获取并存储为多个不同应用的页面所设置的公有页面内容，公有页面内容包括多个不同应用的页面所共用的header组件和NavMenu组件，该header组件和该NavMenu组件均采用通用模块定义规范umd格式封装。
在本实施例中，应用页面的加载方法可以运行于其上的服务器上，该服务器可以通过有线连接方式或者无线连接方式与电子设备进行数据交互。该服务器通过外部设备进行配置，例如可以获取和存储外部设备为多个不同应用的页面所设置的公有页面内容，公有页面内容包括多个不同应用的页面所共用的header组件和NavMenu组件。
步骤S302，获取浏览器发送的对目标应用的页面的访问请求，并判断访问请求是否有效。
本申请实施例中，电子设备与服务器建立http连接后，电子设备可以通过浏览器应用或者其他类型应用中嵌入的浏览器模块，向服务器发起对目标应用的页面的访问请求。之后，浏览器判定该访问请求是否有效。
在本申请实施例一些可能的实现方式中，获取浏览器发送的对目标应用的页面的访问请求，并判断访问请求是否有效的步骤，包括：获取浏览器发送的对目标应用的页面的访问请求，提取访问请求中目标应用的应用标识；采用反向代理服务器ngnix根据应用标识查询是否可以匹配到目标应用的页面文件；若匹配成功，则根据查询访问请求中所携带的链接地址查询确定目标页面文件；判断目标页面文件的令牌token是否有效；若token有效，则确定访问请求有效；若匹配不成功，或token无效，则确定访问请求无效。
具体的，本申请实施例中，首先需要进行如下设置：(1)对各旧有应用修改打包webpack配置，增加唯一应用前缀作为每个应用为唯一标识，如/A、/B、/C等；(2)增加反向代理服务器ngnix，其用于匹配/A等应用路径，使访问请求在确定有效后，可以跳转到各应用页面。此时，服务器在接收到访问请求后，可以先提取该访问请求中的链接地址，例如/A/home地址，查询“/A”应用标识是否预先在ngnix中有配置，即查询是否可以匹配到A应用的页面文件。若可以匹配得到，则进一步查询获取该链接地址指引的目标页面文件。之后，再提取该目标页面文件的token，判断该token是否有效，即是否存在和是否过期，若有效，则确定该次访问请求有效。若前述匹配不成功或者token失效，则确定该次访问请求失效。通过在服务器上设置反向代理服务器来代理外部的浏览器发送的访问请求，可以降低网络和服务器的负载，提高访问效率，此外，通过token进一步判断目标网页文件是否有效，也可以进一步提高服务器的安全性。
步骤S303，在确定访问请求有效时，根据访问请求确定目标页面文件，并向浏览器返回目标页面文件，以使浏览器对目标页面文件进行渲染显示处理，其中，目标页面文件包括公有页面内容和专有页面内容，专有页面内容为各个应用各自页面特定具有的页面内容。
本申请实施例中，服务器在通过上述步骤确定访问请求有效后，向浏览器返回根据访问请求中的链接地址查询确定的目标页面文件。从而使得浏览器在接收到目标页面文件后，可以采用浏览器对目标页面文件的代码进行解析，进而对目标页面文件进行渲染和显示处理。在渲染时，浏览器逐行执行目标页面文件中的代码，依次执行构建dom树、构建render树、布局render树和绘制render树等过程，生成和显示页面视图。
在本申请实施例一些可能的实现方式中，在确定访问请求有效时，根据访问请求确定目标页面文件，并向浏览器返回目标页面文件，以使浏览器对目标页面文件进行渲染显示处理的步骤，包括：在确定访问请求有效时，根据访问请求确定目标页面文件，并向浏览器返回目标页面文件；获取浏览器在解析目标页面文件中公有页面内容对应的代码时，触发发起的对header组件和NavMenu组件的XHR请求；向浏览器发送header组件和NavMenu组件，以使浏览器对header组件、NavMenu组件以及专有页面内容进行渲染显示处理。
具体的，本申请实施例中，为实现公有页面内容在多个应用的网页之间的共用，公有页面内容中的header组件和该NavMenu组件均采用umd格式封装。封装后的JS文件，可 以在服务器中单独部署，无需部署在各个应用的目录中，从而可以实现跨模块和跨应用引用，且部署更为简单。具体在渲染时，在浏览器解析目标页面文件中公有页面内容对应的代码时，可以触发向服务器发起对该header组件和该NavMenu组件的XHR(XML Http Request)请求。之后，服务器查询确定header组件和该NavMenu组件对应的JS文件，并向浏览器返回，使浏览器对该header组件、该NavMenu组件以及该专有页面内容进行渲染显示处理。
在本申请实施例一些可能的实现方式中，在获取浏览器发送的对目标应用的页面的访问请求，并判断访问请求是否有效的步骤之前，加载方法还包括：获取并存储公有页面文件，公有页面文件为预先设置的多个不同应用所共用的页面文件，公有页面文件包括共用的登录页文件或错误处理页文件；获取浏览器发送的对目标应用的页面的访问请求，并判断访问请求是否有效的步骤之后，加载方法还包括：在确定访问请求无效时，向浏览器返回公有页面文件，以使浏览器对公有页面文件进行渲染显示处理。
本申请实施例中，首先需要进行如下设置：(1)删除各个应用自身的登录页、错误处理页面，并修改所有跳转到登录页、错误处理页的指向路径为预设的公共页面文件的路径，该公有页面文件包括共用的登录页文件或错误处理页文件，该路径例如/main/login、/main/404、/main/502等；(2)增加反向代理服务器ngnix，其用于上述公共页面文件的路径，使访问请求在确定无效后，可以跳转到该公共页面文件的路径上。此时，服务器在接收到访问请求后，通过前述的判断方法，若确定该访问请求无效，则可以自动将访问请求的链接地址跳转至公共页面文件的路径。之后，服务器提取公共页面文件，并向浏览器返回该公共页面文件，使浏览器对该公有页面文件进行渲染显示处理。
需要强调的是，为进一步保证上述公有页面文件的私密和安全性，上述公有页面文件还可以存储于一区块链的节点中。
本申请所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。
与现有技术相比，本申请实施例主要有以下有益效果：
本申请实施例中，服务器在接收到浏览器发起的对目标应用的页面的访问请求后，可以判断该访问请求是否有效，若有效，则根据该访问请求向浏览器返回该目标页面文件，以使该浏览器对该目标页面文件进行渲染显示处理。其中，由于该目标页面文件包括公有页面内容和专有页面内容，该公有页面内容包括预先为多个不同应用的页面所设置的共用的头部header组件和导航菜单NavMenu组件，该专有页面内容为各个应用各自页面特定具有的页面内容，该header组件和该NavMenu组件均采用通用模块定义规范umd格式封装。由于UMD是一种Javascript模块规范，遵循该模块规范对代码进行打包后，可以实现打包的模块代码可以在不同项目之间复用的效果。从而公有页面内容可以实现多个应用的复用，避免了这一部分代码的重复开发，从而提高了开发效率。
继续参考图4，示出了根据本申请的应用页面的加载方法的一个实施例的流程图所述的应用页面的加载方法，包括以下步骤：
步骤S401，服务器获取并存储为多个不同应用的页面所设置的公有页面内容，公有页面内容包括多个不同应用的页面所共用的header组件和NavMenu组件，header组件和NavMenu组件均采用通用模块定义规范umd格式封装。
步骤S402，终端设备采用浏览器向服务器发起对目标应用的页面的访问请求。
步骤S403，服务器获取浏览器发送的对目标应用的页面的访问请求，并判断访问请求是否有效。
步骤S404，服务器在确定访问请求有效时，根据访问请求确定目标页面文件，并向浏 览器返回目标页面文件，其中，目标页面文件包括公有页面内容和专有页面内容，专有页面内容为各个应用各自页面特定具有的页面内容。
步骤S405，终端设备采用浏览器对目标页面文件进行渲染显示处理。
需要说明的是，上述步骤S401、步骤S403和步骤S404分别与前述图3所示的实施例中步骤S301、步骤S302和步骤S303类似，而上述步骤S402和步骤S405分别与前述图2所示的实施例中步骤S201和步骤S203类似，具体此处不再过多赘述。
与现有技术相比，本申请实施例主要有以下有益效果：
本申请实施例中，服务器在接收到终端设备通过浏览器发起的对目标应用的页面的访问请求后，可以判断该访问请求是否有效，若有效，则根据该访问请求向浏览器返回该目标页面文件，以使该浏览器对该目标页面文件进行渲染显示处理。其中，由于该目标页面文件包括公有页面内容和专有页面内容，该公有页面内容包括预先为多个不同应用的页面所设置的共用的头部header组件和导航菜单NavMenu组件，该专有页面内容为各个应用各自页面特定具有的页面内容，该header组件和该NavMenu组件均采用通用模块定义规范umd格式封装。由于UMD是一种Javascript模块规范，遵循该模块规范对代码进行打包后，可以实现打包的模块代码可以在不同项目之间复用的效果。从而公有页面内容可以实现多个应用的复用，避免了这一部分代码的重复开发，从而提高了开发效率。
本申请可用于众多通用或专用的计算机系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如流程模块。一般地，流程模块包括执行特定任务或实现特定抽象数据类型的例程、流程、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，流程模块可以位于包括存储设备在内的本地和远程计算机存储介质中。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，该计算机可读指令可存储于一计算机可读取存储介质中，该流程在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等非易失性存储介质，或随机存储记忆体(Random Access Memory，RAM)等。
应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
进一步参考图5，作为对上述图2所示方法的实现，本申请提供了一种终端设备的一个实施例，如图5所示，本实施例所述的终端设备500包括：
发送模块501，用于采用浏览器向服务器发起对目标应用的页面的访问请求；
接收模块502，用于获取该服务器在确定该访问请求有效后，根据该访问请求返回的目标页面文件，其中，该目标页面文件包括公有页面内容和专有页面内容，该公有页面内容包括预先为多个不同应用的页面所设置的共用的头部header组件和导航菜单NavMenu组件，该专有页面内容为各个应用各自页面特定具有的页面内容，该header组件和该NavMenu组件均采用通用模块定义规范umd格式封装；
显示模块503，用于采用该浏览器对该目标页面文件进行渲染显示处理。
在本申请实施例一些可能的实现方式中，显示模块503，包括：
解析子模块，用于采用该浏览器对该目标页面文件中的代码进行解析，在解析该公有 页面内容对应的代码时，触发向该服务器发起对该header组件和该NavMenu组件的XHR请求；
渲染子模块，用于接收该服务器返回的该header组件和该NavMenu组件，并对该header组件、该NavMenu组件以及该专有页面内容进行渲染显示处理。
在本申请实施例一些可能的实现方式中，显示模块503，还用于接收该服务器确定该访问请求无效后返回的公有页面文件，该公有页面文件为预先设置的多个不同应用所共用的页面文件，该公有页面文件包括共用的登录页文件或错误处理页文件；
显示模块503，还用于采用该浏览器对该公有页面文件进行渲染显示处理。
与现有技术相比，本申请实施例主要有以下有益效果：
本申请实施例中，终端设备在采用浏览器向服务器发起对目标应用的页面的访问请求后，可以获取该服务器在确定该访问请求有效后，根据该访问请求返回的目标页面文件。之后，再采用该浏览器对该目标页面文件进行渲染显示处理。其中，由于该目标页面文件包括公有页面内容和专有页面内容，该公有页面内容包括预先为多个不同应用的页面所设置的共用的头部header组件和导航菜单NavMenu组件，该专有页面内容为各个应用各自页面特定具有的页面内容，该header组件和该NavMenu组件均采用通用模块定义规范umd格式封装。由于UMD是一种Javascript模块规范，遵循该模块规范对代码进行打包后，可以实现打包的模块代码可以在不同项目之间复用的效果。从而使得，公有页面内容可以实现多个应用的复用，避免了这一部分代码的重复开发，从而提高了开发效率。
进一步参考图6，作为对上述图3所示方法的实现，本申请提供了一种服务器的一个实施例，如图6所示，本实施例所述的服务器600包括：
存储模块601，用于获取并存储为多个不同应用的页面所设置的公有页面内容，该公有页面内容包括该多个不同应用的页面所共用的header组件和NavMenu组件，该header组件和该NavMenu组件均采用通用模块定义规范umd格式封装；
判断模块602，用于获取浏览器发送的对目标应用的页面的访问请求，并判断该访问请求是否有效；
发送模块603，用于在确定该访问请求有效时，根据该访问请求确定目标页面文件，并向该浏览器返回该目标页面文件，以使该浏览器对该目标页面文件进行渲染显示处理，其中，该目标页面文件包括该公有页面内容和专有页面内容，该专有页面内容为各个应用各自页面特定具有的页面内容。
在本申请实施例一些可能的实现方式中，发送模块603，包括：
第一发送子模块，用于在确定该访问请求有效时，根据该访问请求确定目标页面文件，并向该浏览器返回该目标页面文件；
接收子模块，用于获取浏览器在解析该目标页面文件中该公有页面内容对应的代码时，触发发起的对该header组件和该NavMenu组件的XHR请求；
第二发送子模块，用于向该浏览器发送该header组件和该NavMenu组件，以使该浏览器对该header组件、该NavMenu组件以及该专有页面内容进行渲染显示处理。
在本申请实施例一些可能的实现方式中，
存储模块601，还用于获取并存储公有页面文件，该公有页面文件为预先设置的多个不同应用所共用的页面文件，该公有页面文件包括共用的登录页文件或错误处理页文件；
发送模块603，还用于在确定该访问请求无效时，向该浏览器返回该公有页面文件，以使该浏览器对该公有页面文件进行渲染显示处理。
在本申请实施例一些可能的实现方式中，判断模块602，包括
提取子模块，用于获取浏览器发送的对目标应用的页面的访问请求，提取该访问请求中该目标应用的应用标识；
反向代理子模块，用于采用反向代理服务器ngnix根据该应用标识查询是否可以匹配到该目标应用的页面文件；
查询子模块，用于若匹配成功，则根据查询该访问请求中所携带的链接地址查询确定目标页面文件；
判断子模块，用于判断该目标页面文件的令牌token是否有效；若该token有效，则确定该访问请求有效；若匹配不成功或该token无效，则确定该访问请求无效。
与现有技术相比，本申请实施例主要有以下有益效果：
本申请实施例中，服务器在接收到浏览器发起的对目标应用的页面的访问请求后，可以判断该访问请求是否有效，若有效，则根据该访问请求向浏览器返回该目标页面文件，以使该浏览器对该目标页面文件进行渲染显示处理。其中，由于该目标页面文件包括公有页面内容和专有页面内容，该公有页面内容包括预先为多个不同应用的页面所设置的共用的头部header组件和导航菜单NavMenu组件，该专有页面内容为各个应用各自页面特定具有的页面内容，该header组件和该NavMenu组件均采用通用模块定义规范umd格式封装。由于UMD是一种Javascript模块规范，遵循该模块规范对代码进行打包后，可以实现打包的模块代码可以在不同项目之间复用的效果。从而公有页面内容可以实现多个应用的复用，避免了这一部分代码的重复开发，从而提高了开发效率。
进一步参考图7，作为对上述图4所示方法的实现，本申请提供了一种应用页面的加载系统的一个实施例，如图7所示，本实施例所述的应用页面的加载系统700包括：
如上述图5所示实施例中所述的终端设备500和如上述图6所示实施例中所述的服务器600。
与现有技术相比，本申请实施例主要有以下有益效果：
本申请实施例中，服务器在接收到终端设备通过浏览器发起的对目标应用的页面的访问请求后，可以判断该访问请求是否有效，若有效，则根据该访问请求向浏览器返回该目标页面文件，以使该浏览器对该目标页面文件进行渲染显示处理。其中，由于该目标页面文件包括公有页面内容和专有页面内容，该公有页面内容包括预先为多个不同应用的页面所设置的共用的头部header组件和导航菜单NavMenu组件，该专有页面内容为各个应用各自页面特定具有的页面内容，该header组件和该NavMenu组件均采用通用模块定义规范umd格式封装。由于UMD是一种Javascript模块规范，遵循该模块规范对代码进行打包后，可以实现打包的模块代码可以在不同项目之间复用的效果。从而公有页面内容可以实现多个应用的复用，避免了这一部分代码的重复开发，从而提高了开发效率。
为解决上述技术问题，本申请实施例还提供计算机设备。具体请参阅图8，图8为本实施例计算机设备基本结构框图。
所述计算机设备800包括通过系统总线相互通信连接存储器801、处理器802、网络接口803。需要指出的是，图中仅示出了具有组件801-803的计算机设备800，但是应理解的是，并不要求实施所有示出的组件，可以替代地实施更多或者更少的组件。其中，本技术领域技术人员可以理解，这里的计算机设备是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(Application Specific Integrated Circuit，ASIC)、可编程门阵列(Field－Programmable Gate Array，FPGA)、数字处理器(Digital Signal Processor，DSP)、嵌入式设备等。
所述计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述计算机设备可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。
所述存储器801至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等，所述计算机可读存储介质可以是非易失性，也可以是易失性。在一些实施例中，所述存储器801可以是所述计算机设备 800的内部存储单元，例如该计算机设备800的硬盘或内存。在另一些实施例中，所述存储器801也可以是所述计算机设备800的外部存储设备，例如该计算机设备800上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，所述存储器801还可以既包括所述计算机设备800的内部存储单元也包括其外部存储设备。本实施例中，所述存储器801通常用于存储安装于所述计算机设备800的操作系统和各类应用软件，例如前述图2、图3或图4中所述的应用页面的加载方法的计算机可读指令等。此外，所述存储器801还可以用于暂时地存储已经输出或者将要输出的各类数据。
所述处理器802在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器802通常用于控制所述计算机设备800的总体操作。本实施例中，所述处理器802用于运行所述存储器801中存储的计算机可读指令或者处理数据，例如运行所述应用页面的加载方法的计算机可读指令。
所述网络接口803可包括无线网络接口或有线网络接口，该网络接口803通常用于在所述计算机设备800与其他电子设备之间建立通信连接。
与现有技术相比，本申请实施例主要有以下有益效果：
本申请实施例中，计算机在执行该计算机可读指令时，在接收到终端设备通过浏览器发起的对目标应用的页面的访问请求后，可以判断该访问请求是否有效，若有效，则根据该访问请求向浏览器返回该目标页面文件，以使该浏览器对该目标页面文件进行渲染显示处理。其中，由于该目标页面文件包括公有页面内容和专有页面内容，该公有页面内容包括预先为多个不同应用的页面所设置的共用的头部header组件和导航菜单NavMenu组件，该专有页面内容为各个应用各自页面特定具有的页面内容，该header组件和该NavMenu组件均采用通用模块定义规范umd格式封装。由于UMD是一种Javascript模块规范，遵循该模块规范对代码进行打包后，可以实现打包的模块代码可以在不同项目之间复用的效果。从而公有页面内容可以实现多个应用的复用，避免了这一部分代码的重复开发，从而提高了开发效率。
本申请还提供了另一种实施方式，即提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可读指令，所述计算机可读指令可被至少一个处理器执行，以使所述至少一个处理器执行如上述图2、图3或图4所述的应用页面的加载方法的步骤。
与现有技术相比，本申请实施例主要有以下有益效果：
本申请实施例中，计算机可读指令可被至少一个处理器执行，在接收到终端设备通过浏览器发起的对目标应用的页面的访问请求后，可以判断该访问请求是否有效，若有效，则根据该访问请求向浏览器返回该目标页面文件，以使该浏览器对该目标页面文件进行渲染显示处理。其中，由于该目标页面文件包括公有页面内容和专有页面内容，该公有页面内容包括预先为多个不同应用的页面所设置的共用的头部header组件和导航菜单NavMenu组件，该专有页面内容为各个应用各自页面特定具有的页面内容，该header组件和该NavMenu组件均采用通用模块定义规范umd格式封装。由于UMD是一种Javascript模块规范，遵循该模块规范对代码进行打包后，可以实现打包的模块代码可以在不同项目之间复用的效果。从而公有页面内容可以实现多个应用的复用，避免了这一部分代码的重复开发，从而提高了开发效率。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本申请各个实施例所述的方法。
显然，以上所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例，附图 中给出了本申请的较佳实施例，但并不限制本申请的专利范围。本申请可以以许多不同的形式来实现，相反地，提供这些实施例的目的是使对本申请的公开内容的理解更加透彻全面。尽管参照前述实施例对本申请进行了详细的说明，对于本领域的技术人员来而言，其依然可以对前述各具体实施方式所记载的技术方案进行修改，或者对其中部分技术特征进行等效替换。凡是利用本申请说明书及附图内容所做的等效结构，直接或间接运用在其他相关的技术领域，均同理在本申请专利保护范围之内。

Claims (20)

  1. 一种应用页面的加载方法，其中，包括：
    采用浏览器向服务器发起对目标应用的页面的访问请求；
    获取所述服务器在确定所述访问请求有效后，根据所述访问请求返回的目标页面文件，其中，所述目标页面文件包括公有页面内容和专有页面内容，所述公有页面内容包括预先为多个不同应用的页面所设置的共用的头部header组件和导航菜单NavMenu组件，所述专有页面内容为各个应用各自页面特定具有的页面内容，所述header组件和所述NavMenu组件均采用通用模块定义规范umd格式封装；
    采用所述浏览器对所述目标页面文件进行渲染显示处理。
  2. 根据权利要求1所述的应用页面的加载方法，其中，所述采用所述浏览器对所述目标页面文件进行渲染显示处理的步骤，包括：
    采用所述浏览器对所述目标页面文件中的代码进行解析，在解析所述公有页面内容对应的代码时，触发向所述服务器发起对所述header组件和所述NavMenu组件的XHR请求；
    接收所述服务器返回的所述header组件和所述NavMenu组件，并对所述header组件、所述NavMenu组件以及所述专有页面内容进行渲染显示处理。
  3. 根据权利要求1或2所述的应用页面的加载方法，其中，在所述采用浏览器向服务器发起对目标应用的页面的访问请求的步骤之后，所述加载方法还包括：
    接收所述服务器确定所述访问请求无效后返回的公有页面文件，所述公有页面文件为预先设置的多个不同应用所共用的页面文件，所述公有页面文件包括共用的登录页文件或错误处理页文件；
    采用所述浏览器对所述公有页面文件进行渲染显示处理。
  4. 一种应用页面的加载方法，其中，包括：
    获取并存储为多个不同应用的页面所设置的公有页面内容，所述公有页面内容包括所述多个不同应用的页面所共用的header组件和NavMenu组件，所述header组件和所述NavMenu组件均采用通用模块定义规范umd格式封装；
    获取浏览器发送的对目标应用的页面的访问请求，并判断所述访问请求是否有效；
    在确定所述访问请求有效时，根据所述访问请求确定目标页面文件，并向所述浏览器返回所述目标页面文件，以使所述浏览器对所述目标页面文件进行渲染显示处理，其中，所述目标页面文件包括所述公有页面内容和专有页面内容，所述专有页面内容为各个应用各自页面特定具有的页面内容。
  5. 根据权利要求4所述的应用页面的加载方法，其中，所述在确定所述访问请求有效时，根据所述访问请求确定目标页面文件，并向所述浏览器返回所述目标页面文件，以使所述浏览器对所述目标页面文件进行渲染显示处理的步骤，包括：
    在确定所述访问请求有效时，根据所述访问请求确定目标页面文件，并向所述浏览器返回所述目标页面文件；
    获取浏览器在解析所述目标页面文件中所述公有页面内容对应的代码时，触发发起的对所述header组件和所述NavMenu组件的XHR请求；
    向所述浏览器发送所述header组件和所述NavMenu组件，以使所述浏览器对所述
    header组件、所述NavMenu组件以及所述专有页面内容进行渲染显示处理。
  6. 根据权利要求4或5所述的应用页面的加载方法，其中，在所述获取浏览器发送的对目标应用的页面的访问请求，并判断所述访问请求是否有效的步骤之前，所述加载方法还包括：
    获取并存储公有页面文件，所述公有页面文件为预先设置的多个不同应用所共用的页面文件，所述公有页面文件包括共用的登录页文件或错误处理页文件；
    所述获取浏览器发送的对目标应用的页面的访问请求，并判断所述访问请求是否有效的步骤之后，所述加载方法还包括：
    在确定所述访问请求无效时，向所述浏览器返回所述公有页面文件，以使所述浏览器对所述公有页面文件进行渲染显示处理。
  7. 根据权利要求4或5所述的应用页面的加载方法，其中，所述获取浏览器发送的对目标应用的页面的访问请求，并判断所述访问请求是否有效的步骤，包括：
    获取浏览器发送的对目标应用的页面的访问请求，提取所述访问请求中所述目标应用的应用标识；
    采用反向代理服务器ngnix根据所述应用标识查询是否可以匹配到所述目标应用的页面文件；
    若匹配成功，则根据查询所述访问请求中所携带的链接地址查询确定目标页面文件；
    判断所述目标页面文件的令牌token是否有效；
    若所述token有效，则确定所述访问请求有效；
    若匹配不成功或所述token无效，则确定所述访问请求无效。
  8. 一种终端设备，其中，包括：
    发送模块，用于采用浏览器向服务器发起对目标应用的页面的访问请求；
    接收模块，用于获取所述服务器在确定所述访问请求有效后，根据所述访问请求返回的目标页面文件，其中，所述目标页面文件包括公有页面内容和专有页面内容，所述公有页面内容包括预先为多个不同应用的页面所设置的共用的头部header组件和导航菜单NavMenu组件，所述专有页面内容为各个应用各自页面特定具有的页面内容，所述header组件和所述NavMenu组件均采用通用模块定义规范umd格式封装；
    显示模块，用于采用所述浏览器对所述目标页面文件进行渲染显示处理。
  9. 一种服务器，其中，包括：
    存储模块，用于获取并存储为多个不同应用的页面所设置的公有页面内容，所述公有页面内容包括所述多个不同应用的页面所共用的header组件和NavMenu组件，所述header组件和所述NavMenu组件均采用通用模块定义规范umd格式封装；
    判断模块，用于获取浏览器发送的对目标应用的页面的访问请求，并判断所述访问请求是否有效；
    发送模块，用于在确定所述访问请求有效时，根据所述访问请求确定目标页面文件，并向所述浏览器返回所述目标页面文件，以使所述浏览器对所述目标页面文件进行渲染显示处理，其中，所述目标页面文件包括所述公有页面内容和专有页面内容，所述专有页面内容为各个应用各自页面特定具有的页面内容。
  10. 一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如下所述的应用页面的加载方法的步骤：
    采用浏览器向服务器发起对目标应用的页面的访问请求；
    获取所述服务器在确定所述访问请求有效后，根据所述访问请求返回的目标页面文件，其中，所述目标页面文件包括公有页面内容和专有页面内容，所述公有页面内容包括预先为多个不同应用的页面所设置的共用的头部header组件和导航菜单NavMenu组件，所述专有页面内容为各个应用各自页面特定具有的页面内容，所述header组件和所述NavMenu组件均采用通用模块定义规范umd格式封装；
    采用所述浏览器对所述目标页面文件进行渲染显示处理。
  11. 根据权利要求10所述的计算机设备，其中，所述采用所述浏览器对所述目标页面文件进行渲染显示处理的步骤，包括：
    采用所述浏览器对所述目标页面文件中的代码进行解析，在解析所述公有页面内容对应的代码时，触发向所述服务器发起对所述header组件和所述NavMenu组件的XHR请求；
    接收所述服务器返回的所述header组件和所述NavMenu组件，并对所述header组件、所述NavMenu组件以及所述专有页面内容进行渲染显示处理。
  12. 根据权利要求10或11所述的计算机设备，其中，在所述采用浏览器向服务器发 起对目标应用的页面的访问请求的步骤之后，所述加载方法还包括：
    接收所述服务器确定所述访问请求无效后返回的公有页面文件，所述公有页面文件为预先设置的多个不同应用所共用的页面文件，所述公有页面文件包括共用的登录页文件或错误处理页文件；
    采用所述浏览器对所述公有页面文件进行渲染显示处理。
  13. 一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如下所述的应用页面的加载方法的步骤：
    获取并存储为多个不同应用的页面所设置的公有页面内容，所述公有页面内容包括所述多个不同应用的页面所共用的header组件和NavMenu组件，所述header组件和所述NavMenu组件均采用通用模块定义规范umd格式封装；
    获取浏览器发送的对目标应用的页面的访问请求，并判断所述访问请求是否有效；
    在确定所述访问请求有效时，根据所述访问请求确定目标页面文件，并向所述浏览器返回所述目标页面文件，以使所述浏览器对所述目标页面文件进行渲染显示处理，其中，所述目标页面文件包括所述公有页面内容和专有页面内容，所述专有页面内容为各个应用各自页面特定具有的页面内容。
  14. 根据权利要求13所述的计算机设备，其中，所述在确定所述访问请求有效时，根据所述访问请求确定目标页面文件，并向所述浏览器返回所述目标页面文件，以使所述浏览器对所述目标页面文件进行渲染显示处理的步骤，包括：
    在确定所述访问请求有效时，根据所述访问请求确定目标页面文件，并向所述浏览器返回所述目标页面文件；
    获取浏览器在解析所述目标页面文件中所述公有页面内容对应的代码时，触发发起的对所述header组件和所述NavMenu组件的XHR请求；
    向所述浏览器发送所述header组件和所述NavMenu组件，以使所述浏览器对所述header组件、所述NavMenu组件以及所述专有页面内容进行渲染显示处理。
  15. 一种计算机可读存储介质，其中，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如下所述的应用页面的加载方法的步骤：
    采用浏览器向服务器发起对目标应用的页面的访问请求；
    获取所述服务器在确定所述访问请求有效后，根据所述访问请求返回的目标页面文件，其中，所述目标页面文件包括公有页面内容和专有页面内容，所述公有页面内容包括预先为多个不同应用的页面所设置的共用的头部header组件和导航菜单NavMenu组件，所述专有页面内容为各个应用各自页面特定具有的页面内容，所述header组件和所述NavMenu组件均采用通用模块定义规范umd格式封装；
    采用所述浏览器对所述目标页面文件进行渲染显示处理。
  16. 根据权利要求15所述的计算机可读存储介质，其中，所述采用所述浏览器对所述目标页面文件进行渲染显示处理的步骤，包括：
    采用所述浏览器对所述目标页面文件中的代码进行解析，在解析所述公有页面内容对应的代码时，触发向所述服务器发起对所述header组件和所述NavMenu组件的XHR请求；
    接收所述服务器返回的所述header组件和所述NavMenu组件，并对所述header组件、所述NavMenu组件以及所述专有页面内容进行渲染显示处理。
  17. 根据权利要求15或16所述的计算机可读存储介质，其中，在所述采用浏览器向服务器发起对目标应用的页面的访问请求的步骤之后，所述加载方法还包括：
    接收所述服务器确定所述访问请求无效后返回的公有页面文件，所述公有页面文件为预先设置的多个不同应用所共用的页面文件，所述公有页面文件包括共用的登录页文件或错误处理页文件；
    采用所述浏览器对所述公有页面文件进行渲染显示处理。
  18. 一种计算机可读存储介质，其中，所述计算机可读存储介质上存储有计算机可读 指令，所述计算机可读指令被处理器执行时实现如下所述的应用页面的加载方法的步骤：
    获取并存储为多个不同应用的页面所设置的公有页面内容，所述公有页面内容包括所述多个不同应用的页面所共用的header组件和NavMenu组件，所述header组件和所述NavMenu组件均采用通用模块定义规范umd格式封装；
    获取浏览器发送的对目标应用的页面的访问请求，并判断所述访问请求是否有效；
    在确定所述访问请求有效时，根据所述访问请求确定目标页面文件，并向所述浏览器返回所述目标页面文件，以使所述浏览器对所述目标页面文件进行渲染显示处理，其中，所述目标页面文件包括所述公有页面内容和专有页面内容，所述专有页面内容为各个应用各自页面特定具有的页面内容。
  19. 根据权利要求18所述的计算机可读存储介质，其中，所述在确定所述访问请求有效时，根据所述访问请求确定目标页面文件，并向所述浏览器返回所述目标页面文件，以使所述浏览器对所述目标页面文件进行渲染显示处理的步骤，包括：
    在确定所述访问请求有效时，根据所述访问请求确定目标页面文件，并向所述浏览器返回所述目标页面文件；
    获取浏览器在解析所述目标页面文件中所述公有页面内容对应的代码时，触发发起的对所述header组件和所述NavMenu组件的XHR请求；
    向所述浏览器发送所述header组件和所述NavMenu组件，以使所述浏览器对所述header组件、所述NavMenu组件以及所述专有页面内容进行渲染显示处理。
  20. 根据权利要求18或19所述的计算机可读存储介质，其中，在所述获取浏览器发送的对目标应用的页面的访问请求，并判断所述访问请求是否有效的步骤之前，所述加载方法还包括：
    获取并存储公有页面文件，所述公有页面文件为预先设置的多个不同应用所共用的页面文件，所述公有页面文件包括共用的登录页文件或错误处理页文件；
    所述获取浏览器发送的对目标应用的页面的访问请求，并判断所述访问请求是否有效的步骤之后，所述加载方法还包括：
    在确定所述访问请求无效时，向所述浏览器返回所述公有页面文件，以使所述浏览器对所述公有页面文件进行渲染显示处理。
PCT/CN2022/071877 2021-07-28 2022-01-13 应用页面的加载方法、存储介质、及其相关设备 Ceased WO2023005163A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202110857091.0A CN113536185B (zh) 2021-07-28 2021-07-28 应用页面的加载方法、存储介质、及其相关设备
CN202110857091.0 2021-07-28

Publications (1)

Publication Number Publication Date
WO2023005163A1 true WO2023005163A1 (zh) 2023-02-02

Family

ID=78121223

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2022/071877 Ceased WO2023005163A1 (zh) 2021-07-28 2022-01-13 应用页面的加载方法、存储介质、及其相关设备

Country Status (2)

Country Link
CN (1) CN113536185B (zh)
WO (1) WO2023005163A1 (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116466953A (zh) * 2023-03-03 2023-07-21 港珠澳大桥管理局 组件化的前端开发方法、装置、计算机设备和存储介质
CN116776022A (zh) * 2023-06-28 2023-09-19 中国建设银行股份有限公司 请求响应方法、装置、设备及存储介质
CN118245104A (zh) * 2024-04-15 2024-06-25 深圳市轻松信息科技有限公司 一种基于webpack打包jQuery项目的架构管理方法
CN120812043A (zh) * 2025-09-04 2025-10-17 中移(苏州)软件技术有限公司 一种数据处理方法、界面的显示方法、设备及存储介质

Families Citing this family (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113536185B (zh) * 2021-07-28 2024-01-02 平安科技（深圳）有限公司 应用页面的加载方法、存储介质、及其相关设备
CN114217864A (zh) * 2021-11-02 2022-03-22 北京健康之家科技有限公司 应用的动态接入方法、装置、存储介质及计算机设备
CN114185537A (zh) * 2021-12-06 2022-03-15 招联消费金融有限公司 页面处理方法、装置、计算机设备和存储介质
CN116955861B (zh) * 2022-04-14 2026-04-14 北京沃东天骏信息技术有限公司 页面生成方法和装置以及前端融合系统
CN115390802B (zh) * 2022-08-23 2025-01-21 上海百秋新网商数字科技有限公司 应用程序的组件化开发方法、系统、设备和存储介质
CN116932959A (zh) * 2023-07-28 2023-10-24 陕西智引科技有限公司 一种mvc架构中系统状态页面支持实时刷新的方法和装置

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109491653A (zh) * 2018-11-21 2019-03-19 泰康保险集团股份有限公司 微服务架构下的组件共享方法、装置、电子设备
CN111209028A (zh) * 2020-01-07 2020-05-29 京东数字科技控股有限公司 一种数据处理方法、装置、电子设备及存储介质
US20200195705A1 (en) * 2018-12-18 2020-06-18 Alibaba Group Holding Limited Method and apparatus for browser application to load first screen of web page
CN112817591A (zh) * 2021-01-26 2021-05-18 山东浪潮通软信息科技有限公司 前端页面的构建方法和装置
CN113536185A (zh) * 2021-07-28 2021-10-22 平安科技（深圳）有限公司 应用页面的加载方法、存储介质、及其相关设备

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104346463B (zh) * 2014-11-07 2018-07-17 北京奇虎科技有限公司 一种页面标签的加载方法、装置和浏览器客户端
US10693974B2 (en) * 2017-09-28 2020-06-23 Citrix Systems, Inc. Managing browser session navigation between one or more browsers
CN108846087A (zh) * 2018-06-12 2018-11-20 恒生电子股份有限公司 一种页面渲染方法、装置、终端及服务器
CN111159595A (zh) * 2019-12-24 2020-05-15 平安养老保险股份有限公司 页面加载方法、系统、计算机设备和计算机可读存储介质

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109491653A (zh) * 2018-11-21 2019-03-19 泰康保险集团股份有限公司 微服务架构下的组件共享方法、装置、电子设备
US20200195705A1 (en) * 2018-12-18 2020-06-18 Alibaba Group Holding Limited Method and apparatus for browser application to load first screen of web page
CN111209028A (zh) * 2020-01-07 2020-05-29 京东数字科技控股有限公司 一种数据处理方法、装置、电子设备及存储介质
CN112817591A (zh) * 2021-01-26 2021-05-18 山东浪潮通软信息科技有限公司 前端页面的构建方法和装置
CN113536185A (zh) * 2021-07-28 2021-10-22 平安科技（深圳）有限公司 应用页面的加载方法、存储介质、及其相关设备

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116466953A (zh) * 2023-03-03 2023-07-21 港珠澳大桥管理局 组件化的前端开发方法、装置、计算机设备和存储介质
CN116466953B (zh) * 2023-03-03 2024-01-02 港珠澳大桥管理局 组件化的前端开发方法、装置、计算机设备和存储介质
CN116776022A (zh) * 2023-06-28 2023-09-19 中国建设银行股份有限公司 请求响应方法、装置、设备及存储介质
CN118245104A (zh) * 2024-04-15 2024-06-25 深圳市轻松信息科技有限公司 一种基于webpack打包jQuery项目的架构管理方法
CN120812043A (zh) * 2025-09-04 2025-10-17 中移(苏州)软件技术有限公司 一种数据处理方法、界面的显示方法、设备及存储介质

Also Published As

Publication number Publication date
CN113536185B (zh) 2024-01-02
CN113536185A (zh) 2021-10-22

Similar Documents

Publication Publication Date Title
WO2023005163A1 (zh) 应用页面的加载方法、存储介质、及其相关设备
CN111414407A (zh) 数据库的数据查询方法、装置、计算机设备及存储介质
US20190251143A1 (en) Web page rendering method and related device
CN113282591B (zh) 权限过滤方法、装置、计算机设备及存储介质
CN113382083B (zh) 一种网页截图方法和装置
US20250173163A1 (en) Page display method and apparatus, storage medium and electronic device
WO2022095518A1 (zh) 接口自动化测试方法、装置、计算机设备及存储介质
CN116569165A (zh) 页面显示方法、装置、存储介质及电子设备
CN113377376A (zh) 数据包生成方法、数据包生成装置、电子设备及存储介质
CN114912003A (zh) 文档搜索方法、装置、计算机设备及存储介质
US20140074814A1 (en) Method and apparatus for switching search engine to repeat search
CN116304403A (zh) 网页访问方法、装置、计算机设备及存储介质
CN114615325A (zh) 消息推送方法、装置、计算机设备及存储介质
CN104217021B (zh) 阅读服务器、终端设备及其显示阅读内容的方法
CN119441650A (zh) 一种网页加载方法、装置、电子设备及存储介质
CN112416875B (zh) 日志管理方法、装置、计算机设备及存储介质
US12585723B2 (en) Information display method and apparatus, terminal, and storage medium
CN116243920A (zh) 一种前端性能优化方法、系统、计算机设备及存储介质
CN115733685A (zh) Web会话认证管理方法、装置、计算机设备及存储介质
CN113127783B (zh) 页面显示方法及装置、设备和介质
CN112241501B (zh) 一种分享信息的方法与设备
CN118690400A (zh) 数据处理方法、装置、计算机设备、存储介质及产品
CN112925573A (zh) 网页加载的方法、装置、设备和计算机可读介质
CN114090066A (zh) 用户界面卡片视图生成方法、装置、计算机设备及介质
CN112347051A (zh) 一种基于http服务的文件处理轻量化方法、装置、计算机设备和存储介质

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 22847784

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 22847784

Country of ref document: EP

Kind code of ref document: A1