A method and system for restoring query conditions after front-end page refresh

Abstract

The present invention discloses a method and system for restoring query conditions after a front-end page is refreshed, the method comprising the following steps: obtaining the query conditions of the front-end page; setting a decorator of a route and a decorator of a query object; using the decorator of the route to save the query conditions in the route; performing type conversion on the query conditions on the route to obtain query conditions of a corresponding type; using the decorator of the query object to save the query conditions of the corresponding type in the query object to restore the query conditions. The present invention solves the problem that the query conditions input or selected are easily lost due to the refresh of the front-end page, which brings inconvenience to the user.

Description

Technical Field

[0001] The present invention relates to the technical field of front-end data processing, and in particular to a method and system for restoring query conditions after a front-end page is refreshed. Background Art

[0002] In Web application development, the front-end page is the direct interface for users to interact with the server, and is responsible for receiving user input, displaying query results, and other important tasks. However, in actual applications, after users enter or select query conditions on the front-end page for query, if the page is refreshed, the query conditions are often easily lost, which means that users need to re-enter or re-select these conditions, which undoubtedly brings a lot of inconvenience to users in scenarios with frequent queries or many query conditions. Summary of the invention

[0003] In view of the above defects, the present invention proposes a method and system for restoring query conditions after refreshing the front-end page, aiming to solve the problem that the query conditions input or selected are easily lost due to refreshing the front-end page, causing inconvenience to the user.

[0004] To achieve this object, the present invention adopts the following technical solutions:

[0005] A method for restoring query conditions after a front-end page is refreshed, comprising the following steps:

[0006] Step S1: Obtain the query conditions of the front-end page;

[0007] Step S2: Set the decorator of the route and the decorator of the query object;

[0008] Step S3: Use the route decorator to save the query conditions in the route;

[0009] Step S4: convert the query condition on the route into a corresponding type of query condition;

[0010] Step S5: Use the decorator of the query object to save the query condition of the corresponding type in the query object to restore the query condition.

[0011] Preferably, in step S2, the following steps are also included: extending the eslintConfig configuration item.

[0012] Preferably, step S4 specifically includes the following sub-steps: using the getRouteParams method to perform type conversion on the query condition on the route, wherein the JSON.parse() function is used in the getRouteParams method.

[0013] Another aspect of the present application provides a system for restoring query conditions after a front-end page is refreshed, the system comprising:

[0014] The acquisition module is used to obtain the query conditions of the front-end page;

[0015] The settings module is used to set the decorator of the route and the decorator of the query object;

[0016] The first saving module is used to save the query conditions in the route using the route decorator;

[0017] The type conversion module is used to convert the query conditions on the route to obtain the query conditions of the corresponding type;

[0018] The second saving module is used to save the query conditions of the corresponding type in the query object using the decorator of the query object to restore the query conditions.

[0019] Preferably, an extension module is also included, and the extension module is used to extend the eslintConfig configuration items.

[0020] Preferably, the type conversion module includes a conversion submodule, and the conversion submodule is used to convert the query conditions on the route by using a getRouteParams method, wherein the JSON.parse() function is used in the getRouteParams method.

[0021] The technical solution provided by the embodiments of the present application may have the following beneficial effects:

[0022] This solution can quickly restore the lost query conditions in the front-end page by setting the decorator of the route and the decorator of the query object, and adding and using them in the corresponding places respectively, without requiring the user to re-enter or select these conditions due to the loss of query conditions, which brings convenience to users. In addition, decorators allow new functions to be added without modifying the original object or class code. Therefore, when restoring query conditions, you only need to use decorators to enhance their functions. This flexibility makes this method more adaptable to the rapidly changing and iterative front-end development environment. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] Figure 1 It is a flowchart of the steps of a method for restoring query conditions after refreshing the front-end page. DETAILED DESCRIPTION

[0024] The embodiments of the present invention are described in detail below, and examples of the embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals represent the same or similar elements or elements having the same or similar functions from beginning to end. The embodiments described below with reference to the accompanying drawings are exemplary and are only used to explain the present invention, and cannot be understood as limiting the present invention.

[0025] A method for restoring query conditions after a front-end page is refreshed, comprising the following steps:

[0026] Step S1: Obtain the query conditions of the front-end page;

[0027] Step S2: Set the decorator of the route and the decorator of the query object;

[0028] Step S3: Use the route decorator to save the query conditions in the route;

[0029] Step S4: convert the query condition on the route into a corresponding type of query condition;

[0030] Step S5: Use the decorator of the query object to save the query condition of the corresponding type in the query object to restore the query condition.

[0031] A method of restoring query conditions after refreshing the front-end page in this solution, such as Figure 1As shown, the first step is to obtain the query conditions of the front-end page. In this embodiment, the user enters or selects the query conditions on the front-end page, such as name, age, etc. The second step is to set the decorator of the route and the decorator of the query object. In this embodiment, the decorator of the route specifically saves the query conditions to the decorator of the route @storeRouteParams(), and the decorator of the query object specifically restores the query conditions on the route to the decorator of the query object @restoreRouteParams(). The query object is the query condition object bound to the page. By setting the decorator, it is convenient to add it to the corresponding place later to complete the restoration of the query conditions in the page. The third step is to use the decorator of the route to save the query conditions in the route. Specifically, when the user enters or selects the query conditions and is ready to call the query interface, the decorator of the route is added, and the decorator of the route saves the query conditions to the route. The fourth step is to convert the query conditions on the route to obtain the corresponding type of query conditions. Specifically, since the query conditions on the route are all string types, the query conditions on the route are converted to the type expected by the back-end interface. The fifth step is to use the decorator of the query object to save the corresponding type of query conditions in the query object to restore the query conditions. In this embodiment, the decorator of the query object is added before the page creation method, such as mounted in Vue. The decorator of the query object saves the corresponding type of query conditions in the query object. Since the front-end query control is bound to the query object, when the query object is assigned, the query conditions can be automatically updated to the front-end query control, thereby realizing the recovery of the query conditions.

[0032] This solution can quickly restore the lost query conditions in the front-end page by setting the decorator of the route and the decorator of the query object, and adding and using them in the corresponding places respectively, without requiring the user to re-enter or select these conditions due to the loss of query conditions, which brings convenience to users. In addition, decorators allow new functions to be added without modifying the original object or class code. Therefore, when restoring query conditions, you only need to use decorators to enhance their functions. This flexibility makes this method more adaptable to the rapidly changing and iterative front-end development environment.

[0033] Preferably, in step S2, the following steps are further included: extending the eslintConfig configuration item. In this embodiment, the eslintConfig configuration item is a configuration item of an ECMAScript grammar rule and code style checking tool. By extending the eslintConfig configuration item, it is possible to check whether the decorators of the route and the decorators of the query object are written correctly.

[0034] Preferably, in step S4, the following sub-steps are specifically included: the query condition on the route is converted into a type using the getRouteParams method, wherein the JSON.parse() function is used in the getRouteParams method. In this embodiment, the getRouteParams method is used to obtain parameters from the route and convert these parameters into corresponding types, so the getRouteParams method can be used for type conversion. When the getRouteParams method is written, since the purpose is to parse a string in JSON format from the route parameters and convert it into a JavaScript object, the JSON.parse() function can be used in the getRouteParams method. The JSON.parse() function is a built-in function in JavaScript, which is used to convert a JSON string into a JavaScript object. In one embodiment, when the digital string "1" needs to be converted, the JSON.parse() function can be used to convert the digital string "1" into the corresponding JavaScript number type "1". However, when the digital string is too long, such as "6545584554555655455544", it is assumed that it is not a digital string and belongs to the category of account or ID, and then no type conversion is required.

[0035] Another aspect of the present application provides a system for restoring query conditions after a front-end page is refreshed, the system comprising:

[0036] The acquisition module is used to obtain the query conditions of the front-end page;

[0037] The settings module is used to set the decorator of the route and the decorator of the query object;

[0038] The first saving module is used to save the query conditions in the route using the route decorator;

[0039] The type conversion module is used to convert the query conditions on the route to obtain the query conditions of the corresponding type;

[0040] The second saving module is used to save the query conditions of the corresponding type in the query object using the decorator of the query object to restore the query conditions.

[0041] The present invention provides a system for recovering query conditions after refreshing the front-end page. Through the cooperation of an acquisition module, a setting module, a first saving module, a type conversion module and a second saving module, the system can quickly recover the query conditions lost in the front-end page. The user does not need to re-enter or select these conditions due to the loss of the query conditions, which brings convenience to the user.

[0042] Preferably, an extension module is also included, and the extension module is used to extend the eslintConfig configuration item. In this embodiment, by setting the extension module, it is possible to check whether the decorator of the route and the decorator of the query object are written correctly.

[0043] Preferably, the type conversion module includes a conversion submodule, and the conversion submodule is used to perform type conversion on the query conditions on the route using the getRouteParams method, wherein the JSON.parse() function is used in the getRouteParams method. In this embodiment, the getRouteParams method is used to obtain parameters from the route and convert these parameters into corresponding types. Therefore, the getRouteParams method can be used for type conversion. When the getRouteParams method is written, since the purpose is to parse a string in JSON format from the route parameters and convert it into a JavaScript object, the JSON.parse() function can be used in the getRouteParams method. The JSON.parse() function is a built-in function in JavaScript, which is used to convert a JSON string into a JavaScript object.

[0044] In addition, each functional unit in each embodiment of the present invention may be integrated into a processing module, or each unit may exist physically separately, or two or more units may be integrated into one module. The above-mentioned integrated module may be implemented in the form of hardware or in the form of a software functional module. If the integrated module is implemented in the form of a software functional module and sold or used as an independent product, it may also be stored in a computer-readable storage medium.

[0045] Although the embodiments of the present invention have been shown and described above, it is to be understood that the above embodiments are exemplary and are not to be construed as limitations of the present invention. A person skilled in the art may change, modify, replace and vary the above embodiments within the scope of the present invention.

Claims

1. A method for restoring query conditions after refreshing a front-end page, characterized in that: The following steps are involved: Step S1: Obtain the query conditions of the front-end page; Step S2: Set the decorator of the route and the decorator of the query object; Step S3: Use the route decorator to save the query conditions in the route; Step S4: convert the query condition on the route into a corresponding type of query condition; Step S5: using the decorator of the query object to save the query condition of the corresponding type in the query object to restore the query condition; In step S4, the following sub-steps are specifically included: using the getRouteParams method to convert the query condition on the route into a type, wherein the JSON.parse() function is used in the getRouteParams method, and the JSON.parse() function is used to convert a JSON string into a JavaScript object; Using the getRouteParams method to convert the query conditions on the route includes the following sub-steps: Parse the JSON formatted string from the route parameters and convert it into a JavaScript object using the JSON.parse() function.

2. A method for restoring query conditions after a front-end page is refreshed according to claim 1, characterized in that: In step S2, the following steps are also included: extending the eslintConfig configuration item, where the eslintConfig configuration item is a configuration item of a tool for checking ECMAScript syntax rules and code style.

3. A system for restoring query conditions after a front-end page is refreshed, characterized in that: The method for restoring query conditions after refreshing the front-end page as claimed in any one of claims 1 to 2 is applied, and the system comprises: The acquisition module is used to obtain the query conditions of the front-end page; The settings module is used to set the decorator of the route and the decorator of the query object; The first saving module is used to save the query conditions in the route using the route decorator; The type conversion module is used to convert the query conditions on the route to obtain the query conditions of the corresponding type; The second saving module is used to save the query conditions of the corresponding type in the query object using the decorator of the query object to restore the query conditions; The type conversion module includes a conversion submodule, and the conversion submodule is used to convert the query conditions on the route using the getRouteParams method, wherein the JSON.parse() function is used in the getRouteParams method, and the JSON.parse() function is used to convert a JSON string into a JavaScript object; The conversion submodule comprises: The parsing subunit is used to parse the JSON format string from the route parameters; The conversion subunit is used to convert a JSON formatted string into a JavaScript object using the JSON.parse() function.

4. A system for restoring query conditions after refreshing a front-end page according to claim 3, characterized in that: It also includes an extension module, which is used to extend the eslintConfig configuration item. The eslintConfig configuration item is a configuration item of a checking tool for ECMAScript grammar rules and code style.

Images