CN116955861A

CN116955861A - Page generation method and device and front-end fusion system

Info

Publication number: CN116955861A
Application number: CN202210388462.XA
Authority: CN
Inventors: 冉梦刚
Original assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Wodong Tianjun Information Technology Co Ltd
Current assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Wodong Tianjun Information Technology Co Ltd
Priority date: 2022-04-14
Filing date: 2022-04-14
Publication date: 2023-10-27

Abstract

The invention discloses a page generation method and device and a front-end fusion system, and relates to the technical field of cloud computing. One embodiment of the method comprises the following steps: responding to an access request sent by a client and aiming at any front subsystem of the front subsystems, determining a menu item corresponding to a link address of the access request by utilizing a mapping relation between a preset link address and the menu item, and forming a page template based on second page data generated according to the determined menu item; and acquiring a specific node for mounting the special page data of any front subsystem from the page template and sending the specific node to the front subsystem so that the front subsystem generates the special page data and mounts the special page data to the specific node to form the page data for returning to the client. The embodiment can realize non-invasive fusion of a plurality of front terminal systems without relying on iframe technology.

Description

Page generation method and device and front-end fusion system

Technical Field

The present invention relates to the field of cloud computing technologies, and in particular, to a method and an apparatus for generating a page, and a front end fusion system.

Background

In the current website architecture, the front end is used as a foreground part for showing pages to users at the PC end, the mobile end and the like, the back end is engaged in the actual logic behind the construction of the application program, and the front end and the back end are required to cooperate with each other to jointly complete the website function. In practical applications, the front-end system often includes a plurality of front-end subsystem systems with specific functions, where the front-end subsystem systems may be developed by different teams, and different front-end frameworks and routing systems are used, so that the code bases are independent and the deployment is independent, and in some situations, the front-end subsystem systems need to be fused, so that the front-end subsystem systems have uniform domain names, uniform page layout and the same interactive processing logic. In the prior art, the above fusion is mainly implemented by adopting the iframe technology of a browser, in which a page is used to provide a unified interface (i.e. page layout) and common interaction logic, and the specific parts of each front subsystem are displayed in a window provided by the iframe.

In carrying out the invention, the inventors have found that the prior art has at least the following problems: first, the window size that iframe provided is difficult to control, appears multiple scrollbars easily, and the bullet layer is difficult to realize with regard to whole screen level, vertical centering. Second, browser URL (Uniform Resource Locator ) recording function fails: the URL of the browser does not change when the page jumps; when a certain page is refreshed, the content of the currently browsed page is lost and displayed as the first page content; after a certain page is collected, the browser displays the content of the first page when the browser is opened again.

Disclosure of Invention

In view of the above, the embodiments of the present invention provide a method and apparatus for generating a page and a front-end fusion system, which can implement non-invasive fusion of multiple front-end subsystem systems without relying on iframe technology.

To achieve the above object, according to one aspect of the present invention, there is provided a page generation method.

The page generation method of the embodiment of the invention is executed by a common component which is pre-introduced by a plurality of front sub-systems, and comprises the following steps: responding to an access request sent by a client and aiming at any front subsystem of the front subsystems, determining a menu item corresponding to a link address of the access request by utilizing a mapping relation between a preset link address and the menu item, and forming a page template based on second page data generated according to the determined menu item; the front sub-systems are provided with a consistent page layout, and the page layout comprises an area where the menu item is located and an exclusive page area of the front sub-systems; and acquiring a specific node for mounting the special page data of any front subsystem from the page template and sending the specific node to the front subsystem so that the front subsystem generates the special page data and mounts the special page data to the specific node to form the page data for returning to the client.

Optionally, the mapping relation is embodied in a second callback function preconfigured by any front subsystem, and the front subsystem sends the address of the second callback function to the public component in advance; and determining the menu item corresponding to the link address of the access request by using the mapping relation between the preset link address and the menu item, including: and calling a second callback function according to the address of the second callback function, and sending the menu item stored locally to any front subsystem so that the front subsystem determines the menu item corresponding to the link address of the access request by executing the second callback function.

Optionally, the menu items comprise primary menu items corresponding to the front subsystems and secondary menu items serving as submenus of the primary menu items, and the area where the menu items are located comprises a primary menu item area and a secondary menu item area; and, the method further comprises: generating unauthorized page data to return to any front terminal system when judging that the menu item corresponding to the link address of the access request does not exist; the second page data is generated according to the following steps: detecting whether the determined menu item is a primary menu item or a secondary menu item: if the first level menu item is detected, generating second page data to enable the second level menu item area to display each second level menu item of the first level menu item, and enabling the first level menu item of the first level menu item and the first second level menu item of the first level menu item to be highlighted; and if the secondary menu item is detected, acquiring a primary menu item to which the secondary menu item belongs, generating second page data to enable the secondary menu item area to display each secondary menu item of the acquired primary menu item, and highlighting the primary menu item and the detected secondary menu item.

Optionally, the forming the page template based on the second page data generated according to the determined menu item includes: acquiring first page data comprising a head node and a body node, which are provided by any front sub-system; and mounting the second page data to the main body node in the first page data to form the page template.

Optionally, the logic for generating the private page data is embodied in a first callback function preconfigured by the front subsystem, and the front subsystem sends the address of the first callback function to the public component in advance; and the specific node for acquiring the special page data for mounting any front terminal system from the page template is sent to the front terminal system, so that the front terminal system generates the special page data, and the method comprises the following steps: inquiring in the page template by using a preset identification of the specific node to obtain the specific node; and calling a first callback function to send the obtained specific node to any front sub-system, and informing the front sub-system to generate the special page data.

Optionally, each front subsystem of the plurality of front subsystem interacts with a preset back-end system through an AJAX mechanism; and, the method further comprises: creating an AJAX request object of which the proxy request object refers to a preset real request object covers each front subsystem; wherein, the real request object is provided with an unregistered check function in advance; using the real request object to receive response data returned by the back-end system to the front-end subsystem, and executing the unregistered check function to judge whether the current user is in an unregistered state: if yes, the front subsystem is instructed to return a login page to the client; otherwise, the response data is returned to the front subsystem.

Optionally, the link addresses of the front subsystem have the same domain name, and the link address of any front subsystem further has a unique identifier of the front subsystem; after an access request for any front sub-system is intercepted by a preset front-end server corresponding to the domain name, the front-end server forwards the access request to the front sub-system corresponding to the unique identifier in the link address of the access request.

Optionally, the public component includes a Javascript file, and the second page data further includes: software copyright information and information of a current login user acquired from the back-end system.

To achieve the above object, according to another aspect of the present invention, there is provided a page generating apparatus.

The page generating apparatus according to the embodiment of the present invention is disposed in a common component that is previously introduced into a plurality of front terminal systems, and may include: a page template forming unit for: responding to an access request sent by a client and aiming at any front subsystem of the front subsystems, determining a menu item corresponding to a link address of the access request by utilizing a mapping relation between a preset link address and the menu item, and forming a page template based on second page data generated according to the determined menu item; the front sub-systems are provided with a consistent page layout, and the page layout comprises an area where the menu item is located and an exclusive page area of the front sub-systems; a page assembling unit for: and acquiring a specific node for mounting the special page data of any front subsystem from the page template and sending the specific node to the front subsystem so that the front subsystem generates the special page data and mounts the special page data to the specific node to form the page data for returning to the client.

Optionally, the logic for generating the private page data is embodied in a first callback function preconfigured by the front subsystem, and the front subsystem sends the address of the first callback function to the public component in advance; the mapping relation is embodied in a second callback function preconfigured by any front subsystem, and the front subsystem sends the address of the second callback function to the public component in advance; the menu items comprise primary menu items corresponding to the front subsystems and secondary menu items serving as submenus of the primary menu items, and the area where the menu items are located comprises a primary menu item area and a secondary menu item area; and the page template forming unit is further configured to: calling a second callback function according to the address of the second callback function, and sending the menu item stored locally to any front subsystem so that the front subsystem can determine the menu item corresponding to the link address of the access request by executing the second callback function; generating unauthorized page data to return to any front terminal system when judging that the menu item corresponding to the link address of the access request does not exist; when judging that the menu item corresponding to the link address of the access request exists, detecting whether the determined menu item is a primary menu item or a secondary menu item: if the first level menu item is detected, generating second page data to enable the second level menu item area to display each second level menu item of the first level menu item, and enabling the first level menu item of the first level menu item and the first second level menu item of the first level menu item to be highlighted; if the two-level menu item is detected, acquiring a first-level menu item to which the two-level menu item belongs, generating second page data to enable the two-level menu item area to display each two-level menu item of the acquired first-level menu item, and enabling the first-level menu item and the detected second-level menu item to be highlighted; the page assembling unit is further configured to: acquiring first page data comprising a head node and a body node, which are provided by any front sub-system; mounting the second page data to a main body node in the first page data to form the page template; inquiring in the page template by using a preset identification of the specific node to obtain the specific node; and calling a first callback function to send the obtained specific node to any front sub-system, and informing the front sub-system to generate the special page data.

To achieve the above object, according to another aspect of the present invention, a front-end fusion system is provided.

The front-end fusion system of the embodiment of the invention can comprise: a plurality of front sub-systems and a common component into which the plurality of front sub-systems are introduced; after the client sends an access request to any front subsystem of the front subsystems, the public component determines a menu item corresponding to the link address of the access request by using a mapping relation between a preset link address and the menu item, and forms a page template based on second page data generated according to the determined menu item; the front sub-systems are provided with a consistent page layout, and the page layout comprises an area where the menu item is located and an exclusive page area of the front sub-systems; the public component acquires a specific node for mounting the special page data of any front terminal system from the page template and sends the specific node to the front terminal system; the front subsystem generates the private page data and mounts to the particular node, forming page data for return to the client.

Optionally, the logic for generating the private page data is embodied in a first callback function preconfigured by the front subsystem, and the front subsystem sends the address of the first callback function to the public component in advance; the mapping relation is embodied in a second callback function preconfigured by any front subsystem, and the front subsystem sends the address of the second callback function to the public component in advance; the menu items comprise primary menu items corresponding to the front subsystems and secondary menu items serving as submenus of the primary menu items, and the area where the menu items are located comprises a primary menu item area and a secondary menu item area; the public component calls a second callback function according to the address of the second callback function, and sends the menu item stored locally to any front sub-system; the front subsystem determines menu items corresponding to the link addresses of the access requests by executing a second callback function and returns the menu items to the public component; when judging that no menu item corresponding to the link address of the access request exists, the public component generates non-authority page data and returns the non-authority page data to any front subsystem; when judging that the menu item corresponding to the link address of the access request exists, the public component detects whether the determined menu item is a primary menu item or a secondary menu item: if the first level menu item is detected, the public component generates second page data to enable the second level menu item area to display each second level menu item of the first level menu item and enable the first second level menu item of the first level menu item to be highlighted; if the public component detects a secondary menu item, the public component acquires a primary menu item to which the secondary menu item belongs, generates second page data to enable the secondary menu item area to display each secondary menu item of the acquired primary menu item, and enables the primary menu item and the detected secondary menu item to be highlighted; the common component acquires first page data comprising a head node and a body node, which is provided by any front sub-system; mounting the second page data to a main body node in the first page data to form the page template; and the public component queries the page template by using the preset identification of the specific node, obtains the specific node, calls a first callback function to send the obtained specific node to any front subsystem, and informs the front subsystem to generate the special page data.

Optionally, each front subsystem of the plurality of front subsystem interacts with a preset back-end system through an AJAX mechanism; the link addresses of the front terminal systems have the same domain name, and the link address of any front terminal system is further provided with a unique identifier of the front terminal system; the front-end fusion system further includes a front-end server corresponding to the domain name; the public component comprises a Javascript file, and the second page data further comprises: software copyright information and information of a current login user acquired from the back-end system; the public component creates an agent request object referencing a preset real request object to cover an AJAX request object of each front subsystem; wherein, the real request object is provided with an unregistered check function in advance; the public component receives response data returned by the back-end system to the front-end subsystem by using the real request object, and executes the unregistered check function to judge whether the current user is in an unregistered state: if yes, the public component instructs the front subsystem to return a login page to the client; otherwise, the common component returns the response data to the front subsystem; the front-end server intercepts an access request aiming at any front-end subsystem, and forwards the access request to the front-end subsystem corresponding to the unique identifier in the link address of the access request.

To achieve the above object, according to still another aspect of the present invention, there is provided an electronic apparatus.

An electronic apparatus of the present invention includes: one or more processors; and the storage device is used for storing one or more programs, and when the one or more programs are executed by the one or more processors, the one or more processors are enabled to realize the page generation method provided by the invention.

To achieve the above object, according to still another aspect of the present invention, there is provided a computer-readable storage medium.

A computer-readable storage medium of the present invention has stored thereon a computer program which, when executed by a processor, implements the page generation method provided by the present invention.

According to the technical scheme of the invention, the embodiment of the invention has the following advantages or beneficial effects:

the method comprises the steps of referring to a pre-written public component in a plurality of front terminal systems, using the public component to realize unified page layout of each front terminal system, and unified interaction logic such as page rendering control, menu display control, unregistered inspection and the like, configuring unified domain names and unique identifiers for each front terminal system to generate independent URLs of each front terminal system, intercepting access requests of each front terminal system by using a front server corresponding to the unified domain names and forwarding according to the unique identifiers in the URLs, thereby realizing fusion among the plurality of front terminal systems independent of iframes, avoiding the defects of difficult control of the size of an inherent window of the iframes, difficult realization of multiple scroll bars, hard centering of an elastic layer, invalid URL recording function and the like, and avoiding great modification of original system codes through a non-invasive fusion scheme, so that the cost and difficulty of system fusion are reduced, and the user experience of the fused system is improved. In addition, in the embodiment of the invention, the cooperation of the public component and the front subsystem is realized by a callback function mode to generate menu item page data (second page data) and front subsystem special page data, and finally page data returned to a user is formed, so that the unified control of the page generation flow of each front subsystem is realized; the proxy request object referencing the real request object is used to overlay the AJAX request object of each front subsystem to further implement the unregistered check of the back-end response data, thereby implementing the unregistered check of overlaying all front subsystems without modifying the AJAX request code of each front subsystem.

Further effects of the above-described non-conventional alternatives are described below in connection with the embodiments.

Drawings

The drawings are included to provide a better understanding of the invention and are not to be construed as unduly limiting the invention. Wherein:

FIG. 1 is a schematic diagram of a front-end fusion system according to an embodiment of the present invention;

FIG. 2 is a diagram of a unified page layout of an embodiment of the present invention;

FIG. 3 is a schematic diagram illustrating the working principle of a front-end server according to an embodiment of the present invention;

FIG. 4 is a schematic diagram of a second architecture of a front-end fusion system according to an embodiment of the present invention;

FIG. 5 is a schematic diagram of a login status processing procedure according to an embodiment of the present invention;

FIG. 6 is a schematic diagram of menu display control according to an embodiment of the present invention;

FIG. 7 is a schematic diagram of a page generation flow in an embodiment of the invention;

FIG. 8 is a schematic diagram of a first callback function call of an embodiment of the present invention;

FIG. 9 is a schematic diagram of an unregistered check principle according to an embodiment of the present invention;

FIG. 10 is a schematic diagram of main steps of a page generating method according to an embodiment of the present invention;

FIG. 11 is a schematic diagram of components of a page generating apparatus according to an embodiment of the present invention;

FIG. 12 is an exemplary system architecture diagram to which embodiments in accordance with the present invention may be applied;

Fig. 13 is a schematic structural diagram of an electronic device for implementing a page generating method in an embodiment of the present invention.

Detailed Description

Exemplary embodiments of the present invention will now be described with reference to the accompanying drawings, in which various details of the embodiments of the present invention are included to facilitate understanding, and are to be considered merely exemplary. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the invention. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.

It should be noted that the embodiments of the present invention and the technical features in the embodiments may be combined with each other without collision.

Fig. 1 is a first architecture diagram of a front-end fusion system according to an embodiment of the present invention, as shown in fig. 1, where the front-end fusion system according to an embodiment of the present invention may include: a plurality of front sub-systems (three front sub-systems are exemplarily shown in fig. 1) and a common assembly into which the plurality of front sub-systems are introduced.

Wherein the front end subsystem is part of a complete front end system, different front end subsystems may be used to perform different specific functions. For example, the front-end system of a website is composed of front-end subsystems for merchandise display, order, logistics, etc. The common component refers to one or more universal components developed for each front terminal system in advance, and may be in various applicable forms, such as a Jar package, a Javascript file (JS file), a CSS (Cascading Style Sheets, cascading style sheet) file, etc., which are conveniently introduced by each front terminal system, and the following description will mainly take a case where the common component is a Javascript file as an example. The common component is used for realizing unified interaction logic of each front subsystem, such as unified page rendering logic, unified menu control logic, unified unregistered check logic and the like, and based on the common component and the unified interaction logic applied to each front subsystem, the non-invasive fusion of each front subsystem and the formation of a unified page structure can be realized.

FIG. 2 is a schematic diagram of a unified page layout of an embodiment of the present invention, referring to FIG. 2, pages presented on a browser or client by front sub-systems may have the same layout structure and visual style, and the layout structure is divided into: head: the system logo icon, the first-level menu item corresponding to each front subsystem (the page area is the first-level menu item area, the content of the page area can be fixed), and the submenus such as the information of the current login user, the login exit and the like are displayed on the right side in sequence from left to right. Left side submenu area (i.e., secondary menu item area): all submenus (i.e., secondary menu items) of the selected primary menu item are displayed. And (2) bottom: and displaying the software copyright information. Private page area: and displaying the special page of each front sub-system, including the default home page of the front-end fusion system. It will be appreciated that the above page layout is merely an example, and is used to illustrate that the front subsystem may implement the fusion based on the unified page layout through a common component and unified interaction logic, and in practical application, the unified page layout of the front subsystem may be in any other form and style, for example, the primary menu item area is on the left side, the secondary menu item area is on the head, and so on.

In practical application, all JS files for realizing the function of the public component can be combined into one public component (named x.js) by using a related tool, all CSS files for realizing the function of the public component are also combined into one public component (named x.css), and the generated two public components are issued into a URL. HTML (HyperText Markup Language ) provided by the front subsystem references the common component through the src attribute of the script and the href attribute of the link tag, respectively, i.e., through < script src= "URL of x.js" >/script > and < link href= "URL of x.css" >, respectively, which are located in front of other JS and CSS files in the HTML document.

In a specific application, a user can send an access request to any front-end subsystem or front-end fusion system through actions such as URL input, clicking, touching and the like at a client. In particular, the same domain name may be configured for each front subsystem in advance, and each front subsystem may be distinguished by a unique identifier of each front subsystem, and then the above unified domain name and unique identifier may be included in the link address of each front subsystem, and the unique identifier may be located at the beginning of the path portion (path) of the URL. For example, the URL of the front sub-system 1 is: www.xxx.com/systme1/user, URL of front subsystem 2 is: www.xxx.com/systme2/user, where www.xxx.com is the same domain name applied to all front subsystem, systme1 is the unique identification of front subsystem 1, and system2 is the unique identification of front subsystem 2.

After the above access request enters the front-end fusion system, it is first intercepted by a pre-established front-end server. Referring to fig. 3, the front end server may be an nginnx server based on a reverse proxy technology, which may intercept all access requests having a preset domain name (i.e., the same domain name of each front end subsystem). After intercepting the access request, the front-end server forwards the access request to a front sub-system corresponding to the unique identifier in the link address of the access request to execute corresponding processing. The front-end server may configure a correspondence between a URL feature (e.g., a unique identifier in a URL) and an IP address of the front-end subsystem server in the local URL interceptor, so as to perform the forwarding. In a practical scenario, the front-end server can also adopt web server software such as apache, isis and the like to realize the access of all front sub-systems by using the unified domain name and the forwarding of the access request based on the URL. In addition, the response data returned from each front sub-system also enters the front-end server and returns to the client. Through the arrangement, the unified domain name and the independent URL of each front terminal system are realized, and the problem that the URL recording function is invalid in the existing iframe technology is solved.

In the embodiment of the invention, the access request can be directed to the front end subsystem itself, the specific function of the front end subsystem, and the front end fusion system. After receiving the access request, the front subsystem invokes the common component to execute unified interaction logic such as menu control, page generation, unregistered check and the like.

Specifically, after being called by the front subsystem, the common component first determines the menu item corresponding to the link address of the access request by using the mapping relation between the preset link address and the menu item. The above menu items may include the first-level menu item and the second-level menu item as a submenu of the first-level menu item, and the technical solution of the present invention is described below by taking the first-level menu item and the second-level menu item as examples, and it will be understood that in practical applications, the menu data of each front subsystem may have only one level or may have any multiple levels, and the following description does not limit the menu data hierarchy of the present invention.

Specifically, the mapping relation between the above link address and the menu item can be embodied by pre-configuring the second callback function on the front subsystem, and when the front subsystem calls the public component, the front subsystem sends the address of the second callback function to the public component. When generating a page, the common component may first acquire first page data provided by the front subsystem, where the first page data may include a head node of the page, such as a declaration node (e.g., < | DOCTYPE html >), a head node, a title node, etc., and may also include a body node (i.e., a body node) with only a tag. And the front subsystem realizes the matching of the menu item and the access request link address by executing the second callback function, and returns a matching result to the public component after the matching is completed.

After receiving the matching result returned by the front subsystem, the public component attempts to generate second page data related to the menu, wherein the second page data can comprise page data of a primary menu item and a secondary menu item, and can also comprise page data of current login user information and page data of a bottom area, and the user information and the related data of the bottom area can be acquired from the back-end system by the public component. Specifically, when judging that the menu item corresponding to the link address of the access request does not exist, the public component generates the unauthorized page data to return to the front terminal system, and the page corresponding to the clicked or input URL is indicated that the user does not have permission to access. When judging that the menu item corresponding to the link address of the access request exists, the public component further detects whether the determined menu item is a primary menu item or a secondary menu item.

If a primary menu item is detected, indicating that the access request is directed to the front subsystem itself, the common component generates second page data to cause the secondary menu item area to display each secondary menu item of the detected primary menu item and to highlight (e.g., highlight) that primary menu item and the first secondary menu item of that primary menu item, or to highlight only that primary menu item and not any of the secondary menu items of that primary menu item. If a secondary menu item is detected, indicating that the access request is directed to a specific function of the front subsystem, the common component obtains a primary menu item to which the secondary menu item belongs, generates second page data to cause the secondary menu item area to display each secondary menu item of the obtained primary menu item, and highlights the primary menu item and the detected secondary menu item.

It should be noted that, the second page data may further include a specific node for mounting the front-end subsystem specific page data. Illustratively, the above specific node may be a div node. After the second page data is generated, the public component mounts the second page data to the main body node in the first page data, so that a page template is formed, the page template already contains the page data of the head node and the page data related to the menu, and can also contain the current login user information and the page data of the bottom area, and a complete HTML page can be formed only by combining the special page data of the front terminal system. It will be appreciated that the page template also contains the above specific nodes.

After the page template is formed, the public component acquires a specific node for mounting the special page data of the front terminal system from the page template and sends the specific node to the front terminal system; the front subsystem generates private page data and mounts it to a particular node, forming page data for return to the client. Specifically, the first callback function is preconfigured in the front subsystem to embody logic for generating the above private page data, and when the front subsystem calls the public component, the front subsystem sends the address of the first callback function to the public component. After the page template is formed, the public component queries the page template by using the preset identification of the specific node to obtain the specific node, calls a first callback function to send the obtained specific node to the front terminal system, and informs the front terminal system to generate special page data by calling the first callback function. After receiving the notification, the front-end subsystem executes a first callback function to generate private page data (if the access request is directed to the front-end fusion system, the private page data is a default home page of the front-end fusion system), mounts the generated private page data into a page template provided by the public component, forms final page data, and returns the final page data to the client through the front-end server.

Therefore, through the cooperation of the public components and the front terminal systems and the callback function mechanism, the unified menu display control logic and page generation flow applied to each front terminal system are realized, and the effective fusion of each front terminal system is facilitated.

The following describes an unregistered check flow according to an embodiment of the present invention. In a specific application, each front-end subsystem of the plurality of front-end subsystems interacts with a preset back-end system through an AJAX (Asynchronous Javascript And XML ) mechanism. To perform unified unregistered check logic for all front sub-systems, the common component pre-creates a proxy request object to overwrite the AJAX request object of each front sub-system. The proxy request object refers to a preset real request object, and an unregistered check function is pre-packaged in the real request object. The public component receives response data returned by the back-end system to the front-end subsystem by using the real request object and executes an unregistered check function in the real request object to judge whether the current user is in an unregistered state: if so, the public component instructs the front subsystem to return a login page (i.e., a page requiring the user to input login information for login) to the client; otherwise, the common component returns the response data to the front subsystem to perform subsequent processing. With the above arrangement, it is possible to realize an unregistered check covering all front terminal systems without modifying the AJAX request code of each front terminal system.

The following describes a specific embodiment of the present invention applied to SAAS (Software-as-a-Service), see FIGS. 4 through 9.

First, the background art of the present embodiment is explained. In the field of cloud computing, due to the maturity of cloud computing technology, enterprises can rapidly conduct SAAS on an existing system to realize technology realization, and an important step in the SAAS process is to integrate all existing front terminal systems, so that a flexible matrix version pool system is formed. These front end sub-systems are typically developed by different teams, using different front end frameworks and routing systems, with code libraries independent and deployment independent. The integrated process is from the front end engineering perspective, i.e. the front sub-systems have a unified interface and the same interaction logic, and the integrated systems access each front sub-system using a unified domain name, from a menu portal provided by the common interface. Currently, the integration work is mainly performed by adopting the iframe technology of a browser, wherein a page is used for providing a unified interface and common interaction logic, and a specific part of each page is displayed in a window provided by the iframe.

The use of iframe has the following disadvantages: first, the window size that iframe provided is difficult to control, appears multiple scrollbars easily, and the bullet layer is difficult to realize with regard to whole screen level, vertical centering. The reason is that when the iframe is used, all pages can be browsed through the window, the width and the height of the window are required to be specified, but the width and the height of each page are different, and even the same page can generate different heights under different interaction conditions, so that a developer needs to consider all factors influencing the change of the page height, after an event generating the change of the page height occurs, the JS is used for measuring the page height and then modifying the height of the iframe, the development efficiency is low, the BUG is easy to generate, and the user experience is poor. Second, browser URL recording function fails: the URL address bar of the browser is not changed when the page jumps; when a certain page is refreshed, the content of the currently browsed page is lost and displayed as the first page content; after collecting a certain page, when opening again, the browser displays the content of the first page. The reason is that after the iframe technology is used, displaying of each front subsystem page is achieved by changing the src attribute of the iframe, the browser cannot record the change of the attribute, and therefore the address recorded by the browser is always the address of the first page of the system.

In this embodiment, the back-end interfaces of the front-end sub-systems are managed by a unified interface management platform (in the back-end system), and the interface management platform provides basic interfaces such as user login, logout, user menu data acquisition, user information acquisition, and the like. The front end can call the service interface of the back end through the interface management platform, and the front end calls the back end interface in such a way that an XMLHttpRequest object (namely an AJAX request object) is used for sending an AJAX request. Each subsystem is a front-end and back-end separation item, namely, the back end only provides a data interface and is generated by a JS framework such as react, vue, angular. The unified interface of this embodiment is shown in fig. 2.

The common interaction logic of this embodiment includes: firstly, calling a user information interface of a back-end system to acquire information such as the name of a current login user, and displaying the information on the right side of the head after the information is acquired successfully; when the user moves the mouse to the arrow on the right side of the user name, the login exit submenu is displayed, and when the login exit option is clicked, the front end calls the rear end interface to clear the login information and then jumps to the login page. Second, the AJAX response information of each back-end interface except "login" and "logout" is checked, and if not logged in (including login timeout), the system is jumped to the system login page. A specific flow is shown in fig. 5. Specifically, the login state checker of the interface management platform judges whether the current user has logged in: if yes, calling a service API (Application Programming Interface, application program interface) to acquire service data and sending the service data to a data receiver at the front end; otherwise, the unregistered data is sent to the data receiver. After receiving the data, the front-end data receiver displays a login page if the front-end data receiver finds that the front-end data receiver is not logged in; otherwise, executing other logic.

Thirdly, acquiring and displaying a menu of the current login user. Fourth, checking whether the current user has authority to access a certain page, if not, jumping to the page without authority, if so, highlighting the head menu to which the page belongs (namely, selecting the head menu, namely, a first-level menu item), and displaying the submenu (namely, a second-level menu item) of the selected head menu in the left submenu area, wherein the detailed flow is shown in fig. 6. First, matching of the URL and the menu items is performed by the front subsystem in cooperation with the public component, and if the matching is unsuccessful, namely, the menu item corresponding to the URL is not found, the user is not authorized to access the corresponding menu item, and then the unauthorized page is displayed to the user. If the match is successful, it is further detected whether the first level menu item or the second level menu item matches the URL: if the first menu item is the first menu item, enabling the second menu item area to display each second item menu of the first menu item, and enabling the first second menu item of the first menu item and the first second menu item of the first menu item to be highlighted; if the second menu item is the first menu item, acquiring the first menu item to which the detected second menu item belongs, generating second page data to enable the second menu item area to display each second item menu of the acquired first menu item, and enabling the first menu item and the detected second menu item to be highlighted.

The unified page generation logic and the interaction control logic of the present embodiment are described below. In this embodiment, the page template with the function of "slot" (i.e. the specific node) is provided through the common component, and after the front terminal system loads the page template, the proprietary page html is mounted to the position of the designated "slot" in the page template, so that a unified interface is provided, and the "slot" is an html element with an elastic height, so that the height of the "slot" is equal to the height of the page html rendered, and the height can be automatically calculated by the browser.

First, it is explained how to have the pages of the subsystems have the same common interface. An entire subsystem page html structure is shown below:

the server of each front subsystem needs to provide an html document, namely, the first page data, which is called html-1 for short, including the above statement node, html node, head node and body node.

The html in the above body node is second page data, abbreviated as html-2, which is an implementation of unified interface layout (including a header, a left side submenu area and a bottom), the common component is responsible for providing and mounting the html-1 body node, and the html-2 has a node with an id of "sub-page", namely a specific node, which is a container of front terminal system private page data, and serves as a function of the above slot, and when the common component mounts the html-2 to the html-1 body node, a page template required to be used by each front terminal system page is provided.

The bottom content pseudo html in the specific node is the special page data of the front terminal system, which can be called as third page data, called html-3 for short, provided by the JS framework of the front terminal system and mounted in a slot designated by html-2. The developer does not need to pay attention to how the html-3 is mounted or replaced, and only needs to call the API of the framework in the JS code initialized by the system and inform the API to mount the generated html-3 to a specific node.

In fig. 7, firstly, returning html-1 to a public component by a server of a front subsystem, then generating html-2 by the public component, mounting html-2 to a body node of the html-1 to form a page template, finally generating html-3 by a JS framework of the front subsystem, and mounting html-3 to a specific node of the page template to form final html and returning the final html to a client.

When the page switching occurs later, if the front terminal system adopts a single page technology, a JS framework in the system can find and call a corresponding html-3 generation program according to URL rules agreed by a developer, and the JS framework replaces the html-3 in a specific node in the current html document after the html-3 is generated; if the multi-page technique is adopted by the front subsystem, the process is restarted by jumping to the starting node in fig. 7.

The specific implementation of the common component and the co-operation mechanism of the common component and the front sub-system are described below.

If the public component is provided for the front terminal system to call in the html tag format, the component tag cannot be identified by the browser because the component tag is not a standard html element, and the component tag needs to be converted into the html tag by means of the JS frames, but each JS frame can only convert the component developed by using the own grammar standard, and obviously each front terminal system cannot be the same type of JS frame, which means that even the public component with the same function needs to be realized in multiple sets, and the maintenance cost is extremely high. Thus, this embodiment uses a JS function (also called a docker) to implement the common component, and the front-end subsystem merges into the SAAS system by calling the docker function.

As can be seen from fig. 7, the common component does not need to know how html-3 is generated or replaced, what is needed is to initialize the front subsystem after html-2 is inserted into the body node, in order for the common component to notify and pass a specific node to the front subsystem, a parameter needs to be defined for the docker function, where the parameter is a JS object (referred to as config), a property is defined as a unit in the config, and the value is a function (i.e. the first callback function, referred to as fn 11) that satisfies the following characteristics:

The fn11 has a parameter (referred to as slot) for receiving a particular node, the value of which (i.e. the particular node) is provided by a common component.

And b, placing codes for calling JS framework API to generate special page data of the front terminal system in the fn11 function body.

In order for the initialization program fn11 of the front subsystem to be called by the docker function, each front subsystem needs to pass fn11 as a parameter to the docker function when calling the docker function. Illustratively, the code of the front subsystem call dock function may be:

docker({mount:fn11})

when the docker function is executed, html-2 is first generated and a document/body/prepended () method of the browser is called (the method is used for inserting html) to mount html-2 to a body node of html-1, and the mounted node is used as a 1 st child node of the body node. Thereafter call document. Query_selector ('# sub-page') (the method is used to query nodes) obtain a particular node and assign a variable (referred to as domObj) to be the value of the slot parameter of the fn11 function. Since a particular node in html-2 has an id attribute named "sub-page", the particular node can be acquired using the above method provided by the browser. Finally, the common component invokes the fn11 function through config. Mount (domObj) to reach the notification effect and pass the particular node to the front subsystem.

The above call procedure of the first callback function is shown in fig. 8, when the front subsystem executes dock ({ mount: fn11 }) to call the public component, fn11 is transferred to the public component, the public component executes config.mount (domObj) to notify the front subsystem and transfer a specific node after html-2 and page template are generated, and the front subsystem generates html-3 and mounts to the page template after receiving notification to form final page data.

The unified logic of menu display control is described below. An attribute named menuMatch may be redefined for the config parameter of the dock function, and the value is a function (denoted fn 2) satisfying a specific characteristic, where the characteristic requirement is as follows:

a. there is a parameter for receiving the menu item entered by the common component.

b. And realizing matching logic of the menu item and the URL of the current page in the function body, returning true to the public component if matching is performed, and otherwise returning false.

When the procedure of fig. 6 is executed inside the docker function, all menu items are traversed, and each time the config. Meenumatch (meenutem) is executed, fn2 is called, the menu items are transferred to fn2 in the form of parameters, and the fn2 matches the menu items with the URL. After fn2 returns the matching result to the public component, the public component performs the flow of fig. 6 to generate html-2.

The unified logic of the unregistered check is described below. In general, to intercept the AJAX response data of all front terminal systems, an AJAX library with an AJAX response interception function and specific judgment logic needs to be provided for the front terminal system, and the front terminal system needs to replace the original AJAX library with the above AJAX library and modify the corresponding call code, which wastes a lot of development costs.

To solve this problem, a proxy request object (i.e., XMLHttpRequest Proxy in fig. 9) needs to be defined inside the docker function to overwrite the XMLHttpRequest object (i.e., AJAX request object of the front subsystem). When the front subsystem call new XMLHttpRequest generates an AJAX instance (assuming that the instance name is xhr), what is actually created is an instance of the proxy request object (see label (1) in fig. 9), and an instance Real XMLHttpRequest is created and referenced inside the proxy request object instance (i.e., the aforementioned real request object, see label (2) in fig. 9, and is referred to as realhr) so that when xhr of the front subsystem calls the corresponding method, the proxy request object instance calls the corresponding method of realhr (see label (3) in fig. 9, including open, send, onload and other known methods or attributes). In order to monitor the response data, a function (i.e., a non-login check function, referred to as fun 1) containing response data check code may be assigned to the realhr.onload within the proxy request object instance, and when the realhr receives an event of the response data, fun1 is automatically called, and after the non-login check is performed, the function specified by xhr.onload is called to give the data control right back to the AJAX handler of the front subsystem. It should be noted that, the above dock function is an entry function of the common component interface layer in fig. 4, and addresses of fn11 and fn2 are configuration objects of the common component interface layer, where the obtaining of basic data of the common component function layer may include obtaining user information.

After implementing the above functions of the common component, all JS files implementing the common component may be merged into one file (referred to as x.js) using a tool, all CSS files may be merged into one file (referred to as x.css), and the generated JS and CSS may be published as URLs. Html provided by the front subsystem server can be imported into the common component through < script src= "x.js URL" >/script > and < link href= "x.css URL" >, where the two files are located in the html document before the other JS and CSS files.

Finally, the unified domain name and independent URL of each front subsystem can be implemented by the following steps. First, each front subsystem is assigned a unique identifier and the unique identifier is applied to the beginning of the path portion in the URL. Secondly, resolving the unified domain name to an Nginx server (namely a front-end server) for transit, adding a series of URL interceptors starting with unique identifiers of all front sub-systems in the front-end server, and designating a server which meets the URL of the corresponding feature and needs to be proxied in each URL interceptor. Thus, when the URL request sent by the browser reaches the front-end server, the front-end server forwards the URL request to the corresponding service by using the reverse proxy technology according to the agreed configuration.

Through the arrangement, the embodiment of the invention enables the front terminal systems to have unified interface and common interaction logic such as menu display, page generation, unregistered inspection and the like based on the common component, and accesses the front terminal systems by using the same domain name, so that a brand new fusion mode of the front terminal systems is realized, non-invasive fusion is realized on the premise of avoiding the defects of the iframe technology, the fusion cost and difficulty of the system are reduced, and the user experience of the fused system is improved.

Fig. 10 is a schematic diagram of main steps of a page generating method according to an embodiment of the present invention. As shown in fig. 10, the page generating method according to the embodiment of the present invention is performed by a common component that is previously introduced by a plurality of front sub-systems, and may be specifically performed as follows:

step S1001: responding to an access request sent by a client and aiming at any front subsystem of the front subsystems, determining a menu item corresponding to a link address of the access request by utilizing a mapping relation between a preset link address and the menu item, and forming a page template based on second page data generated according to the determined menu item; the front sub-systems are provided with a consistent page layout, and the page layout comprises an area where the menu item is located and an exclusive page area of the front sub-systems; step S1002: and acquiring a specific node for mounting the special page data of any front subsystem from the page template and sending the specific node to the front subsystem so that the front subsystem generates the special page data and mounts the special page data to the specific node to form the page data for returning to the client.

In the embodiment of the invention, the mapping relation is embodied in a second callback function preconfigured by any front subsystem, and the front subsystem sends the address of the second callback function to the public component in advance; and determining the menu item corresponding to the link address of the access request by using the mapping relation between the preset link address and the menu item, including: and calling a second callback function according to the address of the second callback function, and sending the menu item stored locally to any front subsystem so that the front subsystem determines the menu item corresponding to the link address of the access request by executing the second callback function.

As a preferable scheme, the menu items comprise primary menu items corresponding to the front subsystems and secondary menu items serving as submenus of the primary menu items, and the area where the menu items are located comprises a primary menu item area and a secondary menu item area; and, the method further comprises: generating unauthorized page data to return to any front terminal system when judging that the menu item corresponding to the link address of the access request does not exist; the second page data is generated according to the following steps: detecting whether the determined menu item is a primary menu item or a secondary menu item: if the first level menu item is detected, generating second page data to enable the second level menu item area to display each second level menu item of the first level menu item, and enabling the first level menu item of the first level menu item and the first second level menu item of the first level menu item to be highlighted; and if the secondary menu item is detected, acquiring a primary menu item to which the secondary menu item belongs, generating second page data to enable the secondary menu item area to display each secondary menu item of the acquired primary menu item, and highlighting the primary menu item and the detected secondary menu item.

Preferably, the forming the page template based on the second page data generated according to the determined menu item includes: acquiring first page data comprising a head node and a body node, which are provided by any front sub-system; and mounting the second page data to the main body node in the first page data to form the page template.

In a specific application, logic for generating the private page data is embodied in a first callback function preconfigured by any front subsystem, and the front subsystem sends an address of the first callback function to the public component in advance; and the specific node for acquiring the special page data for mounting any front terminal system from the page template is sent to the front terminal system, so that the front terminal system generates the special page data, and the method comprises the following steps: inquiring in the page template by using a preset identification of the specific node to obtain the specific node; and calling a first callback function to send the obtained specific node to any front sub-system, and informing the front sub-system to generate the special page data.

In practical application, each front terminal system in the plurality of front terminal systems interacts with a preset back-end system through an AJAX mechanism; and, the method further comprises: creating an AJAX request object of which the proxy request object refers to a preset real request object covers each front subsystem; wherein, the real request object is provided with an unregistered check function in advance; using the real request object to receive response data returned by the back-end system to the front-end subsystem, and executing the unregistered check function to judge whether the current user is in an unregistered state: if yes, the front subsystem is instructed to return a login page to the client; otherwise, the response data is returned to the front subsystem.

In an optional technical solution, the link addresses of the front terminal systems have the same domain name, and the link address of any front terminal system further has a unique identifier of the front terminal system; after an access request for any front sub-system is intercepted by a preset front-end server corresponding to the domain name, the front-end server forwards the access request to the front sub-system corresponding to the unique identifier in the link address of the access request.

In addition, in the embodiment of the present invention, the public component includes a Javascript file, and the second page data further includes: software copyright information and information of a current login user acquired from the back-end system. Since the specific details of the above steps have been set forth in the foregoing description, they are not repeated here.

According to the technical scheme, the pre-written public components are cited in the front terminal systems, unified page layout of the front terminal systems, unified interactive logic such as page rendering control, menu display control and non-login check is realized by using the public components, unified domain names and unique identifiers are configured for the front terminal systems to generate independent URLs of the front terminal systems, access requests of the front terminal systems are intercepted by using a front server corresponding to the unified domain names and forwarded according to the unique identifiers in the URLs, fusion among the front terminal systems independent of an iframe is realized, defects that the size of the window inherent in the iframe is difficult to control, multiple scroll bars are easy to realize in the middle of an elastic layer, the URL recording function is invalid and the like are avoided, the original system codes are prevented from being modified greatly through a non-invasive fusion scheme, and therefore the cost and difficulty of system fusion are reduced, and the user experience of the fused system is improved. In addition, in the embodiment of the invention, the cooperation of the public components and the front subsystem is realized by a callback function mode to generate menu item page data and front subsystem special page data, and finally page data returned to a user is formed, so that the unified control of the page generation flow of each front subsystem is realized; the proxy request object referencing the real request object is used to overlay the AJAX request object of each front subsystem to further implement the unregistered check of the back-end response data, thereby implementing the unregistered check of overlaying all front subsystems without modifying the AJAX request code of each front subsystem.

It should be noted that, for the convenience of description, the foregoing method embodiments are expressed as a series of combinations of actions, but it should be understood by those skilled in the art that the present invention is not limited by the described order of actions, and some steps may actually be performed in other order or simultaneously. Moreover, those skilled in the art will appreciate that the embodiments described in the specification are presently preferred embodiments, and that the acts and modules referred to are not necessarily required to practice the invention.

In order to facilitate better implementation of the above-described aspects of embodiments of the present invention, the following provides related devices for implementing the above-described aspects.

Referring to fig. 11, a page generating apparatus 1100 provided in an embodiment of the present invention is disposed in a common component that is previously introduced into a plurality of front sub-systems, and may include: a page template forming unit 1101 and a page assembling unit 1102.

Wherein the page template forming unit 1101 is operable to: responding to an access request sent by a client and aiming at any front subsystem of the front subsystems, determining a menu item corresponding to a link address of the access request by utilizing a mapping relation between a preset link address and the menu item, and forming a page template based on second page data generated according to the determined menu item; the front sub-systems are provided with a consistent page layout, and the page layout comprises an area where the menu item is located and an exclusive page area of the front sub-systems; the page assembly unit 1102 may be configured to: and acquiring a specific node for mounting the special page data of any front subsystem from the page template and sending the specific node to the front subsystem so that the front subsystem generates the special page data and mounts the special page data to the specific node to form the page data for returning to the client.

In the embodiment of the invention, the logic for generating the private page data is embodied in a first callback function preconfigured by any front subsystem, and the address of the first callback function is sent to the public component in advance by any front subsystem; the mapping relation is embodied in a second callback function preconfigured by any front subsystem, and the front subsystem sends the address of the second callback function to the public component in advance; the menu items comprise primary menu items corresponding to the front subsystems and secondary menu items serving as submenus of the primary menu items, and the area where the menu items are located comprises a primary menu item area and a secondary menu item area.

In a specific application, the page template forming unit 1101 may be further configured to: calling a second callback function according to the address of the second callback function, and sending the menu item stored locally to any front subsystem so that the front subsystem can determine the menu item corresponding to the link address of the access request by executing the second callback function; generating unauthorized page data to return to any front terminal system when judging that the menu item corresponding to the link address of the access request does not exist; when judging that the menu item corresponding to the link address of the access request exists, detecting whether the determined menu item is a primary menu item or a secondary menu item: if the first level menu item is detected, generating second page data to enable the second level menu item area to display each second level menu item of the first level menu item, and enabling the first level menu item of the first level menu item and the first second level menu item of the first level menu item to be highlighted; and if the secondary menu item is detected, acquiring a primary menu item to which the secondary menu item belongs, generating second page data to enable the secondary menu item area to display each secondary menu item of the acquired primary menu item, and highlighting the primary menu item and the detected secondary menu item.

In practical applications, the page assembling unit 1102 may further be configured to: acquiring first page data comprising a head node and a body node, which are provided by any front sub-system; mounting the second page data to a main body node in the first page data to form the page template; inquiring in the page template by using a preset identification of the specific node to obtain the specific node; and calling a first callback function to send the obtained specific node to any front sub-system, and informing the front sub-system to generate the special page data.

As a preferred scheme, each front subsystem of the plurality of front subsystem interacts with a preset back-end system through an AJAX mechanism; and, the apparatus 1100 may further include: an unregistered checking unit for: creating an AJAX request object of which the proxy request object refers to a preset real request object covers each front subsystem; wherein, the real request object is provided with an unregistered check function in advance; using the real request object to receive response data returned by the back-end system to the front-end subsystem, and executing the unregistered check function to judge whether the current user is in an unregistered state: if yes, the front subsystem is instructed to return a login page to the client; otherwise, the response data is returned to the front subsystem.

Preferably, the link addresses of the front sub-systems have the same domain name, and the link address of any front sub-system further has a unique identifier of the front sub-system; after an access request for any front sub-system is intercepted by a preset front-end server corresponding to the domain name, the front-end server forwards the access request to the front sub-system corresponding to the unique identifier in the link address of the access request.

In addition, in the embodiment of the present invention, the public component includes a Javascript file, and the second page data further includes: software copyright information and information of a current login user acquired from the back-end system.

According to the technical scheme of the embodiment of the invention, the pre-written public components are cited in the front terminal systems, unified page layout of each front terminal system, unified interactive logic such as page rendering control, menu display control and non-login check are realized by using the public components, unified domain names and unique identifiers are configured for each front terminal system to generate independent URL of each front terminal system, the front server corresponding to the unified domain names is used for intercepting access requests of each front terminal system and forwarding the access requests according to the unique identifiers in the URL, so that fusion among the front terminal systems independent of iframes is realized, the defects that the size of the window inherent in the iframes is difficult to control, multiple scroll bars are easy to realize in the middle of an elastic layer, the URL recording function is invalid and the like are avoided, and the original system codes are prevented from being greatly modified through the non-invasive fusion scheme, thereby reducing the cost and difficulty of system fusion and improving the user experience of the fused system. In addition, the cooperation of the public components and the front subsystem is realized through a callback function mode to generate menu item page data and front subsystem special page data, and finally page data returned to a user is formed, so that unified control of page generation flow of each front subsystem is realized; the proxy request object referencing the real request object is used to overlay the AJAX request object of each front subsystem to further implement the unregistered check of the back-end response data, thereby implementing the unregistered check of overlaying all front subsystems without modifying the AJAX request code of each front subsystem.

Fig. 12 illustrates an exemplary system architecture 1200 to which the page generation method or page generation apparatus of embodiments of the present invention may be applied.

As shown in fig. 12, a system architecture 1200 may include terminal devices 1201, 1202, 1203, a network 1204, and a server 1205 (this architecture is merely an example, and the components contained in a particular architecture may be adapted according to the application specific case). The network 1204 serves as a medium for providing communications links between the terminal devices 1201, 1202, 1203 and the server 1205. The network 1204 may include various connection types, such as wired, wireless communication links, or fiber optic cables, among others.

A user may interact with the server 1205 through the network 1204 using the terminal devices 1201, 1202, 1203 to receive or transmit messages or the like. The terminal devices 1201, 1202, 1203 may have various client applications installed thereon, such as a cloud computing application (by way of example only).

The terminal devices 1201, 1202, 1203 may be various electronic devices having a display screen and supporting web browsing, including, but not limited to, smartphones, tablets, laptop and desktop computers, and the like.

The server 1205 may be a server providing various services, such as a cloud server (by way of example only) providing support for cloud computing applications operated by users using the terminal devices 1201, 1202, 1203. The server 1205 may include a front-end fusion system and a back-end system. The cloud server may process the received access request and feed back the processing result (e.g., page data—only an example) to the terminal devices 1201, 1202, 1203.

It should be noted that, the page generating method provided in the embodiment of the present invention is generally executed by the server 1205, and accordingly, the page generating apparatus is generally disposed in the server 1205.

It should be understood that the number of terminal devices, networks and servers in fig. 12 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.

The invention also provides electronic equipment. The electronic equipment of the embodiment of the invention comprises: one or more processors; and the storage device is used for storing one or more programs, and when the one or more programs are executed by the one or more processors, the one or more processors are enabled to realize the page generation method provided by the invention.

Referring now to FIG. 13, there is illustrated a schematic diagram of a computer system 1300 suitable for use in implementing an electronic device of an embodiment of the present invention. The electronic device shown in fig. 13 is merely an example, and should not impose any limitation on the functionality and scope of use of embodiments of the present invention.

As shown in fig. 13, the computer system 1300 includes a Central Processing Unit (CPU) 1301, which can execute various appropriate actions and processes according to a program stored in a Read Only Memory (ROM) 1302 or a program loaded from a storage section 1308 into a Random Access Memory (RAM) 1303. In the RAM1303, various programs and data necessary for the operation of the computer system 1300 are also stored. The CPU1301, ROM 1302, and RAM1303 are connected to each other through a bus 1304. An input/output (I/O) interface 1305 is also connected to bus 1304.

The following components are connected to the I/O interface 1305: an input section 1306 including a keyboard, a mouse, and the like; an output portion 1307 including a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, and a speaker, and the like; a storage portion 1308 including a hard disk or the like; and a communication section 1309 including a network interface card such as a LAN card, a modem, or the like. The communication section 1309 performs a communication process via a network such as the internet. The drive 1310 is also connected to the I/O interface 1305 as needed. Removable media 1311, such as magnetic disks, optical disks, magneto-optical disks, semiconductor memory, and the like, is installed as needed on drive 1310 so that a computer program read therefrom is installed as needed into storage portion 1308.

In particular, the processes described in the main step diagrams above may be implemented as computer software programs according to the disclosed embodiments of the invention. For example, embodiments of the present invention include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method shown in the main step diagrams. In the above-described embodiment, the computer program can be downloaded and installed from a network through the communication portion 1309 and/or installed from the removable medium 1311. The above-described functions defined in the system of the present invention are performed when the computer program is executed by the central processing unit 1301.

The computer readable medium shown in the present invention may be a computer readable signal medium or a computer readable storage medium, or any combination of the two. The computer readable storage medium can be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples of the computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the context of this document, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In the present invention, a computer readable signal medium may comprise a data signal propagated in baseband or as part of a carrier wave, with computer readable program code embodied therein. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, fiber optic cable, RF, etc., or any suitable combination of the foregoing.

The flowcharts and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present invention. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.

The units involved in the embodiments of the present invention may be implemented in software or in hardware. The described units may also be provided in a processor, for example, described as: a processor includes a page template forming unit and a page assembling unit. The names of these units do not constitute limitations on the unit itself in some cases, and for example, the page template forming unit may also be described as "a unit that supplies a page template to a page assembling unit".

As another aspect, the present invention also provides a computer-readable medium that may be contained in the apparatus described in the above embodiments; or may be present alone without being fitted into the device. The computer readable medium carries one or more programs which, when executed by the device, cause the device to perform steps comprising: responding to an access request sent by a client and aiming at any front subsystem of a plurality of front subsystems, determining a menu item corresponding to a link address of the access request by utilizing a mapping relation between a preset link address and the menu item, and forming a page template based on second page data generated according to the determined menu item; the front sub-systems are provided with a consistent page layout, and the page layout comprises an area where the menu item is located and an exclusive page area of the front sub-systems; and acquiring a specific node for mounting the special page data of any front subsystem from the page template and sending the specific node to the front subsystem so that the front subsystem generates the special page data and mounts the special page data to the specific node to form the page data for returning to the client.

According to the technical scheme, the pre-written public components are cited in the front terminal systems, unified page layout of the front terminal systems, unified interactive logic such as page rendering control, menu display control and non-login check is realized by using the public components, unified domain names and unique identifiers are configured for the front terminal systems to generate independent URLs of the front terminal systems, access requests of the front terminal systems are intercepted by using a front server corresponding to the unified domain names and forwarded according to the unique identifiers in the URLs, fusion among the front terminal systems independent of an iframe is realized, defects that the size of the window inherent in the iframe is difficult to control, multiple scroll bars are easy to realize in the middle of an elastic layer, the URL recording function is invalid and the like are avoided, the original system codes are prevented from being modified greatly through a non-invasive fusion scheme, and therefore the cost and difficulty of system fusion are reduced, and the user experience of the fused system is improved. In addition, the cooperation of the public components and the front subsystem is realized through a callback function mode to generate menu item page data and front subsystem special page data, and finally page data returned to a user is formed, so that unified control of page generation flow of each front subsystem is realized; the proxy request object referencing the real request object is used to overlay the AJAX request object of each front subsystem to further implement the unregistered check of the back-end response data, thereby implementing the unregistered check of overlaying all front subsystems without modifying the AJAX request code of each front subsystem.

The above embodiments do not limit the scope of the present invention. It will be apparent to those skilled in the art that various modifications, combinations, sub-combinations and alternatives can occur depending upon design requirements and other factors. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present invention should be included in the scope of the present invention.

Claims

1. A page generation method, performed by a common component that is pre-introduced by a plurality of front sub-systems, the method comprising:

responding to an access request sent by a client and aiming at any front subsystem of the front subsystems, determining a menu item corresponding to a link address of the access request by utilizing a mapping relation between a preset link address and the menu item, and forming a page template based on second page data generated according to the determined menu item; the front sub-systems are provided with a consistent page layout, and the page layout comprises an area where the menu item is located and an exclusive page area of the front sub-systems;

and acquiring a specific node for mounting the special page data of any front subsystem from the page template and sending the specific node to the front subsystem so that the front subsystem generates the special page data and mounts the special page data to the specific node to form the page data for returning to the client.

2. The method of claim 1, wherein the mapping relationship is embodied in a second callback function preconfigured in the any front-end subsystem, the any front-end subsystem previously sending an address of the second callback function to the common component; and determining the menu item corresponding to the link address of the access request by using the mapping relation between the preset link address and the menu item, including:

and calling a second callback function according to the address of the second callback function, and sending the menu item stored locally to any front subsystem so that the front subsystem determines the menu item corresponding to the link address of the access request by executing the second callback function.

3. The method according to claim 1, wherein the menu items include a primary menu item corresponding to the plurality of front subsystems and a secondary menu item as a submenu of the primary menu item, and the menu item area includes a primary menu item area and a secondary menu item area; the method comprises the steps of,

the method further comprises: generating unauthorized page data to return to any front terminal system when judging that the menu item corresponding to the link address of the access request does not exist;

The second page data is generated according to the following steps:

detecting whether the determined menu item is a primary menu item or a secondary menu item:

if the first level menu item is detected, generating second page data to enable the second level menu item area to display each second level menu item of the first level menu item, and enabling the first level menu item of the first level menu item and the first second level menu item of the first level menu item to be highlighted;

and if the secondary menu item is detected, acquiring a primary menu item to which the secondary menu item belongs, generating second page data to enable the secondary menu item area to display each secondary menu item of the acquired primary menu item, and highlighting the primary menu item and the detected secondary menu item.

4. The method of claim 1, wherein forming a page template based on the second page data generated from the determined menu item comprises:

acquiring first page data comprising a head node and a body node, which are provided by any front sub-system;

and mounting the second page data to the main body node in the first page data to form the page template.

5. The method of claim 1, wherein the logic to generate the private page data is embodied in a first callback function preconfigured by the any front end subsystem that previously sent an address of the first callback function to the public component; and the specific node for acquiring the special page data for mounting any front terminal system from the page template is sent to the front terminal system, so that the front terminal system generates the special page data, and the method comprises the following steps:

inquiring in the page template by using a preset identification of the specific node to obtain the specific node;

and calling a first callback function to send the obtained specific node to any front sub-system, and informing the front sub-system to generate the special page data.

6. The method of claim 1, wherein each front-end subsystem of the plurality of front-end subsystems interacts with a pre-set back-end system through an AJAX mechanism; and, the method further comprises:

creating an AJAX request object of which the proxy request object refers to a preset real request object covers each front subsystem; wherein, the real request object is provided with an unregistered check function in advance;

Using the real request object to receive response data returned by the back-end system to the front-end subsystem, and executing the unregistered check function to judge whether the current user is in an unregistered state: if yes, the front subsystem is instructed to return a login page to the client; otherwise, the response data is returned to the front subsystem.

7. The method of claim 1, wherein the plurality of front subsystem link addresses have the same domain name, and wherein the link address of any front subsystem further has a unique identifier of the front subsystem;

after an access request for any front sub-system is intercepted by a preset front-end server corresponding to the domain name, the front-end server forwards the access request to the front sub-system corresponding to the unique identifier in the link address of the access request.

8. The method of claim 6, wherein the public component comprises a Javascript file, and the second page data further comprises: software copyright information and information of a current login user acquired from the back-end system.

9. A page generating apparatus provided in a common component to which a plurality of front terminal systems are previously introduced, the apparatus comprising:

A page template forming unit for: responding to an access request sent by a client and aiming at any front subsystem of the front subsystems, determining a menu item corresponding to a link address of the access request by utilizing a mapping relation between a preset link address and the menu item, and forming a page template based on second page data generated according to the determined menu item; the front sub-systems are provided with a consistent page layout, and the page layout comprises an area where the menu item is located and an exclusive page area of the front sub-systems;

a page assembling unit for: and acquiring a specific node for mounting the special page data of any front subsystem from the page template and sending the specific node to the front subsystem so that the front subsystem generates the special page data and mounts the special page data to the specific node to form the page data for returning to the client.

10. The apparatus of claim 9, wherein the logic to generate the private page data is embodied in a first callback function preconfigured in the any front end subsystem that previously sent an address of the first callback function to the public component; the mapping relation is embodied in a second callback function preconfigured by any front subsystem, and the front subsystem sends the address of the second callback function to the public component in advance; the menu items comprise primary menu items corresponding to the front subsystems and secondary menu items serving as submenus of the primary menu items, and the area where the menu items are located comprises a primary menu item area and a secondary menu item area; the method comprises the steps of,

The page template forming unit is further configured to:

calling a second callback function according to the address of the second callback function, and sending the menu item stored locally to any front subsystem so that the front subsystem can determine the menu item corresponding to the link address of the access request by executing the second callback function;

generating unauthorized page data to return to any front terminal system when judging that the menu item corresponding to the link address of the access request does not exist;

when judging that the menu item corresponding to the link address of the access request exists, detecting whether the determined menu item is a primary menu item or a secondary menu item: if the first level menu item is detected, generating second page data to enable the second level menu item area to display each second level menu item of the first level menu item, and enabling the first level menu item of the first level menu item and the first second level menu item of the first level menu item to be highlighted; if the two-level menu item is detected, acquiring a first-level menu item to which the two-level menu item belongs, generating second page data to enable the two-level menu item area to display each two-level menu item of the acquired first-level menu item, and enabling the first-level menu item and the detected second-level menu item to be highlighted;

The page assembling unit is further configured to:

acquiring first page data comprising a head node and a body node, which are provided by any front sub-system; mounting the second page data to a main body node in the first page data to form the page template;

inquiring in the page template by using a preset identification of the specific node to obtain the specific node; and calling a first callback function to send the obtained specific node to any front sub-system, and informing the front sub-system to generate the special page data.

11. A front-end fusion system, comprising: a plurality of front sub-systems and a common component into which the plurality of front sub-systems are introduced; wherein, the liquid crystal display device comprises a liquid crystal display device,

after the client sends an access request to any front subsystem of the front subsystems, the public component determines a menu item corresponding to the link address of the access request by using a mapping relation between a preset link address and the menu item, and forms a page template based on second page data generated according to the determined menu item; the front sub-systems are provided with a consistent page layout, and the page layout comprises an area where the menu item is located and an exclusive page area of the front sub-systems;

The public component acquires a specific node for mounting the special page data of any front terminal system from the page template and sends the specific node to the front terminal system; the front subsystem generates the private page data and mounts to the particular node, forming page data for return to the client.

12. The front-end fusion system of claim 11, wherein the logic to generate the private page data is embodied in a first callback function preconfigured by the any front-end subsystem that previously sent an address of the first callback function to the common component; the mapping relation is embodied in a second callback function preconfigured by any front subsystem, and the front subsystem sends the address of the second callback function to the public component in advance; the menu items comprise primary menu items corresponding to the front subsystems and secondary menu items serving as submenus of the primary menu items, and the area where the menu items are located comprises a primary menu item area and a secondary menu item area; the method comprises the steps of,

the public component calls a second callback function according to the address of the second callback function and sends the menu item stored locally to any front subsystem; the front subsystem determines menu items corresponding to the link addresses of the access requests by executing a second callback function and returns the menu items to the public component;

When judging that no menu item corresponding to the link address of the access request exists, the public component generates non-authority page data and returns the non-authority page data to any front subsystem;

when judging that the menu item corresponding to the link address of the access request exists, the public component detects whether the determined menu item is a primary menu item or a secondary menu item: if the first level menu item is detected, the public component generates second page data to enable the second level menu item area to display each second level menu item of the first level menu item and enable the first second level menu item of the first level menu item to be highlighted; if the public component detects a secondary menu item, the public component acquires a primary menu item to which the secondary menu item belongs, generates second page data to enable the secondary menu item area to display each secondary menu item of the acquired primary menu item, and enables the primary menu item and the detected secondary menu item to be highlighted;

the common component acquires first page data comprising a head node and a body node, which is provided by any front sub-system; mounting the second page data to a main body node in the first page data to form the page template;

And the public component queries the page template by using the preset identification of the specific node, obtains the specific node, calls a first callback function to send the obtained specific node to any front subsystem, and informs the front subsystem to generate the special page data.

13. The front-end fusion system of claim 11, wherein each front-end subsystem of the plurality of front-end subsystems interacts with a preset back-end system through an AJAX mechanism; the link addresses of the front terminal systems have the same domain name, and the link address of any front terminal system is further provided with a unique identifier of the front terminal system; the front-end fusion system further includes a front-end server corresponding to the domain name; the public component comprises a Javascript file, and the second page data further comprises: software copyright information and information of a current login user acquired from the back-end system; the method comprises the steps of,

the public component creates an agent request object referencing a preset real request object to cover an AJAX request object of each front subsystem; wherein, the real request object is provided with an unregistered check function in advance;

The public component receives response data returned by the back-end system to the front-end subsystem by using the real request object, and executes the unregistered check function to judge whether the current user is in an unregistered state: if yes, the public component instructs the front subsystem to return a login page to the client; otherwise, the common component returns the response data to the front subsystem;

the front-end server intercepts an access request aiming at any front-end subsystem, and forwards the access request to the front-end subsystem corresponding to the unique identifier in the link address of the access request.

14. An electronic device, comprising:

one or more processors;

storage means for storing one or more programs,

when executed by the one or more processors, causes the one or more processors to implement the method of any of claims 1-8.

15. A computer readable storage medium, on which a computer program is stored, characterized in that the program, when being executed by a processor, implements the method according to any of claims 1-8.