Device for obtaining SPA single page route

Abstract

The invention relates to the field of code conversion, and discloses a device for obtaining an SPA single-page route, which is used for solving the problems that the overall architecture of code content is uncontrollable and some dynamic branch judgments are difficult to process in an AST mode when code conversion is carried out, and the method comprises the following steps: obtaining a route entry of a web application through configuration; the method comprises the following steps of: analyzing a file set on which an entry file depends, performing code conversion while analyzing each dependent file, converting es6 and ts grammar into an ES5 file which can be identified by a node environment through a transformFromSync method provided by a abel, finally storing the file in a dist folder with a file path consistent with the original, and finally introducing the entry file stored in the dist folder in a request mode, in this way, the overall routing data can be obtained through dependence, the code snippet analysis process is effectively simplified, the workload is reduced, and the code snippet analysis accuracy is improved.

Description

Technical Field

[0001] The present invention relates to the field of code conversion, and more particularly to a device for obtaining SPA single page routing. Background Art

[0002] In a single-page application (SPA), routing refers to the mechanism used to manage and control navigation between different views or components within an application. Typically, this device includes a router library that parses the browser URL, determines which view or component to display, and processes the browser history to ensure that users can smoothly jump and return in the application. Common router libraries include React Router, Vue Router, etc., which provide declarative routing configuration and navigation management functions for SPA.

[0003] With the rapid development of web technology, the web is not only used to display pages, but also to expand in other areas, and code analysis is one of them. At present, the industry generally uses node to analyze web application code by converting js code into AST tree before analysis. However, this conversion analysis method will cause the overall architecture of the code content to be uncontrollable, the code is ever-changing, and a function can be implemented in several ways. Processing it through AST requires compatibility with various scenarios, and the workload is huge. In addition, some dynamic branch judgments are difficult to process through AST, such as requesting data and then performing various processing codes.

[0004] In view of the above problems, the present invention proposes a solution. Summary of the invention

[0005] In order to overcome the above defects of the prior art, the present invention provides a device for obtaining SPA single page routing to solve the problems existing in the above background technology.

[0006] To achieve the above object, the present invention provides the following technical solutions:

[0007] A device for obtaining a SPA single page route, the device comprising:

[0008] The routing entry acquisition module is used to obtain the routing entry of the web application through configuration;

[0009] A data analysis module is used to analyze the file set that the entry file depends on;

[0010] The conversion and acquisition module is used to perform code conversion while analyzing each dependent file. The transformFromAstSync method provided by babel converts the es6 and ts syntax into ES5 files that can be recognized by the node environment. Finally, the file is saved in the dist folder, and the file path is consistent with the original one.

[0011] Finally, the entry file saved in the dist folder is introduced through the require method, so that the overall routing data can be obtained through dependency.

[0012] Preferably, the step of obtaining the routing entry of the web application through configuration is:

[0013] Create a routing configuration table, which contains the path of each route, the corresponding view component and the routing guard;

[0014] Parsing the current path through the router device to find a routing entry matching the current path;

[0015] Load the corresponding view component according to the matched route entry, and render the view component to the display area of ​​the page;

[0016] For routes with dynamic parameters, the route parameters are extracted when matching the route and passed to the view component;

[0017] Before rendering the view, check if there is a route guard that needs to be verified. If the verification fails, redirect to the login page;

[0018] Make sure to record the user's navigation path in the browser history, listen for changes in the browser address bar, and re-trigger route resolution and component loading.

[0019] Preferably, the step of rendering the view component to the display area of ​​the page is:

[0020] Find the display area in the page that is designated for rendering view components, and make sure to clear the existing content in the display area before rendering a new view component;

[0021] Insert the loaded view component into the display area and record the current path in the browser history;

[0022] After a component renders, the framework automatically calls the component's lifecycle hooks to execute logic that needs to run after rendering.

[0023] Preferably, the step of analyzing the file set on which the entry file depends is:

[0024] Use babel to analyze the file collection that the entry and exit files depend on;

[0025] Analyze the dependencies required by the routing entry, form a recursion, and continuously analyze other dependencies required by the current dependency file;

[0026] When analyzing dependencies, determine whether the current dependency has been analyzed. If it has been analyzed, there is no need to analyze it again.

[0027] Preferably, the step of analyzing the file set on which the import and export files depend by using Babel is:

[0028] Step 2.1: Configure babel to parse and transform JavaScript code, and configure babel to use related plugins;

[0029] Step 2.2: Use babel to convert the source code of the entry file into an abstract syntax tree;

[0030] Step 2.3: Traverse the abstract syntax tree and identify all 'import' and 'require' statements;

[0031] Step 2.4: Parse the actual file path based on the relative path and module name of each dependency;

[0032] Step 2.5: For each parsed dependent file, repeat steps 2.2 to 2.4 to generate the abstract syntax tree of the file and continue to search for its dependencies until all dependencies are parsed;

[0033] Step 2.6: Organize all dependencies into a tree structure, with the root node being the entry file and the child nodes being the dependency files at each level;

[0034] Step 2.7: Extract all unique dependency file paths from the dependency tree to form a complete dependency set.

[0035] Preferably, the analysis of the dependencies required for the routing entry forms a recursive step of:

[0036] Determine the component corresponding to each route from the routing configuration;

[0037] Generate an abstract syntax tree for each routing entry;

[0038] Resolve the actual file path of each direct dependency. For each resolved dependency, generate the abstract syntax tree again and find its dependencies until all dependency chains are resolved.

[0039] Organize the entry point and all its dependencies into a recursive dependency tree, where each node represents a file and the child nodes represent the modules that the module depends on;

[0040] During recursive analysis, ensure that each dependency file is analyzed only once, and check for circular dependencies when building the dependency tree;

[0041] All resolved recursive dependencies are organized into a complete dependency set, which includes the file paths of the entry component and all its recursive dependencies.

[0042] Preferably, the step of determining whether the current dependency has been analyzed is:

[0043] Step 3.1: Initialize an empty collection;

[0044] Step 3.2: Before analyzing each dependency, check whether the file path and module identifier of the dependency already exist in the collection;

[0045] Step 3.3: If the current dependency already exists in the collection, it means it has been analyzed. Skip further analysis of the dependency and return directly.

[0046] Step 3.4: If the current dependency has not been analyzed, continue to parse it, and after the analysis is completed, add the dependency to the collection;

[0047] Step 3.5: Continue recursively resolving dependencies for new, unanalyzed dependencies, and repeat steps 3.2 to 3.4 each time you recurse.

[0048] Step 3.6: When all dependencies and their sub-dependencies have been processed and recorded, end the analysis process.

[0049] Preferably, the steps of introducing the entry file saved in the dist folder by the require method are:

[0050] Find and confirm the path of the dist folder in the project;

[0051] According to the project build configuration, determine the compiled entry file name, combine the dist folder path and the entry file name to generate the full path of the entry file;

[0052] Before trying to import a file, confirm that the entry file exists in the dist folder;

[0053] Introduce the request statement into the entry file;

[0054] Start the SPA application and configure the core routing functions by calling the initialization function in the entry module;

[0055] According to the dependencies defined in the entry file, ensure that these dependencies are correctly imported and configured.

[0056] Technical effects and advantages of the present invention:

[0057] Through configuration, obtain the routing entry of the web application, analyze the file set that the entry file depends on, perform code conversion while analyzing each dependent file, and convert the es6 and ts syntax into ES5 files that can be recognized by the node environment through the transformFromAstSync method provided by babel. Finally, save this file in the dist folder with the same file path as the original one. Finally, introduce the entry file saved in the dist folder through the require method.

[0058] Through simple code conversion, web application routing information can be analyzed without the need for complex and tedious code snippet parsing, thereby reducing the workload. In addition, this solution uses the node environment for parsing, which is more accurate than traditional code snippet analysis. BRIEF DESCRIPTION OF THE DRAWINGS

[0059] Figure 1 It is the overall flow chart of the present invention. DETAILED DESCRIPTION

[0060] The technical solution of the present invention will be clearly and completely described below in conjunction with the accompanying drawings in the present invention. In addition, the forms of the various structures recorded in the following implementations are only examples. The device for obtaining SPA single-page routing involved in the present invention is not limited to the various structures recorded in the following implementations. All other implementations obtained by ordinary technicians in this field without making creative work belong to the scope of protection of the present invention.

[0061] The present invention provides a device for obtaining a SPA single page route, the device comprising:

[0062] The routing entry acquisition module is used to obtain the routing entry of the web application through configuration;

[0063] The routing entry of the web application generally refers to determining or identifying the initial path or starting page for navigation in a web application, that is, the page or path loaded when a user first accesses the application. When a user first accesses a web application, the browser will load a default path or page, which is the routing entry.

[0064] In this embodiment, it should be specifically explained that the steps of obtaining the routing entry of the web application through configuration are:

[0065] Create a routing configuration table that contains the path (URL) of each route, the corresponding view component, and possible route guards (such as permission verification);

[0066] The route guard is a mechanism for controlling navigation behavior, which is used to intercept and verify before a user accesses a route. It can execute some logic before the user enters a specific page, such as checking whether the user is logged in, has access rights, or preloads data, and decides whether to allow continued navigation, redirect to other pages, or block navigation based on the results. Route guards are often used to enhance the security and user experience of Web applications.

[0067] Parse the current URL through the router device and find the routing entry that matches the current path;

[0068] Load the corresponding view component according to the matched route entry, and render the view component to the main display area of ​​the page;

[0069] For routes with dynamic parameters, the route parameters are extracted when matching the route and passed to the view component;

[0070] Dynamic parameters refer to the use of variables or placeholders in the routing path of a web application to capture and process specific parts of a user request. These parameters are usually used to create URLs with dynamic parts, so that the same view component can display different content based on different parameter values.

[0071] Before rendering the view, check if there is a route guard that needs to be verified (such as user permissions). If the verification fails, redirect to the login page or error page.

[0072] Ensure that the user's navigation path is recorded in the browser history to support forward and backward operations;

[0073] Monitor changes in the browser address bar (such as when the user clicks the forward or back button) and re-trigger route parsing and component loading.

[0074] In this embodiment, it should be specifically explained that the step of rendering the view component to the main display area of ​​the page is:

[0075] Find the main display area of ​​the page that is designated for rendering view components. This area is usually a designated ' 'Elements, commonly selected by ID or class selector, and before rendering a new view component, make sure to clear the existing content in the main display area to prevent content overlap or conflict;

[0076] The class selector is a selector in CSS that is used to select and style HTML elements with specific class attributes. By adding attributes to HTML elements and defining corresponding class selectors in CSS, developers can apply styles to all elements containing that class. Class selectors allow multiple elements to share the same set of style rules, and multiple classes can also be applied to an element, thereby achieving flexible style control.

[0077] Insert the loaded view component into the main display area. If you are using a framework, such as React or Vue, use the framework-specific rendering method;

[0078] Record the current path in the browser's history to ensure that users can navigate using the browser's forward and back buttons;

[0079] If you are using a framework like React or Vue, after the component renders, the framework will automatically call the component's lifecycle hooks to execute any logic that needs to run after rendering.

[0080] A data analysis module is used to analyze the file set that the entry file depends on;

[0081] In this embodiment, it should be specifically explained that the steps of analyzing the file set on which the entry file depends are:

[0082] Use babel to analyze the file collection that the entry and exit files depend on;

[0083] Analyze the dependencies required by the routing entry, form a recursion, and continuously analyze what other dependencies the current dependency file requires;

[0084] When analyzing dependencies, determine whether the current dependency has been analyzed. If it has been analyzed, there is no need to analyze it again to prevent infinite recursion caused by mutually dependent files.

[0085] The babel is a widely used JavaScript compiler, mainly used to convert modern JavaScript code into code compatible with older browsers or environments. It can convert the latest JavaScript syntax (such as ES6+ syntax) into syntax supported in earlier versions (such as ES5), ensuring that the code can run on more platforms.

[0086] When analyzing dependencies, by judging whether the current dependency has been analyzed, the analyzed dependencies will not be analyzed again, which can avoid multiple parsing of the same dependency, greatly reduce the repetitiveness of calculation and processing, and improve the speed of the entire dependency analysis. Especially in large projects, there may be a lot of dependencies. By skipping the analyzed dependencies, the total analysis time can be significantly shortened. Each time a dependency is parsed, a corresponding abstract syntax tree (AST) will be generated and memory will be occupied. Avoiding repeated parsing can reduce multiple memory usage, thereby optimizing resource usage. In a limited memory environment, this optimization is particularly important to ensure that the program runs without exceeding the memory limit. If there are circular dependencies in the project (A depends on B, and B depends on A), by judging whether it has been analyzed, it can avoid falling into an infinite loop during the recursive analysis process, thereby preventing serious errors such as stack overflow, preventing program crashes caused by circular dependencies, and ensuring the stability and controllability of the dependency analysis process. By recording and tracking the analyzed dependencies, the project's dependencies can be more clearly managed and understood, which is convenient for subsequent maintenance and optimization, reducing redundant analysis, making dependency management more concise and efficient, and helping developers better understand the project structure. After analyzing the dependencies, the project is usually built or packaged. Reducing repeated dependency analysis can make the build process faster, thereby improving development and deployment efficiency. Through efficient dependency analysis, the performance of the entire application is indirectly improved, especially when bundling and loading modules.

[0087] In this embodiment, it should be specifically explained that the step of analyzing the file set on which the entry and exit files depend through Babel is:

[0088] Step 2.1: Configure babel to parse and transform JavaScript code, especially modular syntax, such as ES6's 'import' statement, and configure babel to use related plugins so that the syntax tree can be parsed correctly;

[0089] Step 2.2: Use babel to convert the source code of the entry file into an abstract syntax tree (AST) for further analysis;

[0090] Step 2.3: Traverse the AST tree and identify all 'import' or 'require' statements, which correspond to other modules or files that the entry file depends on;

[0091] Step 2.4: Resolve the actual file path based on the relative path or module name of each dependency, which may require combining file system operations or path alias resolution in configuration;

[0092] Step 2.5: For each parsed dependent file, repeat steps 2.2 to 2.4 to generate the AST of the file and continue to find its dependencies. This process is recursive until all dependencies are parsed;

[0093] Step 2.6: Organize all dependencies into a tree structure, with the root node being the entry file and the child nodes being the dependency files at each level, so that the dependency relationship of the entire project can be intuitively displayed;

[0094] Step 2.7: Extract all unique dependency file paths from the dependency tree to form a complete dependency set, representing the entry file and all its sub-dependency files.

[0095] In this embodiment, it should be specifically explained that the steps of using babel to convert the source code of the entry file into an abstract syntax tree are:

[0096] Make sure that Babel has been installed and configured in the development environment, determine the path of the entry file to be parsed, read the source code content of the entry file from the file system, and prepare for parsing;

[0097] Use the babel parser to parse the source code. You need to specify some parsing options, such as supported syntax standards (such as ES6, ESNext) and plug-ins (such as JSX, TypeScript), parse the read source code string through the babel parser, and generate the corresponding abstract syntax tree (AST);

[0098] The babel parser converts the source code into an AST object, which structurally represents the syntax and structure of the source code. You can view the generated AST through log output, AST visualization tools, or other methods to understand the structure of the source code.

[0099] In this embodiment, it should be specifically explained that the dependency required for analyzing the routing entry forms a recursive step of:

[0100] Determine the components or modules corresponding to each route from the routing configuration, and use these components or modules as the starting point for dependency analysis;

[0101] Generate an abstract syntax tree (AST) for each route entry to analyze its dependencies, and extract all direct dependencies from the AST, such as modules or files identified by 'import' or 'require' statements;

[0102] Parse the actual file path of each direct dependency, and for each resolved dependency, generate AST again and find its dependencies. This process is performed recursively until all dependency chains are resolved;

[0103] Organize the entry point and all its dependencies into a recursive dependency tree. Each node represents a file or module, and the child nodes represent other modules that the module depends on;

[0104] During recursive analysis, ensure that each dependent file is analyzed only once to avoid repeated parsing;

[0105] When building the dependency tree, check whether there is a circular dependency (i.e. module A depends on module B, and module B depends on module A);

[0106] Organize all resolved recursive dependencies into a complete dependency set, which includes the file paths of the entry component and all its recursive dependencies.

[0107] In this embodiment, it should be specifically explained that the step of determining whether the current dependency has been analyzed is:

[0108] Step 3.1: Initialize an empty collection or list to store the analyzed dependency file paths or module identifiers;

[0109] Step 3.2: Before analyzing each dependency, check if the file path or module identifier of the dependency already exists in the 'analyzedDependencies' collection;

[0110] Step 3.3: If the current dependency already exists in the collection, it means it has been analyzed. Skip further analysis of the dependency and return directly.

[0111] Step 3.4: If the current dependency has not been analyzed, continue to parse it, and after the analysis is completed, add the dependency to 'analyzedDependencies';

[0112] Step 3.5: Continue recursively resolving dependencies for new, unanalyzed dependencies, and repeat steps 3.2 to 3.4 each time you recurse.

[0113] Step 3.6: When all dependencies and their sub-dependencies have been processed and recorded, end the analysis process, ensuring that all paths or module identifiers are analyzed only once.

[0114] The conversion and acquisition module is used to perform code conversion while analyzing each dependent file. The transformFromAstSync method provided by babel converts es6, ts and other syntax into ES5 files that can be recognized by the node environment. Finally, the file is saved in the dist folder, and the file path is consistent with the original one.

[0115] Finally, the entry file saved in the dist folder is introduced through the require method, so that the overall routing data can be obtained through dependency.

[0116] The require method is a method for introducing and using modules in Node.js and some modular environments. It synchronously loads and executes the file or module at the specified path and returns its exported content. This method allows developers to use functions, objects or data defined in another file in one file.

[0117] In this embodiment, it should be specifically explained that the steps of introducing the entry file saved in the dist folder by the require method are:

[0118] Find and confirm the relative or absolute path of the 'dist' folder in your project, which is the directory where the compiled files are stored;

[0119] According to the project build configuration (such as Webpack, Rollup, etc.), determine the compiled entry file name, such as 'main.js', 'app.js', and combine the 'dist' folder path and the entry file name to generate the full path of the entry file;

[0120] Before trying to import a file, confirm that the entry file exists in the 'dist' folder to avoid importing errors;

[0121] Use the 'requirt' statement to introduce the entry file so that its code can be executed in the current environment;

[0122] Start the SPA application and configure core functions such as routing by calling the initialization function or startup logic in the entry module;

[0123] The initialization function and startup logic are key steps or code blocks executed by the application at startup, responsible for setting the initial state, configuring necessary resources or environment, and starting the core functions of the application. Initialization functions usually include loading configurations, establishing database connections, setting global variables, or starting services, while startup logic starts the main functions or services of the application after these preparations are completed. For example, in a web application, startup logic may include starting a server, initializing a routing system, or rendering an initial interface.

[0124] According to the dependencies that may be defined in the entry file (such as other modules, components), ensure that these dependencies have been correctly imported and configured.

[0125] Finally: The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present invention should be included in the protection scope of the present invention.

[0126] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art who is familiar with the present technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

Claims

1. A device for obtaining SPA single page routing, characterized in that: The device comprises: The routing entry acquisition module is used to obtain the routing entry of the web application through configuration; A data analysis module is used to analyze the file set that the entry file depends on; The conversion and acquisition module is used to perform code conversion while analyzing each dependent file. The transformFromAstSync method provided by babel converts the es6 and ts syntax into ES5 files that can be recognized by the node environment. Finally, the file is saved in the dist folder, and the file path is consistent with the original one. Finally, the entry file saved in the dist folder is introduced through the require method, so that the overall routing data can be obtained through dependency.

2. The device for obtaining SPA single page routing according to claim 1, characterized in that: The steps for obtaining the routing entry of the web application through configuration are: Create a routing configuration table, which contains the path of each route, the corresponding view component and the routing guard; Parsing the current path through the router device to find a routing entry matching the current path; Load the corresponding view component according to the matched route entry, and render the view component to the display area of ​​the page; For routes with dynamic parameters, the route parameters are extracted when matching the route and passed to the view component; Before rendering the view, check if there is a route guard that needs to be verified. If the verification fails, redirect to the login page; Make sure to record the user's navigation path in the browser history, listen for changes in the browser address bar, and re-trigger route resolution and component loading.

3. The method for obtaining a SPA single page route according to claim 2, characterized in that: The steps of rendering the view component to the display area of ​​the page are: Find the display area in the page that is designated for rendering view components, and make sure to clear the existing content in the display area before rendering a new view component; Insert the loaded view component into the display area and record the current path in the browser history; After a component renders, the framework automatically calls the component's lifecycle hooks to execute logic that needs to run after rendering.

4. The method for obtaining a SPA single page route according to claim 1, characterized in that: The steps of analyzing the file set that the entry file depends on are: Use babel to analyze the file collection that the entry and exit files depend on; Analyze the dependencies required by the routing entry, form a recursion, and continuously analyze other dependencies required by the current dependency file; When analyzing dependencies, determine whether the current dependency has been analyzed. If it has been analyzed, there is no need to analyze it again.

5. The device for obtaining SPA single page routing according to claim 4, characterized in that: The steps of analyzing the file collection that the entry and exit files depend on through babel are: Step 2.1: Configure babel to parse and transform JavaScript code, and configure babel to use related plugins; Step 2.2: Use babel to convert the source code of the entry file into an abstract syntax tree; Step 2.3: Traverse the abstract syntax tree and identify all 'import' and 'require' statements; Step 2.4: Parse the actual file path based on the relative path and module name of each dependency; Step 2.5: For each parsed dependent file, repeat steps 2.2 to 2.4 to generate the abstract syntax tree of the file and continue to search for its dependencies until all dependencies are parsed; Step 2.6: Organize all dependencies into a tree structure, with the root node being the entry file and the child nodes being the dependency files at each level; Step 2.7: Extract all unique dependency file paths from the dependency tree to form a complete dependency set.

6. The device for obtaining SPA single page routing according to claim 4, characterized in that: The analysis of the dependencies required for the routing entry forms a recursive step: Determine the component corresponding to each route from the routing configuration; Generate an abstract syntax tree for each routing entry; Resolve the actual file path of each direct dependency. For each resolved dependency, generate the abstract syntax tree again and find its dependencies until all dependency chains are resolved. Organize the entry point and all its dependencies into a recursive dependency tree, where each node represents a file and the child nodes represent the modules that the module depends on; During recursive analysis, ensure that each dependency file is analyzed only once, and check for circular dependencies when building the dependency tree; All resolved recursive dependencies are organized into a complete dependency set, which includes the file paths of the entry component and all its recursive dependencies.

7. The device for obtaining SPA single page routing according to claim 4, characterized in that: The steps for determining whether the current dependency has been analyzed are: Step 3.1: Initialize an empty collection; Step 3.2: Before analyzing each dependency, check whether the file path and module identifier of the dependency already exist in the collection; Step 3.3: If the current dependency already exists in the collection, it means it has been analyzed. Skip further analysis of the dependency and return directly. Step 3.4: If the current dependency has not been analyzed, continue to parse it, and after the analysis is completed, add the dependency to the collection; Step 3.5: Continue recursively resolving dependencies for new, unanalyzed dependencies, and repeat steps 3.2 to 3.4 each time you recurse. Step 3.6: When all dependencies and their sub-dependencies have been processed and recorded, end the analysis process.

8. The device for obtaining SPA single page routing according to claim 1, characterized in that: The steps for introducing the entry file saved in the dist folder through the require method are: Find and confirm the path of the dist folder in the project; According to the project build configuration, determine the compiled entry file name, combine the dist folder path and the entry file name to generate the full path of the entry file; Before trying to import a file, confirm that the entry file exists in the dist folder; Introduce the request statement into the entry file; Start the SPA application and configure the core routing functions by calling the initialization function in the entry module; According to the dependencies defined in the entry file, ensure that these dependencies are correctly imported and configured.

Images