Loading method applied to vue remote page and related equipment

Abstract

The embodiment of the invention belongs to the technical field of artificial intelligence, and relates to a loading method and related equipment applied to a vue remote page, and the method comprises the steps: obtaining a developed single page application; according to the single page application, generating a JavaScript file, a page. Json file and a version.json file according to the single page application; the JavaScript file, the page.json file and the versing.json file are deployed in an nginx server, and the JavaScript file, the page.json file and the versing.json file are deployed in the nginx server; according to an add command, the routes corresponding to the array in the page.json are sequentially added to the route of the single page application; receiving an access request which is sent by an access terminal and carries an access identifier; matching is carried out according to the access identifier and a route added by the add command, and a target route is obtained; and rendering the target route and displaying the target route through the access terminal. According to the method, the version.json is added to store the version number of the development page, so that the situation that the page.json is repeatedly loaded and obtained subsequently is avoided, and the performance of the page is greatly improved; and repeated version issuing of the single-page application is avoided, so that the user experience is improved.

Description

Technical Field

[0001] The present application relates to the field of artificial intelligence technology, and in particular to a loading method and related equipment applied to a Vue remote page. Background Art

[0002] In the current single-page application (SPA) in the vue development mode, all js and css of the page are packaged into an entry file. The packaged entry file is loaded when the page is loaded. If the entry file is too large or the user's network is not very good, the loading speed is slow, the white screen time is long, and the user experience is not very good. However, after loading, the page route switching is very smooth. When the developer is developing, all route page files need to be compiled when webpack starts. The more routes there are, the slower the startup.

[0003] It can be seen that the single-page application (SPA) in the traditional Vue development model has the problem of low performance and affects the user experience. Summary of the invention

[0004] The purpose of the embodiments of the present application is to propose a loading method and related equipment for vue remote pages to solve the problem of low performance and poor user experience of single-page applications (SPA) in the traditional vue development model.

[0005] In order to solve the above technical problems, the embodiment of the present application provides a loading method applied to a vue remote page, which adopts the following technical solution:

[0006] Get the developed single-page application;

[0007] Generate JavaScript files, page.json and version.json according to the single-page application;

[0008] Deploy the JavaScript file, the page.json and the version.json on the nginx server;

[0009] According to the addroute command, the routes corresponding to the array in the page.json are added to the routes of the single-page application in sequence;

[0010] receiving an access request carrying an access identifier sent by an access terminal;

[0011] Match the access identifier with the route added by the addroute command to obtain the target route;

[0012] The target route is rendered and displayed through the access terminal.

[0013] Furthermore, after the step of generating the JavaScript file, page.json and version.json according to the single-page application, the following steps are also included:

[0014] Using a code quality detection tool to verify the JavaScript file, the page.json, and the version.json to obtain a verification result;

[0015] If there is no error information in the verification result, the step of deploying the JavaScript file, the page.json and the version.json on the nginx server is executed;

[0016] If there is error information in the verification result, the error information is recorded and the generation operation is terminated.

[0017] Furthermore, the step of sequentially adding the routes corresponding to the array in the page.json to the routes of the single-page application according to the addroute command specifically includes the following steps:

[0018] A file transmission channel corresponding to the page.json is created, wherein the file transmission channel is set with user permissions and access permissions.

[0019] Furthermore, after the step of rendering the target route and displaying it through the access terminal, the following steps are also included:

[0020] Creating a monitoring and alarm platform corresponding to the single-page application to monitor the detection indicators of the system in real time, wherein the indicators include server load, network traffic, and interface response time;

[0021] When the detection indicators are abnormal, the operation and maintenance personnel will be notified in time via SMS or email for processing.

[0022] Furthermore, the step of rendering the target route and displaying it through the access terminal specifically includes the following steps:

[0023] Use code splitting and lazy loading techniques to reduce the size of the code loaded for the first time.

[0024] Furthermore, after the step of rendering the target route and displaying it through the access terminal, the following steps are also included:

[0025] Get access logs and monitoring data corresponding to the single-page application;

[0026] Performing data analysis operations on the access log and the monitoring data according to the Hadoop ecosystem to obtain data analysis results;

[0027] The deployment architecture and configuration parameters of the single-page application are dynamically optimized and adjusted according to the data analysis results.

[0028] In order to solve the above technical problems, the embodiment of the present application also provides a loading device applied to a vue remote page, which adopts the following technical solution:

[0029] The single-page application acquisition module is used to obtain the developed single-page application;

[0030] A file generation module, used to generate JavaScript files, page.json and version.json according to the single-page application;

[0031] A deployment module, used to deploy the JavaScript file, the page.json and the version.json on the nginx server;

[0032] A route adding module, used to add the routes corresponding to the array in the page.json to the routes of the single page application in sequence according to the addroute command;

[0033] A request acquisition module, used to receive an access request carrying an access identifier sent by an access terminal;

[0034] A matching module, used for matching the access identifier with the route added by the addroute command to obtain a target route;

[0035] The rendering module is used to render the target route and display it through the access terminal.

[0036] Furthermore, the device also includes:

[0037] A verification module, used to use a code quality detection tool to verify the JavaScript file, the page.json and the version.json to obtain a verification result;

[0038] A first verification result module, configured to execute the step of deploying the JavaScript file, the page.json and the version.json on the nginx server if there is no error information in the verification result;

[0039] The second verification result module is used to record the error information if there is error information in the verification result, and terminate the generation operation.

[0040] In order to solve the above technical problems, the embodiment of the present application further provides a computer device, which adopts the following technical solution:

[0041] It includes a memory and a processor, wherein the memory stores computer-readable instructions, and when the processor executes the computer-readable instructions, the steps of the loading method applied to the Vue remote page as described above are implemented.

[0042] In order to solve the above technical problems, the embodiment of the present application further provides a computer-readable storage medium, which adopts the following technical solution:

[0043] The computer-readable storage medium stores computer-readable instructions, and when the computer-readable instructions are executed by the processor, the steps of the loading method applied to the Vue remote page as described above are implemented.

[0044] The present application provides a loading method for vue remote pages, including: obtaining a developed single-page application; generating a JavaScript file, page.json and version.json according to the single-page application; deploying the JavaScript file, the page.json and the version.json on an nginx server; adding the routes corresponding to the array in the page.json to the routes of the single-page application in sequence according to the addroute command; receiving an access request carrying an access identifier sent by an access terminal; matching the access identifier with the route added by the addroute command to obtain a target route; rendering the target route and displaying it through the access terminal. Compared with the prior art, the present application adds version.json to store the version number of the development page, avoiding the subsequent repeated loading and acquisition of page.json, which greatly improves the performance of the page. In addition, the developed page route is stored in page.json, the entry file is extremely small, and the performance is excellent. At the same time, the version only needs to publish page js, version.json, and page.json without publishing the single-page application, which avoids the repeated release of the single-page application and improves the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0045] In order to more clearly illustrate the scheme in the present application, a brief introduction is given below to the drawings required for use in the description of the embodiments of the present application. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0046] Figure 1is an exemplary system architecture diagram to which the present application may be applied;

[0047] Figure 2 This is a flowchart of the implementation of the loading method applied to the vue remote page provided by this application;

[0048] Figure 3 It is a structural schematic diagram of a loading device applied to a vue remote page provided by the present application;

[0049] Figure 4 It is a structural diagram of an embodiment of a computer device according to the present application. DETAILED DESCRIPTION

[0050] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by technicians in the technical field of the present application; the terms used in the specification of the application herein are only for the purpose of describing specific embodiments and are not intended to limit the present application; the terms "including" and "having" and any variations thereof in the specification and claims of the present application and the above-mentioned drawings are intended to cover non-exclusive inclusions. The terms "first", "second", etc. in the specification and claims of the present application or the above-mentioned drawings are used to distinguish different objects, not to describe a specific order.

[0051] Reference to "embodiments" herein means that a particular feature, structure, or characteristic described in conjunction with the embodiments may be included in at least one embodiment of the present application. The appearance of the phrase in various locations in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0052] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the accompanying drawings.

[0053] like Figure 1 As shown, the system architecture 100 may include a terminal device 101, a network 102 and a server 103. The terminal device 101 may be a laptop 1011, a tablet computer 1012 or a mobile phone 1013. The network 102 is used to provide a medium for a communication link between the terminal device 101 and the server 103. The network 102 may include various connection types, such as wired, wireless communication links or optical fiber cables, etc.

[0054] The user can use the terminal device 101 to interact with the server 103 through the network 102 to receive or send messages, etc. Various communication client applications can be installed on the terminal device 101, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social platform software, etc.

[0055] The terminal device 101 can be any electronic device with a display screen and supporting web browsing. In addition to the laptop computer 1011, tablet computer 1012 or mobile phone 1013, the terminal device 101 can also be an e-book reader, an MP3 player (Moving Picture Experts Group Audio Layer III), an MP4 (Moving Picture Experts Group Audio Layer IV), a laptop computer, a desktop computer, etc.

[0056] The server 103 may be a server that provides various services, such as a background server that provides support for a web page displayed on the terminal device 101 .

[0057] It should be noted that the loading method applied to the vue remote page provided in the embodiment of the present application is generally executed by a server / terminal device, and accordingly, the loading device applied to the vue remote page is generally set in the server / terminal device.

[0058] It should be understood that Figure 1 The number of terminal devices, networks and servers in the embodiment is only for illustration. Any number of terminal devices, networks and servers may be provided according to implementation requirements.

[0059] Continue to refer Figure 2 , showing a flow chart of an embodiment of a method for loading a vue remote page according to the present application. The method for loading a vue remote page comprises: step S201, step S202, step S203, step S204, step S205, step S206 and step S207.

[0060] In step S201, a developed single-page application is obtained.

[0061] In the embodiment of the present application, a single-page application is created using vue-cli or icorejs template, wherein a single-page application generally includes HTML, CSS, JavaScript files and possible build products (such as files packaged by tools such as Webpack and Vue CLI). These files together constitute the front-end part of the user interface, which can be run in the user's browser to update the content without reloading the entire page.

[0062] In step S202, a JavaScript file, page.json and version.json are generated according to the single-page application.

[0063] In the embodiments of the present application, the JavaScript file generally refers to the main logic file of a single-page application, which may be one or more files packaged by a build tool (such as Webpack), containing all or most of the JavaScript code of the application; page.json contains the routing configuration of all pages in the application or the page-level JavaScript code; version.json is used to store the version number of the application for use when needed (such as cache control, version update prompts, etc.).

[0064] In an embodiment of the present application, a specific JavaScript file is extracted or generated from a single-page application, wherein the developed page is packaged using webpack according to the amd specification to generate a js file, and the hash of the currently generated js and the routing address of the currently developed page are written into a json file. When all the developed pages are packaged, the json file is named page.json. At this time, the page.json file contains a routing list of all pages and a hash value of the remote access corresponding to the page js. Folder-hash is used to generate the hash of the folder at the time of current packaging, and the hash is retained in the file version.json.

[0065] In some optional implementation methods of the embodiments of the present application, a judgment can be added to the created single-page application entry js file: obtain the hash of the URL address accessed by the user, match the hash with the routes contained in the current single-page application, and if they match, render the matched page; if they do not match, it is necessary to use ajax to load the version.json generated in step 2 from the remote end, and match it with the version number of the version.json information cached in the current browser indexedDB. If they match, obtain the page.json information cached in the local indexedDB; if they do not match, use ajax to remotely obtain the page.json file, and cache the version.json and page.json information at this time to the browser indexedDB.

[0066] In step S203, the JavaScript file, page.json and version.json are deployed on the nginx server.

[0067] In the embodiment of the present application, the js, page.json, and version.json of the page are deployed on the nginx server. Specifically, Nginx is a high-performance HTTP and reverse proxy server, which is often used to host static files and act as a reverse proxy for Web applications. The deployment process may include copying files to a specified directory of Nginx (such as / usr / share / nginx / html) and configuring Nginx to correctly serve these files.

[0068] In step S204, the routes corresponding to the array in page.json are added to the routes of the single-page application in sequence according to the addroute command.

[0069] In the embodiment of the present application, the page.json information is obtained, which contains a hash array of all page routes and page js. The array is looped, and the addRoute API method provided by vue-router is used to add the routes in the array to the single-page application route one by one. The component in the added route object uses the defineAsyncComponent asynchronous component API method in vue. When the page route is matched, the URL address of the completed page js is obtained according to the hash value of the js corresponding to the route in page.json. Since the js packaging adopts the AMD specification, it can be loaded using requirejs. After loading, the components of the page are obtained, the components are rendered, and the ui is obtained.

[0070] In step S205, an access request carrying an access identifier sent by an access terminal is received.

[0071] In step S206, the access identifier is matched with the route added by the addroute command to obtain the target route.

[0072] In step S207, the target route is rendered and displayed through the access terminal.

[0073] In the embodiment of the present application, the user accesses the hash that matches the route added by addRoute, and the user sees the page according to the route rendering.

[0074] In an embodiment of the present application, a loading method for vue remote pages is provided, including: obtaining a developed single-page application; generating a JavaScript file, page.json and version.json according to the single-page application; deploying the JavaScript file, page.json and version.json on an nginx server; adding the routes corresponding to the array in page.json to the routes of the single-page application in sequence according to the addroute command; receiving an access request carrying an access identifier sent by an access terminal; matching the access identifier with the route added by the addroute command to obtain the target route; rendering the target route and displaying it through the access terminal. Compared with the prior art, the present application adds version.json to store the version number of the development page, avoiding the subsequent repeated loading and acquisition of page.json, which greatly improves the performance of the page. In addition, the developed page route is stored in page.json, the entry file is extremely small, and the performance is excellent. At the same time, the version only needs to publish page js, version.json, and page.json without publishing the single-page application, which avoids the repeated release of the single-page application and improves the user experience.

[0075] In some optional implementations of the embodiments of the present application, after the above step of generating a JavaScript file, page.json and version.json according to the single-page application, the following steps are also included:

[0076] Use code quality detection tools to verify JavaScript files, page.json, and version.json to obtain verification results;

[0077] If there is no error message in the verification result, execute the steps to deploy the JavaScript file, page.json, and version.json on the nginx server;

[0078] If there is error information in the verification result, the error information is recorded and the generation operation is terminated.

[0079] In an embodiment of the present application, the code quality detection tool is mainly used to automatically analyze code and configuration files, identify potential errors, inconsistent code styles, unused variables, possible performance issues, and other problems. The code quality detection tool can be ESLint, JSHint, etc. for JavaScript, as well as validators for JSON files. These tools can usually perform checks according to predefined rule sets (such as ESLint's rules) or custom rules.

[0080] In the embodiment of the present application, the verification operation specifically includes:

[0081] 1) Verification of JavaScript files: Code quality detection tools will check syntax errors, undeclared variables, unused variables, code style (such as indentation, spaces, semicolon usage), etc.

[0082] 2) Verification of page.json and version.json: The verifier checks whether the file follows the JSON format (such as the correct key-value pair format, quotation mark usage, comma separation, etc.), and whether it contains the expected fields and values.

[0083] In the embodiment of the present application, the format and content of the generated file are checked by a code quality detection tool to ensure the integrity and correctness of the file.

[0084] In some optional implementations of the embodiments of the present application, the above step of adding the routes corresponding to the array in page.json to the routes of the single-page application in sequence according to the addroute command specifically includes the following steps:

[0085] Create a file transfer channel corresponding to page.json, where the file transfer channel is set with user permissions and access permissions.

[0086] In an embodiment of the present application, the file transfer channel is mainly used to ensure that files can be securely transferred from a source location to a target location. The file transfer channel may be FTP (File Transfer Protocol), SFTP (Secure File Transfer Protocol), SCP (Secure Copy), HTTP (Hypertext Transfer Protocol, especially for REST API), HTTPS (Secure HTTP), WebSockets, etc. In actual applications, the specific file transfer channel may be selected depending on specific requirements (such as security, performance, ease of use, and existing technology stack).

[0087] In the embodiment of the present application, by creating a file transfer channel corresponding to page.json and setting appropriate user permissions and access rights, it can be ensured that the file is properly protected during the transmission process and only authorized personnel can access it.

[0088] In some optional implementations of the embodiments of the present application, after the above-mentioned steps of rendering the target routing and displaying through the access terminal, the following steps are also included:

[0089] Create a monitoring and alarm platform corresponding to the single-page application to monitor the system's detection indicators in real time, including server load, network traffic, and interface response time;

[0090] When the detection indicators are abnormal, the operation and maintenance personnel will be notified in time via SMS or email for processing.

[0091] In the embodiment of the present application, by creating a monitoring and alarm platform corresponding to the single-page application and performing real-time monitoring and alarm notification of the key performance indicators of the system, the operation and maintenance team can manage and maintain the system more efficiently to ensure its stability and availability. This is of great significance for improving user experience, reducing failure rates, and ensuring business continuity.

[0092] In some optional implementations of the embodiments of the present application, the above-mentioned steps of rendering the target routing and displaying through the access terminal specifically include the following steps:

[0093] Use code splitting and lazy loading techniques to reduce the size of the code loaded for the first time.

[0094] In the embodiment of the present application, code splitting is mainly used to split the code into multiple packages (chunks) and load these packages on demand when needed. This technology allows developers to split the application into multiple smaller code blocks instead of loading it as a single, large file. In this way, users only need to download the code required for the current route or function, rather than the entire code of the entire application. Specifically:

[0095] 1) Code splitting based on routing: In single-page applications (SPA), the most common way of code splitting is based on routing. For example, in React applications, you can use React Router's React.lazy and Suspense components to implement code splitting based on routing. Vue applications can use Vue Router combined with Webpack's code splitting function to achieve this;

[0096] 2) Dynamic Imports: In JavaScript, you can use dynamic import syntax (such as import()) to load modules on demand. This syntax allows developers to dynamically load a module when it is needed, rather than loading it immediately when the page loads.

[0097] In the embodiments of the present application, lazy loading is mainly used to optimize the loading time of web pages or applications. It allows the browser or application to delay loading certain resources (such as pictures, videos, code blocks, etc.) until these resources are about to enter the visible area or the user needs them.

[0098] In the embodiments of the present application, code segmentation and lazy loading technology are used to significantly reduce the initial loading code size of the Web application and improve the loading speed and performance of the application.

[0099] In some optional implementations of the embodiments of the present application, after the above-mentioned steps of rendering the target routing and displaying through the access terminal, the following steps are also included:

[0100] Get access logs and monitoring data corresponding to the single-page application;

[0101] Perform data analysis operations on access logs and monitoring data according to the Hadoop ecosystem to obtain data analysis results;

[0102] Dynamically optimize and adjust the deployment architecture and configuration parameters of the single-page application based on data analysis results.

[0103] In the present application embodiment, Hadoop is an open source distributed computing framework developed by the Apache Foundation, which supports the processing of large-scale data sets. The Hadoop ecosystem includes multiple components such as HDFS (Hadoop Distributed File System), MapReduce, Hive, HBase, Spark, etc. These components work together to provide powerful data processing and analysis capabilities.

[0104] In the embodiment of the present application, dynamic optimization and adjustment may be:

[0105] 1) Performance optimization: Based on the data analysis results, identify the performance bottleneck. For example, if a certain interface response time is too long, it may be due to insufficient backend service processing capabilities or inefficient database queries. For these problems, you can adjust the deployment architecture (such as increasing the number of servers, optimizing load balancing strategies) or modify configuration parameters (such as adjusting database indexes, optimizing query statements) to improve performance.

[0106] 2) Resource allocation: Dynamically adjust resource allocation strategies based on resource usage in monitoring data (such as CPU usage, memory usage, etc.). For example, increase server resources during peak hours to cope with the surge in traffic; reduce resource usage during off-peak hours to reduce costs.

[0107] 3) User experience improvement: By analyzing user behavior data (such as page dwell time, click-through rate, etc.), we can identify areas where users are dissatisfied, and accordingly improve the user interface, optimize the interaction process, etc. to enhance the user experience.

[0108] 4) Security reinforcement: Based on abnormal behaviors in access logs (such as frequent failed login attempts, abnormal request patterns, etc.), timely discover and respond to potential security threats and strengthen the system's security protection measures.

[0109] In the embodiment of the present application, by obtaining access logs and monitoring data corresponding to the single-page application and performing data analysis operations using the Hadoop ecosystem, in-depth performance evaluation and user behavior insights can be obtained. Based on these analysis results, the deployment architecture and configuration parameters of the single-page application can be dynamically optimized and adjusted to improve the performance, stability and user experience of the application.

[0110] The embodiments of the present application can acquire and process relevant data based on artificial intelligence technology. Among them, artificial intelligence (AI) is the theory, method, technology and application system that uses digital computers or machines controlled by digital computers to simulate, extend and expand human intelligence, perceive the environment, acquire knowledge and use knowledge to obtain the best results.

[0111] AI basic technologies generally include sensors, dedicated AI chips, cloud computing, distributed storage, big data processing technology, operation / interaction systems, mechatronics, etc. AI software technologies mainly include computer vision technology, robotics technology, biometrics technology, speech processing technology, natural language processing technology, and machine learning / deep learning.

[0112] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through computer-readable instructions, and the computer-readable instructions can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, the aforementioned storage medium can be a non-volatile storage medium such as a disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

[0113] It should be understood that, although the steps in the flowchart of the accompanying drawings are displayed in sequence as indicated by the arrows, these steps are not necessarily executed in sequence in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least a part of the steps in the flowchart of the accompanying drawings may include multiple sub-steps or multiple stages, and these sub-steps or stages are not necessarily executed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be executed in turn or alternately with other steps or at least a part of the sub-steps or stages of other steps.

[0114] Further references Figure 3 , as a response to the above Figure 2 The present application provides an embodiment of a loading device for a vue remote page, and the device embodiment is similar to Figure 2 Corresponding to the method embodiment shown, the device can be specifically applied to various electronic devices.

[0115] like Figure 3 As shown, the loading device 200 applied to the vue remote page of the embodiment of the present application includes:

[0116] The single-page application acquisition module 210 is used to acquire the developed single-page application;

[0117] The file generation module 220 is used to generate JavaScript files, page.json and version.json according to the single page application;

[0118] A deployment module 230 is used to deploy the JavaScript file, page.json and version.json on the nginx server;

[0119] The route adding module 240 is used to add the routes corresponding to the array in page.json to the routes of the single page application in sequence according to the addroute command;

[0120] The request acquisition module 250 is used to receive an access request carrying an access identifier sent by an access terminal;

[0121] A matching module 260, configured to match the access identifier with the route added by the addroute command to obtain a target route;

[0122] The rendering module 270 is used to render the target route and display it through the access terminal.

[0123] In an embodiment of the present application, a loading device 200 for a vue remote page is provided, including: a single-page application acquisition module 210, for acquiring a developed single-page application; a file generation module 220, for generating a JavaScript file, page.json and version.json according to the single-page application; a deployment module 230, for deploying the JavaScript file, page.json and version.json on an nginx server; a route adding module 240, for adding the routes corresponding to the array in page.json to the routes of the single-page application in sequence according to the addroute command; a request acquisition module 250, for receiving an access request carrying an access identifier sent by an access terminal; a matching module 260, for matching the access identifier with the route added by the addroute command to obtain a target route; a rendering module 270, for rendering the target route and displaying it through the access terminal. Compared with the prior art, this application adds version.json to store the version number of the development page, avoiding subsequent repeated loading and obtaining of page.json, greatly improving the performance of the page. In addition, the developed page routes are stored in page.json, the entry file is extremely small, and the performance is excellent. At the same time, to release the version, only page js, version.json, and page.json need to be released without releasing a single-page application, avoiding repeated releases of single-page applications and improving user experience.

[0124] In some optional implementations of the embodiments of the present application, the above-mentioned loading device 200 applied to the vue remote page also includes:

[0125] The verification module is used to use the code quality detection tool to verify the JavaScript file, page.json and version.json to obtain the verification results;

[0126] The first verification result module is used to execute the step of deploying the JavaScript file, page.json and version.json on the nginx server if there is no error information in the verification result;

[0127] The second verification result module is used to record the error information and terminate the generation operation if there is error information in the verification result.

[0128] To solve the above technical problems, the present application also provides a computer device. Figure 4 , Figure 4 This is a basic structural block diagram of a computer device according to an embodiment of the present application.

[0129] The computer device 300 includes a memory 310, a processor 320, and a network interface 330 that are interconnected and communicated through a system bus. It should be noted that the figure only shows a computer device 300 having components 310-330, but it should be understood that it is not required to implement all the components shown, and more or fewer components can be implemented instead. Among them, those skilled in the art can understand that the computer device here is a device that can automatically perform numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes but is not limited to microprocessors, application specific integrated circuits (Application Specific Integrated Circuit, ASIC), programmable gate arrays (Field-Programmable Gate Array, FPGA), digital processors (Digital Signal Processor, DSP), embedded devices, etc.

[0130] The computer device may be a computing device such as a desktop computer, a notebook, a PDA, a cloud server, etc. The computer device may interact with a user through a keyboard, a mouse, a remote controller, a touch pad, or a voice control device.

[0131] The memory 310 includes at least one type of readable storage medium, and the readable storage medium includes flash memory, hard disk, multimedia card, card-type memory (for example, SD or DX memory, etc.), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the memory 310 can be an internal storage unit of the computer device 300, such as a hard disk or memory of the computer device 300. In other embodiments, the memory 310 can also be an external storage device of the computer device 300, such as a plug-in hard disk equipped on the computer device 300, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) card, a flash card, etc. Of course, the memory 310 can also include both the internal storage unit of the computer device 300 and its external storage device. In the embodiment of the present application, the memory 310 is generally used to store the operating system and various application software installed on the computer device 300, such as computer-readable instructions for the loading method of the vue remote page. In addition, the memory 310 can also be used to temporarily store various data that have been output or are to be output.

[0132] The processor 320 may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chip in some embodiments. The processor 320 is generally used to control the overall operation of the computer device 300. In the embodiment of the present application, the processor 320 is used to run computer-readable instructions or process data stored in the memory 310, such as running computer-readable instructions for the loading method applied to the vue remote page.

[0133] The network interface 330 may include a wireless network interface or a wired network interface. The network interface 330 is generally used to establish a communication connection between the computer device 300 and other electronic devices.

[0134] The computer device provided by this application adds version.json to store the version number of the development page, avoiding subsequent repeated loading and obtaining of page.json, which greatly improves the performance of the page. In addition, the developed page route is stored in page.json, the entry file is extremely small, and the performance is excellent. At the same time, to release the version, only page js, version.json, and page.json need to be released without releasing a single-page application, avoiding repeated releases of single-page applications and improving user experience.

[0135] The present application also provides another implementation, namely, providing a computer-readable storage medium, wherein the computer-readable storage medium stores computer-readable instructions, and the computer-readable instructions can be executed by at least one processor to enable the at least one processor to perform the steps of the loading method applied to the vue remote page as described above.

[0136] The computer-readable storage medium provided by the present application adds version.json to store the version number of the development page, avoiding subsequent repeated loading and acquisition of page.json, which greatly improves the performance of the page. In addition, the developed page route is stored in page.json, the entry file is extremely small, and the performance is excellent. At the same time, to release the version, only page js, version.json, and page.json need to be released without releasing a single-page application, avoiding repeated releases of single-page applications and improving user experience.

[0137] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes a number of instructions for a terminal device (which can be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in each embodiment of the present application.

[0138] Obviously, the embodiments described above are only some embodiments of the present application, rather than all embodiments. The preferred embodiments of the present application are given in the accompanying drawings, but they do not limit the patent scope of the present application. The present application can be implemented in many different forms. On the contrary, the purpose of providing these embodiments is to make the understanding of the disclosure of the present application more thorough and comprehensive. Although the present application is described in detail with reference to the aforementioned embodiments, for those skilled in the art, it is still possible to modify the technical solutions recorded in the aforementioned specific implementation methods, or to perform equivalent replacement of some of the technical features therein. Any equivalent structure made using the contents of the specification and drawings of this application, directly or indirectly used in other related technical fields, is similarly within the scope of patent protection of this application.

Claims

1. A loading method applied to a vue remote page, characterized in that: The method is applied to the Vue single-page application development mode, including the following steps: Get the developed single-page application; Generate JavaScript files, page.json and version.json according to the single-page application; Deploy the JavaScript file, the page.json and the version.json on the nginx server; According to the addroute command, the routes corresponding to the array in the page.json are added to the routes of the single-page application in sequence; receiving an access request carrying an access identifier sent by an access terminal; Match the access identifier with the route added by the addroute command to obtain the target route; The target route is rendered and displayed through the access terminal.

2. According to the loading method applied to vue remote pages according to claim 1, it is characterized in that After the step of generating a JavaScript file, page.json and version.json according to the single-page application, the following steps are also included: Using a code quality detection tool to verify the JavaScript file, the page.json, and the version.json to obtain a verification result; If there is no error information in the verification result, the step of deploying the JavaScript file, the page.json and the version.json on the nginx server is executed; If there is error information in the verification result, the error information is recorded and the generation operation is terminated.

3. The loading method applied to vue remote pages according to claim 1 is characterized in that: The step of sequentially adding the routes corresponding to the array in the page.json to the routes of the single-page application according to the addroute command specifically includes the following steps: A file transmission channel corresponding to the page.json is created, wherein the file transmission channel is set with user permissions and access permissions.

4. The loading method applied to vue remote pages according to claim 1, characterized in that: After the step of rendering the target route and displaying it through the access terminal, the following steps are also included: Creating a monitoring and alarm platform corresponding to the single-page application to monitor the detection indicators of the system in real time, wherein the indicators include server load, network traffic, and interface response time; When the detection indicators are abnormal, the operation and maintenance personnel will be notified in time via SMS or email for processing.

5. The loading method applied to vue remote pages according to claim 1, characterized in that: The step of rendering the target route and displaying it through the access terminal specifically includes the following steps: Use code splitting and lazy loading techniques to reduce the size of the code loaded for the first time.

6. The loading method applied to vue remote pages according to claim 1, characterized in that: After the step of rendering the target route and displaying it through the access terminal, the following steps are also included: Get access logs and monitoring data corresponding to the single-page application; Performing data analysis operations on the access log and the monitoring data according to the Hadoop ecosystem to obtain data analysis results; The deployment architecture and configuration parameters of the single-page application are dynamically optimized and adjusted according to the data analysis results.

7. A loading device applied to a vue remote page, characterized in that: include: The single-page application acquisition module is used to obtain the developed single-page application; A file generation module, used to generate JavaScript files, page.json and version.json according to the single-page application; A deployment module, used to deploy the JavaScript file, the page.json and the version.json on the nginx server; A route adding module, used to add the routes corresponding to the array in the page.json to the routes of the single page application in sequence according to the addroute command; A request acquisition module, used to receive an access request carrying an access identifier sent by an access terminal; A matching module, used for matching the access identifier with the route added by the addroute command to obtain a target route; The rendering module is used to render the target route and display it through the access terminal.

8. The loading device applied to vue remote page according to claim 7, characterized in that: The device also includes: A verification module, used to use a code quality detection tool to verify the JavaScript file, the page.json and the version.json to obtain a verification result; A first verification result module, configured to execute the step of deploying the JavaScript file, the page.json and the version.json on the nginx server if there is no error information in the verification result; The second verification result module is used to record the error information if there is error information in the verification result, and terminate the generation operation.

9. A computer device comprising a memory and a processor, characterized in that: The memory stores computer-readable instructions, and when the processor executes the computer-readable instructions, the steps of the loading method applied to the vue remote page as described in any one of claims 1 to 6 are implemented.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-readable instructions, and when the computer-readable instructions are executed by the processor, the steps of the loading method applied to the vue remote page as described in any one of claims 1 to 6 are implemented.

Images