Page adaptation method and device and storage medium

Receive mobile requests through proxy services, adjust the dom structure and content of the PC html page, and generate mobile pages, solving the difficulty of adapting PC web pages to mobile web pages, and ensuring security.

CN119441645APending Publication Date: 2025-02-14CHINA UNITED NETWORK COMM GRP CO LTD
View PDF 0 Cites 0 Cited by

Patent Information

Application Number
CN202310967681.8
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2023-08-02
Publication Date
2025-02-14

AI Technical Summary

Technical Problem

In the prior art, it is difficult to adapt PC web pages to mobile web pages, especially when facing old systems with historical technical debts, it is difficult to adapt and transform mobile terminals based on source code.

Method used

Receive page access requests from the mobile terminal through the proxy service, obtain the html page from the PC, and adjust the dom structure and page content of the html page according to the screen information of the mobile terminal, and generate a mobile-style page. At the same time, modify the request address of the generated mobile page and return the mobile page to the mobile page.

Benefits of technology

In the process of adapting PC web pages to mobile web pages, the adaptation difficulty is reduced, and the security of external network access to PC pages is ensured through proxy services.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN119441645A_ABST
    Figure CN119441645A_ABST
Patent Text Reader

Abstract

The invention provides a page adaptation method and device and a storage medium, relates to the technical field of the Internet, and can solve the problem that it is difficult to adapt a PC end webpage to a mobile end webpage. The method comprises the steps that under the condition that a page access request of a mobile terminal is received, an html page is acquired from a PC terminal, and the page access request comprises screen information of the mobile terminal; according to screen information of the mobile terminal, adjusting a dom structure and page content of the html page, and generating a mobile terminal page; and modifying the request address of the mobile terminal page, and sending the mobile terminal page to the mobile terminal. The embodiment of the invention is used in the process of adapting the PC end webpage to the mobile end webpage.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present application relates to the field of Internet technology, and in particular to a page adaptation method, device and storage medium. Background Art

[0002] With the popularity of mobile smart devices, mobile office has become a trend. Enterprises have begun to develop mobile web pages based on PC web pages so that employees can work anytime and anywhere, improve office efficiency, and thus improve enterprise production efficiency.

[0003] In the prior art, mobile web pages are developed mainly through the following two methods: 1. Convert the PC front-end code into a responsive page, add media queries (such as @media) to the original CSS to display different styles according to the screen width of different devices, and use javascript code to add, delete, and modify page elements by monitoring the size change event of the web page window; 2. Based on the PC page, redevelop a set of mobile pages to connect to the backend interface. The redeveloped mobile page and PC page will use different URLs. It is necessary to determine the device used by the user in the page server (nginx) or the javascript of the page and jump to the URL corresponding to the device.

[0004] However, some companies already have many old PC office systems. Due to historical technical debt, these old systems use the above-mentioned development method, which makes it difficult to adapt them to mobile terminals based on the source code, making it difficult to adapt PC web pages to mobile web pages. Summary of the invention

[0005] The present application provides a page adaptation method, device and storage medium, which can solve the problem that it is difficult to adapt a PC web page to a mobile web page.

[0006] In order to achieve the above objectives, this application adopts the following technical solutions:

[0007] In a first aspect, the present application provides a page adaptation method, which includes: upon receiving a page access request from a mobile terminal, obtaining an HTML page from a PC, wherein the page access request includes screen information of the mobile terminal; adjusting the DOM structure and page content of the HTML page according to the screen information of the mobile terminal to generate a mobile terminal page; modifying the request address of the mobile terminal page, and sending the mobile terminal page to the mobile terminal.

[0008] Based on the above technical solution, the page adaptation method provided in the embodiment of the present application can receive the page access request of the mobile terminal through the proxy service, then obtain the html page from the PC, and adjust the dom structure and page content of the html page according to the screen information of the mobile terminal to generate a mobile-style page. Finally, modify the request address of the generated mobile terminal page and return the mobile terminal page to the mobile terminal. Since the page access request of the mobile terminal is received through the proxy service, and the html page is obtained from the PC by the proxy service, the security of accessing the PC-side page through the external network is guaranteed; at the same time, when generating the mobile-side page, the dom structure and page content of the original html page are adjusted to adapt to the screen size of the mobile terminal, and no modification is made to the source code, which reduces the difficulty of adapting the PC-side page to the mobile-side page.

[0009] In a first possible implementation method of the first aspect, the above-mentioned screen information includes screen size and screen resolution, and the above-mentioned adjusting the DOM structure and page content of the above-mentioned HTML page according to the screen information of the mobile terminal includes: modifying or adding or deleting the DOM elements of the above-mentioned HTML page according to the above-mentioned screen size; modifying or adding or deleting the style of the above-mentioned DOM elements according to the above-mentioned screen resolution.

[0010] In a second possible implementation of the first aspect, before generating the mobile page, the method further includes: adding a mobile CSS file and a mobile javascript code on the server; and in the adjusted html page, adding a first page identifier corresponding to the CSS file and a second page identifier corresponding to the javascript code.

[0011] In a third possible implementation of the first aspect, the modification of the request address of the mobile terminal page includes: using a regular expression to modify the request path of the javascript code in the mobile terminal page; and performing domain name modification on the request path.

[0012] In a fourth possible implementation of the first aspect, the page access request also includes the account information and url parameters of the mobile terminal. Before sending the mobile terminal page to the mobile terminal through the proxy service, the method also includes: storing the mobile terminal page in a cache; and performing security verification processing on the mobile terminal page based on the account information and the url parameters.

[0013] In the second aspect, the present application provides a page adaptation device, which includes: an acquisition unit, a processing unit and a sending unit, wherein: the above-mentioned acquisition unit is used for the proxy service to acquire an html page from a PC when receiving a page access request from a mobile terminal, and the above-mentioned page access request includes the screen information of the above-mentioned mobile terminal; the above-mentioned processing unit is used to adjust the dom structure and page content of the above-mentioned html page according to the screen information of the above-mentioned mobile terminal to generate a mobile terminal page; the above-mentioned processing unit is also used to modify the request address of the above-mentioned mobile terminal page; the above-mentioned sending unit is used to send the above-mentioned mobile terminal page to the above-mentioned mobile terminal through the above-mentioned proxy service.

[0014] In a first possible implementation manner of the second aspect, the above-mentioned screen information includes screen size and screen resolution; the above-mentioned processing unit is specifically used to: modify or add or delete DOM elements of the above-mentioned HTML page according to the above-mentioned screen size; modify or add or delete styles of the above-mentioned DOM elements according to the above-mentioned screen resolution.

[0015] In a second possible implementation of the second aspect, the processing unit is further used to: before generating the mobile page, add a mobile CSS file and a mobile javascript code on the server; in the adjusted HTML page, add a first page identifier corresponding to the CSS file and a second page identifier corresponding to the javascript code.

[0016] In a third possible implementation of the second aspect, the processing unit is specifically used to: modify the request path of the javascript code in the mobile terminal page using a regular expression; and perform domain name modification on the request path.

[0017] In a fourth possible implementation of the second aspect, the page access request also includes the account information and url parameters of the mobile terminal; the processing unit is further used to: store the mobile terminal page in the cache before the sending unit sends the mobile terminal page to the mobile terminal through the proxy service; and perform security verification processing on the mobile terminal page according to the account information and the url parameters.

[0018] In a third aspect, the present application provides a page adaptation device, comprising: a processor and a communication interface; the communication interface and the processor are coupled, and the processor is used to run a computer program or instructions to implement the page adaptation method described in the first aspect and any possible implementation method of the first aspect.

[0019] In a fourth aspect, the present application provides a computer-readable storage medium, in which instructions are stored. When the instructions are executed on a terminal, the terminal executes the page adaptation method described in the first aspect and any possible implementation of the first aspect.

[0020] In a fifth aspect, an embodiment of the present application provides a computer program product comprising instructions. When the computer program product runs on a page adaptation device, the page adaptation device executes the page adaptation method as described in the first aspect and any possible implementation of the first aspect.

[0021] In a sixth aspect, an embodiment of the present application provides a chip, the chip including a processor and a communication interface, the communication interface and the processor are coupled, and the processor is used to run a computer program or instructions to implement the page adaptation method as described in the first aspect and any possible implementation method of the first aspect.

[0022] Specifically, the chip provided in the embodiment of the present application also includes a memory for storing computer programs or instructions. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] Figure 1 A method flow chart of a page adaptation method provided in an embodiment of the present application;

[0024] Figure 2 An overall architecture diagram applicable to a page adaptation method provided in an embodiment of the present application;

[0025] Figure 3 One of the interface schematic diagrams applied to a page adaptation method provided in an embodiment of the present application;

[0026] Figure 4 A second schematic diagram of an interface used in a page adaptation method provided in an embodiment of the present application;

[0027] Figure 5 A schematic diagram of the architecture of a proxy service provided in an embodiment of the present application;

[0028] Figure 6 A flow chart of a proxy service pipeline corresponding to a page adaptation method provided in an embodiment of the present application;

[0029] Figure 7 A schematic diagram of the structure of a page adaptation device provided in an embodiment of the present application;

[0030] Figure 8 A schematic diagram of the structure of another page adaptation device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0031] The page adaptation method, device and storage medium provided in the embodiments of the present application are described in detail below with reference to the accompanying drawings.

[0032] The term "and / or" in this article is merely a description of the association relationship of associated objects, indicating that three relationships may exist. For example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone.

[0033] The terms "first" and "second" and the like in the specification and drawings of this application are used to distinguish different objects, or to distinguish different processing of the same object, rather than to describe a specific order of objects.

[0034] In addition, the terms "including" and "having" and any variations thereof mentioned in the description of the present application are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device comprising a series of steps or units is not limited to the listed steps or units, but may optionally include other steps or units that are not listed, or may optionally include other steps or units that are inherent to these processes, methods, products or devices.

[0035] It should be noted that, in the embodiments of the present application, words such as "exemplary" or "for example" are used to indicate examples, illustrations or descriptions. Any embodiment or design described as "exemplary" or "for example" in the embodiments of the present application should not be interpreted as being more preferred or more advantageous than other embodiments or designs. Specifically, the use of words such as "exemplary" or "for example" is intended to present related concepts in a specific way.

[0036] In the description of the present application, unless otherwise specified, “plurality” means two or more.

[0037] At present, with the popularization of mobile smart devices, mobile office has become a trend. Enterprises develop mobile web pages, which can enable employees to work anytime and anywhere, improve office efficiency, and thus improve enterprise production efficiency.

[0038] Many of the existing corporate office systems are old systems for personal computers (PCs). Due to historical technical debt, it is difficult to adapt these systems to mobile terminals based on the source code. In addition, due to user usage habits and long-standing business logic, it is not suitable to redevelop a new system.

[0039] In the prior art, the commonly used PC-side adaptation to mobile-side solutions is mainly performed through the following two methods: A and B:

[0040] A. Transform the PC front-end code into a responsive page, and add media queries (@media) to the original Cascading Style Sheets (CSS), so that different styles can be displayed according to the screen width. In addition, by monitoring the size change (resize) event of the web page window (window), use javascript code to add, delete, and modify page elements. However, when facing the old office system in the enterprise, due to the outdated technology stack of the old system, new technologies cannot be used for responsive page transformation, and the old system code is too old to be suitable for direct modification.

[0041] B. Based on the original PC page, a new set of mobile pages is developed to connect to the backend interface. Specifically, a set of pure mobile technology stacks and user interface (UI) libraries can be used. The newly developed mobile page and the original PC page will use different uniform resource locators (URLs). It is necessary to determine the type of user device in the server (nginx) or the javascript of the page and jump to the URL corresponding to the device. However, when facing the old office system in the enterprise, it is difficult to migrate to a new set of pages because the old system pages contain a lot of complex business logic. In addition, because the old system is very old and there is no backend interface documentation, the newly developed mobile page is difficult to connect. Moreover, when the old system page sends changes, the new mobile front end must also be modified again, which is too much work.

[0042] In addition, since the old system has many unauthenticated interfaces with injection problems and is not suitable for exposure to the external network, there are security issues with the above methods A and B.

[0043] In order to solve the problem in the prior art that it is difficult to adapt a PC-side web page to a mobile-side web page, the present application provides a page adaptation method, which can receive a page access request from a mobile terminal through a proxy service, then obtain a Hypertext Markup Language (HTML) page from a PC terminal, and adjust the Document Object Model (DOM) structure and page content of the HTML page according to the screen information of the mobile terminal to generate a mobile-side style page, and finally modify the request address of the generated mobile-side page, and return the mobile-side page to the mobile terminal. Since the page access request from the mobile terminal is received through a proxy service, and then the HTML page is obtained from the PC terminal by the proxy service, the security of accessing the PC-side page through the external network is guaranteed; at the same time, when generating a mobile-side page, the DOM structure and page content of the original HTML page are adjusted to adapt to the screen size of the mobile terminal, and no modification is made to the source code, which reduces the difficulty of adapting the PC-side page to the mobile-side page.

[0044] like Figure 1 FIG. 1 is a flowchart of a page adaptation method provided in an embodiment of the present application, and the method includes the following steps S101 to S103:

[0045] S101. When receiving a page access request from a mobile terminal, the proxy service obtains an HTML page from a PC terminal.

[0046] In an embodiment of the present application, the above-mentioned page access request includes the screen information of the above-mentioned mobile terminal.

[0047] In an embodiment of the present application, the above page access request is sent by the mobile terminal in an external network environment.

[0048] Exemplarily, the page access request may be an asynchronous JavaScript and Extensible Markup Language (ajax) request.

[0049] In an embodiment of the present application, the above-mentioned proxy service is used to provide a mobile terminal style page corresponding to the PC terminal page for the mobile terminal.

[0050] Exemplarily, the mobile terminal may include a portable mobile device such as a smart phone or a smart tablet.

[0051] Exemplarily, the PC terminal may include a desktop computer, a laptop computer, and other devices.

[0052] In an embodiment of the present application, after receiving the ajax request from the mobile terminal, the proxy service can use jsoup to obtain the html page from the PC terminal.

[0053] For example, Figure 2 As shown, a proxy service can be built between the user and the old system. The user can send an ajax request to the proxy service through the mobile terminal to obtain the mobile terminal page. After receiving the ajax request, the proxy service sends an ajax request to the old system in the company's intranet to obtain the PC terminal page, and then returns the PC terminal page to the user after adaptation.

[0054] Example 1, such as Figure 3 The following is the obtained PC page. The page is divided into two sides, the left side is narrower and the right side is wider. The left side is the menu bar, including menu 1, menu 2, and menu 3; the right side is the main content, including the form element, which uses a table layout, including field 1, field 2, and field 3. Each line is a tr, each field name is wrapped in a th tag, and each input box is wrapped in a td tag; there is a submit button at the bottom.

[0055] It should be noted that the above form is used to create the overall form in the HTML page and submit the form data to the server. The above tr is used to indicate a row in the HTML page. A tr contains one or more th or td elements.

[0056] S102: According to the screen information of the mobile terminal, the DOM structure and page content of the HTML page are adjusted to generate a mobile terminal page.

[0057] In the embodiment of the present application, the above-mentioned DOM structure is the architectural model of each frame in the above-mentioned HTML page.

[0058] Exemplarily, the above DOM structure may be the position of each paragraph, table, and input box in an HTML page.

[0059] In the embodiment of the present application, the above-mentioned page content may be the filling content in each frame in the above-mentioned html page.

[0060] Exemplarily, the above page content may be text, pictures, videos, etc.

[0061] Further optionally, in the embodiment of the present application, the above screen information includes screen size and screen resolution, and the above step S102 of "adjusting the DOM structure and page content of the HTML page according to the screen information of the mobile terminal" may include the following steps S102a and S102b:

[0062] S102a: modify or add or delete DOM elements of the HTML page according to the screen size.

[0063] In the embodiment of the present application, the above-mentioned screen size may be the size of the display area of ​​the mobile terminal screen.

[0064] Exemplarily, the screen size may be 6.0 inches, 6.2 inches, 6.5 inches, etc.

[0065] Exemplarily, the above DOM elements may include paragraphs, tables, input boxes, etc.

[0066] In the embodiment of the present application, DOM elements can be removed, modified, and newly added to adjust the DOM structure of the HTML page to make it suitable for the mobile terminal.

[0067] S102b. Modify or add or delete the style of the DOM element according to the screen resolution.

[0068] Exemplarily, the screen resolution may be 1280×720, 1920×1080, 2560×1440, etc.

[0069] Exemplarily, the style of the DOM element may include the style and class attributes of the DOM element and the style tag.

[0070] Example 2, combined with Figure 3 ,like Figure 4 The following is the adapted mobile page. Figure 3 The left menu bar is changed to Figure 4 The bottom navigation bar in the figure is added, and a flexible box (flex) layout is used. The font style is modified by modifying the style tag to change the PC page to the mobile style (for example, there is only one field in a row). Then, the style and class styles in the form, table, tr, th, and td tags are deleted (for example, the th width is modified to 1 / 4 and the td width is modified to 3 / 4), thereby obtaining the mobile page.

[0071] It should be noted that the above flex layout is a wrap layout, that is, Figure 4 The input box can be entered in a new line.

[0072] In this way, by adding, modifying, deleting and other operations on the elements and styles in the old system page, the PC page can be adapted without modifying the source code, reducing the difficulty of adaptation.

[0073] S103: modify the request address of the mobile terminal page, and send the mobile terminal page to the mobile terminal through the proxy service.

[0074] In the embodiment of the present application, the modified request address is the address of the proxy service.

[0075] Example 3, combined with Example 2, after adjusting the HTML page, you can also get the action attribute on the form tag (that is, the original request address) and modify it to the address of the proxy service.

[0076] It should be noted that the above action is used to instruct to submit the above mobile page to a specific address.

[0077] The following is an explanation of the agency services involved in this application:

[0078] In the embodiment of the present application, the above proxy service includes the following three functions P1 to P3:

[0079] P1. You can get the HTML page from the old system, adapt the HTML page to a mobile page, and return it to the user.

[0080] It should be noted that the above adaptation process is developed using the responsibility chain model. The specific adaptation steps include removing, modifying, and adding DOM elements and CSS styles, introducing new javascript and CSS files, modifying the ajax request path in the javascript code, setting cache, etc.

[0081] P2. Forwarding ajax requests in the page. The ajax requests initiated by js code in the mobile page to call the old system interface need to be accessed through the proxy service.

[0082] P3. Verify and authenticate access requests to the external network, and inject and intercept them to ensure the security of the old system interface on the company's intranet.

[0083] In the embodiments of the present application, Figure 5 The figure shows the architecture details of the above proxy service. The architecture is divided into three layers: interface layer, business service layer, and infrastructure layer.

[0084] It should be noted that the above proxy service is developed using the Java language and the Spring Boot framework.

[0085] Exemplarily, the above interface layer mainly includes two interfaces: an interface for obtaining mobile HTML pages and an interface for forwarding Ajax requests.

[0086] It should be noted that the above interface layer can call the business service layer or the infrastructure layer.

[0087] Exemplarily, the business service layer mainly includes a page adaptation processing module. This module uses the responsibility chain design pattern. After receiving a page request, it uses Jsoup to obtain the PC page from the old system, and triggers the logic of each node in the pipeline in turn, thereby converting a PC page into a mobile page step by step.

[0088] For example, taking the page A pipeline as an example, when the page A request is received, the code logic of the "page A processing node 1", "general processing node 1", "general processing node 2", and "page AB processing node" nodes will be triggered in sequence, and finally the mobile page of page A will be generated.

[0089] It should be noted that different page requests will go through different pipelines, and different pipelines may have the same processing nodes. Using the Inversion of Control (IOC) feature of the Spring framework, these processing nodes are registered in the container and configured as multi-instance beans. Then, a pipeline of a one-way linked list data structure of processing node beans is constructed using a postprocessor, and then the pipeline is registered in the container for the interface layer to call.

[0090] Exemplarily, the infrastructure layer mainly includes a cache module, an old system module, and a security module. The cache module is implemented using Redis, which can cache the mobile pages generated by the pipeline. When there is a page request, there is no need to perform the pipeline logic again, which can improve the response speed. The old system module can encapsulate the code for calling the old system interface, including methods for obtaining each page and forwarding ajax requests in the page. The security module can verify and authenticate the interface of the proxy service, prevent cross-site scripting (XSS) injection, and ensure the security of accessing the intranet system from the external network.

[0091] In the page adaptation method provided in the embodiment of the present application, the page access request of the mobile terminal can be received through the proxy service, and then the html page can be obtained from the PC terminal, and the DOM structure and page content of the html page can be adjusted according to the screen information of the mobile terminal to generate a mobile terminal style page. Finally, the request address of the generated mobile terminal page is modified, and the mobile terminal page is returned to the mobile terminal. Since the page access request of the mobile terminal is received through the proxy service, and the html page is obtained from the PC terminal by the proxy service, the security of accessing the PC terminal page through the external network is guaranteed; at the same time, when generating the mobile terminal page, the DOM structure and page content of the original html page are adjusted to adapt to the screen size of the mobile terminal, and no modification is made to the source code, which reduces the difficulty of adapting the PC terminal page to the mobile terminal page.

[0092] Optionally, in the embodiment of the present application, before “generating a mobile terminal page” in the above step S102, the page adaptation method provided in the embodiment of the present application may further include the following steps S102c and S102d:

[0093] S102c. Add the mobile CSS file and the mobile CSS file on the server.

[0094] In the embodiment of the present application, the server is a server of the HTML page. The server can send the HTML page to any networked user for viewing.

[0095] Example 4, combined with Example 2, after adjusting the HTML page, you can also introduce the newly created mobile.css (that is, the above-mentioned mobile CSS file) and the open source mobile adaptation tool flexible.js (that is, the above-mentioned mobile CSS file) in the head tag.

[0096] It should be noted that the above head is used to indicate the direction in which the browser requests the HTML page.

[0097] S102d. In the adjusted HTML page, add a first page identifier corresponding to the CSS file and a second page identifier corresponding to the javascript code.

[0098] In the embodiment of the present application, the first page logo and the second page logo are both logos that the user can click on the mobile page.

[0099] Exemplarily, the first page identifier may be generated by a link tag.

[0100] Exemplarily, the second page identifier may be generated by a script tag.

[0101] In an embodiment of the present application, CSS and javascript resources can be added on the server, and script or link tags that reference these resources can be added to the html page.

[0102] Further optionally, in the embodiment of the present application, in combination with the above step S102c, the "modifying the request address of the mobile terminal page" in the above step S103 may include the following steps S103a and S103b:

[0103] S103a. Use a regular expression to modify the request path of the javascript code in the mobile page.

[0104] In an embodiment of the present application, after adjusting the HTML page, a regular expression can be used to modify the path of the ajax request of the JavaScript code in the page.

[0105] S103b. Modify the domain name of the request path.

[0106] In the embodiment of the present application, the domain name can be modified by adding a prefix, so that the ajax request sent by the mobile terminal is sent to the proxy service, and then the proxy service requests the html page in the old system.

[0107] In this way, by modifying the request address of the mobile terminal page, the page access request sent by the mobile terminal first passes through the proxy service, and then the proxy service returns the page to the mobile terminal, thereby ensuring the security of page access.

[0108] Optionally, in an embodiment of the present application, the page access request further includes the account information and URL parameters of the mobile terminal. Before "sending the mobile terminal page to the mobile terminal through the proxy service" in the above step S103, the page adaptation method provided in the embodiment of the present application may further include the following steps S103c and S103d:

[0109] S103c, storing the mobile terminal page in cache.

[0110] In an embodiment of the present application, the account information of the above-mentioned mobile terminal may include account number, account type, account authority, etc.

[0111] In an embodiment of the present application, the above-mentioned url parameter is used to indicate whether the above-mentioned account information is known account information.

[0112] Exemplarily, the cache may be a redis cache.

[0113] S103d. Perform security verification on the mobile page based on the account information and URL parameters.

[0114] In an embodiment of the present application, it is possible to verify whether the current account information is the legitimate access account information for the above-mentioned mobile page based on the current account information and URL parameters in the received page access request.

[0115] Exemplarily, the generated mobile page can be stored in the redis cache, and the URL can be used as a key to directly access the mobile page.

[0116] In this way, by storing the generated mobile page in the cache, when the mobile terminal accesses the mobile page again, it first queries whether there is a corresponding mobile page in the cache. If so, the page can be sent directly to the mobile terminal, thereby improving the response speed; and, a security check is performed on the mobile page, further ensuring the security of the mobile terminal accessing the page through the external network.

[0117] Optionally, in the embodiment of the present application, Figure 6As shown, it is a flowchart of the proxy service pipeline corresponding to the page adaptation method provided in the embodiment of the present application, and the flowchart may include the following steps S1 to S10:

[0118] S1. Receive a mobile page request.

[0119] Exemplarily, the above page request includes the URL of the old system page and is used for request context.

[0120] S2. According to the URL of the page request, determine whether there is a cached page. If so, return the cached page as the mobile page.

[0121] S3. Use jsoup to obtain the PC-side HTML page from the old system.

[0122] S4. Remove, modify, and add DOM elements to adjust the DOM structure of the HTML page.

[0123] Exemplarily, the adjusted HTML page is adapted to the mobile screen.

[0124] S5. Remove, modify, or add new styles.

[0125] Exemplarily, the above style mainly refers to the style, class attributes and style tag on the above DOM element.

[0126] S6. Reference new javascript and CSS files.

[0127] Exemplarily, new javascript and CSS resources are added to the server, and new script or link tags referencing these resources are added to the HTML.

[0128] It should be noted that the above reference operation is completed in the general node.

[0129] S7. Modify the path in the javascript code on the page.

[0130] For example, a regular expression is used to modify the domain name of the path by adding a prefix, so that the above page request is sent to the proxy service, and then the proxy service requests the HTML page in the old system.

[0131] S8. Cache processed pages.

[0132] Exemplarily, after the above domain name is modified, the mobile page has been basically formed and can be stored in the cache.

[0133] S9. Process the page according to the request parameters.

[0134] Exemplarily, the mobile page may be processed again according to the request parameters.

[0135] It should be noted that the above request parameters include user, url parameters, etc.

[0136] S10. Return to the mobile page.

[0137] The embodiment of the present application can divide the page adaptation device into functional modules or functional units according to the above method example. For example, each functional module or functional unit can be divided according to each function, or two or more functions can be integrated into one processing module. The above integrated module can be implemented in the form of hardware or in the form of software functional modules or functional units. Among them, the division of modules or units in the embodiment of the present application is schematic, which is only a logical function division. There may be other division methods in actual implementation.

[0138] like Figure 7 , which is a schematic diagram of the structure of a page adaptation device provided in an embodiment of the present application, the device includes: an acquisition unit 201, a processing unit 202 and a sending unit 203.

[0139] Among them, the above-mentioned acquisition unit 201 is used for the proxy service to obtain the html page from the PC when receiving a page access request from the mobile terminal, and the above-mentioned page access request includes the screen information of the above-mentioned mobile terminal; the above-mentioned processing unit 202 is used to adjust the dom structure and page content of the above-mentioned html page according to the screen information of the above-mentioned mobile terminal to generate a mobile terminal page; the above-mentioned processing unit 202 is also used to modify the request address of the above-mentioned mobile terminal page; the above-mentioned sending unit 203 is used to send the above-mentioned mobile terminal page to the above-mentioned mobile terminal through the above-mentioned proxy service.

[0140] Optionally, in an embodiment of the present application, the above-mentioned screen information includes screen size and screen resolution; the above-mentioned processing unit 202 is specifically used to: modify or add or delete DOM elements of the above-mentioned HTML page according to the above-mentioned screen size; modify or add or delete the style of the above-mentioned DOM elements according to the above-mentioned screen resolution.

[0141] Optionally, in an embodiment of the present application, the processing unit 202 is further used to: before generating the mobile page, add a mobile CSS file and a mobile javascript code on the server; in the adjusted html page, add a first page identifier corresponding to the CSS file and a second page identifier corresponding to the javascript code.

[0142] Optionally, in an embodiment of the present application, the processing unit 202 is specifically used to: modify the request path of the javascript code in the mobile terminal page using a regular expression; and modify the domain name of the request path.

[0143] Optionally, in an embodiment of the present application, the above-mentioned page access request also includes the account information and url parameters of the above-mentioned mobile terminal; the above-mentioned processing unit 202 is also used to: before the sending unit 203 sends the above-mentioned mobile terminal page to the above-mentioned mobile terminal through the above-mentioned proxy service, store the mobile terminal page in the cache; and perform security verification processing on the above-mentioned mobile terminal page according to the above-mentioned account information and the above-mentioned url parameters.

[0144] In the page adaptation device provided in the embodiment of the present application, the page access request of the mobile terminal can be received through the proxy service, and then the html page is obtained from the PC terminal, and the DOM structure and page content of the html page are adjusted according to the screen information of the mobile terminal to generate a mobile terminal style page, and finally, the request address of the generated mobile terminal page is modified, and the mobile terminal page is returned to the mobile terminal. Since the page access request of the mobile terminal is received through the proxy service, and the html page is obtained from the PC terminal by the proxy service, the security of accessing the PC terminal page through the external network is guaranteed; at the same time, when generating the mobile terminal page, the DOM structure and page content of the original html page are adjusted to adapt to the screen size of the mobile terminal, and no modification is made to the source code, which reduces the difficulty of adapting the PC terminal page to the mobile terminal page.

[0145] Figure 8 Another possible structural diagram of the page adaptation device involved in the above-mentioned embodiment is shown. The page adaptation device includes: a processor 302 and a communication interface 303. The processor 302 is used to control and manage the actions of the page adaptation device, for example, to execute the steps performed by the above-mentioned acquisition unit 201 and the processing unit 202, and / or to execute other processes of the technology described herein. The communication interface 303 is used to support the communication between the page adaptation device and other network entities, for example, to execute the steps performed by the above-mentioned sending unit 203, and / or to execute other processes of the technology described herein. The page adaptation device may also include a memory 301 and a bus 304, and the memory 301 is used to store program code and data of the page adaptation device.

[0146] Among them, the memory 301 can be a memory in a page adapter, etc., and the memory can include a volatile memory, such as a random access memory; the memory can also include a non-volatile memory, such as a read-only memory, a flash memory, a hard disk or a solid-state drive; the memory can also include a combination of the above types of memory.

[0147] The processor 302 may be a processor that implements or executes various exemplary logic blocks, modules, and circuits described in conjunction with the disclosure of the present application. The processor may be a central processing unit, a general-purpose processor, a digital signal processor, an application-specific integrated circuit, a field programmable gate array, or other programmable logic devices, transistor logic devices, hardware components, or any combination thereof. The processor may be a processor that implements or executes various exemplary logic blocks, modules, and circuits described in conjunction with the disclosure of the present application. The processor may also be a combination that implements computing functions, such as a combination of one or more microprocessors, a combination of a DSP and a microprocessor, and the like.

[0148] The bus 304 may be an Extended Industry Standard Architecture (EISA) bus, etc. The bus 304 may be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 8 Only one thick line is used in the diagram, but this does not mean that there is only one bus or only one type of bus.

[0149] Through the description of the above implementation methods, technicians in the relevant field can clearly understand that for the convenience and simplicity of description, only the division of the above functional modules is used as an example. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device is divided into different functional modules to complete all or part of the functions described above. The specific working process of the system, device and unit described above can refer to the corresponding process in the aforementioned method embodiment, and will not be repeated here.

[0150] An embodiment of the present application provides a computer program product including instructions. When the computer program product is run on a computer, the computer is enabled to execute the page adaptation method in the above method embodiment.

[0151] The embodiment of the present application also provides a computer-readable storage medium, in which instructions are stored. When the instructions are executed on a computer, the computer executes the page adaptation method in the method flow shown in the above method embodiment.

[0152] Among them, the computer readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer readable storage media (a non-exhaustive list) include: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM), a register, a hard disk, an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above, or any other form of computer readable storage medium known in the art. An exemplary storage medium is coupled to a processor so that the processor can read information from the storage medium and write information to the storage medium. Of course, the storage medium can also be a component of the processor. The processor and the storage medium can be located in an application-specific integrated circuit (ASIC). In the embodiments of the present application, a computer-readable storage medium may be any tangible medium that contains or stores a program, which may be used by or in conjunction with an instruction execution system, apparatus, or device.

[0153] An embodiment of the present invention provides a computer program product comprising instructions, which, when executed on a computer, causes the computer to execute the following Figure 1 or Figure 6 The page adaptation method described in .

[0154] Since the page adaptation device, computer-readable storage medium, and computer program product in the embodiments of the present invention can be applied to the above method, the technical effects that can be obtained can also refer to the above method embodiments, and the embodiments of the present invention will not be repeated here.

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

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

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

[0158] The above are only specific implementations of the present application, but the protection scope of the present application is not limited thereto. Any changes or substitutions within the technical scope disclosed in the present application should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

Claims

1. A page adaptation method, characterized in that: The method comprises: The proxy service obtains the HTML page from the PC when receiving a page access request from the mobile terminal, wherein the page access request includes the screen information of the mobile terminal; According to the screen information of the mobile terminal, the DOM structure and page content of the HTML page are adjusted to generate a mobile terminal page; The request address of the mobile terminal page is modified, and the mobile terminal page is sent to the mobile terminal through the proxy service, wherein the modified request address is the address of the proxy service.

2. The method according to claim 1, characterized in that The screen information includes screen size and screen resolution, and adjusting the DOM structure and page content of the HTML page according to the screen information of the mobile terminal includes: Modify or add or delete DOM elements of the HTML page according to the screen size; According to the screen resolution, modify or add or delete the style of the DOM element.

3. The method according to claim 1 or 2, characterized in that: Before generating the mobile terminal page, the method further includes: Add mobile CSS files and mobile javascript code on the server; In the adjusted HTML page, add the first page identifier corresponding to the CSS file and the second page identifier corresponding to the javascript code.

4. The method according to claim 3, characterized in that The modifying the request address of the mobile terminal page includes: Using a regular expression, modify the request path of the javascript code in the mobile terminal page; The domain name of the request path is modified.

5. The method according to claim 1, characterized in that The page access request also includes account information and URL parameters of the mobile terminal. Before sending the mobile terminal page to the mobile terminal through the proxy service, the method also includes: Storing the mobile terminal page in a cache; Perform security verification on the mobile page based on the account information and the URL parameters.

6. A page adaptation device, characterized in that: The device comprises: an acquisition unit, a processing unit and a sending unit, wherein: The acquisition unit is used for the proxy service to acquire the HTML page from the PC when receiving a page access request from the mobile terminal, wherein the page access request includes the screen information of the mobile terminal; The processing unit is used to adjust the DOM structure and page content of the HTML page according to the screen information of the mobile terminal to generate a mobile terminal page; The processing unit is further used to modify the request address of the mobile terminal page; The sending unit is used to send the mobile terminal page to the mobile terminal through the proxy service.

7. The device according to claim 6, characterized in that The screen information includes screen size and screen resolution; The processing unit is specifically used for: Modify or add or delete DOM elements of the HTML page according to the screen size; According to the screen resolution, modify or add or delete the style of the DOM element.

8. The device according to claim 6 or 7, characterized in that The processing unit is further used for: Before generating the mobile page, add a mobile CSS file and a mobile javascript code on the server; In the adjusted HTML page, add the first page identifier corresponding to the CSS file and the second page identifier corresponding to the javascript code.

9. The device according to claim 8, characterized in that The processing unit is specifically used for: Using a regular expression, modify the request path of the javascript code in the mobile terminal page; The domain name of the request path is modified.

10. The device according to claim 6, characterized in that The page access request also includes the account information and URL parameters of the mobile terminal; The processing unit is further used for: Before the sending unit sends the mobile terminal page to the mobile terminal through the proxy service, storing the mobile terminal page in a cache; Perform security verification on the mobile page based on the account information and the URL parameters.

11. A page adaptation device, characterized in that: include: A processor and a communication interface; the communication interface is coupled to the processor, and the processor is used to run a computer program or instruction to implement the page adaptation method as described in any one of claims 1-5.

12. A computer-readable storage medium, wherein instructions are stored in the computer-readable storage medium, characterized in that: When a computer executes the instruction, the computer executes the page adaptation method described in any one of claims 1 to 5.