WO2022033055A1

WO2022033055A1 - Page rendering method, apparatus, and device, and computer readable storage medium

Info

Publication number: WO2022033055A1
Application number: PCT/CN2021/085841
Authority: WO
Inventors: 万纯; 林挺
Original assignee: 深圳前海微众银行股份有限公司
Priority date: 2020-08-12
Filing date: 2021-04-07
Publication date: 2022-02-17
Also published as: CN111949351A; CN111949351B

Abstract

A page rendering method, apparatus, and device, and a computer readable storage medium, relating to the technical field of financial technology. The page rendering method comprises: upon receiving a browser page skipping request, obtaining, according to the browser page skipping request, the address of a page to be skipped (S10); obtaining, from a pre-generated route configuration file, routes matched with the address of said page, and obtaining the matched routing paths of the matched routes (S20); scoring each matched route according to the matched routing paths, and determining a target route according to scoring results (S30); and determining a target component corresponding to the target route according to the route configuration file, and loading the target component to render to obtain a target page corresponding to the address of said page (S40).

Description

Page rendering method, apparatus, device, and computer-readable storage medium

This application claims the priority of the Chinese patent application with application number 202010809562.6 filed on August 12, 2020, the entire contents of which are incorporated herein by reference.

technical field

The present application relates to the technical field of financial technology (Fintech), and in particular, to a page rendering method, apparatus, device, and computer-readable storage medium.

Background technique

With the development of computer technology, more and more technologies are applied in the financial field, and the traditional financial industry is gradually transforming into financial technology (Fintech). requirements.

Existing page rendering methods include server-side rendering and client-side rendering, which are suitable for different development and business scenarios. Among them, server-side rendering, also known as back-end rendering, can be implemented based on Spring MVC (a java framework). During the page rendering process, the browser requests the server, and the server first matches the corresponding route and executes the processor corresponding to the route. , to process business logic in the processor, and then generate HTML (HyperText Mark-up Language, hypertext markup language) file content is returned to the browser, and the whole process takes a long time, resulting in slow page opening and poor user experience. In this regard, the target usually uses client-side rendering to render the page.

Client-side rendering, also known as front-end rendering, can be implemented based on React Router (a routing solution) application. During page rendering, route matching is performed by comparing the path attribute of the Route component with the browser page address. If the page path matches multiple routes, React Router will choose to render the first one. However, this matching method is not reasonable. For example, the user defines the routes /order/:orderId (order details page) and /order/list (order list page) at the same time, when the user accesses /order/list, the order details page and the order list page can be matched. At this point, React Router will render the first order details page that matches, but it's actually more reasonable to render the order list page. Therefore, existing route matching schemes are not accurate.

technical problem

The main purpose of the present application is to provide a page rendering method, apparatus, device and computer-readable storage medium, aiming at solving the problem of inaccurate routing matching scheme in the front-end rendering process.

technical solutions

In order to achieve the above purpose, the present application provides a page rendering method, the page rendering method includes:

When receiving the browser page jump request, obtain the address of the page to be jumped according to the browser page jump request;

Obtain a route matching the address of the page to be redirected from a pre-generated routing configuration file, and obtain a matching routing path of the matching route;

Score each matching route according to the matching routing path, and determine the target route according to the scoring result;

The target component corresponding to the target route is determined according to the routing configuration file, and the target component is loaded to render the target page corresponding to the address of the page to be redirected.

In addition, in order to achieve the above purpose, the present application also provides a page rendering device, the page rendering device comprising:

a first obtaining module, configured to obtain the address of the page to be jumped according to the browser page jump request when receiving the browser page jump request;

A second obtaining module, configured to obtain a route matching the address of the page to be jumped from a pre-generated routing configuration file, and obtain a matching routing path of the matching route;

A route scoring module, for scoring each matched route according to the matching routing path, and determining a target route according to the scoring result;

A page rendering module, configured to determine a target component corresponding to the target route according to the routing configuration file, and load the target component to render a target page corresponding to the address of the page to be jumped.

In addition, in order to achieve the above object, the present application also provides a page rendering device, the page rendering device includes: a memory, a processor, and a page rendering program stored in the memory and running on the processor, When the page rendering program is executed by the processor, the steps of the above-mentioned page rendering method are implemented.

In addition, in order to achieve the above purpose, the present application also provides a computer-readable storage medium, where a page rendering program is stored on the computer-readable storage medium, and when the page rendering program is executed by a processor, the above-mentioned page rendering is realized steps of the method.

beneficial effect

The present application provides a page rendering method, apparatus, device and computer-readable storage medium. When a browser page jump request is received, the address of the page to be jumped is obtained according to the browser page jump request; Obtain the route that matches the address of the page to be jumped from the generated routing configuration file, and obtain the matching routing path of the matching route; score each matching route according to the matching routing path, and The scoring result determines a target route; further, a target component corresponding to the target route is determined according to the routing configuration file, and the target component is loaded to render the target page corresponding to the address of the page to be redirected. In this application, a matching route is obtained through a pre-generated routing configuration file, and then the matching route is scored to determine the target route, and then the target component corresponding to the target route is loaded to realize page rendering. Through the above method, It can achieve precise and intelligent matching of routes, and determine the best route for page rendering.

Description of drawings

FIG. 1 is a schematic diagram of the device structure of the hardware operating environment involved in the solution of the embodiment of the present application;

2 is a schematic flowchart of a first embodiment of a page rendering method of the present application;

FIG. 3 is a schematic diagram of functional modules of the first embodiment of the page rendering apparatus of the present application.

Embodiments of the present invention

It should be understood that the specific embodiments described herein are only used to explain the present application, but not to limit the present application.

Referring to FIG. 1 , FIG. 1 is a schematic diagram of a device structure of a hardware operating environment involved in the solution of an embodiment of the present application.

The page rendering device in this embodiment of the present application may be a smartphone, or a PC (Personal Computer, personal computer), tablet computer, portable computer and other terminal equipment.

As shown in FIG. 1 , the page rendering device may include: a processor 1001 , such as a CPU, a communication bus 1002 , a user interface 1003 , a network interface 1004 , and a memory 1005 . Among them, the communication bus 1002 is used to realize the connection and communication between these components. The user interface 1003 may include a display screen (Display), an input unit such as a keyboard (Keyboard), and the optional user interface 1003 may also include a standard wired interface and a wireless interface. Optionally, the network interface 1004 may include a standard wired interface and a wireless interface (eg, a Wi-Fi interface). The memory 1005 may be high-speed RAM memory, or may be non-volatile memory, such as disk memory. Optionally, the memory 1005 may also be a storage device independent of the aforementioned processor 1001 .

Those skilled in the art can understand that the structure of the page rendering device shown in FIG. 1 does not constitute a limitation to the page rendering device, and may include more or less components than the one shown, or combine some components, or different components layout.

As shown in FIG. 1 , the memory 1005 as a computer storage medium may include an operating system, a network communication module, a user interface module and a page rendering program.

In the terminal shown in FIG. 1 , the network interface 1004 is mainly used to connect to the background server and perform data communication with the background server; the user interface 1003 is mainly used to connect to the client and perform data communication with the client; and the processor 1001 can be used for The page rendering program stored in the memory 1005 is called, and each step of the following page rendering method is executed.

Based on the above hardware structure, various embodiments of the page rendering method of the present application are proposed.

The present application provides a page rendering method.

Referring to FIG. 2 , FIG. 2 is a schematic flowchart of a first embodiment of a page rendering method of the present application.

In this embodiment, the page rendering method includes:

Step S10, when receiving the browser page jump request, obtain the address of the page to be jumped according to the browser page jump request;

The page rendering method of this embodiment is implemented by a page rendering device. The device is described as a front-end server. The front-end server includes a router handler (RouterHandler) and also provides an API (Application Programming Interface, application program interface) to It is used for the configuration of routing information to generate routing configuration files. In addition, this embodiment is implemented based on Vue.js. Vue is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with modern toolchains and various supporting libraries, Vue is also fully capable of providing complex single-page web applications (SPA, single page web application) to provide the driver.

In this embodiment, the routing processor provides a push function (for jumping to a different browser address) for the user to call. When the user clicks a button in the browser, the push function is executed in the button logic to jump to To the new route, the browser address url (uniform resource locator, uniform resource locator) will change, and the popstate event (event in the HTML5 history series) will be triggered on the window (window) object of the page. At this time, The route processor will receive the browser page jump request, and then obtain the address of the page to be jumped according to the browser page jump request. Specifically, the address of the page to be jumped can be obtained from the object event (event) of the popstate event.

Step S20, obtaining a route matching the address of the page to be jumped from a pre-generated routing configuration file, and obtaining a matching routing path of the matching route;

Then, obtain the route matching the address of the page to be redirected from the pre-generated routing configuration file, and obtain the routing path of the matching route. In order to distinguish it from other subsequent routing paths, the routing path of the matching route is Recorded as matching routing path.

The routing configuration file is generated in advance according to the Pages (page) directory set by the user, and the specific generation process may refer to the following second embodiment, which will not be repeated here. When performing matching, a regular matching method may be used to perform matching, and the specific matching process may refer to the prior art.

Step S30, scoring each matched route according to the matching routing path, and determining a target route according to the scoring result;

Since there are usually multiple routes obtained by matching, after obtaining the matching routing paths of the matching routes, it is necessary to score the matching routes according to the matching routing paths, and determine the target route according to the scoring results.

Specifically, step S30 includes:

Step a31, splitting the matching routing path to obtain the number of sub-items of each matching route, and calculating the first score according to the number of sub-items and the first preset score;

In this embodiment, the scoring process of routing is as follows:

First, the matching routing paths are split to obtain the number of sub-items of each matching route, and the first score is calculated according to the number of sub-items and the first preset score. Since the routing path is a string composed of multiple "/"s, when splitting the matching routing path, the matching routing path can be split according to the character "/" to obtain each subsection that constitutes the routing path. item. The first score is the product of the number of sub-items and the first preset score, where the first preset score is a preset score of a single sub-item.

Step a32, obtain the sub-item type of each sub-item of each matched route, and determine the second score of each sub-item of each matched route according to the sub-item type;

Then, the sub-item type of each sub-item of each matched route is acquired, and the second score of each sub-item of each matched route is determined according to the sub-item type. Among them, the child types include static, dynamic, fuzzy matching and root end.

Specifically, step a32 includes:

Step a321, detecting whether each sub-item of each matching route includes a preset special character, and obtaining a first detection result;

Step a322, detecting whether each sub-item of each matching route is the root end, and obtaining a second detection result;

Step a323, determining the sub-item type of each sub-item according to the first detection result and the second detection result;

Step a324: Determine the second score of each sub-item of each matching route according to the sub-item type and the mapping relationship between the preset sub-item type and the score.

The specific acquisition process of the second score:

First detect whether each sub-item of each matching route includes preset special characters, and obtain a first detection result, wherein the preset characteristic characters include the first preset special character ":" and the second preset character "*" . At the same time, it is detected whether each sub-item of each matched route is the root end, and a second detection result is obtained. When detecting the root end, it is to determine whether the child is just "/".

Then, the sub-item type of each sub-item is determined according to the first detection result and the second detection result, and if the sub-item does not include the first preset special character ":" and the second preset character "*", the sub-item type is determined is static; if the sub-item includes the first preset special character ":", the sub-item type is determined to be dynamic; if the sub-item includes the second preset character "*", it is determined that the sub-item type is a fuzzy match; If the subkey is only "/", it is determined that the subkey type is the root end.

Further, according to the sub-item type and the mapping relationship between the preset sub-item type and the score, the second score of each sub-item of each matching route is determined. The mapping relationship between the preset sub-item types and scores includes scores corresponding to different sub-item types. The score corresponding to the sub-item type of static is recorded as the second preset score, the score corresponding to the sub-item type of dynamic is recorded as the third preset score, and the sub-item type is corresponding to fuzzy matching. The score is recorded as the fourth preset score, and the score corresponding to the sub-item type as the root end is recorded as the fifth preset score. When setting the size of each score, it is based on the principle of precise matching priority algorithm. Since the more sub-items are matched, the closer to complete matching, the score corresponding to each sub-item can be set (that is, the first pre-match Set the score) as the maximum value; secondly, because the static priority is greater than the dynamic priority than the root end, the priority of fuzzy matching is the lowest. Therefore, the first preset score>the second preset score>the third preset score>the fifth preset score>the fourth preset score can be set.

Step a33, adding the first score and the second score to obtain the score of each matching route;

Step a34: Determine the route corresponding to the maximum value in the score as the target route.

Finally, the first score and the second score are added to obtain the score of each matching route, and then the route corresponding to the maximum value in the score is determined as the target route.

For example, when the first preset score is set to 4, the second preset score is set to 3, the third preset score is set to 2, the fourth preset score is set to -1, and the fifth preset score is When set to 1, if the matching routing path is /groups/:groupId, the number of sub-items is 2, the first sub-item groups is static, and the second sub-item: groupId is dynamic, then the score is determined to be 2* 4+3+2=13; if the matching routing path is /, the number of sub-items is 1, and its sub-item is the root end, the score is determined to be 1*4+1=5; if the matching routing path is /groups/ :groupId/users/:userId, the number of sub-items is 4, the first sub-item groups is static, the second sub-item: groupId is dynamic, the third sub-item users is static, the fourth sub-item: userId is dynamic, then determine its score as 4*4+3+2+3+2=26.

Step S40, determining a target component corresponding to the target route according to the routing configuration file, and loading the target component to render a target page corresponding to the address of the page to be redirected.

Finally, the target component corresponding to the target route is determined according to the routing configuration file, and the target component is loaded to render the target page corresponding to the address of the page to be jumped. Specifically, the routing configuration file includes routing data of each route, wherein the routing data includes at least routing path information, component information, and may also include routing name, meta tag (an auxiliary tag in the head area of html language) and Parent-child relationship information, etc. Among them, the meta tag can be used to mark whether the route needs some additional information such as login, status tag, etc.

As a way of determining the target component, the component of the target route can be directly used as the target component, and then the current routing component corresponding to the current browser is unloaded, and the target component is loaded to render the target page corresponding to the address of the page to be jumped.

As another way of determining the target component, the current routing path corresponding to the current page address can be obtained first, and the target routing path of the target routing can be obtained. Then, the current routing path can be split to obtain the first sub-item array, and the target routing path can be divided. Split the routing path to obtain the second sub-item array; compare the first sub-item array with the second sub-item array to obtain the public routing path and the non-public routing path, determine the target component according to the non-public routing path, and determine the target component according to the common routing path. The routing path determines the common routing component, and then unloads the components except the common routing component in the current routing component corresponding to the current routing path, and loads the target component to render the target page corresponding to the address of the page to be jumped.

An embodiment of the present application provides a method for page rendering. When a browser page jump request is received, the address of the page to be jumped is obtained according to the browser page jump request; The route matching the address of the page to be jumped is obtained, and the matching routing path of the matching routing is obtained; the matching routing is scored according to the matching routing path, and the target routing is determined according to the scoring result; The routing configuration file determines the target component corresponding to the target route, and loads the target component to render the target page corresponding to the address of the page to be redirected. In this embodiment of the present application, a matching route is obtained through a pre-generated routing configuration file, then the matching route is scored to determine the target route, and then the target component corresponding to the target route is loaded to realize page rendering. In this way, accurate and intelligent matching of routes can be achieved, and the best route can be determined for page rendering.

Further, at present, when using React Router application to achieve page rendering, users need to manually write routing configuration (that is, the mapping relationship between page paths and rendering components). When the location of the routing component changes, the routing configuration needs to be modified synchronously, which consumes development time, increases development labor costs, and reduces development efficiency.

In this regard, based on the above-mentioned first embodiment, a second embodiment of the page rendering method of the present application is proposed.

In this embodiment, before the above step S20, the page rendering method further includes:

Step A, when receiving a routing setting request, displaying a page directory setting interface according to the routing setting request;

In this embodiment, the developer can trigger a routing setting request through the development terminal (such as a PC, a mobile phone, etc.). At this time, when the front-end server receives the routing setting request, it can display the page directory setting interface according to the routing setting request. Among them, the page directory setting interface can display the following path specifications for user input:

1 pages

2 ├ index.vue # Root route page path index.html#/

3 ├ a.vue # path/a

4 ├ b

5 │├ index.vue # path /b

6 │├ @id.vue # dynamic routing /b/:id

7 │└ c.vue # path /b/c

8 └ layout.vue # The outer layer shared by all pages under the root route

9 └ *.vue # path /*

Among them, dynamic routing supports defining parameters in the path. For example, /order/1 matches the /order/:id route, and /1 in the path resolves to parameter id=1.

Step B, when receiving the input completion instruction triggered by the user based on the page directory setting interface, obtain the page directory input by the user;

After the user's input is completed, when an input completion instruction triggered by the user based on the page directory setting interface can be received, the page directory input by the user, that is, the pages directory is obtained.

Step C, traverse the page directory, and detect whether there is a sub-routing file in the folder corresponding to the currently traversed page directory;

Then, traverse the page directory through the readdirSync function provided by node.js to detect whether there is a sub-routing file in the folder corresponding to the currently traversed page directory. Specifically, it is possible to detect whether there is a sub-routing file by detecting whether the file suffix in the folder has .vue other than layout.vue.

If there is a sub-routing file, then step D is performed to obtain the file name of the currently traversed sub-routing file, determine the routing type according to the file name, and generate second routing data according to the routing type and the file name;

If a sub-routing file exists in the folder corresponding to the currently traversed page directory, the file name of the currently traversed sub-routing file is obtained, and the routing type is determined according to the file name. Specifically, when determining the routing type, if it is detected that the file name includes index.vue, the routing type is determined to be the default routing; if the special character @ is detected in the file name, the routing type is determined to be dynamic routing; if If it is detected that the file name includes *.vue, the route type is determined to be fuzzy matching; if it is detected that the file name only includes .vue, the route type is determined to be a regular route. Then, the second routing data is generated according to the routing type and the file name. The second routing data includes at least routing path information and component information, and may also include routing names, meta tags, parent-child relationship information, and the like.

Further, if there is a sub-routing file in the folder corresponding to the currently traversed page directory, continue to traverse the next directory of the currently traversed page directory.

Step E, acquiring the layout file corresponding to the sub-routing file and its first routing data, and updating the first routing data according to the second routing data;

After detecting the existence of the sub-routing file, acquire the layout file corresponding to the sub-routing file and its first routing data, and update the first routing data according to the second routing data. It should be noted that the execution order of step D and step E is not in any particular order.

Specifically, step E includes:

Step E1, detecting whether there is a layout file in the folder corresponding to the currently traversed page directory;

If there is a layout file in the folder corresponding to the currently traversed page directory, step E21 is executed to determine that the layout file in the folder corresponding to the currently traversed page directory is the layout route corresponding to the sub-routing file;

If there is no layout file in the folder corresponding to the currently traversed page directory, step E22 is performed to detect whether there is a corresponding layout route in the upper-level directory of the currently traversed page directory;

If there is a corresponding layout route in the upper-level directory of the currently traversed page directory, then perform step E23 to determine that the layout route in the upper-level directory of the currently traversed page directory is the layout route corresponding to the sub-routing file;

Further, after the above steps E21 and E23, it also includes:

Step E3: Acquire the first routing data of the layout route, and update the first routing data of the corresponding layout route according to the second routing data.

In this embodiment, while detecting whether there is a sub-routing file in the folder corresponding to the currently traversed page directory, the readdirSync function provided by node.js can be used to traverse the page directory to detect the file corresponding to the currently traversed page directory Whether there is a layout file in the folder, specifically, by detecting whether the file suffix in the folder exists layout.vue, to detect whether there is a layout file.

If there is a layout file in the folder corresponding to the currently traversed page directory, determine that the layout file in the folder corresponding to the currently traversed page directory is the layout route (that is, the parent route) corresponding to the child routing file; If there is no layout file in the folder corresponding to the page directory, check whether there is a corresponding layout route in the parent directory of the currently traversed page directory. If there is a corresponding layout route in the parent directory of the currently traversed page directory, determine the current The layout route in the parent directory of the traversed page directory is the layout route corresponding to the child route file.

Then, the first routing data of the layout routing is acquired. The first routing data includes at least routing path information and component information, and may also include routing names, meta tags, parent-child relationship information, and the like. Among them, the routing path information of the layout routing is obtained according to the path address of the file relative to the src/pages directory, and then removing the file suffix. In addition, special characters in the file name need to be replaced to obtain a route that conforms to the preset code specification. Path information, so that the URL of the page to be jumped can be obtained by subsequent analysis according to the replaced routing path information. For example, replace "@" in dynamic routing with ":", and replace "/index" in default routing with "/" , and replace "/layout" in the parent route with "/". The component information is the information of the component corresponding to the route, which is the absolute path of the file. The route name name is based on the path address of the file relative to the pages directory. Name will be used as a variable in the code to resolve the URL of the page to be jumped. It also needs to conform to the preset code specification, so some special characters also need to be specified. Substitution, for example, replace "@" in dynamic routing with "_", remove the file suffix, and then convert "/" into "_". The meta tag can be used to mark whether the route needs some additional information such as login, status tag, etc. The parent-child relationship information is the relationship between the parent route and the child route.

After the first routing data of the layout route is acquired, the first routing data of the corresponding layout route is updated according to the second routing data. Specifically, the second routing data is pushed into the children (child node) attribute of the layout routing (that is, the parent routing), so as to update the parent-child relationship information of the parent routing.

Further, after the above step E, it also includes:

Step F: Generate the routing configuration file according to the updated first routing data and the second routing data.

Finally, a routing configuration file is generated according to the updated first routing data and the second routing data.

Specifically, step F includes:

Step F1, executing a preset template on the updated first routing data and the second routing data, and generating the dependency import logic of each route;

Step F2, writing the dependency import logic into a preset routing configuration template to obtain an initial routing configuration file;

Step F3: Compile the initial routing configuration file to obtain the routing configuration file.

In this embodiment, after the configuration of the route (that is, the updated first routing data and the second routing data) is obtained by parsing, a container Root with an empty array structure may be created first and placed in a container Root with an empty array structure (root), and then construct the code of the routing configuration file (route.config.js) according to the JavaScript syntax specification.

Specifically, a preset template is first executed on the updated first routing data and the second routing data, and the dependency import logic of each route is generated, wherein the preset template is "import {{name}} from ' in one embodiment. {{component}}';", which can recursively traverse the Root container, execute a template for each route item in the Root container, and generate the import logic for each route. That is, the component name and routing file address (that is, routing path information) in the routing data corresponding to the route are obtained by executing the preset template, then {{name}} in the preset template is replaced with the component name, and the preset template Replace the {{component}} in the route file address with the route's dependency import logic. For example, the dependency import logic code of the "pages/a.vue" component is "import a from 'project/src/pages/a.vue'", and then written to the route.config.js header. Then, the dependency introduction logic is written into a preset routing configuration template to obtain an initial routing configuration file.

Since the initial routing configuration file cannot be directly run by the browser, it is also necessary to compile the initial routing configuration file to obtain the routing configuration file. At compile time, it can be compiled via webpack (module bundler).

In addition, it should be noted that, in a specific embodiment, the above steps A-F may be executed on the developer end.

Through the above method, the intelligent generation of the routing configuration file can be realized, and the developer does not need to manually write the routing configuration every time, which can save development time and cost, and improve the configuration efficiency of the routing configuration file.

Further, based on the above-mentioned first embodiment, a third embodiment of the page rendering method of the present application is proposed.

In this embodiment, before the above step "loading the target component to render the target page corresponding to the address of the page to be jumped", the page rendering method further includes:

Step G, obtaining the single-file component pre-written by the user, and compiling the single-file component;

In this embodiment, because there is a code organization method called ".vue single-file component" in the Vue project, html templates, js logic and css styles can be written in the single-file component for subsequent loading to display the pending Jump page. However, the single-file component cannot be directly run by the browser. Therefore, it is necessary to obtain the single-file component pre-written by the user and compile the single-file component, so that the browser can run it directly. Specifically, when compiling, it can be compiled through webpack (module bundler). The main goal of webpack is to bundle JavaScript files together for use in the browser.

At this time, the step of "loading the target component to render the target page corresponding to the address of the page to be jumped" includes:

Furthermore, after the target component is determined, the target component is loaded from the compiled single-file component to render the target page corresponding to the address of the page to be jumped. For the specific loading and rendering process, reference may be made to other embodiments.

Here, it should be noted that the execution of step G may be performed simultaneously with the execution of the above-mentioned step F3. After the developer's input is completed, the input page directory and single-file component can be obtained, and then the initial routing configuration file can be generated according to the page directory and compiled, and the single-file component can be compiled at the same time. It should also be noted that, during specific implementation, the above process may also be executed on the developer side, and then directly transmitted to the routing processor in the front-end server.

Further, in the process of implementing page jumping based on the background framework SpringMVC, every time a browser page is jumped, complete HTML (Hypertext Markup Language) data needs to be returned to the browser, resulting in a slower page jumping speed. However, in fact, most applications have fixed content, such as the header navigation bar, menu, etc. In fact, only the partial content needs to be updated when jumping the browser page. In this regard, based on the above-mentioned first embodiment, the page rendering method of the present application is proposed. the fourth embodiment.

In this embodiment, step S40 includes:

Step a41, obtain the current routing path corresponding to the current page address, and obtain the target routing path of the target route;

In this embodiment, after the target route is determined, the current routing path corresponding to the current page address may be obtained first, and the target routing path of the target route may be obtained. That is, the current route corresponding to the current page address is obtained first, and then the routing path of the current route is obtained, which is recorded as the current routing path.

Step a42, splitting the current routing path to obtain a first sub-item array, and splitting the target routing path to obtain a second sub-item array;

Then, the current routing path is split to obtain the first sub-item array, and the target routing path is split to obtain the second sub-item array. Among them, in the splitting process of the routing path, the matching routing path can be split according to the character "/", and the sub-items are labeled according to the order of the split-obtained sub-items to obtain a sub-item array. For example, if the current routing path is /user/a, the first sub-item array obtained by splitting is: a[0]=user, a[1]=a. If the target routing path is /user/b, then the second sub-item array obtained by splitting is: b[0]=user, b[1]=b.

Step a43, compare the first sub-item array with the second sub-item array, obtain a public routing path and a non-public routing path, and determine a target component according to the non-public routing path;

The first sub-item array is compared with the second sub-item array, so that the public routing path and the non-public routing path can be obtained. The specific comparison method is: according to the order of the array labels from small to large, judge whether the first sub-item array and the second sub-item array of the same label are equal, that is, if the first sub-item array is a[], the second sub-item array is equal to The item array is b[], starting from label 0, first judge whether a[0] is equal to b[0], if so, continue to judge whether a[1] is equal to b[1], and so on, until a[n] ] and b[n] are not equal, the equal part is the path common to the current routing path and the target routing path, which is recorded as the common routing path, and the non-public routing path is the part of the target routing path that is different from the current routing path, that is The part of the destination routing path excluding the public routing path. Here, it should be noted that if a[0] is not equal to b[0], it is determined that the common routing path is the root routing path, that is, the root end "/".

Further, target components are determined based on non-public routing paths. That is, target components are determined based on non-public routing paths and routing profiles.

Step a44: Determine a common routing component according to the common routing path, unload components other than the common routing component in the current routing components corresponding to the current routing path, and load the target component.

Finally, the common routing component is determined according to the common routing path, the components except the common routing component in the current routing components corresponding to the current routing path are unloaded, and the target component is loaded.

That is, in the specific implementation, assuming that the current browser page /user/a and the page to be jumped /user/b have the same part, such as the header navigation bar and the left menu bar, the same part of the content can be designed as the parent route /user, then the page /user/a and page /user/b contain different content respectively (for example, corresponding to components A and B respectively), then route /user/a and route /user/b are used as child routes of the parent route, When switching from /user/a to /user/b, it can be determined that the target component is B. In this case, load B after unloading A.

In this embodiment, by comparing the current routing path and the target routing path, find the nearest parent route (that is, the route corresponding to the public routing path), and then uninstall the old component (that is, the current routing component except the public routing component) based on the principle of minimizing the update. component), load the new component (that is, the target component), and display the page to be jumped. In the above manner, when the browser page jumps, it is not necessary to update the fixed content part, thereby avoiding the updating of repeated content, thereby further improving the page jumping speed and improving the user experience.

The present application also provides a page rendering apparatus.

Referring to FIG. 3 , FIG. 3 is a schematic diagram of functional modules of the first embodiment of the page rendering apparatus of the present application.

As shown in Figure 3, the page rendering apparatus includes:

The first obtaining module 10 is configured to, when receiving a browser page jump request, obtain the address of the page to be jumped according to the browser page jump request;

A second obtaining module 20, configured to obtain a route matching the address of the page to be jumped from a pre-generated routing configuration file, and obtain a matching routing path of the matching route;

The route scoring module 30 is used for scoring each matched route according to the matching routing path, and determining the target route according to the scoring result;

The page rendering module 40 is configured to determine the target component corresponding to the target route according to the routing configuration file, and load the target component to render the target page corresponding to the address of the page to be jumped.

Further, the route scoring module 30 includes:

a first calculation unit, configured to split the matching routing path, obtain the number of sub-items of each matching route, and calculate and obtain a first score according to the number of sub-items and a first preset score;

a first determining unit, configured to obtain the sub-item type of each sub-item of each matched route, and determine the second score of each sub-item of each matched route according to the sub-item type;

A second computing unit, configured to add the first score and the second score to obtain the scores of each matching route;

The second determining unit is configured to determine the route corresponding to the maximum value in the score as the target route.

Further, the first determining unit is specifically used for:

Detecting whether each sub-item of each matching route includes preset special characters, and obtaining a first detection result;

Detecting whether each sub-item of each matching route is the root end, and obtaining a second detection result;

Determine the sub-item type of each sub-item according to the first detection result and the second detection result;

The second score of each sub-item of each matching route is determined according to the sub-item type and the mapping relationship between the preset sub-item type and the score.

Further, the page rendering apparatus further includes:

an interface display module, configured to display a page directory setting interface according to the route setting request when receiving the route setting request;

a third acquiring module, configured to acquire the page directory input by the user when receiving an input completion instruction triggered by the user based on the page directory setting interface;

The first detection module is used to traverse the page directory and detect whether there is a sub-routing file in the folder corresponding to the currently traversed page directory;

The fourth obtaining module is used to obtain the file name of the currently traversed sub-routing file if there is a sub-routing file, determine the routing type according to the file name, and generate the second routing data according to the routing type and the file name ;

a data update module, configured to obtain the layout file corresponding to the sub-routing file and its first routing data, and update the first routing data according to the second routing data;

A file generation module, configured to generate the routing configuration file according to the updated first routing data and the second routing data.

Further, the data update module includes:

The first detection unit is used to detect whether there is a layout file in the folder corresponding to the currently traversed page directory;

A third determining unit, configured to determine that the layout file in the folder corresponding to the currently traversed page directory is the layout route corresponding to the sub-routing file if there is a layout file in the folder corresponding to the currently traversed page directory;

The second detection unit is configured to detect whether there is a corresponding layout route in the upper-level directory of the currently traversed page directory if there is no layout file in the folder corresponding to the currently traversed page directory;

The fourth determining unit is configured to determine that the layout route in the upper-level directory of the currently traversed page directory is the layout route corresponding to the sub-routing file if there is a corresponding layout route in the upper-level directory of the currently traversed page directory;

A data updating unit, configured to acquire the first routing data of the layout route, and update the first routing data of the corresponding layout route according to the second routing data.

Further, the file generation module includes:

a template execution unit, configured to execute a preset template on the updated first routing data and the second routing data, and generate dependency import logic for each route;

a logic writing unit, configured to write the dependency import logic into a preset routing configuration template to obtain an initial routing configuration file;

A file compiling unit, configured to compile the initial routing configuration file to obtain the routing configuration file.

Further, the page rendering module 40 includes:

The first obtaining unit is used to obtain the current routing path corresponding to the current page address, and obtain the target routing path of the target routing;

a path splitting unit for splitting the current routing path to obtain a first sub-item array, and splitting the target routing path to obtain a second sub-item array;

an array comparison unit, configured to compare the first sub-item array with the second sub-item array to obtain a public routing path and a non-public routing path, and determine a target component according to the non-public routing path;

A component loading unit, configured to determine a common routing component according to the common routing path, unload components other than the common routing component in the current routing components corresponding to the current routing path, and load the target component.

The function implementation of each module in the above-mentioned page rendering apparatus corresponds to each step in the above-mentioned page rendering method embodiment, and the functions and implementation process thereof will not be repeated here.

The present application further provides a computer-readable storage medium, where a page rendering program is stored on the computer-readable storage medium, and when the page rendering program is executed by a processor, the page rendering method according to any one of the above embodiments is implemented. step.

The specific embodiments of the computer-readable storage medium of the present application are basically the same as the above-mentioned embodiments of the page rendering method, and are not repeated here.

It should be noted that, herein, the terms "comprising", "comprising" or any other variation thereof are intended to encompass non-exclusive inclusion, such that a process, method, article or system comprising a series of elements includes not only those elements, It also includes other elements not expressly listed or inherent to such a process, method, article or system. Without further limitation, an element qualified by the phrase "comprising a..." does not preclude the presence of additional identical elements in the process, method, article or system that includes the element.

The above-mentioned serial numbers of the embodiments of the present application are only for description, and do not represent the advantages or disadvantages of the embodiments.

From the description of the above embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus a necessary general hardware platform, and of course hardware can also be used, but in many cases the former is better implementation. Based on this understanding, the technical solutions of the present application can be embodied in the form of software products in essence or the parts that make contributions to the prior art. The computer software products are stored in a storage medium (such as ROM/RAM) as described above. , magnetic disk, optical disk), including several instructions to make a terminal device (which may be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) execute the methods described in the various embodiments of the present application.

The above are only the preferred embodiments of the present application, and are not intended to limit the patent scope of the present application. Any equivalent structure or equivalent process transformation made by using the contents of the description and drawings of the present application, or directly or indirectly applied in other related technical fields , are similarly included within the scope of patent protection of this application.

Claims

A page rendering method, wherein the page rendering method includes:

When receiving the browser page jump request, obtain the address of the page to be jumped according to the browser page jump request;

Obtain a route matching the address of the page to be redirected from a pre-generated routing configuration file, and obtain a matching routing path of the matching route;

Score each matching route according to the matching routing path, and determine the target route according to the scoring result;

The target component corresponding to the target route is determined according to the routing configuration file, and the target component is loaded to render the target page corresponding to the address of the page to be redirected.
The page rendering method according to claim 1, wherein the step of scoring each matching route according to the matching routing path, and determining the target route according to the scoring result comprises:

Splitting the matching routing path to obtain the number of sub-items of each matching route, and calculating the first score according to the number of sub-items and the first preset score;

Obtain the sub-item type of each sub-item of each matched route, and determine the second score of each sub-item of each matched route according to the sub-item type;

The first score and the second score are added to obtain the scores of each matching route;

The route corresponding to the maximum value in the scores is determined as the target route.
The page rendering method according to claim 2, wherein the acquiring the sub-item type of each sub-item of each matching route, and determining the second sub-item of each sub-item of each matching route according to the sub-item type The steps for scoring include:

Detecting whether each sub-item of each matching route includes preset special characters, and obtaining a first detection result;

Detecting whether each sub-item of each matching route is the root end, and obtaining a second detection result;

Determine the sub-item type of each sub-item according to the first detection result and the second detection result;

The second score of each sub-item of each matching route is determined according to the sub-item type and the mapping relationship between the preset sub-item type and the score.
The page rendering method according to any one of claims 1 to 3, wherein the route matching the address of the page to be jumped is obtained from a pre-generated route configuration file, and the matching route is obtained. Before the step of matching the routing path of the route, it also includes:

When receiving a routing setting request, display a page directory setting interface according to the routing setting request;

When receiving an input completion instruction triggered by the user based on the page directory setting interface, acquiring the page directory input by the user;

Traverse the page directory, and detect whether there is a sub-routing file in the folder corresponding to the currently traversed page directory;

If there is a sub-routing file, obtain the file name of the currently traversed sub-routing file, determine the routing type according to the file name, and generate second routing data according to the routing type and the file name;

Obtain the layout file corresponding to the sub-routing file and its first routing data, and update the first routing data according to the second routing data;

The routing configuration file is generated according to the updated first routing data and the second routing data.
The page rendering method according to claim 4, wherein the method of acquiring a layout file corresponding to the sub-routing file and its first routing data, and updating the first routing data according to the second routing data Steps include:

Detect whether there is a layout file in the folder corresponding to the currently traversed page directory;

If there is a layout file in the folder corresponding to the currently traversed page directory, then determine that the layout file in the folder corresponding to the currently traversed page directory is the layout route corresponding to the sub-routing file;

If there is no layout file in the folder corresponding to the currently traversed page directory, detect whether there is a corresponding layout route in the upper-level directory of the currently traversed page directory;

If there is a corresponding layout route in the upper-level directory of the currently traversed page directory, then determine that the layout route in the upper-level directory of the currently traversed page directory is the layout route corresponding to the sub-routing file;

The first routing data of the layout route is acquired, and the first routing data of the corresponding layout route is updated according to the second routing data.
The page rendering method according to claim 4, wherein the step of generating the routing configuration file according to the updated first routing data and the second routing data comprises:

Execute a preset template on the updated first routing data and the second routing data, and generate the dependency import logic of each route;

Writing the dependency import logic into a preset routing configuration template to obtain an initial routing configuration file;

The initial routing configuration file is compiled to obtain the routing configuration file.
The page rendering method according to any one of claims 1 to 3, wherein the target component corresponding to the target route is determined according to the routing configuration file, and the target component is loaded to render the to-be-hopped The steps of transferring the target page corresponding to the page address include:

Obtain the current routing path corresponding to the current page address, and obtain the target routing path of the target routing;

Splitting the current routing path to obtain a first sub-item array, and splitting the target routing path to obtain a second sub-item array;

Comparing the first sub-item array with the second sub-item array to obtain a public routing path and a non-public routing path, and determining a target component according to the non-public routing path;

A common routing component is determined according to the common routing path, components other than the common routing component in the current routing components corresponding to the current routing path are unloaded, and the target component is loaded.
A page rendering device, wherein the page rendering device includes:

a first obtaining module, configured to obtain the address of the page to be jumped according to the browser page jump request when receiving the browser page jump request;

A second obtaining module, configured to obtain a route matching the address of the page to be jumped from a pre-generated routing configuration file, and obtain a matching routing path of the matching route;

A route scoring module, for scoring each matched route according to the matching routing path, and determining a target route according to the scoring result;

A page rendering module, configured to determine a target component corresponding to the target route according to the routing configuration file, and load the target component to render a target page corresponding to the address of the page to be jumped.
A page rendering device, wherein the page rendering device includes: a memory, a processor, and a page rendering program stored on the memory and executable on the processor, the page rendering program being executed by the processor The steps of implementing the page rendering method according to any one of claims 1 to 7 when executed.
A computer-readable storage medium, wherein a page rendering program is stored on the computer-readable storage medium, and when the page rendering program is executed by a processor, the page rendering according to any one of claims 1 to 7 is realized steps of the method.