A binding method, device and medium

Abstract

This application discloses a binding method, device, and medium, comprising: collecting a first rule configured by a preset Vue directive in a page component when the page loads; wherein the preset Vue directive is a directive set corresponding to an attribute in the page component; reading the page address parameter of the page, and assigning the page address parameter to the attribute corresponding to the page address parameter in the page component based on the first rule; monitoring the attributes in the page component, and when the attribute value of any attribute changes, obtaining the changed attribute value, and updating the changed attribute value to the page address based on the first rule corresponding to the attribute. In this way, by pre-configuring Vue directives and rules, two-way binding between the page address and page data is achieved, reducing code invasiveness, and providing a concise and efficient solution that lowers development costs.

Description

Technical Field

[0001] This application relates to the field of web page technology, and in particular to a binding method, device and medium. Background Technology

[0002] With the development of the internet, web pages are widely used. Recording form data entered by users and the page state during operations has become an important feature for improving user experience. In existing technologies, it's common to write code to assign attribute values ​​from component data to the page address one by one, obtain page address parameters, and then assign them back to the component data attributes. Both of these conversion processes require type checking and conversion. However, page address parameters are numerous and have diverse attributes, requiring monitoring multiple attributes and assigning values. This results in a large amount of code, strong intrusion, and a high risk of errors, leading to high development and maintenance costs. In summary, in developing this invention, the inventors discovered that existing technologies suffer from strong code intrusion and high development and maintenance costs. Summary of the Invention

[0003] In view of this, the purpose of this application is to provide a binding method, device, and medium that reduces code invasiveness, is concise and efficient, and lowers development costs. The specific solution is as follows:

[0004] Firstly, this application discloses a binding method, including:

[0005] When the page loads, the first rule configured by the preset Vue directives in the page components is collected; wherein, the preset Vue directives are directives set corresponding to the attributes in the page components;

[0006] Read the page address parameter of the page, and assign the page address parameter to the attribute corresponding to the page address parameter in the page component based on the first rule;

[0007] Listen to the attributes in the page component. When the value of any attribute changes, obtain the changed attribute value and update the page address with the changed attribute value based on the first rule corresponding to the attribute.

[0008] Optionally, the first rule includes the page address parameter name, attribute value type, and attribute location information;

[0009] Accordingly, assigning the page address parameter to the attribute corresponding to the page address parameter in the page component based on the first rule includes:

[0010] Locate the page address parameter corresponding to the page address parameter name, and decode the parameter value of the page address parameter based on the attribute value type to obtain the decoded value;

[0011] Based on the attribute location information, the decoded value is assigned to the attribute corresponding to the page address parameter in the page component.

[0012] Optionally, updating the changed attribute value to the page address based on the first rule corresponding to the attribute includes:

[0013] The changed attribute value is encoded using the Uniform Resource Locator (URL) system to obtain the encoded value;

[0014] Based on the page address parameter name in the first rule corresponding to the attribute, the encoded value is updated to the page address parameter corresponding to the page address parameter name.

[0015] Optionally, the first rule configured by the preset Vue directive in the collection page component includes:

[0016] Collect the first rule configured by the preset Vue directives in the page components;

[0017] The first rule is stored in the first mapping structure; in the first mapping structure, the page address parameter name is the key, and the attribute value type and attribute location information are the values.

[0018] Optionally, assigning the page address parameter to the attribute corresponding to the page address parameter in the page component based on the first rule includes:

[0019] Traverse the first mapping structure and assign the page address parameter to the attribute corresponding to the page address parameter in the page component based on the first rule.

[0020] Optional, also includes:

[0021] When the page loads, collect the second rule configured by the preset Vue directives in the page components; the second rule is the callback function name.

[0022] The method further includes: invoking the callback function of the page component based on the second rule.

[0023] Optional, also includes:

[0024] Store the second rule into the second mapping structure; wherein, in the second mapping structure, the key is the identifier of the page component, and the value is the name of the callback function;

[0025] Accordingly, the step of invoking the callback function of the page component based on the second rule includes:

[0026] Traverse the second mapping structure and call the callback function of the page component based on the second rule.

[0027] Optionally, the step of obtaining the changed attribute value when the attribute value of any attribute changes, and updating the page address with the changed attribute value based on the first rule corresponding to the attribute, includes:

[0028] When the value of any attribute changes, the changed attribute value is obtained. If the attribute value does not change again within a preset time, the changed attribute value is updated to the page address based on the first rule corresponding to the attribute. If the attribute value changes again within the preset time, the timer is restarted.

[0029] Secondly, this application discloses a binding device, comprising:

[0030] The rule collection module is used to collect the first rules configured by the preset Vue directives in the page components when the page loads; wherein, the preset Vue directives are directives set corresponding to the attributes in the page components;

[0031] The attribute assignment module is used to read the page address parameter of the page and assign the page address parameter to the attribute corresponding to the page address parameter in the page component based on the first rule.

[0032] The parameter update module is used to monitor the attributes in the page components. When the attribute value of any attribute changes, the module obtains the changed attribute value and updates the page address with the changed attribute value based on the first rule corresponding to the attribute.

[0033] Thirdly, this application discloses an electronic device, including:

[0034] Memory, used to store computer programs;

[0035] A processor for executing the computer program to implement the aforementioned binding method.

[0036] Fourthly, this application discloses a computer-readable storage medium for storing a computer program, which, when executed by a processor, implements the aforementioned binding method.

[0037] As can be seen, during page loading, the first rule configured by the preset Vue directives in the page components is collected. These preset Vue directives are directives set to correspond to attributes in the page components. Then, the page address parameter is read, and based on the first rule, the page address parameter is assigned to the attribute corresponding to the page address parameter in the page component. The attributes in the page component are monitored; when the value of any attribute changes, the changed attribute value is obtained, and the changed attribute value is updated in the page address based on the first rule corresponding to that attribute. In other words, this application pre-sets Vue directives in the page components and configures rules based on these directives. During page loading, the page address parameter is assigned to the attributes in the page components based on the pre-configured rules, and the attributes in the page components are monitored. When the value of any attribute changes, the changed attribute value is updated in the page address based on the rule corresponding to that attribute.

[0038] As can be seen, the beneficial effects of this invention are: by pre-configuring Vue directives and rules, two-way binding of page addresses and page data can be achieved, which can reduce code invasiveness, and is simple, efficient, and reduces development costs. Attached Figure Description

[0039] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of this application. For those skilled in the art, other drawings can be obtained based on the provided drawings without creative effort.

[0040] Figure 1 A flowchart of a binding method provided in an embodiment of this application;

[0041] Figure 2 A flowchart illustrating a specific binding method provided in this application embodiment;

[0042] Figure 3 A flowchart illustrating a two-way binding process provided in this application embodiment;

[0043] Figure 4 This application provides a schematic diagram illustrating the process of assigning page address parameters to component data in an embodiment of the present application.

[0044] Figure 5 This application provides a schematic diagram illustrating the process of updating component data to a page address in an embodiment of the present application.

[0045] Figure 6 This is a schematic diagram of a binding device structure provided in an embodiment of this application;

[0046] Figure 7This is a structural diagram of an electronic device provided in an embodiment of this application. Detailed Implementation

[0047] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0048] In existing technologies, the common practice is to write code to assign attribute values ​​from component data to the URL (page address) one by one, obtain page address parameters, and then assign them back to the component data attributes through code. Both of these conversion processes require type checking and conversion. For example, if `data.hobbies` is a string array and needs to be recorded in the URL, the steps required are: monitoring changes in the `hobbies` value, encoding the `hobbies` value into a string, URL-encoding the string, updating the URL, and after the page refreshes, retrieving the data from the URL, URL-decoding the data, and converting the resulting string into a specific string array. However, page address parameters are numerous and attributes are diverse, requiring monitoring multiple attributes and assigning values. In short, existing solutions still require writing a large amount of code for initialization and monitoring, resulting in large amounts of code, strong intrusion, and a high risk of errors, leading to high development and maintenance costs. Therefore, this application provides a binding scheme that reduces code intrusion, is concise and efficient, and lowers development costs.

[0049] See Figure 1 As shown in the figure, this application discloses a binding method, including:

[0050] Step S11: When the page loads, collect the first rules configured by the preset Vue directives in the page components; wherein the preset Vue directives are directives set corresponding to the attributes in the page components.

[0051] In this embodiment, Vue directives can be pre-set in page components, and a first rule can be configured in the pre-set Vue directives; wherein, the pre-set Vue directives correspond one-to-one with the attributes in the page components. Furthermore, the first rule includes the page address parameter name, attribute value type, and attribute positioning information. A code example is as follows:

[0052]

[0053] Vue is a popular JavaScript framework for building modern web applications. This embodiment configures Vue directives in the page components of the code template to achieve two-way data binding, ensuring automatic synchronization between data and UI elements. This means that changes to data are automatically reflected on the UI, and when the user interacts with the UI, changes on the UI are automatically reflected in the data.

[0054] Step S12: Read the page address parameter of the page, and assign the page address parameter to the attribute corresponding to the page address parameter in the page component based on the first rule.

[0055] This application embodiment can locate the page address parameter corresponding to the page address parameter name, decode the parameter value of the page address parameter based on the attribute value type to obtain the decoded value; and assign the decoded value to the attribute corresponding to the page address parameter in the page component based on the attribute positioning information. It can be understood that the attribute positioning information is the path of the attribute. That is, this application embodiment can first locate the page address parameter corresponding to the page address parameter name to obtain the corresponding string value, then convert it according to the attribute value type defined in the rules to obtain the value of the corresponding attribute value type, and then copy the value to the corresponding attribute according to the attribute path.

[0056] Step S13: Listen to the attributes in the page component. When the attribute value of any attribute changes, obtain the changed attribute value and update the changed attribute value to the page address based on the first rule corresponding to the attribute.

[0057] This application embodiment can monitor data changes in page components through a listener function, that is, monitor the attributes in the page components.

[0058] This application embodiment can perform Uniform Resource Locator (URL) encoding on the changed attribute value to obtain an encoded value; based on the page address parameter name in the first rule corresponding to the attribute, the encoded value is updated to the page address parameter corresponding to the page address parameter name. Specifically, the changed attribute value can first be converted into a string, and then encoded using URL to obtain the encoded value.

[0059] Furthermore, in this embodiment, when the value of any attribute changes, the changed attribute value is obtained. If the attribute value does not change again within a preset time, the changed attribute value is updated to the page address based on the first rule corresponding to the attribute. If the attribute value changes again within the preset time, the timer restarts. After the preset time, if the attribute value does not change again, the last changed attribute value is updated to the page address based on the first rule corresponding to the attribute. It should be noted that when a component's attribute value is triggered multiple times in a short period of time, without debouncing, the parameters of the webpage address will also change multiple times in a short period of time, which will consume browser performance. In fact, the value that needs to be concerned is the final value, that is, the most recently changed value. Therefore, using debouncing can effectively save performance consumption.

[0060] It should be noted that a URL (i.e., uniform resource locator) generally refers to a web page address, which is usually composed of a protocol, hostname (domain name), port number, path, query parameters (the URL parameters in this application example refer to this part), and anchor point.

[0061] As can be seen, this application pre-sets Vue directives in page components and configures rules based on these directives. When the page loads, the page address parameter is assigned to the attributes in the page components according to the pre-configured rules. The application also listens for changes in the attributes of the page components; when any attribute value changes, the changed attribute value is updated in the page address based on the corresponding rule. In this way, by pre-configuring Vue directives and rules, two-way binding between page addresses and page data is achieved, reducing code invasiveness, simplifying and improving efficiency, and lowering development costs.

[0062] Furthermore, the embodiments of this application debouncing attribute value updates means that even if multiple updates are triggered in a short period of time, only the last one will be executed, which can effectively save performance consumption.

[0063] See Figure 2 As shown in the figure, this application discloses a specific binding method, including:

[0064] Step S21: When the page loads, collect the first rule and the second rule configured by the preset Vue directives in the page components; wherein the preset Vue directives are directives set corresponding to the attributes in the page components.

[0065] The first rule includes the page address parameter name, attribute value type, and attribute location information, while the second rule is the callback function name. That is, the rules set in this embodiment may include the page address parameter name, attribute value type, attribute location information, and callback function name. During page loading, the first and second rules configured by preset Vue directives in the page components are collected.

[0066] Step S22: Read the page address parameter of the page, and assign the page address parameter to the attribute corresponding to the page address parameter in the page component based on the first rule.

[0067] This application embodiment can collect the first rule configured by preset Vue directives in page components; store the first rule in a first mapping structure; in the first mapping structure, the page address parameter name is the key, and the attribute value type and attribute positioning information are the values. Accordingly, the page address parameter of the page is read, the first mapping structure is traversed, and the page address parameter is assigned to the attribute corresponding to the page address parameter in the page component based on the first rule. When the traversal is complete, the first mapping structure is cleared to avoid duplicate assignment. It can be understood that the first mapping structure and the second mapping structure mentioned later are both Map structures.

[0068] Step S23: Invoke the callback function of the page component based on the second rule.

[0069] In this embodiment, the second rule can be stored in a second mapping structure; wherein, the key in the second mapping structure is the identifier of the page component, and the value is the name of the callback function. Correspondingly, the second mapping structure can be traversed, and the callback function of the page component can be called based on the second rule. When the traversal is complete, the second mapping structure is cleared to avoid duplicate assignment.

[0070] Step S24: Listen to the attributes in the page component. When the attribute value of any attribute changes, obtain the changed attribute value and update the changed attribute value to the page address based on the first rule corresponding to the attribute.

[0071] As can be seen, in this embodiment, when the page loads, the first rule and the second rule configured by the preset Vue directive in the page component are collected. The first rule is stored in the first mapping structure and the second rule is stored in the second mapping structure. First, the first mapping structure is traversed, and the page address parameter is assigned to the attribute corresponding to the page address parameter in the page component based on the first rule. Then, the second mapping structure is traversed, and the callback function of the page component is called based on the second rule. In this way, the assignment efficiency is improved through the mapping structure, and this embodiment can support callbacks.

[0072] The following uses an HTML form scenario as an example to further illustrate the binding scheme provided in the embodiments of this application:

[0073] When a user fills out a form, the completed form data is automatically recorded in the URL parameters. After the page is refreshed, the parameters in the URL are automatically written back to the form, essentially providing a real-time snapshot of the page state without relying on other storage functions. For example, see... Figure 3 As shown, Figure 3 This application provides a flowchart of a two-way data binding process. When a user enters a page, the URL parameter values ​​are read and assigned to the page data. Then, changes in the page data are monitored. If the data state changes while the user interacts with the page (e.g., entering or filling out a form), the monitoring is triggered. If a change is detected, the changed value is updated in the URL; otherwise, it is ignored. Without two-way binding, the form state is lost upon page refresh. With two-way binding, data is automatically refilled, resulting in a better user experience.

[0074] It is understood that the two-way binding process in this embodiment is divided into two parts: assigning URL parameters to component data (i.e., data), and updating component data to the URL. See also Figure 4 As shown, Figure 4 This is a schematic diagram illustrating the process of assigning a page address parameter to component data, as provided in an embodiment of this application. See also... Figure 5 As shown, Figure 5 This diagram illustrates a process of updating component data to a page address, as provided in an embodiment of this application. Both processes require data conversion and assignment according to specific instruction rules. There are three necessary rules and one optional rule. The necessary rules include: URL parameter name (i.e., webpage address parameter name): a string describing the name of the URL parameter; Value type: a specific string describing the type of the attribute value; Data path: a string used to locate the attribute in the component, such as `form.username`. The optional rule is callback function name: a string used to trigger the function method in the page component after the URL is initialized and assigned to the component data.

[0075] like Figure 4As shown, when the page is loaded, the page components are initialized, reaching phase S1 (actually occurring in the `bind` lifecycle method of the Vue directive). This phase collects the necessary rules for using Vue directives in the components and stores them in a rule map (i.e., a mapping) for use in the next step of component data initialization, denoted as `ruleMap`. Simultaneously, this phase also collects callback function names, similarly storing them in a map, denoted as `cbMap` (i.e., a callback mapping). In the rule map, the key is the URL parameter name, and the value is the value type and data path. In the callback mapping, the key is the page component identifier, and the value is the callback name (i.e., the callback function name). In phase S2, the URL parameter is read. Since there are multiple rules, based on the rule map collected in phase S1, the rules in the rule map are iterated through, and the URL parameters are assigned to the specified component data. After the iteration is complete, the rule map is cleared (phase S3) to avoid duplicate assignments. This is followed by a callback, which iterates through the callback maps collected in phase S1 and calls the callback function in the component instance based on the given callback function name (phase S4). After the call, the key-value pair in the corresponding callback rule is deleted (phase S5) to avoid duplicate calls. The specific process of assigning URL parameters to component data properties is as follows: according to the mapping rule (denoted as rule1), the corresponding string value is found in the URL parameter, denoted as value1. Then, value1 is decoded into the data type value described in rule1, denoted as value2. Finally, value2 is assigned to the component data property value specified in the rule.

[0076] like Figure 5 As shown, the process of updating component data to the URL is as follows: Using parameters from Vue directives, if the data in the component changes, the `componentUpdate` method (i.e., the listener function) in the directive is triggered, which is stage S6 (the listener stage needs debouncing to prevent multiple triggers within a short period). In stage S7, it checks if the component's data value has changed. If it hasn't changed, no action is taken. If the value has changed, the latest value is retrieved, converted to a string according to the configured directive rules, URL-encoded, and then updated in the URL. Specifically, if a component's data attribute value changes, the mapping rule for that attribute can be obtained in the listener function. The changed value is recorded as `value1`, converted to the corresponding string value, URL-encoded into `value2`, and then `value2` is updated in the URL parameters of the current page.

[0077] In this embodiment, data initialization can be performed in the `bind` function, assigning URL parameters to the page component data. Assignment and callbacks are handled in a custom method. A listener is placed in the `componentUpdated` method to update the URL parameters with the page component's data in real time. Another custom method executes debouncingly with a delay, updating the URL parameters with changed data (state). The `bind` function is a function in the Vue framework.

[0078] As can be seen, the two-way data binding solution in this application requires only a small amount of simple configuration (using Vue directives), reducing the amount of code. It achieves two-way data binding and real-time updates. The page address bar is updated in real time as data changes, and data initialization is performed immediately upon page entry. A flexible function callback mechanism is provided after the URL parameter is assigned to the component. Multiple triggers of component data within a short period will ultimately only trigger one URL parameter update, reducing performance overhead and improving user experience. The entire process is highly usable, concise, efficient, easy to manage, and highly real-time, with low code intrusion and reduced costs associated with saving page state. Furthermore, it supports various parameter types and callback functions.

[0079] In other embodiments, component data can also be stored in a local cache to save the page state.

[0080] See Figure 6 As shown in the figure, this application discloses a binding device, including:

[0081] The rule collection module 11 is used to collect the first rules configured by the preset Vue directives in the page components when the page is loaded; wherein, the preset Vue directives are directives set corresponding to the attributes in the page components;

[0082] The attribute assignment module 12 is used to read the page address parameter of the page and assign the page address parameter to the attribute corresponding to the page address parameter in the page component based on the first rule.

[0083] The parameter update module 13 is used to monitor the attributes in the page component. When the attribute value of any attribute changes, the module obtains the changed attribute value and updates the changed attribute value to the page address based on the first rule corresponding to the attribute.

[0084] As can be seen, this application pre-sets Vue directives in page components and configures rules based on these directives. When the page loads, the page address parameter is assigned to the attributes in the page components according to the pre-configured rules. The application also listens for changes in the attributes of the page components; when any attribute value changes, the changed attribute value is updated in the page address based on the corresponding rule. In this way, by pre-configuring Vue directives and rules, two-way binding between page addresses and page data is achieved, reducing code invasiveness, simplifying and improving efficiency, and lowering development costs.

[0085] In a specific implementation, the first rule includes the page address parameter name, attribute value type, and attribute positioning information;

[0086] Accordingly, the attribute assignment module 12 is specifically used to: find the page address parameter corresponding to the page address parameter name, decode the parameter value of the page address parameter based on the attribute value type to obtain the decoded value; and assign the decoded value to the attribute corresponding to the page address parameter in the page component based on the attribute positioning information.

[0087] The parameter update module 13 is specifically used for: performing unified resource positioning system encoding on the changed attribute value to obtain the encoded value; and updating the encoded value to the page address parameter corresponding to the page address parameter name based on the page address parameter name in the first rule corresponding to the attribute.

[0088] Furthermore, the rule collection module 11 is specifically used to collect the first rule configured by the preset Vue directive in the page component; store the first rule in the first mapping structure; in the first mapping structure, the page address parameter name is the key, and the attribute value type and attribute positioning information are the values. Correspondingly, the attribute assignment module 12 is specifically used to: traverse the first mapping structure, and assign the page address parameter to the attribute corresponding to the page address parameter in the page component based on the first rule.

[0089] The rule collection module 11 is also used to collect the second rule configured by the preset Vue directive in the page component when the page is loaded; the second rule is the name of the callback function; the device also includes a callback module, used to call the callback function of the page component based on the second rule.

[0090] In a specific implementation, the rule collection module 11 is used to store the second rule into the second mapping structure; wherein, the key in the second mapping structure is the identifier of the page component, and the value is the name of the callback function; the attribute assignment module 12 is specifically used to: traverse the second mapping structure and call the callback function of the page component based on the second rule.

[0091] The parameter update module 13 is specifically used to obtain the changed attribute value when the attribute value of any attribute changes. If the attribute value does not change again within a preset time, the changed attribute value is updated to the page address based on the first rule corresponding to the attribute. If the attribute value changes again within the preset time, the timer is restarted.

[0092] Furthermore, embodiments of this application also provide an electronic device. Figure 7 This is a structural diagram of an electronic device according to an exemplary embodiment. The content of the diagram should not be considered as any limitation on the scope of this application.

[0093] Figure 7 This is a schematic diagram of the structure of an electronic device 20 provided in an embodiment of this application. The electronic device 20 may specifically include: at least one processor 21, at least one memory 22, a power supply 23, a communication interface 24, an input / output interface 25, and a communication bus 26. The memory 22 stores a computer program, which is loaded and executed by the processor 21 to implement the relevant steps in the binding method disclosed in any of the foregoing embodiments.

[0094] In this embodiment, the power supply 23 is used to provide operating voltage for each hardware device on the electronic device 20; the communication interface 24 can create a data transmission channel between the electronic device 20 and external devices, and the communication protocol it follows can be any communication protocol applicable to the technical solution of this application, and is not specifically limited here; the input / output interface 25 is used to acquire external input data or output data to the outside world, and its specific interface type can be selected according to specific application needs, and is not specifically limited here.

[0095] In addition, the memory 22, as a carrier for resource storage, can be a read-only memory, random access memory, disk or optical disk, etc. The resources stored thereon can include operating system 221, computer program 222 and data 223, etc., and the storage method can be temporary storage or permanent storage.

[0096] The operating system 221 manages and controls the various hardware devices on the electronic device 20 and the computer program 222 to enable the processor 21 to perform operations and processing on the data 223 in the memory 22. The operating system 221 can be Windows Server, Netware, Unix, Linux, etc. In addition to including a computer program capable of performing the binding method executed by the electronic device 20 as disclosed in any of the foregoing embodiments, the computer program 222 may further include computer programs capable of performing other specific tasks.

[0097] Furthermore, this application also discloses a storage medium storing a computer program, which, when loaded and executed by a processor, implements the binding method steps disclosed in any of the foregoing embodiments.

[0098] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on its differences from other embodiments. Similar or identical parts between embodiments can be referred to interchangeably. For the apparatus disclosed in the embodiments, since it corresponds to the method disclosed in the embodiments, the description is relatively simple; relevant parts can be referred to in the method section.

[0099] Finally, it should be noted that in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0100] The binding method, device, and medium provided in this application have been described in detail above. Specific examples have been used to illustrate the principles and implementation methods of this application. The description of the above embodiments is only for the purpose of helping to understand the method and core ideas of this application. At the same time, for those skilled in the art, there will be changes in the specific implementation methods and application scope based on the ideas of this application. Therefore, the content of this specification should not be construed as a limitation of this application.

Claims

1. A binding method, characterized in that, include: When the page loads, the first rule configured by the preset Vue directives in the page components is collected; wherein, the preset Vue directives are directives set corresponding to the attributes in the page components; Read the page address parameter of the page, and assign the page address parameter to the attribute corresponding to the page address parameter in the page component based on the first rule; Listen to the attributes in the page component. When the attribute value of any attribute changes, obtain the changed attribute value and update the changed attribute value to the page address based on the first rule corresponding to the attribute. The first rule includes a page address parameter name and attribute location information. The page address parameter name is used to find the corresponding page address parameter, and the attribute location information represents the path of the attribute.

2. The binding method according to claim 1, characterized in that, The first rule also includes attribute value types; Accordingly, assigning the page address parameter to the attribute corresponding to the page address parameter in the page component based on the first rule includes: Locate the page address parameter corresponding to the page address parameter name, and decode the parameter value of the page address parameter based on the attribute value type to obtain the decoded value; Based on the attribute location information, the decoded value is assigned to the attribute corresponding to the page address parameter in the page component.

3. The binding method according to claim 2, characterized in that, The first rule corresponding to this attribute updates the changed attribute value to the page address, including: The changed attribute value is encoded using the Uniform Resource Locator (URL) system to obtain the encoded value; Based on the page address parameter name in the first rule corresponding to the attribute, the encoded value is updated to the page address parameter corresponding to the page address parameter name.

4. The binding method according to claim 2, characterized in that, The first rule configured by the preset Vue directives in the collection page component includes: Collect the first rule configured by the preset Vue directives in the page components; The first rule is stored in the first mapping structure; in the first mapping structure, the page address parameter name is the key, and the attribute value type and attribute location information are the values.

5. The binding method according to claim 4, characterized in that, Assigning the page address parameter to the attribute corresponding to the page address parameter in the page component based on the first rule includes: Traverse the first mapping structure and assign the page address parameter to the attribute corresponding to the page address parameter in the page component based on the first rule.

6. The binding method according to claim 1, characterized in that, Also includes: When the page loads, collect the second rules configured by the preset Vue directives in the page components; The second rule is the callback function name; The method further includes: invoking the callback function of the page component based on the second rule.

7. The binding method according to claim 6, characterized in that, Also includes: Store the second rule into the second mapping structure; wherein, in the second mapping structure, the key is the identifier of the page component, and the value is the name of the callback function; Accordingly, the step of invoking the callback function of the page component based on the second rule includes: Traverse the second mapping structure and call the callback function of the page component based on the second rule.

8. The binding method according to claim 1, characterized in that, When the value of any attribute changes, the changed attribute value is obtained, and the changed attribute value is updated in the page address based on the first rule corresponding to that attribute, including: When the value of any attribute changes, the changed attribute value is obtained. If the attribute value does not change again within a preset time, the changed attribute value is updated to the page address based on the first rule corresponding to the attribute. If the attribute value changes again within the preset time, the timer is restarted.

9. An electronic device, characterized in that, include: Memory, used to store computer programs; A processor for executing the computer program to implement the binding method as described in any one of claims 1 to 8.

10. A computer-readable storage medium, characterized in that, Used to store a computer program, which, when executed by a processor, implements the binding method as described in any one of claims 1 to 8.

Images