[go: up one dir, main page]

WO2023092580A1 - 页面显示方法、装置、存储介质及电子设备 - Google Patents

页面显示方法、装置、存储介质及电子设备 Download PDF

Info

Publication number
WO2023092580A1
WO2023092580A1 PCT/CN2021/134079 CN2021134079W WO2023092580A1 WO 2023092580 A1 WO2023092580 A1 WO 2023092580A1 CN 2021134079 W CN2021134079 W CN 2021134079W WO 2023092580 A1 WO2023092580 A1 WO 2023092580A1
Authority
WO
WIPO (PCT)
Prior art keywords
page
jump
parameter
detail
list
Prior art date
Application number
PCT/CN2021/134079
Other languages
English (en)
French (fr)
Inventor
张旻
Original Assignee
京东方科技集团股份有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 京东方科技集团股份有限公司 filed Critical 京东方科技集团股份有限公司
Priority to PCT/CN2021/134079 priority Critical patent/WO2023092580A1/zh
Priority to US18/712,783 priority patent/US20250013705A1/en
Priority to CN202180003647.8A priority patent/CN116569165B/zh
Publication of WO2023092580A1 publication Critical patent/WO2023092580A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/01—Protocols

Definitions

  • the present disclosure relates to the technical field of computers, and in particular, to a page display method, a page display device, a computer-readable storage medium, and electronic equipment.
  • Vue is a progressive framework for building user interfaces. Based on the Vue framework, front-end pages can be quickly developed, such as the development of single-page applications.
  • jumping between pages will cause the page to refresh. For example, after selecting a certain data from the filtered list page and jumping to the data details page, when returning to the list page from the details page, it will return to the initial state of the list page without saving the last filtered query result. If the user needs to view the query result, the filtering operation needs to be performed again, which reduces the user experience.
  • the disclosure provides a page display method, a page display device, a computer-readable storage medium, and electronic equipment.
  • the present disclosure provides a page display method, including:
  • the list page includes an original list page and an intermediate list page; when receiving a query operation on the target data in the list page, jump from the list page to the The details page corresponding to the target data, and store the first page location identifier of the details page, including:
  • the first page location identifier of the first detail page is composed of the target parameter string and the second page location identifier
  • converting the page jump parameter into a target parameter string through a page jump function includes:
  • converting the page jump parameter into a target parameter string through a page jump function includes:
  • the acquiring the page jump parameter, and jumping from the detail page back to the list page according to the page jump parameter includes:
  • the obtaining the target parameter string through a parameter parsing function includes:
  • the target parameter string is acquired.
  • the parsing the target parameter string to obtain the page jump parameters includes:
  • the parsing the target parameter string to obtain the page jump parameters includes:
  • the jumping back to the list page from the details page according to the page jump parameters includes:
  • the method further includes:
  • the method further includes:
  • the page jump function is used to convert the page jump parameter into a target parameter string;
  • the first page location identifier of the first detail page is composed of the target parameter string and the second page location identifier; Jumping from the intermediate list page to the first detail page according to the first page location identifier of the first detail page;
  • the parameter parsing function is used to obtain the target parameter string; analyze the target parameter string to obtain the page jump parameter; jump from the first detail page according to the page jump parameter Go back to the intermediate list page;
  • the option variable is used to save the default value of the page jump parameter.
  • the present disclosure provides a page display device, including:
  • the first page display module is configured to jump from the list page to the details page corresponding to the target data when receiving a query operation on the target data in the list page, and store the first page location identifier of the details page , the first page location identifier includes a page jump parameter;
  • the second page display module is configured to acquire the page jump parameter, and jump back from the detail page to the list page according to the page jump parameter.
  • the present disclosure provides a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, the method described in any one of the above is implemented.
  • the present disclosure provides an electronic device, including: a processor; and a memory, configured to store executable instructions of the processor; wherein, the processor is configured to execute any one of the above-mentioned instructions by executing the executable instructions described method.
  • FIG. 1 shows a schematic diagram of an exemplary system architecture of a method and device for displaying a page that can be applied to an embodiment of the present disclosure
  • FIG. 2 schematically shows a flowchart of a page display method according to an embodiment of the present disclosure
  • Fig. 3 schematically shows a flow chart of jumping from a list page to a details page according to an embodiment of the present disclosure
  • Fig. 4 schematically shows a flow chart of jumping from a detail page back to a list page according to an embodiment of the present disclosure
  • Fig. 5 schematically shows a flow chart of jumping from a detail page back to a list page according to another embodiment of the present disclosure
  • Fig. 6 schematically shows a schematic diagram of a list page according to an embodiment of the present disclosure
  • Fig. 7 schematically shows a schematic diagram of a list page with query conditions according to an embodiment of the present disclosure
  • Fig. 8A schematically shows a schematic diagram of a work order details page according to an embodiment of the present disclosure
  • Fig. 8B schematically shows a schematic diagram of a work order details page containing list data according to an embodiment of the present disclosure
  • Fig. 8C schematically shows a schematic diagram of a work order details page with filtering conditions according to an embodiment of the present disclosure
  • Fig. 9A schematically shows a schematic diagram of a details page of related pictures in a work order details page according to an embodiment of the present disclosure
  • FIG. 9B schematically shows a schematic diagram of a details page of a no-invasion area according to an embodiment of the present disclosure
  • Fig. 10 schematically shows a block diagram of a page display device according to an embodiment of the present disclosure
  • Fig. 11 schematically shows a structural diagram of a computer system suitable for implementing the electronic device of the embodiment of the present disclosure.
  • Example embodiments will now be described more fully with reference to the accompanying drawings.
  • Example embodiments may, however, be embodied in many forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this disclosure will be thorough and complete and will fully convey the concept of example embodiments to those skilled in the art.
  • the described features, structures, or characteristics may be combined in any suitable manner in one or more embodiments.
  • numerous specific details are provided in order to give a thorough understanding of embodiments of the present disclosure.
  • those skilled in the art will appreciate that the technical solutions of the present disclosure may be practiced without one or more of the specific details being omitted, or other methods, components, devices, steps, etc. may be adopted.
  • well-known technical solutions have not been shown or described in detail to avoid obscuring aspects of the present disclosure.
  • Fig. 1 shows a schematic diagram of a system architecture of an exemplary application environment to which a method and device for displaying a page according to an embodiment of the present disclosure can be applied.
  • the system architecture 100 may include one or more of terminal devices 101 , 102 , 103 , a network 104 and a server 105 .
  • the network 104 is used as a medium for providing communication links between the terminal devices 101 , 102 , 103 and the server 105 .
  • Network 104 may include various connection types, such as wires, wireless communication links, or fiber optic cables, among others.
  • Terminal devices 101, 102, and 103 may be various electronic devices, including but not limited to desktop computers, portable computers, smart phones, and tablet computers, and are used to provide user interfaces for page display.
  • a client such as a browser
  • pages can be browsed through the browser client.
  • the browser on the terminal device can be used to execute: when receiving a query operation on the target data in the list page, jump from the list page to the detail page corresponding to the target data, and store the first page location identifier of the detail page , the first page positioning identifier contains page jump parameters; obtain the page jump parameters, and jump back from the details page to the list page according to the page jump parameters.
  • the numbers of terminal devices, networks and servers in Fig. 1 are only illustrative. According to the implementation needs, there can be any number of terminal devices, networks and servers.
  • the server 105 may be one server, or a server cluster composed of multiple servers, or a cloud computing platform or a virtualization center.
  • the server 105 may be used to provide background services for view components supporting page display and the like.
  • the page display method provided by the embodiments of the present disclosure is generally executed by one or more of the terminal devices 101, 102, 103.
  • the page display device is generally set in the terminal devices 101, 102, 103.
  • the last query result can be directly displayed on the display screen of the terminal device, which is not specifically limited in this exemplary embodiment.
  • the page display method provided by the embodiment of the present disclosure can also be executed by the server 105, and correspondingly, the page display device can also be set in the server 105, and the server can retain the query conditions selected by the user, In order to return the last query result according to the query condition when the page jumps, and display it to the user by the terminal device.
  • Vue is a progressive framework for building user interfaces. Based on the Vue framework, front-end pages can be quickly developed, such as the development of single-page applications.
  • jumping between pages will cause the page to refresh. For example, after selecting a certain data from the filtered list page and jumping to the data details page, when returning to the list page from the details page, it will return to the initial state of the list page without saving the last filtered query result. If the user needs to view the query result, the filtering operation needs to be performed again, which reduces the user experience.
  • the status of the list page can be preserved by using URL (Uniform Resource Locator, Uniform Resource Locator) parameters to reserve the query condition of the list page.
  • URL Uniform Resource Locator
  • this method is neither safe nor beautiful to directly put the query condition into the URL.
  • the query conditions need to be put into the URL of the list page, and the list page reads the query conditions in the URL and requests data from the background.
  • the detail page although the detail page itself does not need to use query conditions, in order to add query conditions to the list page URL when returning to the list page, the detail page needs to read and parse the query conditions in the current URL. Adding query conditions to the URL to form a new target URL and then jumping increases the workload of modifying the details page, reduces the user's operation efficiency, and thus affects the user's experience.
  • this example embodiment provides a page display method, which can be applied to one or more of the above-mentioned terminal devices 101, 102, 103, and can also be applied to the above-mentioned server 105.
  • the page display method may include step S210 and step S220:
  • Step S210 When receiving a query operation on the target data in the list page, jump from the list page to the detail page corresponding to the target data, and store the first page location identifier of the detail page, the first The page location identifier contains page jump parameters;
  • Step S220 Obtain the page jump parameter, and jump back from the detail page to the list page according to the page jump parameter.
  • the page display method when a query operation on the target data in the list page is received, jump from the list page to the details page corresponding to the target data, and store the details
  • the first page location identifier of the page, the first page location identifier includes a page jump parameter; obtain the page jump parameter, and jump back from the detail page to the list page according to the page jump parameter .
  • This disclosure can retain the page jump parameters when entering the details page from the list page, and then when returning from the details page, the previous list page can be restored according to the page jump parameters, avoiding the page refresh caused by the page jump, and the user does not need to operate again The last query result can be obtained, thereby improving the user experience.
  • step S210 when a query operation on the target data in the list page is received, jump from the list page to the detail page corresponding to the target data, and store the first page location identifier of the detail page, the The first page positioning identifier includes a page jump parameter.
  • the list page can be a user interface used to display highly repetitive interface elements in the application program, and the order, position and data source of each interface element can be controlled through the Vue-Cli framework.
  • a detail page may be a user interface in an application for displaying detailed content of a certain interface element.
  • the interface elements may include a status bar, a navigation bar, a main menu bar, and a content area, etc., which are not specifically limited in the present disclosure.
  • the main menu bar of the list page can include tasks such as "work order management", "user management” and “data base management”, and the content area can be "work order
  • the work order list data corresponding to the "management” task can also be the user list data corresponding to the "user management” task, or the information base list data corresponding to the "information base management” task.
  • the query condition may include a filter condition and a pagination condition.
  • the filter condition can be information such as name and status
  • the pagination condition can be information such as page number and the number of data items per page. For example, if the user searches by name on the list page, and the filter condition on the list page is "name:1", it can mean finding all the data with "1" in the name on the list page.
  • the list page may include an original list page and an intermediate list page.
  • the original list page may be an initial state of the list page
  • the intermediate list page may be a list page with filtering conditions and pagination conditions.
  • the original list page after filtering the original list page with a filter condition (such as name: 1), the original list page can be switched to an intermediate list page according to the paging condition (such as pageNum: 2), that is, the second page, on the second page After selecting a certain data, you can jump to the details page of the data.
  • the corresponding query condition is: "name:1,pageNum:2". It is understandable that the original list page can default to the first page of data without filtering conditions, and the corresponding query condition is "name:", pageNum:1".
  • the original list page when a trigger operation on the search control on the original list page is received, the original list page may be switched to an intermediate list page according to page jump parameters.
  • the first page location identifier may be cached, or the first page location identifier may be temporarily stored in the browser, which is not specifically limited in the present disclosure.
  • the page jump parameter can be the query condition input by the user on the original list page
  • the first target data can be any list data associated with the details page in the intermediate list page
  • the first details page can be the first target data
  • the first page location identifier may be the URL of the first details page.
  • the browser can switch the original list page to the second list page containing the name "1" according to the query condition by clicking or short-pressing the search control .
  • the user selects the first target data on the second list page and performs a query operation on the data, the user can jump from the second list page to the details page associated with the data. It can be seen that when the original list page is switched to the second list page, the URLs of the original list page and the second list page are the same, and when jumping from the second list page to the details page, the URLs of the second list page and the details page Not the same.
  • jumping from the intermediate list page to the first detail page corresponding to the first target data can be realized according to steps S310 to S340.
  • Step S310 When a query operation on the first target data in the intermediate list page is received, acquire the page jump parameter and the second page location identifier of the first detail page.
  • the page jump function when a query operation on the first target data in the intermediate list page is received, the page jump function can be called, and the page jump function can be used to select from the intermediate The list page jumps to the details page corresponding to the first target data.
  • the query operation may be a user's click/short press operation on the search control on the middle list interface, which is not specifically limited in the present disclosure.
  • the page jump function may be a jump function, and when the jump function is used to jump from the intermediate list page to the first detail page, the corresponding query conditions may be recorded so that it can be read when returning from the first detail page.
  • the query condition is fetched, and the last query result is restored according to the read query condition, which does not require the user to filter the original list page again, which can improve the user experience.
  • parameters related to the first detail page need to be passed in, which may include page jump parameters and the second page location identifier of the first detail page.
  • the page jump parameter may be the query condition of the middle list page
  • the second page location identifier of the first detail page may be the initial URL of the first detail page.
  • Router can be a Vue Router object.
  • Path is the jump target URL, that is, the initial URL of the first detail page, and is a variable of string type.
  • Path can be "/alarmMgmt/detail/1".
  • options is the query condition that needs to be recorded, and it is an object type variable.
  • the query condition is to filter the original list page according to the filter condition "name1, status is type1", and then switch from the original list page to the intermediate list page according to the pagination condition "second page, each page contains 10 pieces of data”.
  • the options passed in corresponding to the query condition can be ⁇ pageNum:2,pageSize:10,name:'name1',type:'type1' ⁇ .
  • Step S320 Convert the page jump parameter into a target parameter string through a page jump function.
  • the page jump parameter may be the query condition options of the intermediate list page
  • the target parameter string may be the params string.
  • the purpose of converting the page jump parameter into the target parameter string is to convert the page jump parameter into content that can be uniformly identified by the page jump function, so as to facilitate unified integrated management and operation.
  • the jump function can be used to convert the options object into a params string.
  • the converted params string can be ⁇ "pageNum”:2, "pageSize”:10,”name”:"name1",”type”:"type1" ⁇ , as shown in Table 1.
  • the query condition may also be encoded when the page jump parameter is converted into a target parameter string.
  • the page jump parameter may be converted into an initial parameter string, and the initial parameter string may be encoded to obtain a target parameter string.
  • the options object can be converted into a params string by using the jump function, and the params string is the initial parameter string.
  • the encodeURIComponent function can encode a string as a URI component.
  • the encoded params string may be: "%7BpageNum%3Apagesize%22", as shown in Table 2.
  • the query conditions may be encoded first, and the encoded query conditions may be encrypted.
  • the page jump parameter may be converted into an initial parameter string, the initial parameter string may be encoded to obtain the first parameter string, and then the first parameter string may be encrypted to obtain the target parameter string.
  • the options object can be converted into a params string by using the jump function, and the params string is the initial parameter string.
  • Base64 encoding may be performed on the encoding result of the params character string to encrypt the encoding result of the params character string.
  • the encryption method can also be MD5 (message-digest algorithm 5, information-digest algorithm), SHA1 (Secure Hash Algorithm 1, secure hash algorithm 1), Crypto-JS (a JavaScript encryption algorithm), etc., The present disclosure does not specifically limit this.
  • the encoded params string is the first parameter string
  • the encrypted params string is the target parameter string.
  • the encrypted params string may be "JTdCJTIycGFnZU51", as shown in Table 3.
  • Step S330 Composing the first page location identifier of the first detail page from the target parameter string and the second page location identifier.
  • the first page positioning mark of the first detail page can be composed of the target parameter string and the second page positioning mark of the first detail page, so that the first page positioning mark of the first detail page can start from the middle
  • the list page jumps to the first detail page.
  • the first page location identifier of the first detail page may be a new URL composed of the initial URL of the first detail page carrying a params string.
  • Step S340 Jumping from the intermediate list page to the first detail page according to the first page location identifier of the first detail page.
  • the input parameter of the push method is: ⁇ path,query: ⁇ o:params ⁇ , and jump to the path page with the params string, realizing the jump from the middle list page Go to the first detail page.
  • the params string converted from the options object is ⁇ "pageNum”:2,”pageSize”:10,”name”:"name1",”type”:”type1" ⁇ , which can be obtained from the first detail page
  • the initial URL of the initial URL carries the params string to form the current URL of the first detail page.
  • the encodeURIComponent function is used to encode the params string, and the encoded params string is "%7BpageNum%3Apagesize%22", which can also be called
  • the push method of the parameter Router carries the encoded params string to jump to the path page, realizing the jump from the middle list page to the first detail page.
  • the encodeURIComponent function is used to encode the params string, and the encoded result is encrypted to obtain the params string as "JTdCJTIycGFnZU51", which can also be called
  • the push method of the parameter Router carries the encrypted params string to jump to the path page, realizing the jump from the middle list page to the first detail page.
  • step S220 the page jump parameter is obtained, and the page jumps back from the detail page to the list page according to the page jump parameter.
  • an options variable optionsDefault may be defined, and the options variable may be used to store default values of page jump parameters. For example, it can be used to save the initial query condition of the list page. If the initial query condition is ⁇ pageNum:1,pageSize:10 ⁇ , it means that each page contains ten pieces of data by default, and the data of the first page is displayed for display. When entering the list page, optionsDefault will be used as the query condition by default and the corresponding list data will be obtained. It can be understood that when the query condition of the list page is the initial query condition, the initial state of the list page, that is, the original list page is displayed.
  • the user queries the details of a certain data in the intermediate list page, he can jump from the intermediate list page to the details page of the data.
  • optionsDefault will be used as the query condition, and the intermediate data is obtained according to the initial query condition.
  • the list data of the list page that is, you can jump back to the intermediate list page from the details page.
  • the parameter parsing function can be called and the parameter parsing function can be used to The function returns the list page that retains the last query result from the details page, that is, returns to the intermediate list page.
  • the parameter parsing function may be a getQuery function.
  • the getQuery function when receiving the user's trigger operation on the page rollback control in the browser interface, the getQuery function can be called, so as to use the getQuery function to complete the acquisition and analysis of the last query condition before entering the list page, so as to facilitate the analysis according to the result Restoring the last query result does not require the user to perform operations such as filtering the list page again, which improves the user experience.
  • parameters for extracting the last query condition may be passed in, which may include parameters reg, from and next.
  • reg is a regular expression, and reg can be used to match the detail page URL corresponding to the current list page.
  • from and next can be obtained from the beforeRouteEnter hook function, from is object type data, through which you can get the information of the page before entering the list page, next is a jump function, the beforeRouteEnter hook function requires that the next function must be called after the business code is executed , which marks the completion of the function and enters the page loading process.
  • the getQuery function may be used to check whether the first page location identifier of the first detail page satisfies the condition for obtaining the target parameter string.
  • the target parameter string can be obtained from the URL of the first detailed page, and the character string of the target parameter Extract the last query condition from the string.
  • the preset matching rule can be the matching rule of the regular expression reg, and the regular expression reg can be / ⁇ /alarmMgmt ⁇ /detail.*$/, and the preset parameter can be a parameter named "o", namely Only when returning to the list page from the detail page URL starting with /alarmMgmt/detail and carrying the parameter "o", it is necessary to extract the query conditions and restore the list data according to the query conditions.
  • from.fullPath can save the full URL of the page before entering the list page.
  • the URL needs to meet the matching rules of the regular expression reg.
  • the page before entering the list page can be a specified page, such as a detail page corresponding to the list page.
  • from.query can save the parameters carried by the URL of the page before entering the list page, and the URL parameters must include the parameter "o". It can be seen that the URL of the details page satisfies the matching rule of the regular expression reg, and if the URL contains the parameter "o", the last query condition can be extracted from the URL. It should be noted that the target parameter string is stored in the from.query.o variable, so the query condition can only be extracted when the URL parameter contains the parameter "o".
  • Step S420 Analyzing the target parameter string to obtain the page jump parameter.
  • the target parameter string can be parsed, that is, the from.query.o variable can be parsed to obtain page jump parameters.
  • the parameter "o" in the variable is the target parameter string is the params string ⁇ "pageNum”:2,"pageSize”:10,”name”:"name1",”type”:”type1" ⁇
  • the target parameter string may also be decoded to obtain the initial parameter string, and the initial parameter string may be converted into a page jump parameter.
  • the target parameter string is the params string "%7BpageNum%3Apagesize%22"
  • you can use the decodeURIComponent function to decode the params string, and you can get the params string ⁇ "pageNum”: 2, "pageSize":10,”name”:"name1",”type”:”type1" ⁇
  • the params string is the initial parameter string. Then, the params string can be restored to the object type data options ⁇ pageNum:2,pageSize:10,name:'name1',type:'type1' ⁇ .
  • the target parameter string may also be decrypted to obtain the first parameter string, and then the first parameter string may be decoded to obtain the initial parameter string, and the initial parameter string may be converted into a page jump Turn parameters.
  • the target parameter string may also be decrypted to obtain the first parameter string, and then the first parameter string may be decoded to obtain the initial parameter string, and the initial parameter string may be converted into a page jump Turn parameters.
  • the encodeURIComponent function to encode the params string
  • Base64 Base64 encoding on the encoded result of the params string, and encrypt the params
  • the encoding result of the string gets the params string "JTdCJTIycGFnZU51".
  • Step S430 Jump from the first detail page back to the intermediate list page according to the page jump parameter.
  • the current value of the page jump parameter can be assigned to the option variable optionsDefault, so as to jump from the first detail page back to the intermediate list page according to the assigned option variable.
  • the options variable optionsDefault changes from the initial query condition ⁇ pageNum:1,pageSize:10 ⁇ to options ⁇ pageNum:2,pageSize:10,name:'name1',type:'type1' ⁇ , through Call next() to enter the intermediate list page, that is, to jump from the details page back to the list page that retains the last query result.
  • jumping from the detail page back to the list page can be realized according to steps S510 to S580.
  • Step S510 Check whether the query condition can be extracted, that is, the information of the page before entering the list page can be obtained through from, wherein from.fullPath saves the URL of the page before entering the list page, and from.query saves the page before entering the list page Parameters carried by the URL. You can check whether from.fullPath can match the regular expression reg, and whether the parameter o is included in from.query. If yes, it means that the query condition can be extracted from the URL of the page before entering the list page, then step S520 is executed; if not, it means that the URL of the page before entering the list page does not carry the query condition, or the page jump is not from the specified details page Return to the list page, then execute step S570;
  • Step S530 Decoding the params string, that is, decoding the from.query.o variable
  • Step S540 Decrypt the decoded params string
  • Step S550 converting the decrypted params string into options
  • Step S560 Assign options to optionsDefault
  • Step S570 Enter the list page, if you can execute next() to enter the list page;
  • Step S580 Use optionsDefault to request the list data, render the list data and display it to the user through the terminal device.
  • This method only needs to add a page jump function and a parameter analysis function in the source code of the list page, without modifying the source code of the detail page, which reduces the workload required for the user to complete this function and improves the user's operating efficiency.
  • the URL parameters are also encoded, which increases the security and aesthetics of the URL.
  • At least one second target data may be included in the first detail page, and the second target data may be related to the first target data.
  • List data related to the details of target data.
  • the first detail page may further include a plurality of list data related to the detailed content of the first target data.
  • the user can filter multiple list data in the first detail page to obtain the filtered first detail page, and the first detail page at this time has filter conditions.
  • the filtered first detail page may also have filtering conditions and pagination conditions at the same time, which is not specifically limited in the present disclosure. Then, when receiving a query operation on a certain list data in the filtered first detail page, jump from the filtered first detail page to the second detailed page corresponding to the list data according to steps S310 to S340, And store the page location identifier of the second detail page.
  • the page jump parameters contained in the page location identifier of the second detail page can be obtained according to steps S410 to S430, and the page jump parameters can be selected from the second page according to the page jump parameters.
  • the detail page jumps back to the first detail page after filtering.
  • At least one second target data may be included in the first detail page, and the second target data is used to represent the first target data.
  • the first details page can be jumped to the second details page corresponding to the second target data.
  • the second detail page URL may be stored in the browser.
  • the URL of the second detail page can be obtained, so as to determine the URL of the first detail page according to the URL of the second detail page.
  • the first detailed page can be entered according to the URL of the first detailed page.
  • FIG. 6 it schematically shows a list page displayed when an application program for operation and maintenance services is running.
  • Figure 6 shows the initial state of the list page, that is, the original list page, and the corresponding query condition is "name:", pageNum:1", that is, the first page of data without filtering conditions.
  • the list page Include list page URL "/workorderMgmt/Index" and 6 list data, each list data includes work order number, work order name and work order status, for example, the first list data is a test work order with work order number 202101 , the current status of the work order is resolved. It is understandable that each list data in the list page can be used as target data.
  • the search button can be clicked to filter 100 pieces of list data, and the list page where the "No Intrusion" work order is located can be displayed to the user after the filtering is completed.
  • FIG. 7 a list page with filtering conditions and pagination conditions is schematically shown, that is, an intermediate list page. It can be seen that the query condition corresponding to the list page is "name: no intrusion, pageNum: 6", and the URL of the list page is the same as the URL of the list page in Figure 6, both of which are "/workorderMgmt/Index". The data in the 6 lists are prohibited intrusion work orders.
  • Each piece of list data in FIG. 7 can be used as the first target data.
  • the user executes the operation of viewing details of a piece of list data, the user can jump from the list page shown in FIG. 7 to the detail page corresponding to the list data.
  • the user selects the no-intrusion work order whose work order number is 202131 and performs the operation of viewing details, the user can enter the detail page of the work order from the current list page, such as the detail page shown in FIG. 8A .
  • the user when the user selects the no-intrusion work order whose work order number is 202131 and performs the operation of viewing details, the user can enter the details page of the work order from the current list page, such as the details page shown in FIG. 8B .
  • the details page includes detailed data such as URL of the details page, work order name, work order number, work order status, etc., and also includes 6 list data related to the work order number, which are prohibited intrusion area 1 to prohibited intrusion area 6. It can be seen that the no-intrusion work order with the work order number 202131 is used to operate, maintain and manage the no-intrusion area 1 to the no-intrusion area 6.
  • These 6 items of list data can also be filtered according to the region name or region status, for example, a work order details page with the filtering condition of "resolving" as shown in FIG. 8C can be obtained.
  • the detail data when the detail data is associated with a detail page, the detail data can be used as the second target data.
  • the detail data can be used as the second target data.
  • the list data when the filtered list data is also associated with a detail page, the list data can be used as the second target data.
  • the user executes the operation of viewing the details of a piece of list data in FIG. 8C , the user can jump from the filtered work order details page shown in FIG. 8C to the details page corresponding to the list data.
  • the user executes the operation of viewing the details of the forbidden area 1
  • he can directly enter the detailed page of the forbidden area 1 from the current work order details page, such as the detailed page shown in Figure 9B, where the cube area indicates that the intrusion is prohibited Area 1, the elliptical area is used to indicate the prohibited intrusion range in area 1.
  • the page jump function, parameter parsing function and option variable can be packaged into an executable file in advance and stored in the browser, so that when the query for the target data in the list page is received Execute the executable file on operation.
  • the executable file can also include the source code of the parameters reg, from, and next, as well as the algorithm source code used for encoding and encryption, that is, the source code can be encapsulated according to the actual needs of the user and the executable file required by the user can be obtained. The disclosure does not specifically limit this.
  • webpack (a module packager) can be used under the Vue framework to package the list page source code, detail page source code, page jump function, parameter parsing function, option variable and other related source code, and store them in the form of folders
  • the user can make a data request to the server when using the local browser, to request such as the page jump function, parameter parsing function, option variable optionsDefault, parameters reg, from and next, encodeURIComponent function and decodeURIComponent and other related source codes.
  • the prepackaged executable file can be deployed to the local browser together, which can avoid frequent data requests to the server.
  • the page display method provided by the exemplary embodiments of the present disclosure has clear logic, simple structure, light weight, easy implementation, and does not occupy too much memory. It can be understood that the page display method refers to data processing at the browser end.
  • the page display method when a query operation on the target data in the list page is received, jump from the list page to the details page corresponding to the target data, and store the details
  • the first page location identifier of the page, the first page location identifier includes a page jump parameter; obtain the page jump parameter, and jump back from the detail page to the list page according to the page jump parameter .
  • This disclosure can retain the page jump parameters when entering the details page from the list page, and then when returning from the details page, the previous list page can be restored according to the page jump parameters, avoiding the page refresh caused by the page jump, and the user does not need to operate again The last query result can be obtained, thereby improving the user experience.
  • a page display device is also provided.
  • the device can be applied to a terminal device or a server.
  • the page display device 1000 may include a first page display module 1010 and a second page display module 1020, wherein:
  • the first page display module 1010 is configured to jump from the list page to the details page corresponding to the target data when receiving a query operation on the target data in the list page, and store the first page location of the details page An identifier, the first page location identifier includes page jump parameters;
  • the second page display module 1020 is configured to acquire the page jump parameter, and jump back from the detail page to the list page according to the page jump parameter.
  • the list page includes an original list page and an intermediate list page;
  • the first page display module 1010 includes:
  • a page switching module configured to switch the original list page to the intermediate list page according to the page jump parameters when receiving a trigger operation on the search control in the original list page;
  • a page jump module configured to jump from the intermediate list page to the first detail page corresponding to the first target data when receiving a query operation on the first target data in the intermediate list page, and store the The first page location identifier of the first detailed page.
  • the page jump module includes:
  • a parameter conversion unit configured to convert the page jump parameter into a target parameter string through a page jump function
  • An identifier generating unit configured to form a first page location identifier of the first detail page from the target parameter string and a second page location identifier
  • a first page jumping unit configured to jump from the intermediate list page to the first detail page according to the first page location identifier of the first detail page.
  • the parameter conversion unit includes:
  • a parameter conversion subunit configured to convert the page jump parameter into an initial parameter string
  • a character string encoding subunit configured to encode the initial parameter character string to obtain the target parameter character string.
  • a parameter conversion subunit configured to convert the page jump parameter into an initial parameter string
  • a character string encryption subunit configured to encrypt the first parameter character string to obtain the target parameter character string.
  • the second page display module 1020 includes:
  • a string parsing module configured to parse the target parameter string to obtain the page jump parameter
  • the second page jump module is configured to jump back from the first detailed page to the intermediate list page according to the page jump parameters.
  • the character string acquisition module includes:
  • a character string verification unit configured to determine whether the first page location identifier of the first detail page satisfies a preset matching rule through the parameter parsing function, and whether the first page location identifier contains preset parameters
  • a character string acquisition unit configured to obtain the target parameter when the first page location identifier of the details page satisfies a preset matching rule and the first page location identifier contains preset parameters string.
  • the string parsing module includes:
  • a character string decoding unit configured to decode the target parameter character string to obtain the initial parameter character string, and convert the initial parameter character string into the page jump parameter.
  • the string parsing module includes:
  • a string decryption unit configured to decrypt the target parameter string to obtain the first parameter string
  • a character string decoding unit configured to decode the first parameter character string to obtain the initial parameter character string, and convert the initial parameter character string into the page jump parameter.
  • the second page jump module includes:
  • a parameter assignment unit configured to assign the current value of the page jump parameter to an option variable, and the option variable is used to store a default value of the page jump parameter;
  • a page jumping unit configured to jump back from the first detail page to the intermediate list page according to the assigned option variable.
  • the page display device 1000 further includes:
  • the third page display module 1030 is configured to jump from the first detail page to the second detail page corresponding to the second target data when receiving a query operation on the second target data in the first detail page , and store the page location identifier of the second detail page; obtain the page jump parameter contained in the page location identifier of the second detail page, and jump from the second detail page according to the page jump parameter Go back to the first detail page.
  • the page display device 1000 further includes:
  • the third page display module 1040 is configured to jump from the first detail page to the second detail page corresponding to the second target data when receiving a query operation on the second target data in the first detail page , and store the page location identifier of the second details page; determine the first page location identifier of the first details page according to the page location identifier of the second details page; determine the first page location identifier of the first details page according to the first page of the first details page The location indicator jumps back to the first detail page from the second detail page.
  • Each module in the above-mentioned device can be a general-purpose processor, including: a central processing unit, a network processor, etc.; it can also be a digital signal processor, an application-specific integrated circuit, a field programmable gate array or other programmable logic devices, discrete gates or transistors Logic devices, discrete hardware components. Each module may also be implemented by software, firmware, and other forms. Each processor in the above device may be an independent processor, or may be integrated together.
  • Exemplary embodiments of the present disclosure also provide a computer-readable storage medium on which a program product capable of implementing the above-mentioned method in this specification is stored.
  • various aspects of the present disclosure can also be implemented in the form of a program product, which includes program code.
  • the program product When the program product is run on the electronic device, the program code is used to make the electronic device execute the above-mentioned functions of this specification. Steps according to various exemplary embodiments of the present disclosure described in the "Exemplary Methods" section.
  • the program product may take the form of a portable compact disc read-only memory (CD-ROM) and include program code, and may run on an electronic device, such as a personal computer.
  • CD-ROM portable compact disc read-only memory
  • the program product of the present disclosure is not limited thereto.
  • a readable storage medium may be any tangible medium containing or storing a program, and the program may be used by or in combination with an instruction execution system, apparatus or device.
  • a program product may take the form of any combination of one or more readable media.
  • the readable medium may be a readable signal medium or a readable storage medium.
  • the readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device, or device, or any combination thereof. More specific examples (non-exhaustive list) of readable storage media include: electrical connection with one or more conductors, portable disk, hard disk, random access memory (RAM), read only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.
  • a computer readable signal medium may include a data signal carrying readable program code in baseband or as part of a carrier wave. Such propagated data signals may take many forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the foregoing.
  • a readable signal medium may also be any readable medium other than a readable storage medium that can transmit, propagate, or transport a program for use by or in conjunction with an instruction execution system, apparatus, or device.
  • Program code embodied on a readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.
  • Program code for performing the operations of the present disclosure may be written in any combination of one or more programming languages, including object-oriented programming languages—such as Java, C++, etc., as well as conventional procedural programming Language - such as "C" or similar programming language.
  • the program code may execute entirely on the user's computing device, partly on the user's device, as a stand-alone software package, partly on the user's computing device and partly on a remote computing device, or entirely on the remote computing device or server to execute.
  • the remote computing device may be connected to the user computing device through any kind of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computing device (for example, using an Internet service provider). business to connect via the Internet).
  • LAN local area network
  • WAN wide area network
  • Internet service provider for example, using an Internet service provider
  • Exemplary embodiments of the present disclosure also provide an electronic device capable of implementing the above method.
  • An electronic device 1100 according to such an exemplary embodiment of the present disclosure is described below with reference to FIG. 11 .
  • the electronic device 1100 shown in FIG. 11 is only an example, and should not limit the functions and scope of use of the embodiments of the present disclosure.
  • electronic device 1100 may take the form of a general-purpose computing device.
  • Components of the electronic device 1100 may include, but are not limited to: at least one processing unit 1110, at least one storage unit 1120, a bus 1130 connecting different system components (including the storage unit 1120 and the processing unit 1110), and a display unit 1140.
  • the storage unit 1120 stores program codes, which can be executed by the processing unit 1110, so that the processing unit 1110 executes the steps described in the "Exemplary Methods" section above in this specification according to various exemplary embodiments of the present disclosure.
  • the processing unit 1110 may execute any one or more method steps in FIG. 2 to FIG. 5 .
  • the storage unit 1120 may include a readable medium in the form of a volatile storage unit, such as a random access storage unit (RAM) 1121 and/or a cache storage unit 1122 , and may further include a read-only storage unit (ROM) 1123 .
  • RAM random access storage unit
  • ROM read-only storage unit
  • Bus 1130 may represent one or more of several types of bus structures, including a memory cell bus or memory cell controller, a peripheral bus, an accelerated graphics port, a processing unit, or a local area using any of a variety of bus structures. bus.
  • the electronic device 1100 can also communicate with one or more external devices 1200 (such as keyboards, pointing devices, Bluetooth devices, etc.), and can also communicate with one or more devices that enable the user to interact with the electronic device 1100, and/or communicate with Any device (eg, router, modem, etc.) that enables the electronic device 1100 to communicate with one or more other computing devices. Such communication may occur through input/output (I/O) interface 1150 .
  • the electronic device 1100 can also communicate with one or more networks (such as a local area network (LAN), a wide area network (WAN) and/or a public network such as the Internet) through the network adapter 1160. As shown, the network adapter 1160 communicates with other modules of the electronic device 1100 through the bus 1130 .
  • other hardware and/or software modules may be used in conjunction with electronic device 1100, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives And data backup storage system, etc.
  • the technical solutions according to the embodiments of the present disclosure can be embodied in the form of software products, and the software products can be stored in a non-volatile storage medium (which can be CD-ROM, U disk, mobile hard disk, etc.) or on the network , including several instructions to cause a computing device (which may be a personal computer, a server, a terminal device, or a network device, etc.) to execute the method according to the exemplary embodiment of the present disclosure.
  • a computing device which may be a personal computer, a server, a terminal device, or a network device, etc.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Software Systems (AREA)
  • Human Computer Interaction (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • Signal Processing (AREA)
  • Information Transfer Between Computers (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

本公开提供一种页面显示方法、装置、存储介质及电子设备；涉及计算机技术领域。所述方法包括：接收到对列表页面中目标数据的查询操作时，从所述列表页面跳转至所述目标数据对应的详情页面，并存储所述详情页面的第一页面定位标识，所述第一页面定位标识中包含页面跳转参数；获取所述页面跳转参数，并根据所述页面跳转参数从所述详情页面跳转回所述列表页面。本公开从列表页面进入详情页面时可以保留页面跳转参数，再由详情页面返回时，可以根据存储的页面跳转参数恢复之前的列表页面，避免了由于页面跳转导致的页面刷新，进而提升了用户体验。

Description

页面显示方法、装置、存储介质及电子设备 技术领域
本公开涉及计算机技术领域，具体而言，涉及一种页面显示方法、页面显示装置、计算机可读存储介质以及电子设备。
背景技术
随着前端技术及框架的不断更新，页面功能及交互的复杂度也随着增加。在前端开发中，Vue是一套用于构建用户界面的渐进式框架，基于Vue框架可以快速开发前端页面，如可以实现单页面应用的开发。
使用Vue框架在开发单页面应用时，页面间跳转会导致页面刷新。例如，从筛选后的列表页面中选中某一数据并跳转至该数据的详情页面后，从详情页面返回列表页面时会返回到列表页面初始状态，而未保存上次筛选后的查询结果。若用户需要查看该查询结果，需要再次进行筛选操作，降低了用户体验。
需要说明的是，在上述背景技术部分公开的信息仅用于加强对本公开的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。
发明内容
本公开提供一种页面显示方法、页面显示装置、计算机可读存储介质以及电子设备。
本公开提供一种页面显示方法，包括：
接收到对列表页面中目标数据的查询操作时，从所述列表页面跳转至所述目标数据对应的详情页面，并存储所述详情页面的第一页面定位标识，所述第一页面定位标识中包含页面跳转参数；
获取所述页面跳转参数，并根据所述页面跳转参数从所述详情页面跳转回所述列表页面。
在本公开的一种示例性实施例中，所述列表页面包括原始列表页面和中间列表页面；所述接收到对列表页面中目标数据的查询操作时，从所述列表页面跳转至所述目标数据对应的详情页面，并存储所述详情页面的第一页面定位标识，包括：
接收到对所述原始列表页面中搜索控件的触发操作时，根据所述页面跳转参数将所述原始列表页面切换为所述中间列表页面；
接收到对所述中间列表页面中第一目标数据的查询操作时，从所述中间列表页面跳转至所述第一目标数据对应的第一详情页面。
在本公开的一种示例性实施例中，所述接收到对所述中间列表页面中第一目标数据的查询操作时，从所述中间列表页面跳转至所述第一目标数据对应的第一详情页面，包括：
接收到对所述中间列表页面中第一目标数据的查询操作时，获取所述页面跳转参数和所述第一详情页面的第二页面定位标识；
通过页面跳转函数将所述页面跳转参数转换为目标参数字符串；
由所述目标参数字符串和第二页面定位标识组成所述第一详情页面的第一页面定位标识；
根据所述第一详情页面的第一页面定位标识从所述中间列表页面跳转至所述第一详情页面。
在本公开的一种示例性实施例中，所述通过页面跳转函数将所述页面跳转参数转换为目标参数字符串，包括：
将所述页面跳转参数转换为初始参数字符串；
对所述初始参数字符串进行编码，得到所述目标参数字符串。
在本公开的一种示例性实施例中，所述通过页面跳转函数将所述页面跳转参数转换为目标参数字符串，包括：
将所述页面跳转参数转换为初始参数字符串；
对所述初始参数字符串进行编码，得到第一参数字符串；
对所述第一参数字符串进行加密，得到所述目标参数字符串。
在本公开的一种示例性实施例中，所述获取所述页面跳转参数，并根据所述页面跳转参数从所述详情页面跳转回所述列表页面，包括：
通过参数解析函数获取所述目标参数字符串；
对所述目标参数字符串进行解析，得到所述页面跳转参数；
根据所述页面跳转参数从所述第一详情页面跳转回所述中间列表页面。
在本公开的一种示例性实施例中，所述通过参数解析函数获取所述目标参数字符串，包括：
通过所述参数解析函数确定所述第一详情页面的第一页面定位标识是否满足预设的匹配规则，且所述第一页面定位标识中是否包含预设参数；
当所述第一详情页面的第一页面定位标识满足预设的匹配规则，且所述第一页面定位标识中包含预设参数时，获取所述目标参数字符串。
在本公开的一种示例性实施例中，所述对所述目标参数字符串进行解析，得到所述页面跳转参数，包括：
对所述目标参数字符串进行解码，得到所述初始参数字符串，并将所述初始参数字符串转化为所述页面跳转参数。
在本公开的一种示例性实施例中，所述对所述目标参数字符串进行解析，得到所述页面跳转参数，包括：
对所述目标参数字符串进行解密，得到所述第一参数字符串；
对所述第一参数字符串进行解码，得到所述初始参数字符串，并将所述初始参数字符串转化为所述页面跳转参数。
在本公开的一种示例性实施例中，所述根据所述页面跳转参数从所述详情页面跳转回 所述列表页面，包括：
将所述页面跳转参数的当前值赋值给选项变量，所述选项变量用于保存所述页面跳转参数的默认值；
根据赋值后的选项变量从所述详情页面跳转回所述中间列表页面。
在本公开的一种示例性实施例中，从所述中间列表页面跳转至所述第一目标数据对应的第一详情页面后，所述方法还包括：
接收到对所述第一详情页面中第二目标数据的查询操作时，通过如权利要求2至权利要求10任一项所述的页面显示方法，从所述第一详情页面跳转至所述第二目标数据对应的第二详情页面，并存储所述第二详情页面的页面定位标识；
获取所述第二详情页面的页面定位标识中包含的页面跳转参数，并根据所述页面跳转参数从所述第二详情页面跳转回所述第一详情页面。
在本公开的一种示例性实施例中，从所述中间列表页面跳转至所述第一目标数据对应的第一详情页面后，所述方法还包括：
接收到对所述第一详情页面中第二目标数据的查询操作时，从所述第一详情页面跳转至所述第二目标数据对应的第二详情页面，并存储所述第二详情页面的页面定位标识；
根据所述第二详情页面的页面定位标识确定所述第一详情页面的第一页面定位标识；
根据所述第一详情页面的第一页面定位标识从所述第二详情页面跳转回所述第一详情页面。
在本公开的一种示例性实施例中，预先将所述页面跳转函数、参数解析函数和选项变量封装为可执行文件并存储至浏览器中，以在接收到对列表页面中目标数据的查询操作时执行所述可执行文件，其中：
所述页面跳转函数，用于将所述页面跳转参数转换为目标参数字符串；由所述目标参数字符串和第二页面定位标识组成所述第一详情页面的第一页面定位标识；根据所述第一详情页面的第一页面定位标识从所述中间列表页面跳转至所述第一详情页面；
所述参数解析函数，用于获取所述目标参数字符串；对所述目标参数字符串进行解析，得到所述页面跳转参数；根据所述页面跳转参数从所述第一详情页面跳转回所述中间列表页面；
所述选项变量，用于保存所述页面跳转参数的默认值。
本公开提供一种页面显示装置，包括：
第一页面显示模块，用于接收到对列表页面中目标数据的查询操作时，从所述列表页面跳转至所述目标数据对应的详情页面，并存储所述详情页面的第一页面定位标识，所述第一页面定位标识中包含页面跳转参数；
第二页面显示模块，用于获取所述页面跳转参数，并根据所述页面跳转参数从所述详情页面跳转回所述列表页面。
本公开提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处 理器执行时实现上述任意一项所述的方法。
本公开提供一种电子设备，包括：处理器；以及存储器，用于存储所述处理器的可执行指令；其中，所述处理器配置为经由执行所述可执行指令来执行上述任意一项所述的方法。
应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。
图1示出了可以应用本公开实施例的一种页面显示方法及装置的示例性系统架构的示意图；
图2示意性示出了根据本公开的一个实施例的页面显示方法的流程图；
图3示意性示出了根据本公开的一个实施例的从列表页面跳转至详情页面的流程图；
图4示意性示出了根据本公开的一个实施例的从详情页面跳转回列表页面的流程图；
图5示意性示出了根据本公开的另一个实施例的从详情页面跳转回列表页面的流程图；
图6示意性示出了根据本公开的一个实施例的列表页面的示意图；
图7示意性示出了根据本公开的一个实施例的带有查询条件的列表页面的示意图；
图8A示意性示出了根据本公开的一个实施例的工单详情页面的示意图；
图8B示意性示出了根据本公开的一个实施例的包含列表数据的工单详情页面的示意图；
图8C示意性示出了根据本公开的一个实施例的带有筛选条件的工单详情页面的示意图；
图9A示意性示出了根据本公开的一个实施例的工单详情页面中相关图片的详情页面示意图；
图9B示意性示出了根据本公开的一个实施例的禁止入侵地区的详情页面示意图；
图10示意性示出了根据本公开的一个实施例的页面显示装置的框图；
图11示意性示出了适于用来实现本公开实施例的电子设备的计算机系统的结构示意图。
具体实施方式
现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全 面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。在下面的描述中，提供许多具体细节从而给出对本公开的实施方式的充分理解。然而，本领域技术人员将意识到，可以实践本公开的技术方案而省略所述特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知技术方案以避免喧宾夺主而使得本公开的各方面变得模糊。
此外，附图仅为本公开的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。
图1示出了可以应用本公开实施例的一种页面显示方法及装置的示例性应用环境的系统架构的示意图。
如图1所示，系统架构100可以包括终端设备101、102、103中的一个或多个，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。终端设备101、102、103可以是各种电子设备，包括但不限于台式计算机、便携式计算机、智能手机和平板电脑等，用于提供用户界面进行页面显示。例如，终端设备上安装有客户端(如浏览器)，通过浏览器客户端可以浏览页面。具体地，终端设备上的浏览器可以用于执行：接收到对列表页面中目标数据的查询操作时，从列表页面跳转至目标数据对应的详情页面，并存储详情页面的第一页面定位标识，第一页面定位标识中包含页面跳转参数；获取页面跳转参数，并根据页面跳转参数从详情页面跳转回列表页面。应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。例如，服务器105可以是一个服务器，也可以是多个服务器组成的服务器集群，还可以是云计算平台或者虚拟化中心。另外，服务器105可以用于为支持页面显示的视图组件等提供后台服务。
本公开实施例所提供的页面显示方法一般由终端设备101、102、103中的一个或多个执行，相应的，页面显示装置一般设置于终端设备101、102、103中，例如，由终端设备执行后可以将上次的查询结果直接显示在终端设备的显示屏上，本示例性实施例中对此不做特殊限定。但本领域技术人员容易理解的是，本公开实施例所提供的页面显示方法也可以由服务器105执行，相应地，页面显示装置也可以设置于服务器105中，服务器可以保留用户选择的查询条件，以便于在进行页面跳转时可以根据该查询条件返回上次的查询结果，并由终端设备向用户进行展示。
以下对本公开实施例的技术方案进行详细阐述：
随着前端技术及框架的不断更新，页面功能及交互的复杂度也随着增加。在前端开发 中，Vue是一套用于构建用户界面的渐进式框架，基于Vue框架可以快速开发前端页面，如可以实现单页面应用的开发。
使用Vue-Cli框架(Vue框架中的一种脚手架工具)在开发单页面应用时，页面间跳转会导致页面刷新。例如，从筛选后的列表页面中选中某一数据并跳转至该数据的详情页面后，从详情页面返回列表页面时会返回到列表页面初始状态，而未保存上次筛选后的查询结果。若用户需要查看该查询结果，需要再次进行筛选操作，降低了用户体验。
相关技术中，可以通过URL(Uniform Resource Locator，统一资源定位符)参数保留列表页面查询条件实现列表页面状态的保留。但是，该方法直接将查询条件放入URL中既不安全也不美观。另外，由列表页面进入详情页面后，可以在详情页面URL中保存查询条件。由详情页面返回列表页面时需要将查询条件再放入列表页面URL中，列表页面读取URL中的查询条件并向后台请求数据。该页面跳转过程中，虽然详情页面自身不需要使用查询条件，但在返回列表页面时为了在列表页面URL中加入查询条件，详情页面需要读取并解析当前URL中的查询条件，在列表页面URL中添加查询条件以形成新的目标URL后跳转，增加了修改详情页面的工作量，降低了用户的操作效率，从而影响用户的使用体验。
基于上述一个或多个问题，本示例实施方式提供了一种页面显示方法，该方法可以应用于上述终端设备101、102、103中的一个或多个，也可以应用于上述服务器105，本示例性实施例中对此不做特殊限定。参考图2所示，该页面显示方法可以包括步骤S210和步骤S220：
步骤S210.接收到对列表页面中目标数据的查询操作时，从所述列表页面跳转至所述目标数据对应的详情页面，并存储所述详情页面的第一页面定位标识，所述第一页面定位标识中包含页面跳转参数；
步骤S220.获取所述页面跳转参数，并根据所述页面跳转参数从所述详情页面跳转回所述列表页面。
在本公开示例实施方式所提供的页面显示方法中，通过接收到对列表页面中目标数据的查询操作时，从所述列表页面跳转至所述目标数据对应的详情页面，并存储所述详情页面的第一页面定位标识，所述第一页面定位标识中包含页面跳转参数；获取所述页面跳转参数，并根据所述页面跳转参数从所述详情页面跳转回所述列表页面。本公开从列表页面进入详情页面时可以保留页面跳转参数，再由详情页面返回时，可以根据页面跳转参数恢复之前的列表页面，避免了由于页面跳转导致的页面刷新，用户无需再次操作即可获取上次的查询结果，进而提升了用户体验。
下面，对于本示例实施方式的上述步骤进行更加详细的说明。
在步骤S210中，接收到对列表页面中目标数据的查询操作时，从所述列表页面跳转至所述目标数据对应的详情页面，并存储所述详情页面的第一页面定位标识，所述第一页面定位标识中包含页面跳转参数。
本公开示例实施方式中，可以以单页面应用中列表页面和若干详情页面的页面显示为 例进行说明。其中，单页面应用是指只有一个主页面的应用程序，该应用程序在浏览器中运行时，系统只需加载一次资源，后续的操作交互和数据交互是通过Router(路由)、AJAX(Asynchronous Javascript And XML，一种创建交互式网页应用的网页开发技术)实现。列表页面和详情页面可以是由Vue-Cli框架开发的用户界面。具体地，列表页面可以是应用程序中用于显示重复性较高的界面元素的用户界面，且每个界面元素的次序、位置和数据源可以通过Vue-Cli框架控制。详情页面可以是应用程序中用于显示某一界面元素的详细内容的用户界面。例如，界面元素可以包括状态栏、导航栏、主菜单栏和内容区域等，本公开对此不做具体限定。举例而言，对于用于运维服务的某一应用程序，列表页面的主菜单栏可以包括“工单管理”、“用户管理”和“信息库管理”等任务，内容区域可以是“工单管理”任务对应的工单列表数据，也可以是“用户管理”任务对应的用户列表数据，还可以是“信息库管理”任务对应的信息库列表数据。
用户在查询列表页面中某一数据的详情时，需要在列表页面输入与该数据相关的查询条件。本公开示例实施方式中，查询条件可以包括筛选条件和分页条件。筛选条件可以是名称、状态等信息，分页条件可以是页码、每页的数据条数等信息。例如，若用户在列表页面中根据名称进行搜索，且列表页面带有的筛选条件为“name:1”时，可以表示查找列表页面中所有名称中包含“1”的数据。若用户在列表页面中根据页码进行搜索，且列表页面带有的分页条件为“pageNum:2”时，可以表示在第二页中选择某一数据以查看该数据的详情。需要说明的是，列表页面可以包括原始列表页面和中间列表页面。其中，原始列表页面可以为列表页面的初始状态，中间列表页面可以为同时带有筛选条件和分页条件的列表页面。示例性的，在使用筛选条件(如name:1)对原始列表页面进行筛选后，可以根据分页条件(如pageNum:2)将原始列表页面切换中间列表页面，即第二页，在第二页中选择某一数据后可以跳转至该数据的详情页面，此时对应的查询条件为：“name:1,pageNum:2”。可以理解的是，原始列表页面可以默认为无筛选条件下的第一页数据，对应的查询条件为“name:”,pageNum:1”。
一种示例实施方式中，接收到对原始列表页面中搜索控件的触发操作时，可以根据页面跳转参数将原始列表页面切换为中间列表页面。接收到对中间列表页面中第一目标数据的查询操作时，可以从中间列表页面跳转至第一目标数据对应的第一详情页面，并将第一详情页面的第一页面定位标识存储于浏览器中，如可以将第一页面定位标识进行缓存，也可以将第一页面定位标识临时存储于浏览器中，本公开对此不做具体限定。其中，页面跳转参数可以为用户在原始列表页面输入的查询条件，第一目标数据可以为中间列表页面中的与详情页面关联的任一列表数据，第一详情页面可以是对第一目标数据进行查询详情操作时显示的第一个页面，第一页面定位标识可以为第一详情页面的URL。需要说明的是，本公开示例实施方式中，若页面URL没有改变，而页面中的列表数据发生变化时，可以表示将页面进行了切换。若页面URL和页面中的列表数据均发生变化时，可以表示将页面进行了跳转。
示例性的，用户输入查询条件“name:1,pageNum:2”后，可以通过点击或短按搜索控件使得浏览器可以根据查询条件将原始列表页面切换为包含名称“1”的第二列表页面。当用户选中第二列表页面的第一目标数据并执行对该数据的查询操作时，又可以从第二列表页面跳转至该数据关联的详情页面。可以看出，将原始列表页面切换为第二列表页面时，原始列表页面和第二列表页面的URL相同，而从第二列表页面跳转至详情页面时，第二列表页面和详情页面的URL并不相同。
参考图3所示，可以根据步骤S310至步骤S340实现从中间列表页面跳转至第一目标数据对应的第一详情页面。
步骤S310.接收到对所述中间列表页面中第一目标数据的查询操作时，获取所述页面跳转参数和所述第一详情页面的第二页面定位标识。
示例性的，对于一个同时带有筛选条件和分页条件的中间列表页面，接收到对中间列表页面中第一目标数据的查询操作时，可以调用页面跳转函数，并利用页面跳转函数从中间列表页面跳转至该第一目标数据对应的详情页面。其中，查询操作可以是用户对中间列表界面上搜索控件的点击/短按操作，本公开对此不做具体限定。本公开示例实施方式中，页面跳转函数可以是jump函数，利用jump函数从中间列表页面跳转至第一详情页面时，可以记录对应的查询条件，以便于从第一详情页面返回时可以读取该查询条件，并根据读取到的查询条件恢复上次的查询结果，无需用户再次对原始列表页面进行筛选操作，可以提高用户的使用体验。
调用jump函数时，需要传入与第一详情页面相关的参数，可以包括页面跳转参数和第一详情页面的第二页面定位标识等。例如，页面跳转参数可以为中间列表页面带有的查询条件，第一详情页面的第二页面定位标识可以为第一详情页面的初始URL。对应的，可以传入参数Router、path和options。其中，Router可以为Vue Router对象。Path为跳转目标URL，即第一详情页面的初始URL，为字符串类型变量。例如，Path可以为“/alarmMgmt/detail/1”。options为需要记录的查询条件，为对象类型变量。例如，查询条件为根据筛选条件“名称为name1，状态为type1”对原始列表页面进行筛选后，再根据分页条件“第二页，每页包含10条数据”从原始列表页面切换为中间列表页面，以查询中间列表页面中的第一目标数据，对应于该查询条件传入的options可以为{pageNum:2,pageSize:10,name:'name1',type:'type1'}。
步骤S320.通过页面跳转函数将所述页面跳转参数转换为目标参数字符串。
传参完成后，可以通过页面跳转函数将页面跳转参数转换为目标参数字符串。其中，页面跳转参数可以为中间列表页面带有的查询条件options，目标参数字符串可以是params字符串。需要说明的是，将页面跳转参数转换为目标参数字符串的目的在于可以将页面跳转参数转换为页面跳转函数可以统一识别的内容，方便统一集成化管理和操作。示例性的，可以利用jump函数将options对象转换为params字符串，若options为{pageNum:2,pageSize:10,name:'name1',type:'type1'}，转换得到的params字符串可以为{”pageNum”:2, ”pageSize”:10,”name”:”name1”,”type”:”type1”}，如表1所示。
表1
options对象 {pageNum:2,pageSize:10,name:'name1',type:'type1'}
params字符串 {”pageNum”:2,”pageSize”:10,”name”:”name1”,”type”:”type1”}
一种示例中，为了增加详情页面URL的安全性，在将页面跳转参数转换为目标参数字符串时，也可以对查询条件进行编码。示例性的，可以将页面跳转参数转换为初始参数字符串，对初始参数字符串进行编码，得到目标参数字符串。具体地，可以利用jump函数将options对象转换为params字符串，该params字符串即为初始参数字符串。可以使用encodeURIComponent函数对该params字符串进行UTF-8(8-bit Unicode Transformation Format，可变长度字符编码)编码，编码后的params字符串即为目标参数字符串。其中，encodeURIComponent函数可以将字符串作为URI组件进行编码。示例性的，编码后的params字符串可以为：“％7BpageNum％3Apagesize％22…”，如表2所示。
表2
options对象 {pageNum:2,pageSize:10,name:'name1',type:'type1'}
params字符串 {”pageNum”:2,”pageSize”:10,”name”:”name1”,”type”:”type1”}
编码后的params字符串 ％7BpageNum％3Apagesize％22…
可以看出，从编码后的params字符串中可以看到查询条件中的参数名称如pageNum、pagesize等，但无法获取各个参数的参数值，可以提高详情页面URL的安全性。
一种示例中，在增加详情页面URL安全性的基础上，进一步的，为了增加详情页面URL的美观性，还可以先对查询条件进行编码，并加密编码后的查询条件。示例性的，可以将页面跳转参数转换为初始参数字符串，对初始参数字符串进行编码，得到第一参数字符串，再对第一参数字符串进行加密，得到目标参数字符串。
具体地，首先，可以利用jump函数将options对象转换为params字符串，该params字符串即为初始参数字符串。然后，可以使用encodeURIComponent函数编码params字符串，并对该params字符串的编码结果进行加密。其中，可以对params字符串的编码结果进行Base64编码，以加密params字符串的编码结果。可以理解的是，加密方法也可以是MD5(message-digest algorithm 5，信息-摘要算法)、SHA1(Secure Hash Algorithm 1，安全散列算法1)、Crypto-JS(一种JavaScript加密算法)等，本公开对此不做具体限定。编码后的params字符串即为第一参数字符串，加密得到的params字符串即为目标参数字符串。示例性的，加密后的params字符串可以为“JTdCJTIycGFnZU51…”，如表3所示。
表3
options对象 {pageNum:2,pageSize:10,name:'name1',type:'type1'}
params字符串 {”pageNum”:2,”pageSize”:10,”name”:”name1”,”type”:”type1”}
编码后的params字符串 ％7BpageNum％3Apagesize％22…
加密后的params字符串 JTdCJTIycGFnZU51…
可以看出，已经无法从加密后的params字符串中读取与查询条件相关的参数信息，进一步提高了详情页面URL的安全性，同时还可以增加详情页面URL的美观性。其他示例中，也可以在利用jump函数将options对象转换为params字符串后，直接加密该params字符串，并携带加密后的params字符串跳转至path页面，本公开对此不做具体限定。还可以对params字符串进行多层加密，如可以对params字符串的编码结果依次进行Base64编码、MD5加密和SHA1加密等，以进一步提高详情页面URL的安全性，本公开对此也不做具体限定。
步骤S330.由所述目标参数字符串和第二页面定位标识组成所述第一详情页面的第一页面定位标识。
得到目标参数字符串后，可以由目标参数字符串和第一详情页面的第二页面定位标识组成第一详情页面的第一页面定位标识，以根据第一详情页面的第一页面定位标识从中间列表页面跳转至第一详情页面。其中，第一详情页面的第一页面定位标识可以是由第一详情页面的初始URL携带params字符串组成的新URL。从中间列表页面跳转至第一详情页面时，可以保存第一详情页面的新URL，新URL中包含params字符串，也即新URL中包含中间列表页面带有的查询条件。
步骤S340.根据所述第一详情页面的第一页面定位标识从所述中间列表页面跳转至所述第一详情页面。
得到params字符串后，可以调用参数Router的push方法，push方法入参为：{path,query:{o:params}}，携带params字符串跳转至path页面，实现了从中间列表页面跳转至第一详情页面。
示例性的，由options对象转换得到的params字符串为{”pageNum”:2,”pageSize”:10,”name”:”name1”,”type”:”type1”}，可以由第一详情页面的初始URL携带params字符串组成第一详情页面的当前URL，第一详情页面的当前URL可以为“/alarmMgmt/detail/1？o＝”pageNum”:2,”pageSize”:10,”name”:”name1”,”type”:”type1””。
一种示例实施方式中，由options对象转换得到的params字符串后，使用encodeURIComponent函数对该params字符串进行编码，得到编码后的params字符串为“％7BpageNum％3Apagesize％22…”，同样可以调用参数Router的push方法，携带编码后的params字符串跳转至path页面，实现了从中间列表页面跳转第一详情页面。示例性的，可以由第一详情页面的初始URL携带params字符串组成第一详情页面的当前URL，当前URL可以为“/alarmMgmt/detail/1？o＝％7BpageNum％3Apagesize％22…”。
一种示例实施方式中，由options对象转换得到的params字符串后，再使用encodeURIComponent函数对该params字符串进行编码，并对编码结果进行加密得到的params字符串为“JTdCJTIycGFnZU51…”，也可以调用参数Router的push方法，携带加密后的params字符串跳转至path页面，实现了从中间列表页面跳转第一详情页面。示例性的，可以由第一详情页面的初始URL携带params字符串组成第一详情页面的当前URL， 当前URL可以为“/alarmMgmt/detail/1？o＝％JTdCJTIycGFnZU51…”。
该示例中，使用vue-cli框架开发单页面应用时，只需要在列表页面源码中添加页面跳转函数，即可实现从列表页面跳转至详情页面。可以在页面跳转时记录查询条件，以从详情页面返回时可以读取该查询条件，并根据读取到的查询条件恢复上次的查询结果，无需修改详情页面，减少了用户的工作量，提高了用户的页面操作效率。
在步骤S220中，获取所述页面跳转参数，并根据所述页面跳转参数从所述详情页面跳转回所述列表页面。
本公开示例实施方式中，可以定义一个选项变量optionsDefault，选项变量可以用于保存页面跳转参数的默认值。例如，可以用于保存列表页面的初始查询条件，若初始查询条件为{pageNum:1,pageSize:10}，表示默认每页包含十条数据，并取第一页的数据进行展示。进入列表页面时默认会使用optionsDefault作为查询条件并获取对应的列表数据。可以理解的是，列表页面的查询条件为初始查询条件时，展示的是列表页面的初始状态，即原始列表页面。当用户查询第一页中某一数据的详情时，可以从原始列表页面跳转至该数据的详情页面，从该详情页面返回时，会使用optionsDefault作为查询条件，此时的optionsDefault为初始查询条件，根据初始查询条件获取的是第一页的列表数据，也就是可以从该详情页面直接跳转回原始列表页面。
当用户查询中间列表页面中某一数据的详情时，可以从中间列表页面跳转至该数据的详情页面，从该详情页面返回时，会使用optionsDefault作为查询条件，根据初始查询条件获取的是中间列表页面的列表数据，也就是可以从该详情页面跳转回中间列表页面。用户在详情页面查看目标数据的详细内容并从详情页面返回时，为了避免由于页面刷新导致从详情页面返回至原始列表页面而丢失了上次的查询结果，可以调用参数解析函数，并利用参数解析函数从详情页面返回保留上次查询结果的列表页面，即返回至中间列表页面。本公开示例实施方式中，参数解析函数可以是getQuery函数。示例性的，接收到用户对浏览器界面中页面回退控件的触发操作时，可以调用getQuery函数，以利用getQuery函数在进入列表页面前完成上次查询条件的获取和解析，从而便于根据解析结果恢复上次的查询结果，无需用户再次对列表页面进行筛选等操作，提高了用户的使用体验。
本公开示例实施方式中是使用Vue框架实现单页面应用的页面显示，因此，可以利用Vue Router组件内的导航守卫beforeRouteEnter钩子函数在页面渲染前调用getQuery函数。参考图4所示，可以根据步骤S410至步骤S430实现从详情页面跳转回保留上次查询结果的列表页面，例如，可以从第一详情页面跳转回中间列表页面。
步骤S410.通过参数解析函数获取所述目标参数字符串。
具体地，调用getQuery函数时，可以传入用于提取上次查询条件的参数，可以包括参数reg、from和next。其中，reg为正则表达式，利用reg可以匹配与当前列表页面对应的详情页面URL。from和next可以从beforeRouteEnter钩子函数中得到，from是对象类型数据，通过from可以获取进入列表页面前所在页面的信息，next是一个跳转函数， beforeRouteEnter钩子函数要求业务代码执行完毕后必须调用next函数，用于标志该函数的完成并进入页面加载流程。
传参完成后，可以利用getQuery函数获取目标参数字符串。示例性的，从第一详情页面返回时，可以先利用getQuery函数检验第一详情页面的第一页面定位标识是否满足获取目标参数字符串的条件。示例性的，当第一详情页面URL满足预设的匹配规则，且第一详情页面URL中包含预设参数时，就可以从第一详情页面URL中获取目标参数字符串，并从目标参数字符串中提取上次的查询条件。其中，预设的匹配规则可以是正则表达式reg的匹配规则，正则表达式reg可以是/^\/alarmMgmt\/detail.*$/，预设参数可以是名称为“o”的参数，即只有从以/alarmMgmt/detail开头并携带参数“o”的详情页面URL返回至列表页面时，才需要提取查询条件并根据查询条件恢复列表数据。举例而言，满足提取查询条件的详情页面URL可以为：/alarmMgmt/detail/92284？o＝JTdCJTIycGFnZVN…。
具体地，from.fullPath可以保存进入列表页面前所在页面的完整URL，该URL需要满足正则表达式reg的匹配规则，进入列表页面前所在页面可以是指定页面，如与列表页面对应的详情页面。同时，from.query中可以保存进入列表页面前所在页面URL携带的参数，该URL参数中需包含参数“o”。可知，详情页面URL满足正则表达式reg的匹配规则，若该URL中包含参数“o”，就可以从URL中提取上次的查询条件。需要说明的是，目标参数字符串保存在from.query.o变量中，因此只有URL参数中包含参数“o”时，才能提取到查询条件。可以理解的是，若进入列表页面前所在页面的URL不满足正则表达式reg的匹配规则，或者不满足URL参数中包含参数“o”时，可以表明此次页面跳转不是从指定详情页面跳转回列表页面，或者详情页面URL未携带查询条件，此时可以直接执行next()进入列表页面，也就是返回到列表页面的初始状态。
步骤S420.对所述目标参数字符串进行解析，得到所述页面跳转参数。
从第一详情页面URL中获取目标参数字符串后，可以对目标参数字符串进行解析也就是解析from.query.o变量，以得到页面跳转参数。示例性的，若该变量中的参数“o”即目标参数字符串为params字符串{”pageNum”:2,”pageSize”:10,”name”:”name1”,”type”:”type1”}时，可以将params字符串恢复成对象类型的数据options{pageNum:2,pageSize:10,name:'name1',type:'type1'}。
一种示例实施方式中，也可以对目标参数字符串进行解码，得到初始参数字符串，并将初始参数字符串转化为页面跳转参数。示例性的，若目标参数字符串为params字符串“％7BpageNum％3Apagesize％22…”时，可以使用decodeURIComponent函数对该params字符串进行解码，通过解码可以得到params字符串{”pageNum”:2,”pageSize”:10,”name”:”name1”,”type”:”type1”}，该params字符串即为初始参数字符串。然后，可以把该params字符串恢复成对象类型的数据options{pageNum:2,pageSize:10,name:'name1',type:'type1'}。
一种示例实施方式中，还可以对目标参数字符串进行解密，得到第一参数字符串，再对第一参数字符串进行解码，得到初始参数字符串，并将初始参数字符串转化为页面跳转 参数。示例性的，若从列表页面跳转至详情页面时，是先将options对象转换为params字符串，再使用encodeURIComponent函数编码params字符串，并对params字符串的编码结果进行Base64编码，通过加密params字符串的编码结果得到params字符串“JTdCJTIycGFnZU51…”时。在解析该params字符串时，可以先解码该params字符串。对应于编码顺序，可以先对该params字符串进行Base64解码以解密该params字符串，再使用decodeURIComponent函数对解密后的params字符串进行解码，解密后的params字符串即为第一参数字符串。通过解码可以得到params字符串{”pageNum”:2,”pageSize”:10,”name”:”name1”,”type”:”type1”}，该params字符串即为初始参数字符串。然后，可以把该params字符串恢复成对象类型的数据options{pageNum:2,pageSize:10,name:'name1',type:'type1'}。
步骤S430.根据所述页面跳转参数从所述第一详情页面跳转回所述中间列表页面。
提取到页面跳转参数后，可以将页面跳转参数的当前值赋值给选项变量optionsDefault，以根据赋值后的选项变量从第一详情页面跳转回中间列表页面。示例性的，赋值完成后，选项变量optionsDefault由初始查询条件{pageNum:1,pageSize:10}变为options{pageNum:2,pageSize:10,name:'name1',type:'type1'}，通过调用执行next()进入中间列表页面，也即实现了从详情页面跳转回保留上次查询结果的列表页面。
该示例中，使用Vue-cli框架开发单页面应用时，只需要在列表页面源码中添加参数解析函数，即可实现从详情页面跳转回保留上次查询结果的列表页面。从详情页面返回时通过读取之前记录的查询条件恢复列表页查询结果，无需修改详情页面源码，减少了用户的工作量，提高了用户的页面操作效率。
一种示例实施方式中，参考图5所示，可以根据步骤S510至步骤S580实现从详情页面跳转回列表页面。
步骤S510.检验是否可以提取查询条件，即可以通过from获取进入列表页面前所在页面的信息，其中from.fullPath保存了进入列表页面前所在页面的URL，from.query保存了进入列表页面前所在页面URL携带的参数。可以检验from.fullPath是否能匹配正则表达式reg，且from.query中是否包含参数o。若是，说明可以从进入列表页面前所在页面URL中提取查询条件，则执行步骤S520，若否，说明进入列表页面前所在页面URL中未携带查询条件，或者本次页面跳转不是由指定详情页面返回至列表页面，则执行步骤S570；
步骤S520.设置params字符串等于from.query.o变量，即进入列表页面前所在页面的URL参数o中包含params字符串，可以将params字符串存储至from.query.o变量中；
步骤S530.对params字符串进行解码，也就是对from.query.o变量进行解码；
步骤S540.对解码后的params字符串进行解密；
步骤S550.将解密得到的params字符串转换为options；
步骤S560.将options赋值给optionsDefault；
步骤S570.进入列表页面，如可以执行next()进入列表页面；
步骤S580.使用optionsDefault请求列表数据，渲染列表数据并通过终端设备向用户进行显示。
可以理解的是，当用户查询原始列表页面中某一数据的详情时，可以从原始列表页面跳转至该数据的详情页面。从该详情页面返回时，会使用optionsDefault作为查询条件，此时的optionsDefault赋值后仍为初始查询条件，根据初始查询条件获取的是第一页的列表数据，也就是可以从该详情页面直接跳转回列表页面的初始状态，同样实现了从详情页面返回列表页面时可以保留上次查询结果的功能。
本公开示例实施方式中，实现从详情页面返回列表页面时还可以保留上次查询结果需要两步。第一，修改列表页面源码中的页面跳转函数(如jump函数)，传入查询条件options的编码结果；第二，在列表页面源码中添加beforeRouteEnter钩子函数以调用参数解析函数(如getQuery函数)，可以通过参数解析函数在进入列表页面前读取和解析之前页面的URL参数来获得上次的查询条件options，并修改页面默认查询条件即选项变量optionsDefault为上次的查询条件options，即可完成列表页面上次查询结果的恢复。该方法只需要在列表页面源码中添加页面跳转函数和参数解析函数，无需修改详情页面源码，减少了用户完成该功能所需的工作量，提高了用户的操作效率。另外，还对URL参数进行了编码，增加了URL的安全性和美观性。
一种示例实施方式中，从中间列表页面跳转至第一目标数据对应的第一详情页面后，在第一详情页面中可以包括至少一个第二目标数据，第二目标数据可以是与第一目标数据的详细内容相关的列表数据。接收到对第一详情页面中第二目标数据的查询操作时，还可以根据步骤S210和步骤S220从第一详情页面跳转至第二目标数据对应的第二详情页面，并存储第二详情页面的页面定位标识。可以获取第二详情页面的页面定位标识中包含的页面跳转参数，并根据页面跳转参数从第二详情页面跳转回第一详情页面。
示例性的，从中间列表页面跳转至第一详情页面时，第一详情页面中还可以包含与第一目标数据的详细内容相关的多个列表数据。用户可以对第一详情页面中的多个列表数据进行筛选，得到筛选后的第一详情页面，此时的第一详情页面带有筛选条件。其他示例中，筛选后的第一详情页面也可以同时带有筛选条件和分页条件，本公开对此不作具体限定。然后，接收到对筛选后的第一详情页面中某一列表数据的查询操作时，可以根据步骤S310至步骤S340从筛选后的第一详情页面跳转至该列表数据对应的第二详情页面，并存储第二详情页面的页面定位标识。接收到用户对浏览器界面中页面回退控件的触发操作时，可以根据步骤S410至步骤S430获取第二详情页面的页面定位标识中包含的页面跳转参数，并根据页面跳转参数从第二详情页面跳转回筛选后的第一详情页面。
另一种示例实施方式中，从中间列表页面跳转至第一目标数据对应的第一详情页面后，在第一详情页面中可以包括至少一个第二目标数据，第二目标数据用来表示第一目标数据的详细内容。接收到对第一详情页面中第二目标数据的查询操作时，还可以从第一详情页面跳转至第二目标数据对应的第二详情页面，并存储第二详情页面的页面定位标识。可以 根据第二详情页面的页面定位标识确定第一详情页面的第一页面定位标识，并根据第一详情页面的第一页面定位标识从第二详情页面跳转回第一详情页面。
示例性的，从中间列表页面跳转至第一详情页面时，第一详情页面URL可以为“/alarmMgmt/detail/1？o＝％JTdCJTIycGFnZU51”。接收到对某一个第二目标数据的查询操作时，可以从第一详情页面跳转至该第二目标数据对应的第二详情页面。例如，第二详情页面URL可以为“/alarmMgmt/detail/1？o＝％JTdCJTIycGFnZU51/picture”，同时，可以将第二详情页面URL存储至浏览器中。从第二详情页面返回时，可以获取第二详情页面URL，以根据第二详情页面URL确定第一详情页面URL。举例而言，若获取的第二详情页面URL为“/alarmMgmt/detail/1？o＝％JTdCJTIycGFnZU51/picture”，由于第一详情页面URL是由第一详情页面的初始URL和参数o两部分组成，因此，可以确定第一详情页面URL为“/alarmMgmt/detail/1？o＝％JTdCJTIycGFnZU51”。最后，可以根据第一详情页面URL进入第一详情页面。
参考图6所示，示意性给出了一种用于运维服务的应用程序在运行时显示的列表页面。可以看出，图6显示的是列表页面的初始状态，即原始列表页面，对应的查询条件为“name:”,pageNum:1”，也就是无筛选条件下的第一页数据。该列表页面中包括列表页面URL“/workorderMgmt/Index”和6条列表数据，每条列表数据包括工单编号、工单名称和工单状态，如第一条列表数据为工单编号为202101的测试工单，该工单的当前状态为已解决。可以理解的是，列表页面中的每条列表数据均可以作为目标数据，用户选中某条列表数据时，也就是选中某个工单时，可以执行该工单对应的“查看详情”操作以从当前列表页面进入该工单的详情页面。其中，“工单编号”、“工单名称”和“工单状态”均可以作为筛选条件，页码和每页6条数据可以作为分页条件。另外，用户也可以直接选取目标页码前往对应的中间列表页面。
示例性的，当用户输入工单名称“禁止入侵”后，可以点击搜索按钮对100条列表数据进行筛选，筛选完成后可以向用户展示“禁止入侵”工单所在的列表页面。参考图7所示，示意性给出了带有筛选条件和分页条件的列表页面，即中间列表页面。可以看出，该列表页面对应的查询条件为“name:禁止入侵,pageNum:6”，该列表页面URL与图6中的列表页面URL相同，均为“/workorderMgmt/Index”，图7中的6条列表数据均为禁止入侵工单。
图7中的每条列表数据均可以作为第一目标数据，当用户执行某一条列表数据的查看详情操作时，可以从图7所示的列表页面跳转至该列表数据对应的详情页面。例如，当用户选择工单编号为202131的禁止入侵工单并执行查看详请操作时，可以从当前列表页面进入该工单的详情页面，如可以进入如图8A所示的详情页面。该详情页面中包括详情页面URL“/alarmMgmt/detail/92284？o＝JTdCJTIypemUlMjIlM0ExMCU”和6项详情数据，分别是工单名称、工单编号、工单状态、创建人、创建人联系方式、创建时间和相关图片。从该详情页面返回时，可以返回至图7所示的列表页面，直接向用户展示筛选条件为“禁止 入侵”的第6页列表数据，而不会返回至图6所示的列表页面，从详情页面返回列表页面时可以保留上次查询结果，便于用户进行查看，提高了用户体验。再例如，当用户选择工单编号为202131的禁止入侵工单并执行查看详请操作时，可以从当前列表页面进入该工单的详情页面，如也可以进入如图8B所示的详情页面。该详情页面中包括详情页面URL和工单名称、工单编号、工单状态等详情数据外，还包括与工单编号相关的6项列表数据，分别为禁止入侵地区1至禁止入侵地区6。可以看出，工单编号为202131的禁止入侵工单用于对禁止入侵地区1至禁止入侵地区6进行运维和管理。同样根据地区名称或地区状态可以对这6项列表数据进行筛选，例如可以得到如图8C所示的带有筛选条件为“解决中”的工单详情页面。
在图8A中，当详情数据还关联一个详情页面时，则可以将该详情数据作为第二目标数据。例如，当用户点击图片标识时，可以从图8A所示的详情页面跳转至如图9A所示的用于显示图片的详情页面，该详情页面URL为“/alarmMgmt/detail/92284？o＝JTdCJTIypemUlMjIlM0ExMCU/picture”。从该详情页面返回时，可以返回至图8A所示的详情页面，而不会返回至图7或图6所示的列表页面，页面返回过程中也可以保留上次查询结果，便于用户进行查看，提高了用户体验。
在图8C中，当筛选后的列表数据还关联一个详情页面时，则可以将该列表数据作为第二目标数据。当用户执行图8C中某一条列表数据的查看详情操作时，可以从图8C所示的筛选后的工单详情页面跳转至该列表数据对应的详情页面。例如，当用户执行禁止入侵地区1的查看详请操作时，可以从当前工单详情页面直接进入禁止入侵地区1的详情页面，如可以进入如图9B所示的详情页面，正方体区域表示禁止入侵地区1，椭圆区域用于表示禁止入侵地区1中的禁止入侵范围。从禁止入侵地区1的详情页面返回时，可以返回至图8C所示的详情页面，而不会返回至图8B所示的工单详情页面，也不会返回至图7或图6所示的列表页面。页面返回过程中可以保留上次查询结果，便于运维人员进行安全巡检时可以快速高效地确定下一个待查看的禁止入侵地区，以及可以针对突发的场地入侵行为进行及时管控和处理，进一步提高了用户体验。
可以理解的是，当用户执行图6中某一条列表数据的查看详情操作时，可以从图6所示的列表页面跳转至该列表数据对应的详情页面。从该详情页面返回时，可以跳转回图6所示的列表页面，即返回至列表页面的初始状态，同样也实现了从详情页面返回列表页面时可以保留上次查询结果的功能。
还需说明的是，本公开示例实施方式中可以预先将页面跳转函数、参数解析函数和选项变量封装为可执行文件并存储至浏览器中，以在接收到对列表页面中目标数据的查询操作时执行该可执行文件。该可执行文件中还可以包括参数reg、from和next等源码，以及用于编码和加密的算法源码等，也即可以根据用户的实际需求进行源码封装并得到用户所需的可执行文件，本公开对此不做具体限定。示例性的，可以在Vue框架下使用webpack(一种模块打包器)将列表页面源码、详情页面源码、页面跳转函数、参数解析函数和选 项变量等相关源码进行打包，并以文件夹形式存储于服务器中，用户在本地浏览器进行使用时可以向服务器进行数据请求，以请求诸如本公开涉及到的页面跳转函数、参数解析函数、选项变量optionsDefault、参数reg、from和next、encodeURIComponent函数和decodeURIComponent等相关源码。优选的，在用户首次进行列表页面URL地址访问时，即可将预先打包好的可执行文件共同部署至本地浏览器，可以避免频繁的向服务器进行数据请求。本公开所示例实施方式所提供的页面显示方法逻辑清晰、架构简单、轻量化、易实现，且不会占用过多内存。可以理解的是，该页面显示方法指在浏览器端进行数据处理。
在本公开示例实施方式所提供的页面显示方法中，通过接收到对列表页面中目标数据的查询操作时，从所述列表页面跳转至所述目标数据对应的详情页面，并存储所述详情页面的第一页面定位标识，所述第一页面定位标识中包含页面跳转参数；获取所述页面跳转参数，并根据所述页面跳转参数从所述详情页面跳转回所述列表页面。本公开从列表页面进入详情页面时可以保留页面跳转参数，再由详情页面返回时，可以根据页面跳转参数恢复之前的列表页面，避免了由于页面跳转导致的页面刷新，用户无需再次操作即可获取上次的查询结果，进而提升了用户体验。
应当注意，尽管在附图中以特定顺序描述了本公开中方法的各个步骤，但是，这并非要求或者暗示必须按照该特定顺序来执行这些步骤，或是必须执行全部所示的步骤才能实现期望的结果。附加的或备选的，可以省略某些步骤，将多个步骤合并为一个步骤执行，以及/或者将一个步骤分解为多个步骤执行等。
进一步的，本示例实施方式中，还提供了一种页面显示装置。该装置可以应用于一终端设备或服务器。参考图10所示，该页面显示装置1000可以包括第一页面显示模块1010和第二页面显示模块1020，其中：
第一页面显示模块1010，用于接收到对列表页面中目标数据的查询操作时，从所述列表页面跳转至所述目标数据对应的详情页面，并存储所述详情页面的第一页面定位标识，所述第一页面定位标识中包含页面跳转参数；
第二页面显示模块1020，用于获取所述页面跳转参数，并根据所述页面跳转参数从所述详情页面跳转回所述列表页面。
在一种可选的实施方式中，所述列表页面包括原始列表页面和中间列表页面；第一页面显示模块1010包括：
页面切换模块，用于接收到对所述原始列表页面中搜索控件的触发操作时，根据所述页面跳转参数将所述原始列表页面切换为所述中间列表页面；
页面跳转模块，用于接收到对所述中间列表页面中第一目标数据的查询操作时，从所述中间列表页面跳转至所述第一目标数据对应的第一详情页面，并存储所述第一详情页面的第一页面定位标识。
在一种可选的实施方式中，页面跳转模块包括：
参数获取单元，用于接收到对所述中间列表页面中第一目标数据的查询操作时，获取 所述页面跳转参数和所述第一详情页面的第二页面定位标识；
参数转换单元，用于通过页面跳转函数将所述页面跳转参数转换为目标参数字符串；
标识生成单元，用于由所述目标参数字符串和第二页面定位标识组成所述第一详情页面的第一页面定位标识；
第一页面跳转单元，用于根据所述第一详情页面的第一页面定位标识从所述中间列表页面跳转至所述第一详情页面。
在一种可选的实施方式中，参数转换单元包括：
参数转换子单元，用于将所述页面跳转参数转换为初始参数字符串；
字符串编码子单元，用于对所述初始参数字符串进行编码，得到所述目标参数字符串。
在一种可选的实施方式中，参数转换单元包括：
参数转换子单元，用于将所述页面跳转参数转换为初始参数字符串；
字符串编码子单元，用于对所述初始参数字符串进行编码，得到第一参数字符串；
字符串加密子单元，用于对所述第一参数字符串进行加密，得到所述目标参数字符串。
在一种可选的实施方式中，第二页面显示模块1020包括：
字符串获取模块，用于通过参数解析函数获取所述目标参数字符串；
字符串解析模块，用于对所述目标参数字符串进行解析，得到所述页面跳转参数；
第二页面跳转模块，用于根据所述页面跳转参数从所述第一详情页面跳转回所述中间列表页面。
在一种可选的实施方式中，字符串获取模块包括：
字符串校验单元，用于通过所述参数解析函数确定所述第一详情页面的第一页面定位标识是否满足预设的匹配规则，且所述第一页面定位标识中是否包含预设参数；
字符串获取单元，用于被配置为用于当所述详情页面的第一页面定位标识满足预设的匹配规则，且所述第一页面定位标识中包含预设参数时，获取所述目标参数字符串。
在一种可选的实施方式中，字符串解析模块包括：
字符串解码单元，用于对所述目标参数字符串进行解码，得到所述初始参数字符串，并将所述初始参数字符串转化为所述页面跳转参数。
在一种可选的实施方式中，字符串解析模块包括：
字符串解密单元，用于对所述目标参数字符串进行解密，得到所述第一参数字符串；
字符串解码单元，用于对所述第一参数字符串进行解码，得到所述初始参数字符串，并将所述初始参数字符串转化为所述页面跳转参数。
在一种可选的实施方式中，第二页面跳转模块包括：
参数赋值单元，用于将所述页面跳转参数的当前值赋值给选项变量，所述选项变量用于保存所述页面跳转参数的默认值；
页面跳转单元，用于根据赋值后的选项变量从所述第一详情页面跳转回所述中间列表页面。
在一种可选的实施方式中，从所述中间列表页面跳转至所述第一目标数据对应的第一详情页面后，页面显示装置1000还包括：
第三页面显示模块1030，用于接收到对所述第一详情页面中第二目标数据的查询操作时，从所述第一详情页面跳转至所述第二目标数据对应的第二详情页面，并存储所述第二详情页面的页面定位标识；获取所述第二详情页面的页面定位标识中包含的页面跳转参数，并根据所述页面跳转参数从所述第二详情页面跳转回所述第一详情页面。
在一种可选的实施方式中，从所述中间列表页面跳转至所述第一目标数据对应的第一详情页面后，页面显示装置1000还包括：
第三页面显示模块1040，用于接收到对所述第一详情页面中第二目标数据的查询操作时，从所述第一详情页面跳转至所述第二目标数据对应的第二详情页面，并存储所述第二详情页面的页面定位标识；根据所述第二详情页面的页面定位标识确定所述第一详情页面的第一页面定位标识；根据所述第一详情页面的第一页面定位标识从所述第二详情页面跳转回所述第一详情页面。
上述页面显示装置中各模块的具体细节已经在对应的页面显示方法中进行了详细的描述，因此此处不再赘述。
上述装置中各模块可以是通用处理器，包括：中央处理器、网络处理器等；还可以是数字信号处理器、专用集成电路、现场可编程门阵列或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。各模块也可以由软件、固件等形式来实现。上述装置中的各处理器可以是独立的处理器，也可以集成在一起。
本公开的示例性实施方式还提供了一种计算机可读存储介质，其上存储有能够实现本说明书上述方法的程序产品。在一些可能的实施方式中，本公开的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当程序产品在电子设备上运行时，程序代码用于使电子设备执行本说明书上述“示例性方法”部分中描述的根据本公开各种示例性实施方式的步骤。该程序产品可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在电子设备，例如个人电脑上运行。然而，本公开的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。
程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。
计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光 信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。
可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。
可以以一种或多种程序设计语言的任意组合来编写用于执行本公开操作的程序代码，程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。
本公开的示例性实施方式还提供了一种能够实现上述方法的电子设备。下面参照图11来描述根据本公开的这种示例性实施方式的电子设备1100。图11显示的电子设备1100仅仅是一个示例，不应对本公开实施方式的功能和使用范围带来任何限制。
如图11所示，电子设备1100可以以通用计算设备的形式表现。电子设备1100的组件可以包括但不限于：至少一个处理单元1110、至少一个存储单元1120、连接不同系统组件(包括存储单元1120和处理单元1110)的总线1130和显示单元1140。
存储单元1120存储有程序代码，程序代码可以被处理单元1110执行，使得处理单元1110执行本说明书上述“示例性方法”部分中描述的根据本公开各种示例性实施方式的步骤。例如，处理单元1110可以执行图2至图5中任意一个或多个方法步骤。
存储单元1120可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)1121和/或高速缓存存储单元1122，还可以进一步包括只读存储单元(ROM)1123。
存储单元1120还可以包括具有一组(至少一个)程序模块1125的程序/实用工具1124，这样的程序模块1125包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。
总线1130可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。
电子设备1100也可以与一个或多个外部设备1200(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备1100交互的设备通信，和/或与使得该电子设备1100能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口1150进行。并且，电子设备1100还可以通过网络适配器1160与一个或者多个网络(例如局域网(LAN)，广域网 (WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器1160通过总线1130与电子设备1100的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备1100使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。
通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、终端装置、或者网络设备等)执行根据本公开示例性实施方式的方法。
此外，上述附图仅是根据本公开示例性实施方式的方法所包括的处理的示意性说明，而不是限制目的。易于理解，上述附图所示的处理并不表明或限制这些处理的时间顺序。另外，也易于理解，这些处理可以是例如在多个模块中同步或异步执行的。
应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (16)

  1. 一种页面显示方法，其特征在于，包括：
    接收到对列表页面中目标数据的查询操作时，从所述列表页面跳转至所述目标数据对应的详情页面，并存储所述详情页面的第一页面定位标识，所述第一页面定位标识中包含页面跳转参数；
    获取所述页面跳转参数，并根据所述页面跳转参数从所述详情页面跳转回所述列表页面。
  2. 根据权利要求1所述的页面显示方法，其特征在于，所述列表页面包括原始列表页面和中间列表页面；所述接收到对列表页面中目标数据的查询操作时，从所述列表页面跳转至所述目标数据对应的详情页面，并存储所述详情页面的第一页面定位标识，包括：
    接收到对所述原始列表页面中搜索控件的触发操作时，根据所述页面跳转参数将所述原始列表页面切换为所述中间列表页面；
    接收到对所述中间列表页面中第一目标数据的查询操作时，从所述中间列表页面跳转至所述第一目标数据对应的第一详情页面，并存储所述第一详情页面的第一页面定位标识。
  3. 根据权利要求2所述的页面显示方法，其特征在于，所述接收到对所述中间列表页面中第一目标数据的查询操作时，从所述中间列表页面跳转至所述第一目标数据对应的第一详情页面，包括：
    接收到对所述中间列表页面中第一目标数据的查询操作时，获取所述页面跳转参数和所述第一详情页面的第二页面定位标识；
    通过页面跳转函数将所述页面跳转参数转换为目标参数字符串；
    由所述目标参数字符串和第二页面定位标识组成所述第一详情页面的第一页面定位标识；
    根据所述第一详情页面的第一页面定位标识从所述中间列表页面跳转至所述第一详情页面。
  4. 根据权利要求3所述的页面显示方法，其特征在于，所述通过页面跳转函数将所述页面跳转参数转换为目标参数字符串，包括：
    将所述页面跳转参数转换为初始参数字符串；
    对所述初始参数字符串进行编码，得到所述目标参数字符串。
  5. 根据权利要求3所述的页面显示方法，其特征在于，所述通过页面跳转函数将所述页面跳转参数转换为目标参数字符串，包括：
    将所述页面跳转参数转换为初始参数字符串；
    对所述初始参数字符串进行编码，得到第一参数字符串；
    对所述第一参数字符串进行加密，得到所述目标参数字符串。
  6. 根据权利要求3所述的页面显示方法，其特征在于，所述获取所述页面跳转参数，并根据所述页面跳转参数从所述详情页面跳转回所述列表页面，包括：
    通过参数解析函数获取所述目标参数字符串；
    对所述目标参数字符串进行解析，得到所述页面跳转参数；
    根据所述页面跳转参数从所述第一详情页面跳转回所述中间列表页面。
  7. 根据权利要求6所述的页面显示方法，其特征在于，所述通过参数解析函数获取所述目标参数字符串，包括：
    通过所述参数解析函数确定所述第一详情页面的第一页面定位标识是否满足预设的匹配规则，且所述第一页面定位标识中是否包含预设参数；
    当所述第一详情页面的第一页面定位标识满足预设的匹配规则，且所述第一页面定位标识中包含预设参数时，获取所述目标参数字符串。
  8. 根据权利要求6所述的页面显示方法，其特征在于，所述对所述目标参数字符串进行解析，得到所述页面跳转参数，包括：
    对所述目标参数字符串进行解码，得到所述初始参数字符串，并将所述初始参数字符串转化为所述页面跳转参数。
  9. 根据权利要求6所述的页面显示方法，其特征在于，所述对所述目标参数字符串进行解析，得到所述页面跳转参数，包括：
    对所述目标参数字符串进行解密，得到所述第一参数字符串；
    对所述第一参数字符串进行解码，得到所述初始参数字符串，并将所述初始参数字符串转化为所述页面跳转参数。
  10. 根据权利要求6所述的页面显示方法，其特征在于，所述根据所述页面跳转参数从所述第一详情页面跳转回所述中间列表页面，包括：
    将所述页面跳转参数的当前值赋值给选项变量，所述选项变量用于保存所述页面跳转参数的默认值；
    根据赋值后的选项变量从所述第一详情页面跳转回所述中间列表页面。
  11. 根据权利要求2所述的页面显示方法，其特征在于，从所述中间列表页面跳转至所述第一目标数据对应的第一详情页面后，所述方法还包括：
    接收到对所述第一详情页面中第二目标数据的查询操作时，通过如权利要求2至权利要求10任一项所述的页面显示方法，从所述第一详情页面跳转至所述第二目标数据对应的第二详情页面，并存储所述第二详情页面的页面定位标识；
    获取所述第二详情页面的页面定位标识中包含的页面跳转参数，并根据所述页面跳转参数从所述第二详情页面跳转回所述第一详情页面。
  12. 根据权利要求2所述的页面显示方法，其特征在于，从所述中间列表 页面跳转至所述第一目标数据对应的第一详情页面后，所述方法还包括：
    接收到对所述第一详情页面中第二目标数据的查询操作时，从所述第一详情页面跳转至所述第二目标数据对应的第二详情页面，并存储所述第二详情页面的页面定位标识；
    根据所述第二详情页面的页面定位标识确定所述第一详情页面的第一页面定位标识；
    根据所述第一详情页面的第一页面定位标识从所述第二详情页面跳转回所述第一详情页面。
  13. 根据权利要求1-12任一项所述的页面显示方法，其特征在于，预先将所述页面跳转函数、参数解析函数和选项变量封装为可执行文件并存储至浏览器中，以在接收到对列表页面中目标数据的查询操作时执行所述可执行文件，其中：
    所述页面跳转函数，用于将所述页面跳转参数转换为目标参数字符串；由所述目标参数字符串和第二页面定位标识组成所述第一详情页面的第一页面定位标识；根据所述第一详情页面的第一页面定位标识从所述中间列表页面跳转至所述第一详情页面；
    所述参数解析函数，用于获取所述目标参数字符串；对所述目标参数字符串进行解析，得到所述页面跳转参数；根据所述页面跳转参数从所述第一详情页面跳转回所述中间列表页面；
    所述选项变量，用于保存所述页面跳转参数的默认值。
  14. 一种页面显示装置，其特征在于，包括：
    第一页面显示模块，用于接收到对列表页面中目标数据的查询操作时，从所述列表页面跳转至所述目标数据对应的详情页面，并存储所述详情页面的第一页面定位标识，所述第一页面定位标识中包含页面跳转参数；
    第二页面显示模块，用于获取所述页面跳转参数，并根据所述页面跳转参数从所述详情页面跳转回所述列表页面。
  15. 一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1-13任一项所述方法。
  16. 一种电子设备，其特征在于，包括：
    处理器；以及
    存储器，用于存储所述处理器的可执行指令；
    其中，所述处理器配置为经由执行所述可执行指令来执行权利要求1-13任一项所述的方法。
PCT/CN2021/134079 2021-11-29 2021-11-29 页面显示方法、装置、存储介质及电子设备 WO2023092580A1 (zh)

Priority Applications (3)

Application Number Priority Date Filing Date Title
PCT/CN2021/134079 WO2023092580A1 (zh) 2021-11-29 2021-11-29 页面显示方法、装置、存储介质及电子设备
US18/712,783 US20250013705A1 (en) 2021-11-29 2021-11-29 Page display method and apparatus, storage medium, and electronic device
CN202180003647.8A CN116569165B (zh) 2021-11-29 2021-11-29 页面显示方法、装置、存储介质及电子设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
PCT/CN2021/134079 WO2023092580A1 (zh) 2021-11-29 2021-11-29 页面显示方法、装置、存储介质及电子设备

Publications (1)

Publication Number Publication Date
WO2023092580A1 true WO2023092580A1 (zh) 2023-06-01

Family

ID=86538732

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2021/134079 WO2023092580A1 (zh) 2021-11-29 2021-11-29 页面显示方法、装置、存储介质及电子设备

Country Status (3)

Country Link
US (1) US20250013705A1 (zh)
CN (1) CN116569165B (zh)
WO (1) WO2023092580A1 (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117435192A (zh) * 2023-12-21 2024-01-23 厦门她趣信息技术有限公司 一种基于Vue框架的项目架构管理方法
CN118094596A (zh) * 2024-03-11 2024-05-28 北京轻松怡康信息技术有限公司 一种页面链接的参数加密方法及装置

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117112913B (zh) * 2023-10-23 2024-02-13 腾讯科技（深圳）有限公司 数据处理方法、装置、设备及存储介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108241633A (zh) * 2016-12-23 2018-07-03 百度在线网络技术（北京）有限公司 快速切换网页的方法和装置
CN111428164A (zh) * 2020-03-27 2020-07-17 五八有限公司 页面显示方法、装置、移动终端、电子设备及存储介质
WO2020215211A1 (zh) * 2019-04-23 2020-10-29 深圳开源互联网安全技术有限公司 一种站点会话终止方法、装置、终端设备及介质
CN112612988A (zh) * 2020-12-28 2021-04-06 深圳壹账通智能科技有限公司 页面处理方法、装置、计算机设备及存储介质

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109871209A (zh) * 2018-12-30 2019-06-11 贝壳技术有限公司 列表页面状态恢复方法及装置
CN113536177B (zh) * 2020-04-15 2022-07-05 武汉斗鱼鱼乐网络科技有限公司 一种页面跳转方法、装置、服务器和存储介质
CN113468443B (zh) * 2021-06-28 2024-10-29 康键信息技术（深圳）有限公司 页面返回方法、装置、设备及存储介质

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108241633A (zh) * 2016-12-23 2018-07-03 百度在线网络技术（北京）有限公司 快速切换网页的方法和装置
WO2020215211A1 (zh) * 2019-04-23 2020-10-29 深圳开源互联网安全技术有限公司 一种站点会话终止方法、装置、终端设备及介质
CN111428164A (zh) * 2020-03-27 2020-07-17 五八有限公司 页面显示方法、装置、移动终端、电子设备及存储介质
CN112612988A (zh) * 2020-12-28 2021-04-06 深圳壹账通智能科技有限公司 页面处理方法、装置、计算机设备及存储介质

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117435192A (zh) * 2023-12-21 2024-01-23 厦门她趣信息技术有限公司 一种基于Vue框架的项目架构管理方法
CN118094596A (zh) * 2024-03-11 2024-05-28 北京轻松怡康信息技术有限公司 一种页面链接的参数加密方法及装置

Also Published As

Publication number Publication date
CN116569165A (zh) 2023-08-08
CN116569165B (zh) 2024-09-20
US20250013705A1 (en) 2025-01-09

Similar Documents

Publication Publication Date Title
CN108984714B (zh) 页面渲染方法、装置、电子设备及计算机可读介质
WO2018095306A1 (zh) 应用程序页面处理方法、装置及存储介质
JP2020194567A (ja) ウェブコンテンツ生成方法およびシステム
CN116569165B (zh) 页面显示方法、装置、存储介质及电子设备
US8499099B1 (en) Converting data into addresses
JP2016194947A (ja) ワークフロー生成、配置、及び／又は実行のためのシステム、方法、及びグラフィカルユーザインターフェイス
US20190340230A1 (en) System and method for generating websites from predefined templates
US11882154B2 (en) Template representation of security resources
WO2023169215A1 (zh) 页面显示方法、装置、存储介质及电子设备
CN113076294B (zh) 一种信息分享方法和装置
US11275805B2 (en) Dynamically tagging webpages based on critical words
CN108959294B (zh) 一种访问搜索引擎的方法和装置
CN109284488B (zh) 基于本地存储修改前端表格列数据的方法、装置及介质
CN113342450A (zh) 页面处理的方法、装置、电子设备及计算机可读介质
CN110968314A (zh) 一种页面生成方法及装置
US8875094B2 (en) System and method for implementing intelligent java server faces (JSF) composite component generation
CN113312053A (zh) 一种数据处理的方法和装置
US20200272679A1 (en) Missing web page relocation
US9858250B2 (en) Optimized read/write access to a document object model
CN112905164B (zh) 一种项目代码处理方法和装置
CN114528510A (zh) 网页数据处理的方法、装置、电子设备及介质
WO2023066063A1 (en) Replaying a webpage based on virtual document object model
CN111988405A (zh) 负载均衡装置的报文重写方法及负载均衡装置
CN111125565A (zh) 一种在应用中输入信息的方法与设备
CN114675867B (zh) 一种数据处理方法、装置、服务器以及存储介质

Legal Events

Date Code Title Description
WWE Wipo information: entry into national phase

Ref document number: 202180003647.8

Country of ref document: CN

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

Ref document number: 21965309

Country of ref document: EP

Kind code of ref document: A1

WWE Wipo information: entry into national phase

Ref document number: 18712783

Country of ref document: US

NENP Non-entry into the national phase

Ref country code: DE

32PN Ep: public notification in the ep bulletin as address of the adressee cannot be established

Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205A DATED 19.09.2024)