Static page integration and resource management method and device, equipment and storage medium

Abstract

The invention relates to the technical field of research and development management and the field of financial science and technology, and discloses a static page integration and resource management method, which comprises the following steps of: starting a static service module and Vite page service in a server-side development environment; a static service module is used for processing static resources of old projects; a front-end page is developed and debugged by using Vite, and single-page and multi-page applications are processed; forwarding a page request to the Vite through a static service module proxy, and processing the request and skipping by the Vite; configuring a page proxy mechanism of Vite, and processing jump and resource management among sub-applications; static service module middleware is used for processing static resources and API requests of the multiple sub-applications, and resource interaction is managed. By integrating the static service module and the Vite, unified management of static resources and page requests of new and old projects is realized, resource conflicts are avoided, and the loading efficiency is improved. The Vite provides an efficient development and debugging environment, supports single-page and multi-page applications, and improves the development efficiency by using module hot replacement.

Description

Technical Field

[0001] The present invention relates to the fields of research and development management technology and financial technology, and in particular to a static page integration and resource management method, device, equipment and storage medium. Background Art

[0002] With the rapid development of Internet technology, front-end development frameworks are constantly updated and iterated, and new technologies are emerging like mushrooms after rain. Express is a fast, open, and minimalist web development framework based on Node.js, which is widely used to build server-side web applications. Vite is a new front-end building tool that uses native ES modules to achieve fast module loading and hot updates, greatly improving the efficiency of front-end development.

[0003] In the application development of the financial field, especially large-scale insurance systems (such as policy management, insurance product management, underwriting management and other functional modules), the project scale is large, the modules are numerous, and the technology stack is complex. Traditional old projects usually use frameworks such as Express to provide static resource services and back-end interfaces, while newly developed business modules tend to use Vite with modern front-end frameworks (such as Vue) for development.

[0004] However, existing technologies face the following challenges when integrating new and old technology stacks:

[0005] The new and old projects use different technical frameworks, which means that different services need to be started separately and cannot be managed uniformly in the same server-side environment.

[0006] The static resources of the old project and the front-end resources of the new project need to be processed separately, which makes it impossible to achieve unified resource management and increases maintenance costs.

[0007] In order to perform joint debugging in the development environment, developers need to configure complex proxy and cross-domain settings, which increases the difficulty of development and debugging.

[0008] During the development phase, page jumps and resource interactions between different sub-applications require special processing, and the actual operation of the production environment cannot be simulated, which affects development efficiency.

[0009] Currently, there is a lack of a method that can effectively integrate static service modules and Vite page services in a server-side development environment to achieve unified management of old projects and new development projects. Summary of the invention

[0010] The main purpose of the present invention is to provide a static page integration and resource management method, device, equipment and storage medium, aiming to solve the technical problem of how to effectively integrate and manage static resources and page requests of old projects and new development projects in a development environment.

[0011] To achieve the above object, the present invention provides a static page integration and resource management method, comprising:

[0012] Start the static service module and Vite page service in the server-side development environment;

[0013] Processing static resources of old projects through the static service module;

[0014] Develop and debug front-end pages through the Vite page service, and handle page construction for single-page and multi-page applications;

[0015] Through the proxy function of the static service module, the client's page request is forwarded to the Vite page service, and the Vite page service processes the resources in the page request and performs the page jump operation;

[0016] Configure the page proxy mechanism of the Vite page service, and process the jump and resource management between sub-application pages through the page proxy mechanism;

[0017] The static middleware and proxy middleware of the static service module process the static resources and API requests of multiple sub-applications, and control the resource interaction between the sub-application pages.

[0018] Furthermore, to achieve the above-mentioned purpose, the present invention provides a static page integration and resource management device, comprising:

[0019] Service initialization module, used to start static service modules and Vite page services in the server-side development environment;

[0020] An old project static resource processing module, used to process the static resources of the old project through the static service module;

[0021] The front-end page development and construction module is used to develop and debug the front-end page through the Vite page service, and handle the page construction of single-page and multi-page applications;

[0022] The request proxy and page jump module is used to forward the client's page request to the Vite page service through the proxy function of the static service module, process the resources in the page request through the Vite page service and perform the page jump operation;

[0023] A resource management module, used to configure the page proxy mechanism of the Vite page service, and to process the jump and resource management between sub-application pages through the page proxy mechanism;

[0024] The static resource and API request management module is used to process the static resources and API requests of multiple sub-applications through the static middleware and proxy middleware of the static service module, and control the resource interaction between the sub-application pages.

[0025] Furthermore, to achieve the above-mentioned purpose, the present invention also provides a computer device, which includes a memory, a processor, and a static page integration and resource management program stored in the memory and executable on the processor, and the static page integration and resource management program, when executed by the processor, implements the steps of the static page integration and resource management method as described above.

[0026] Furthermore, to achieve the above objectives, the present invention also provides a computer-readable storage medium, on which a static page integration and resource management program is stored, and when the static page integration and resource management program is executed by a processor, the steps of the static page integration and resource management method as described above are implemented.

[0027] Beneficial effects: The present invention relates to the technical field of R&D management and the field of financial technology, and discloses a static page integration and resource management method, which starts a static service module and a Vite page service in a server-side development environment; uses a static service module to process static resources of old projects; uses Vite to develop and debug front-end pages, and processes single-page and multi-page applications; forwards page requests to Vite through a static service module proxy, and Vite processes requests and jumps; configures Vite's page proxy mechanism to handle jumps and resource management between sub-applications; uses a static service module middleware to process static resources and API requests of multiple sub-applications, and manages resource interactions. The present invention integrates a static service module and Vite to achieve unified management of static resources and page requests of new and old projects, avoid resource conflicts, and improve loading efficiency. Vite provides an efficient development and debugging environment, supports single-page and multi-page applications, and uses hot module replacement to improve development efficiency. Through a static service module proxy, forwards requests to Vite, simplifies management, and reduces configuration difficulty. Configure the Vite proxy mechanism to solve the jump and resource management between sub-applications and achieve seamless integration. Use static service module middleware to uniformly process static resources and API requests of multiple sub-applications, simplify resource management and improve efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0028] The present invention will be further described below with reference to the accompanying drawings and embodiments, in which:

[0029] Figure 1 A schematic diagram of an application environment of a static page integration and resource management method in an embodiment of the present invention;

[0030] Figure 2A schematic diagram of a flow chart of an embodiment of a static page integration and resource management method of the present invention;

[0031] Figure 3 A schematic diagram of functional modules of a preferred embodiment of the static page integration and resource management device of the present invention;

[0032] Figure 4 A schematic diagram of the structure of a computer device in one embodiment of the present invention;

[0033] Figure 5 FIG. 4 is another schematic diagram of the structure of a computer device in one embodiment of the present invention. DETAILED DESCRIPTION

[0034] It should be understood that the specific embodiments described herein are only used to explain the present invention, and are not used to limit the present invention.

[0035] The static page integration and resource management method provided by the embodiment of the present invention can be applied in Figure 1 In the application environment, the user end communicates with the server end through the network. The server end can start the static service module and Vite page service in the server-side development environment through the user end; use the static service module to process the static resources of the old project; use Vite to develop and debug the front-end page, and process single-page and multi-page applications; forward the page request to Vite through the static service module proxy, and let Vite process the request and jump; configure Vite's page proxy mechanism to handle the jump and resource management between sub-applications; use the static service module middleware to process the static resources and API requests of multiple sub-applications and manage resource interactions. The present invention integrates the static service module and Vite to achieve unified management of static resources and page requests of new and old projects, avoid resource conflicts, and improve loading efficiency. Vite provides an efficient development and debugging environment, supports single-page and multi-page applications, and uses hot module replacement to improve development efficiency. Through the static service module proxy, forward the request to Vite, simplify management, and reduce configuration difficulty. Configure the Vite proxy mechanism to solve the jump and resource management between sub-applications and achieve seamless integration. Using static service module middleware, the static resources and API requests of multiple sub-applications are uniformly processed, resource management is simplified, and efficiency is improved. Among them, the user end can be but not limited to various personal computers, laptops, smart phones, tablet computers and portable wearable devices. The server end can be implemented with an independent server or a server cluster composed of multiple servers. The present invention is described in detail below through specific embodiments.

[0036] See also Figure 2 , Figure 2This is a flow chart of an embodiment of the static page integration and resource management method provided by the present invention. It should be noted that although the logical sequence is shown in the flow chart, in some cases, the steps shown or described may be performed in a different order than that shown here.

[0037] like Figure 2 As shown, the static page integration and resource management method proposed by the present invention includes the following steps:

[0038] S10, start the static service module and Vite page service in the server-side development environment;

[0039] In this embodiment, development is performed in a server-side operating environment, for example, a server-side operating environment (such as Node.js) of the JavaScript language is used for development, and a server-side development environment is built. This environment requires the installation of Node.js and the configuration of the dependencies required by the project to support the running and debugging of the server-side JavaScript code.

[0040] Make sure Node.js is installed on the server or development machine to run JavaScript server-side code. Create a project directory and initialize the package.json file to manage project dependencies and scripts. Use package management tools (such as npm or yarn) to install the required dependency packages for the project to prepare for subsequent service startup.

[0041] Static service module is used to refer to the functional components or systems that process and provide static resources (such as HTML, CSS, JavaScript files, images, etc.). Static service modules can include the following functions or components:

[0042] Static resource hosting function: responsible for hosting files in the specified static resource directory and providing these files to the client through the HTTP protocol. In many server-side frameworks, static resource hosting is implemented through dedicated middleware or service modules. For example, the hosting directory can contain HTML files, CSS style sheets, JavaScript scripts, and images. Example: app.use(' / static', express.static('public')) (assuming that Express is used, other frameworks have similar functions).

[0043] File path matching function: Match and return the corresponding static resource file according to the client's request path. Usually this includes extracting the file path from the URL and mapping it to the file system on the server. The static service module listens to the client's request path and searches for the corresponding file. If the path is correct, the corresponding file is returned; if the file cannot be found, an error message or a 404 page is returned. Example: The user requests / static / main.css, and the server searches for the main.css file in the resource directory according to the request path and returns it.

[0044] Cache control function: manage the cache policy of static resources, ensure that clients can cache resources to reduce repeated requests, and refresh the cache after the resources are updated. You can control the client's caching behavior for static resources by setting HTTP headers (such as Cache-Control, ETag). Set the Cache-Control header to max-age=31536000 to instruct the client to cache resources for one year.

[0045] Cross-origin resource sharing (CORS) support: Supports cross-origin resource sharing, allowing clients from other domains to access hosted static resources. Set the Access-Control-Allow-Origin header in the response header to allow cross-origin access. Example: res.setHeader('Access-Control-Allow-Origin','*').

[0046] Error handling function: When the static resource requested by the client does not exist or cannot be accessed, provide a suitable error handling mechanism, such as returning a 404 page or a custom error message. The static service module can capture the situation where the file cannot be found and return a predefined error page or information. Example: When requesting a non-existent file, return a custom 404 page.

[0047] Static service modules can include:

[0048] Express.static: This is the static file service middleware that comes with the Express framework and is used to host static resources.

[0049] http-server: A simple, zero-configuration command-line HTTP server suitable for quickly hosting static files.

[0050] serve: A lightweight static file server that supports Gzip compression and basic middleware functions.

[0051] Nginx: A high-performance web server that can also be used as a reverse proxy server. Suitable for hosting static resources in production environments.

[0052] Apache HTTP Server: A widely used web server that can be configured to host static files.

[0053] Take the Express framework as an example. Express is a Node.js-based web application framework used to build web servers and APIs. Start the static service module, that is, use the Express framework to create a server to provide static resources (such as HTML, CSS, JavaScript files, pictures, etc.) so that clients can access and load these resources.

[0054] Add Express dependency to the project to use the functions it provides. Initialize an Express application and prepare to configure the server behavior. Use Express's static middleware to specify the directory where static resources are stored so that the server can correctly provide these resources. Set the port number that the server listens on, start the Express server, and wait for and respond to the client's static resource requests.

[0055] Vite is a new front-end building tool that uses native ES module support to provide extremely fast development servers and building tools. Start the Vite page service, that is, run the Vite development server in the development environment, provide real-time compilation and hot update functions for front-end projects, and support the development and debugging of single-page and multi-page applications.

[0056] According to project requirements, install Vite and the dependency packages of the front-end framework used (such as Vue, React, etc.). Create and configure the vite.config.js file, specify the necessary configurations such as entry files, plug-ins, and development server options. Run Vite's startup script to start the development server, providing real-time compilation and hot update functions for the front-end page. Access the development server address provided by Vite in the browser to preview and debug the front-end page in real time.

[0057] In one specific implementation, by configuring the ports and proxies of Vite and Express, the two can work together in the same server-side environment, avoid port conflicts, and correctly forward and process requests. Set server.port (such as 3001) in vite.config.js to ensure that the port of the Vite service is different from that of Express (such as 3000). In the Vite configuration, use the server.proxy option to proxy specific API requests to the Express service to facilitate unified processing of backend requests. In the Express application, set the response header to allow requests from the Vite page service to solve the cross-domain problem.

[0058] Example description: In the development of insurance systems in the financial field, developers need to maintain the old policy management module and develop a new insurance product management module. By starting the static service module and Vite page service in the same server-side environment, the old policy management module can continue to provide static resources through Express, while the new insurance product management module is efficiently developed through Vite. In this way, developers can debug and run different modules in the same environment, facilitate page jumps and data interaction between various functions, improve development efficiency, and meet the needs of financial services for rapid iteration and efficient development.

[0059] By starting the static service module and Vite page service in the same server-side development environment, unified management of new and old projects is achieved. Static resources of old projects and front-end pages of newly developed projects can be provided at the same time, which simplifies the configuration of the development environment, improves development and debugging efficiency, and facilitates the integration and collaboration of new and old projects.

[0060] S20, processing the static resources of the old project through the static service module;

[0061] In this embodiment, a web server is created using the Express framework to provide static resource services. First, you need to install Express and create an application instance to process the client's HTTP request. The static service module can efficiently provide static resources on the server, such as HTML, CSS, JavaScript files and images.

[0062] Add Express dependency to the project to ensure that the functions it provides can be used. Initialize an Express application to prepare for subsequent configuration and server startup. Specify the port number that the server listens on to ensure that the client can access the server through this port.

[0063] Specify the directory where the static resources of the old project are stored so that Express can correctly provide these resources. This directory contains all the static files that need to be accessed by the client, such as web page templates, style sheets, scripts, and multimedia files.

[0064] Use express.static middleware to set the specified directory as the static resource directory. Put the static resource files of the old project into the specified directory, keep the original directory structure, and facilitate resource management and access.

[0065] When a client makes a static resource request, the Express static service searches for the corresponding file in the static resource directory based on the requested URL path and returns it to the client.

[0066] The static middleware of the static service module will automatically match the corresponding resource file according to the request path. After finding the matching resource file, the server reads it and sends it to the client to complete the response to the request.

[0067] If the static resource requested by the client does not exist on the server, the Express static service needs to return an appropriate error message to inform the client that the resource was not found.

[0068] By default, Express returns a 404 status code for resource requests that are not found. You can configure custom error handling middleware to provide friendly error prompt pages to improve user experience.

[0069] In one specific implementation, to increase the loading speed of static resources, you can enable caching and compression functions in the static service module to reduce the time it takes for the client to load resources. Configure options such as maxAge in the static middleware to specify the cache time of static resources. Install and use compression middleware to perform Gzip compression on static resources.

[0070] Example: In financial applications, such as online banking systems, legacy projects may contain a large number of static pages and resources, such as account inquiries, transaction records, report downloads and other functional modules. Through static service modules, banks can efficiently provide these legacy resources to ensure that customers have a smooth experience when accessing legacy functions. At the same time, when developing new functions, they can be compatible with and utilize legacy resources, facilitate unified data management, and improve business operation efficiency.

[0071] By using the static service module to process the static resources of the old project, the unified management and efficient provision of the old resources are achieved. The server configuration is simplified, ensuring that the client can access the old resources normally, avoiding resource redundancy and conflict, improving the efficiency of resource loading, and laying the foundation for the integration of new and old projects.

[0072] S30, developing and debugging front-end pages through the Vite page service, and processing page construction of single-page and multi-page applications;

[0073] In this embodiment, Vite is used as a development tool to provide an efficient front-end development and debugging environment. Vite supports modern front-end frameworks (such as Vue, React, etc.), and achieves fast page refresh and code update through native ES module loading and module hot replacement (HMR), significantly improving development efficiency.

[0074] Use package management tools (such as npm) to install Vite and the required front-end framework dependencies. Create a project directory, write necessary configuration files (such as vite.config.js), set the entry file and development server options. Execute the development commands provided by Vite, start the local development server, and implement real-time compilation and debugging.

[0075] In a single-page application (SPA), use the routing mechanism of the front-end framework to build an overall page application. By dynamically loading components, switch between different views to improve user experience. Define the main entry file (such as main.js) and introduce the core framework and root components. Use the routing library of the front-end framework (such as Vue Router) to define routing rules and map URL paths and components. Write components for each functional module to implement business logic and interface display.

[0076] In a multi-page application (MPA), define an independent entry point for each page. Vite can build each page separately according to the configuration, generate independent resource files and loading paths, which is suitable for page scenarios that need to be loaded independently. In the Vite configuration file, specify multiple entry files corresponding to different pages. Create an independent HTML template file for each page and reference the corresponding entry script. Ensure that the resources (such as CSS, JS) of each page are packaged independently to avoid mutual interference.

[0077] Vite's Hot Module Replacement (HMR) feature allows you to update modified modules in real time without refreshing the entire page, maintaining the application status and improving development efficiency. The Vite development server supports HMR by default, without additional configuration. During the coding process, after saving the file, the browser automatically updates the affected modules to immediately reflect the code changes.

[0078] In one specific implementation, during the development process, a state management tool (such as Vuex, Redux) is used to manage the global state of the application to adapt to complex business scenarios. According to the framework used, the corresponding state management library is installed. The global state storage is set up to define the state, action, and change. Components obtain and modify the global state through the state management tool to achieve data sharing.

[0079] Example description: In financial applications, such as developing an online banking system, it is necessary to support functions such as user account management, transaction record query, and financial product browsing.

[0080] Single-page application scenario: Use Vite and Vue to build SPA, and use the routing mechanism to switch different functional modules on the same page to provide a smooth user experience.

[0081] Multi-page application scenarios: For independent activity pages or login and registration pages, use Vite to build multi-page applications, manage them separately, and improve page loading speed.

[0082] Through Vite's efficient development and debugging capabilities, the front-end development efficiency of financial applications has been greatly improved, which can quickly respond to changes in business needs and provide better user services.

[0083] Develop and debug front-end pages through Vite page service, and use its fast compilation and module hot replacement functions to speed up the development process. Support page construction of single-page and multi-page applications to meet different business needs. The unified development environment and efficient tool chain reduce development complexity and improve team collaboration efficiency.

[0084] S40, forwarding the page request of the client to the Vite page service through the proxy function of the static service module, processing the resources in the page request and performing a page jump operation through the Vite page service;

[0085] In this embodiment, in the static service module, the proxy function is enabled to capture and forward specific page requests from the client. By configuring the proxy middleware, Express can identify specific request paths or conditions and forward these requests to the specified target service (i.e., Vite page service), thus achieving request redirection and unified management.

[0086] Install proxy middleware such as http-proxy-middleware in the project to provide request forwarding function. In the Express application, introduce the proxy middleware, configure the request path and target server address (the address and port of the Vite page service) that need to be proxied. Add the configured proxy middleware to the Express application to make it effective in request processing, capture and forward qualified requests.

[0087] When the client sends a page request, the proxy function of the static service module forwards these requests to the Vite page service according to the configuration. In this way, the client only needs to interact with the Express service without directly accessing the Vite service, realizing the decoupling between services and unified management of requests.

[0088] The proxy middleware matches the request path that needs to be forwarded (such as the path starting with / vite) according to the configuration. For the matched request, the proxy middleware forwards the detailed information of the request (such as the request method, header, parameters, etc.) to the Vite page service. After receiving the response data returned by the Vite page service, the proxy middleware returns it to the client as is, completing the forwarding and response of the request.

[0089] After receiving the request from the static service module proxy, the Vite page service processes the resources in the page request according to its configuration and logic. This includes parsing the entry file, loading and compiling modules, processing static resources (such as images, CSS, JS files), etc. to generate the page content required by the client.

[0090] The Vite service determines the page or component that needs to be loaded based on the requested URL and parameters. Using Vite's real-time compilation function, the relevant modules and resources are compiled and packaged to generate the latest page content. The processed page content and resources are returned to the Express proxy middleware through the response for the client to use.

[0091] When processing page requests, the Vite page service may need to perform page redirection operations based on business logic. This includes loading different page components according to the routing configuration during client rendering, or returning a redirect response on the server side to guide the client to access other pages.

[0092] Use the routing mechanism of the front-end framework (such as Vue Router) to load the corresponding components on the client side according to the URL change to achieve page jump. When necessary, the Vite service can return an HTTP redirect response (such as a 302 status code) to instruct the client to jump to the new URL. During the jump process, ensure the correct loading of related resources and the synchronization of application status to provide a good user experience.

[0093] In special cases, you can write custom middleware to achieve more flexible proxy control and meet complex request forwarding requirements. Create custom middleware to check request paths or conditions. For requests that require proxies, use the HTTP module of Node.js to manually build requests and forward them to the Vite service.

[0094] Example: In financial applications, such as developing a comprehensive securities trading platform, it is necessary to integrate the old account management module with the newly developed real-time market module. By configuring the proxy function in the static service module, the client's request for real-time market information can be transparently forwarded to the Vite page service, which processes the latest market data and page rendering. In this way, users can access old and newly developed functional modules on the same platform, which improves the system's uniformity and user experience, and speeds up the launch and promotion of new functions.

[0095] Through the proxy function of the static service module, the client's page request is forwarded to the Vite page service, realizing the unified management of client requests and simplifying the interaction between the client and the server. It avoids the client from directly accessing multiple services, reduces cross-domain issues and security risks, and improves the integration efficiency of new and old projects and the maintainability of the system.

[0096] S50, configuring the page proxy mechanism of the Vite page service, and processing the jump and resource management between sub-application pages through the page proxy mechanism;

[0097] In this embodiment, a page proxy mechanism is configured in the Vite page service so that it can forward page requests to corresponding sub-applications according to specific paths or rules. This mechanism allows the routing behavior of the production environment to be simulated in the development environment, making it easier to handle page jumps and resource requests between multiple sub-applications.

[0098] In the Vite configuration file, use the configureServer or server.proxy option to specify the path and target address that need to be proxied. Determine the sub-application path prefix that needs to be proxied (for example, / subapp1, / subapp2) to distinguish different sub-applications. Specify the corresponding sub-application service address for each proxy path, which may be another local development server or a specific directory.

[0099] Using the configured page proxy mechanism, when users jump between different sub-applications, the Vite page service can correctly forward the request to the corresponding sub-application and load the corresponding page and resources.

[0100] The Vite page service captures matching page requests according to the proxy configuration. The captured requests are forwarded to the corresponding sub-application service or resource path according to the proxy rules. After receiving the request, the sub-application returns the corresponding page content, and the Vite page service passes it to the client.

[0101] While processing page redirects, the page proxy mechanism is also responsible for managing sub-application resource requests, including static resources (such as images, CSS, and JavaScript files) and dynamic requests (such as API calls), ensuring that the resources of each sub-application are loaded correctly to avoid resource conflicts or path errors.

[0102] In the proxy configuration, set a unified resource loading path to ensure that resource requests can be correctly routed to the corresponding sub-applications. If the sub-applications run on different domain names or ports, you need to configure the proxy to solve the problem of cross-domain access. During page jumps and resource loading, ensure the consistency of application status and data to provide a smooth user experience.

[0103] Example description: In financial applications, such as developing a comprehensive financial management platform, including fund management, stock trading, insurance products and other sub-applications. By configuring the page proxy mechanism in the Vite page service:

[0104] Users can smoothly switch between different financial products on the same platform without having to perceive the switching of sub-applications behind them.

[0105] The resource requests of each sub-application are centrally managed by the proxy mechanism, which avoids resource conflicts and improves page loading speed.

[0106] Developers can debug multiple sub-applications simultaneously in one development environment, reducing the time cost of environment configuration and switching.

[0107] By configuring the page proxy mechanism of the Vite page service, seamless jumps and resource management between sub-application pages are achieved. Developers can easily debug and integrate multiple sub-applications in a unified development environment, avoiding cumbersome cross-domain configuration and multi-service switching, and improving development efficiency and project maintainability.

[0108] S60, processing static resources and API requests of multiple sub-applications through the static middleware and proxy middleware of the static service module, and controlling resource interaction between sub-application pages.

[0109] In this embodiment, by configuring static middleware in the static service module, a static resource directory is specified for each sub-application. The static middleware can automatically provide corresponding static files, such as HTML, CSS, JavaScript, and images, according to the request path. In this way, the static resources of multiple sub-applications can be uniformly managed and provided by the same Express service.

[0110] In the Express application, use the app.use() method to call express.static() multiple times to specify the static resource paths for different sub-applications. Put the static files of each sub-application into their own directory, making sure the resource paths are correct to avoid conflicts.

[0111] By configuring Express's proxy middleware, the API requests of the sub-applications are forwarded to the corresponding backend services. The proxy middleware can capture requests for specific paths and forward them to the specified target address, thus achieving unified management and forwarding of API requests of multiple sub-applications.

[0112] Use npminstall http-proxy-middleware to install the proxy middleware. In the Express application, set the corresponding proxy rules for the API request path of each sub-application and forward the request to the corresponding backend service. Add the configured proxy middleware to the Express application to make it effective.

[0113] Coordinate resource requests and data interactions between multiple sub-applications through unified static and proxy middleware configuration. Ensure that each sub-application can correctly share necessary resources and data when jumping to a page and loading resources, and achieve seamless connection and collaboration between pages. If multiple sub-applications need to share common resources, you can configure a common static resource directory in Express. Configure response headers to allow resource and data requests between sub-applications to solve cross-domain issues. Manage user session information and application status through middleware or database, and support data sharing between sub-applications.

[0114] Example description: In the financial field, for example, a comprehensive banking service platform is developed, which includes multiple sub-applications such as personal business, corporate business, and investment and financial management. By configuring the static middleware of the static service module, the static pages and resources of each sub-application are uniformly provided; through the proxy middleware, the API requests of each sub-application are forwarded to the corresponding back-end service. For example, the personal business sub-application handles account query and transfer functions, the corporate business sub-application handles public account management, and the investment and financial management sub-application provides fund and stock trading services. Through unified resource and request management, customers can easily access different financial services on the same platform to achieve good user experience and business collaboration.

[0115] By using the static middleware and proxy middleware of the static service module, the static resources and API requests of multiple sub-applications are uniformly processed, and resource interaction management between sub-applications is realized. This avoids the tedious operation of building services for each sub-application separately, reduces the complexity of the system, improves resource utilization and maintenance efficiency, and ensures data synchronization and functional coordination between sub-applications.

[0116] The present invention relates to the technical field of R&D management and the field of financial technology, and discloses a static page integration and resource management method, which starts a static service module and a Vite page service in a server-side development environment; uses a static service module to process static resources of old projects; uses Vite to develop and debug front-end pages, and processes single-page and multi-page applications; forwards page requests to Vite through a static service module proxy, and Vite processes requests and jumps; configures Vite's page proxy mechanism to process jumps and resource management between sub-applications; uses a static service module middleware to process static resources and API requests of multiple sub-applications, and manages resource interactions. The present invention integrates a static service module and Vite to achieve unified management of static resources and page requests of new and old projects, avoid resource conflicts, and improve loading efficiency. Vite provides an efficient development and debugging environment, supports single-page and multi-page applications, and uses module hot replacement to improve development efficiency. Through a static service module proxy, forwards requests to Vite, simplifies management, and reduces configuration difficulty. Configure the Vite proxy mechanism to solve the jump and resource management between sub-applications and achieve seamless integration. Use static service module middleware to uniformly process static resources and API requests of multiple sub-applications, simplify resource management and improve efficiency.

[0117] In one embodiment, after the above S20, the method further includes:

[0118] S201, configuring the proxy function in the static service module, installing and enabling the proxy middleware;

[0119] S202, capturing resource requests from the client through the proxy middleware, including static resource requests for images, CSS files, or JavaScript files;

[0120] S203, detecting whether the resource request is a cross-domain request through the proxy middleware;

[0121] S204, if it is detected that the resource request is a cross-domain request, a cross-domain response is processed by a proxy middleware, and a cross-domain response header is set in the resource file response returned by the server;

[0122] S205, forwarding the cross-domain processed resource request to the server of the old project through the proxy middleware;

[0123] S206, the server of the old project searches for the corresponding resource file according to the resource request, and returns the resource file to the proxy middleware;

[0124] S207, receiving resource files from the server of the old project through the proxy middleware, and returning the resource files to the client.

[0125] In this embodiment, after completing the processing of the static resources of the old project, in order to handle cross-domain resource requests, it is necessary to configure the proxy function in the static service module. This involves installing proxy middleware so that Express can capture and process resource requests initiated by the client, especially those that need to be forwarded to the old project server. Use a package management tool (such as npm) to install proxy middleware suitable for Express, such as http-proxy-middleware. Introduce and configure the proxy middleware in the Express application, and set the request path and target server address (the server of the old project) that need to be proxied.

[0126] Proxy middleware is configured to listen for and capture specific types of resource requests, such as images, CSS files, and JavaScript files. This enables the server to perform special processing on these requests, such as forwarding or adding response headers. Configure the proxy middleware to specify the resource request path or file type to be captured. When the client requests a resource that matches the rule, the proxy middleware automatically captures it and prepares it for subsequent processing.

[0127] After capturing the resource request, the proxy middleware needs to determine whether the request is a cross-domain request, that is, whether the source domain of the request is different from the server domain. This step is to determine whether cross-domain processing is required. The proxy middleware parses the header information of the request, especially the fields such as Origin and Host. The source domain of the request is compared with the server domain to determine whether it is a cross-domain request.

[0128] If the request is determined to be a cross-domain request, the proxy middleware needs to add a cross-domain response header, such as Access-Control-Allow-Origin, to the server response to allow the client to correctly receive the resource. In the proxy middleware, add or modify the response header information and set the cross-domain related header fields such as Access-Control-Allow-Origin. According to the policy, set the allowed source domain name, or use the wildcard * to allow access to all domain names.

[0129] After handling the cross-domain issue, the proxy middleware forwards the resource request to the server of the old project to obtain the actual resource file. In the proxy middleware, specify the address and port of the old project server. The proxy middleware sends the modified request to the server of the old project, keeping the request method and parameters consistent.

[0130] After receiving the resource request, the server of the old project searches for the corresponding static resource file according to the path and parameters of the request and generates a response. The server locates the corresponding resource file according to the requested URL and returns the found resource file to the requester (proxy middleware) as a response.

[0131] After receiving the resource file returned by the old project server, the proxy middleware forwards it to the client of the original request to complete the entire request-response process. The proxy middleware obtains the resource file and response header returned by the old project server. The resource file and necessary response header are sent back to the client to ensure that the resource can be loaded and used correctly.

[0132] In one specific implementation, it is possible to dynamically determine whether to proxy to the server of the old project based on the resource type (such as images, CSS, JS) of the request, thereby improving the efficiency of request processing. In the proxy middleware, the file extension or MIME type of the request is analyzed. For specific types of resources, conditions are set to proxy the request to the server of the old project, and other requests are processed by the current server.

[0133] Example description: In financial applications, such as online service platforms of banks, it is necessary to use resources of the old system in newly developed applications, such as style files for displaying user account information, chart components for historical transaction records, etc. By configuring the proxy function in Express static services, developers can easily forward client requests for these resources to the server of the old project, while handling cross-domain issues to ensure normal loading and display of resources. This not only improves development efficiency, but also ensures data consistency and user experience consistency between the old and new systems, which helps the smooth transition and upgrade of financial services.

[0134] This embodiment solves the problem of cross-domain resource requests by configuring the proxy function in the static service module. The proxy middleware can capture and detect cross-domain requests, add necessary response headers, and ensure that the client can load the resources of the old project normally. It simplifies the cross-domain configuration, avoids complex client settings, and improves the compatibility of new and old projects and the efficiency of resource sharing.

[0135] In one embodiment, the above S50 includes:

[0136] S501, configure the page proxy mechanism of the Vite page service in the Vite configuration file, define the proxy path, target server address, cross-domain processing options and request header configuration, and forward the client's page request;

[0137] S502, capturing the sub-application page request of the client, and determining whether the request is a jump request that needs to be forwarded to other services or modules;

[0138] S503: If it is a jump request that needs to be forwarded, forward the page request to the corresponding sub-application page;

[0139] S504, when processing the sub-application page jump, managing the loading and state synchronization of resources during the jump process;

[0140] S505, setting a unified loading path through the page proxy mechanism to forward the resource request of the sub-application page.

[0141] In this embodiment, a page proxy mechanism is set in the Vite configuration file to forward the client's page request to the corresponding target server according to specific rules. By defining the proxy path, you can specify which requests need to be proxied; the target server address is used to indicate the destination of the request forwarding. The cross-domain processing option and request header configuration ensure that the request can be correctly processed in the cross-domain case, solving the browser's homology policy restrictions.

[0142] Open the vite.config.js file in the project. Use the server.proxy option to set the path to be proxied (such as / api), the target server address (such as http: / / localhost:4000), the cross-domain processing option (such as changeOrigin:true), and the request header configuration. Save the modified configuration file and restart the Vite development server to make the configuration take effect.

[0143] When the client accesses the sub-application page, the Vite page service needs to capture these requests and determine whether they need to be forwarded to other services or modules. This involves parsing the path and parameters of the request and determining the purpose of the request in order to make the correct processing. The Vite page service automatically captures requests that match the proxy path through the configured proxy mechanism. Based on the URL and path of the request, determine whether the request belongs to a sub-application page request that needs to be forwarded. Based on pre-set rules (such as path prefixes, specific parameters), determine whether the request needs to be forwarded to other services or modules.

[0144] For redirect requests that need to be forwarded, the Vite page service forwards the request to the corresponding sub-application page through a proxy mechanism. This allows the client to access different sub-applications through a unified entrance, simplifying the implementation of page redirection. According to the proxy configuration, matching requests are automatically forwarded to the target server address. During the forwarding process, the method, header, and parameters of the original request are retained to ensure that the target server can correctly process the request. After the target server processes the request, it returns the response data, and the Vite page service passes it to the client.

[0145] During the page jump process, you need to ensure that related resources (such as style sheets, scripts, images, etc.) can be loaded correctly, while maintaining the synchronization of application status to avoid page loading errors or state loss. In sub-applications, use relative paths or unified resource paths to ensure that resource requests can be processed correctly. Use global state management tools (such as Vuex, Redux) to save and restore application status when the page jumps. For large resources, use lazy loading or on-demand loading to optimize loading performance.

[0146] To simplify resource management, a unified loading path is set through the page proxy mechanism so that resource requests of sub-applications can be forwarded and processed correctly. This helps avoid resource path conflicts and improves the efficiency of resource loading. In the Vite configuration, proxy rules are set for the resource paths of sub-applications to forward resource requests to the corresponding servers or directories. In the sub-application code, a unified resource loading path is used to ensure that requests can match the proxy rules. Set the necessary cross-domain options and cache strategies to ensure the security and efficiency of resource requests.

[0147] In one specific implementation, a micro-frontend architecture is adopted, and each sub-application is used as an independent front-end application. The proxy mechanism of the Vite page service is used to achieve unified loading and page jump. Each sub-application is independently developed and built, with its own code repository and deployment process. In the Vite configuration of the main application, proxy rules are set to forward requests for specific paths to the corresponding sub-application. In the main application, use module federation or dynamic loader to load and render the content of the sub-application.

[0148] This embodiment implements unified management of sub-application page requests and resource requests by configuring the page proxy mechanism of the Vi te page service. It simplifies page jumps and resource loading between multiple sub-applications, avoids cross-domain problems, and improves development and debugging efficiency. Developers can easily integrate and manage multiple sub-applications in the same environment, improving the scalability and maintainability of the system.

[0149] In one embodiment, the above S20 includes:

[0150] S208, configuring the static middleware of the static service module, and defining a static resource directory for hosting static resources of the old project;

[0151] S209, receiving a static resource request from a client, and matching a corresponding static resource according to a request path in the static resource request;

[0152] S210, returning matching static resource files through the hosted static resource directory;

[0153] S211, when the static resource is not found, an error message is returned.

[0154] In this embodiment, in the Express application, static middleware is used to host the static resources of the old project. Static middleware allows the server to automatically respond to client requests for static files, such as HTML, CSS, JavaScript files, and images. By defining one or more static resource directories, the server can efficiently provide these resources, allowing the client to access the content of the old project normally. In the Express application, the express.static method is used to configure the static middleware. Specify the directory path for storing the static resources of the old project, such as the 'public' folder. Place all static resource files of the old project in the defined directory, maintaining the original file structure and naming.

[0155] When a client requests a static resource, the server looks for the corresponding resource file based on the requested URL path. The request path is usually directly mapped to the file path in the static resource directory, so that the server can quickly locate the required resource. Express automatically listens for requests for static resources without additional configuration. The server looks for the corresponding file public / images / logo.png in the static resource directory based on the requested path, such as / images / logo.png. If the request contains query parameters, the server can process them as needed. Usually, static resource requests do not involve query parameters.

[0156] After the server finds a file that matches the request path in the static resource directory, it returns the file to the client as a response. After the client receives the resource file, it can correctly load and render the page content. The server reads the matching static resource file content. According to the file type (such as .html, .css, .js, .png), set the appropriate Content-Type response header. Send the content of the resource file to the client to complete the request processing.

[0157] If the server does not find a file that matches the requested path in the static resource directory, it needs to return an error message to the client, usually a 404 status code, indicating that the requested resource does not exist. When the static middleware cannot find the requested resource file, it will continue to execute subsequent middleware by default. You can add an error handling middleware to capture unhandled requests and return a 404 status code and an error page.

[0158] In this embodiment, by using the static middleware of the static service module, the server can efficiently host and provide static resources of old projects. The management and access of static resources are simplified, so that the client can load the content of old projects normally, improving the stability of the system and user experience. At the same time, the clear error handling mechanism ensures timely feedback when resources are missing, which is convenient for developers to troubleshoot and solve problems.

[0159] In one embodiment, the above S30 includes:

[0160] S301, developing a front-end page through the Vite page service, and using the routing mechanism of the front-end framework to process a single-page application;

[0161] S302, defining an independent entry point for each page, building a multi-page application through the Vite page service, and generating an independent resource file and loading path for each page;

[0162] S303, during the development process, updating the code through the module hot replacement function of the Vite page service;

[0163] S304, when the development is completed, the Vite page service is used to build the page and package and generate page resources for deployment.

[0164] In this embodiment, the Vite page service is used to develop front-end applications, and the routing mechanism of the front-end framework (such as Vue, React, etc.) is used to handle single-page applications (SPA). Single-page applications dynamically load and switch components on the client to achieve navigation between pages without refreshing the entire page, providing a smooth user experience. Install the required front-end frameworks (such as Vue, React) and Vite dependencies in the project. Create and configure the vite.config.js file, specify the entry file and related plug-ins. Write components and pages, use the routing library of the front-end framework (such as Vue Router, React Router) to define routing rules, and map URL paths and components. Run Vite's development command, start the development server, and preview and debug single-page applications in real time.

[0165] When you need to build a multi-page application, define an independent entry point for each page. Vite supports multi-entry configuration, which can generate independent package files and resource paths for each page to ensure the independence of each page and avoid resource conflicts. In vite.config.js, use build.rollupOptions.input to configure multiple entry files corresponding to different pages. Create independent HTML templates and script files for each page. Use Vite's build command to generate independent resource files and loading paths for each entry point.

[0166] During the development process, Vite's Hot Module Replacement (HMR) function is used to automatically update the corresponding module in the page when the source code changes, without having to manually refresh the entire page. This can maintain the state of the application and improve development efficiency. The Vite development server supports hot module replacement by default, without the need for additional configuration. When the code changes are saved, Vite will automatically compile and update the module in the browser, and the developer can see the effect immediately.

[0167] After development is complete, use Vite's build function to package and optimize the project code, generate static resource files suitable for the production environment, and prepare for deployment. Run the vite build command to start the build process. Vite will compress, split, and optimize the code to generate high-performance CSS, JavaScript, and HTML files. Deploy the generated static resource files to the server's specified directory for client access.

[0168] This embodiment develops and debugs front-end pages through Vite page services, and uses the routing mechanism of the front-end framework to process single-page applications, achieving efficient development and good user experience. Define independent entrances for each page, build multi-page applications, and meet different business needs. Use the module hot replacement function to improve development efficiency, and code modifications take effect immediately. After development is completed, use Vite to build and generate optimized page resources for easy deployment and launch.

[0169] In one embodiment, the above S10 includes:

[0170] S101, in the server-side development environment, install the static service module and Vite dependencies, and configure the static service module and Vite parameters according to project requirements;

[0171] S102, configuring and starting a static service module, defining a static resource directory for hosting static resources;

[0172] S103, write and run a startup script to start the static service module, listen to the port and provide static resource services;

[0173] S104, configure the Vite page service and define the resource path and entry file for front-end development;

[0174] S105, start the Vite page service, provide page building and development functions, load the specified entry file and update the page code module through module hot replacement during the development process.

[0175] In this embodiment, in the server-side development environment, Node.js is used as the operating environment, and the required dependencies Express and Vite are installed through npm (Node Package Manager). According to the specific needs of the project, Express and Vite are configured separately to meet the different functional requirements of server and front-end development. Make sure that Node.js is installed in the development environment to provide the JavaScript server-side runtime. Run npminit-y in the project directory to generate a package.json file for managing project dependencies and scripts. Execute the command npminstall express vite to install the latest versions of Express and Vite. According to project requirements, create a configuration file or set Express parameters in the code, such as listening ports, routing, middleware, etc. Create a vite.config.js file, define entry files, plug-ins, development server options, etc., and set them according to front-end development requirements.

[0176] Use the Express framework to create and configure a static service to host the static resources of the project. By defining a static resource directory, the server can efficiently provide static files (such as HTML, CSS, JavaScript, images, etc.) so that the client can access and load these resources normally. Introduce Express into the project and create an application instance. Use the express.static middleware to specify the directory for hosting static resources, such as the public folder. Configure additional routes or middleware as needed to handle specific requests or add functionality.

[0177] To start the static service module, you need to write a startup script, set the port that the server listens on, and run the server. After startup, the server starts listening to client requests and provides static resource services. Specify the port number that the server listens on, such as 3000. Use the app.listen method to start the server and listen to the specified port. Add a startup command to the scripts section in package.json, such as "start:express":"node server.js". Execute the command npm run start:express to start the static service module.

[0178] Configure the Vite page service and specify the resource path and entry file of the front-end project. Through configuration, Vite can correctly load the project files and provide efficient development and building functions. Create vite.config.js in the project root directory. Specify the entry file of the project (such as main.js or index.html) in the configuration file. Add necessary plug-ins (such as Vue, React plug-ins) and other configuration options according to project requirements.

[0179] Start the Vite page service, start the development server, and load the specified entry file. Vite provides real-time compilation and hot module replacement (HMR) functions, which automatically updates the page after the code is modified, without manual refresh, improving development efficiency. Add the Vite startup command in the scripts section of package.json, such as "dev": "vite". Execute the command npm rundev to start the Vite page service. Vite automatically loads the entry file according to the configuration and starts the project. During the development process, modify the code and save it, Vite will automatically compile and update the module in the browser to reflect the changes in real time.

[0180] This embodiment realizes seamless integration of server-side and front-end development by simultaneously starting the static service module and Vite page service in the server-side development environment. The static service module provides static resources of the old project, and the Vite page service provides an efficient front-end development and debugging environment. The combination of the two simplifies the configuration of the development environment, avoids multi-service switching, and improves development efficiency and collaboration.

[0181] In one embodiment, the above S60 includes:

[0182] S601, configuring the static middleware of the static service module, defining a static resource directory for each sub-application, and hosting the static resources of each sub-application;

[0183] S602, configuring the proxy middleware of the static service module to receive the API request of the sub-application and forward it to the corresponding backend service;

[0184] S603, processing the static resource request of the sub-application through the static middleware, and returning the corresponding static resource file according to the request path;

[0185] S604, processing the API request of the sub-application through the proxy middleware, and returning the response result of the backend service to the client;

[0186] S605, processing the static resource request of the sub-application through the static middleware, and forwarding the API request and response of the sub-application through the proxy middleware.

[0187] In this embodiment, in the Express application, static middleware is used to define static resource directories for multiple sub-applications. In this way, the static resources (such as HTML, CSS, JavaScript, images, etc.) of each sub-application can be hosted by the server and provided to the client according to their respective directory structures to ensure orderly management and access of resources. In the Express application, the express.static method is used. Set the corresponding static resource path for each sub-application and specify the virtual path prefix to avoid path conflicts. Store the static resource files of each sub-application in their respective directories to maintain a clear directory structure.

[0188] Use proxy middleware to capture the API requests of sub-applications and forward them to the corresponding backend services. This allows API requests of multiple sub-applications to be managed through the same server, simplifying the interaction between the client and the backend services. Use npm to install proxy middleware such as http-proxy-middleware to configure a proxy for the API request path of each sub-application and forward the request to the corresponding backend service. Add the configured proxy middleware to the Express application to make it effective.

[0189] When the client requests the static resources of the sub-application, the static middleware searches and returns the corresponding files from the corresponding static resource directory according to the request path to ensure the correct loading of the resources. When the client requests, the URL contains the virtual path prefix of the sub-application, and the server matches the corresponding static resource directory according to the prefix. The static middleware searches for the requested resource file in the directory and returns it to the client after finding it.

[0190] When the client makes an API request, the proxy middleware forwards the request to the corresponding backend service. After receiving the response, it returns the result to the client, thus realizing the communication between the client and the backend service. The proxy middleware captures the matching API request path according to the configuration. It forwards the request to the specified backend service, keeping the request method, header and parameters. After receiving the response result from the backend service, the proxy middleware returns it to the client.

[0191] Static middleware and proxy middleware are used together to uniformly manage static resource requests and API requests of sub-applications. Static middleware is responsible for returning static resource files, and proxy middleware is responsible for forwarding API requests and responses to ensure smooth resource interaction of sub-applications. Static middleware processes client requests for static files and returns the corresponding resources. Proxy middleware processes client API requests, forwards and returns responses.

[0192] Example description: In a comprehensive service platform in the financial field, such as including multiple sub-applications such as personal banking, corporate banking, and investment and financial management:

[0193] Through static middleware, static resources are hosted for each sub-application to ensure correct loading of pages and resources.

[0194] Through the proxy middleware, the API requests of each sub-application are forwarded to the corresponding backend service to achieve correct data acquisition and operation.

[0195] Unified middleware configuration ensures smooth resource and data interaction between sub-applications and improves user experience.

[0196] Through the above method, the various sub-applications of the financial service platform can run in a unified server environment, reducing system complexity, facilitating development and maintenance, and improving system performance and stability.

[0197] This embodiment uses Express's static middleware and proxy middleware to uniformly process static resources and API requests of multiple sub-applications, thereby achieving effective management of resource interactions between sub-applications. It simplifies server configuration, avoids the complexity of building a separate server for each sub-application, improves system maintainability and resource utilization, and ensures data synchronization and functional coordination between sub-applications.

[0198] In one embodiment, a static page integration and resource management device is provided, and the static page integration and resource management device corresponds one-to-one to the static page integration and resource management method in the above embodiment. Figure 3 , Figure 3 This is a functional module diagram of a preferred embodiment of the static page integration and resource management device of the present invention. Service initialization module 10, old project static resource processing module 20, front-end page development and construction module 30, request proxy and page jump module 40, resource management module 50 and static resource and API request management module 60. The detailed description of each functional module is as follows:

[0199] The service initialization module 10 is used to start the static service module and the Vite page service in the server-side development environment;

[0200] An old project static resource processing module 20, used to process the static resources of the old project through the static service module;

[0201] The front-end page development and construction module 30 is used to develop and debug the front-end page through the Vite page service, and to handle the page construction of single-page and multi-page applications;

[0202] The request proxy and page jump module 40 is used to forward the client's page request to the Vite page service through the proxy function of the static service module, process the resources in the page request through the Vite page service and perform the page jump operation;

[0203] A resource management module 50, used to configure the page proxy mechanism of the Vite page service, and to process the jump and resource management between sub-application pages through the page proxy mechanism;

[0204] The static resource and API request management module 60 is used to process the static resources and API requests of multiple sub-applications through the static middleware and proxy middleware of the static service module, and control the resource interaction between the sub-application pages.

[0205] In one embodiment, the old project static resource processing module 20 is specifically used for:

[0206] Configure the proxy function in the static service module, install and enable the proxy middleware;

[0207] Capturing resource requests from the client through the proxy middleware, including static resource requests for images, CSS files or JavaScript files;

[0208] Detecting whether the resource request is a cross-domain request through the proxy middleware;

[0209] If it is detected that the resource request is a cross-domain request, the cross-domain response is processed by the proxy middleware, and a cross-domain response header is set in the resource file response returned by the server;

[0210] Forward cross-domain resource requests to the server of the old project through the proxy middleware;

[0211] The server of the old project searches for the corresponding resource file based on the resource request and returns the resource file to the proxy middleware;

[0212] Receive resource files from the server of the old project through the proxy middleware and return the resource files to the client.

[0213] In one embodiment, the resource management module 50 is specifically configured to:

[0214] Configure the page proxy mechanism of the Vite page service in the Vite configuration file, define the proxy path, target server address, cross-domain processing options and request header configuration, and forward the client's page request;

[0215] Capture the client's sub-application page request and determine whether the request is a jump request that needs to be forwarded to other services or modules;

[0216] If it is a jump request that needs to be forwarded, the page request is forwarded to the corresponding sub-application page;

[0217] When processing the sub-application page jump, manage the loading and state synchronization of resources during the jump process;

[0218] A unified loading path is set through the page proxy mechanism to forward resource requests of sub-application pages.

[0219] In one embodiment, the old project static resource processing module 20 is specifically used for:

[0220] Configure the static middleware of the static service module and define the static resource directory for hosting static resources of old projects;

[0221] Receiving a static resource request from a client, and matching a corresponding static resource according to a request path in the static resource request;

[0222] Returns matching static resource files through the hosted static resource directory;

[0223] When the static resource is not found, an error message is returned.

[0224] In one embodiment, the front-end page development and construction module 30 is specifically used to:

[0225] Develop front-end pages through the Vite page service and use the routing mechanism of the front-end framework to process single-page applications;

[0226] Define an independent entry point for each page, build a multi-page application through the Vite page service, and generate independent resource files and loading paths for each page;

[0227] During the development process, the code is updated through the module hot replacement function of the Vite page service;

[0228] When the development is completed, the Vite page service is used to build the page and package and generate page resources for deployment.

[0229] In one embodiment, the service initialization module 10 is specifically used to:

[0230] In the server-side development environment, install the static service module and Vite dependencies, and configure the static service module and Vite parameters according to project requirements;

[0231] Configure and start the static service module, and define the static resource directory for hosting static resources;

[0232] Write and run the startup script to start the static service module, listen to the port and provide static resource services;

[0233] Configure Vite page service and define resource paths and entry files for front-end development;

[0234] Start the Vite page service, provide page building and development functions, load the specified entry file, and update the page code module through module hot replacement during the development process.

[0235] In one embodiment, the static resource and API request management module 60 is specifically used to:

[0236] Configure the static middleware of the static service module, define a static resource directory for each sub-application, and host the static resources of each sub-application;

[0237] Configure the proxy middleware of the static service module to receive API requests from sub-applications and forward them to the corresponding backend services;

[0238] Processing the sub-application's static resource request through the static middleware, and returning the corresponding static resource file according to the request path;

[0239] Process the API request of the sub-application through the proxy middleware, and return the response result of the backend service to the client;

[0240] The static resource request of the sub-application is processed through the static middleware, and the API request and response of the sub-application is forwarded through the proxy middleware.

[0241] In one embodiment, a computer device is provided. The computer device may be a server, and its internal structure diagram may be as follows: Figure 4 As shown. The computer device includes a processor, a memory, a network interface and a database connected through a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile and / or volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program and a database. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The network interface of the computer device is used to communicate with an external user terminal through a network connection. When the computer program is executed by the processor, it realizes the functions or steps on the server side of a static page integration and resource management method.

[0242] In one embodiment, a computer device is provided. The computer device may be a user terminal, and its internal structure diagram may be as follows: Figure 5As shown. The computer device includes a processor, a memory, a network interface, a display screen and an input device connected through a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The network interface of the computer device is used to communicate with an external server through a network connection. When the computer program is executed by the processor, it realizes the functions or steps on the user side of a static page integration and resource management method

[0243] In one embodiment, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the following steps when executing the computer program:

[0244] Start the static service module and Vite page service in the server-side development environment;

[0245] Processing static resources of old projects through the static service module;

[0246] Develop and debug front-end pages through the Vite page service, and handle page construction for single-page and multi-page applications;

[0247] Through the proxy function of the static service module, the client's page request is forwarded to the Vite page service, and the Vite page service processes the resources in the page request and performs the page jump operation;

[0248] Configure the page proxy mechanism of the Vite page service, and process the jump and resource management between sub-application pages through the page proxy mechanism;

[0249] The static middleware and proxy middleware of the static service module process the static resources and API requests of multiple sub-applications, and control the resource interaction between the sub-application pages.

[0250] In one embodiment, a computer readable storage medium is provided, on which a computer program is stored, and when the computer program is executed by a processor, the following steps are implemented:

[0251] Start the static service module and Vite page service in the server-side development environment;

[0252] Processing static resources of old projects through the static service module;

[0253] Develop and debug front-end pages through the Vite page service, and handle page construction for single-page and multi-page applications;

[0254] Through the proxy function of the static service module, the client's page request is forwarded to the Vite page service, and the Vite page service processes the resources in the page request and performs the page jump operation;

[0255] Configure the page proxy mechanism of the Vite page service, and process the jump and resource management between sub-application pages through the page proxy mechanism;

[0256] The static middleware and proxy middleware of the static service module process the static resources and API requests of multiple sub-applications, and control the resource interaction between the sub-application pages.

[0257] It should be noted that the above functions or steps that can be implemented by the computer-readable storage medium or computer device can refer to the relevant descriptions on the server side and the user side in the aforementioned method embodiment. To avoid repetition, they will not be described one by one here.

[0258] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. As an illustration and not limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).

[0259] Those skilled in the art can clearly understand that for the convenience and simplicity of description, only the division of the above-mentioned functional units and modules is used as an example. In actual applications, the above-mentioned functions can be distributed and completed by different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above.

[0260] It should be noted that if software tools or components other than those of the Company appear in the embodiments of the present application, they are only used for illustration and do not represent actual use. The above-described embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit them; although the present invention has been described in detail with reference to the above-mentioned embodiments, a person of ordinary skill in the art should understand that the technical solutions described in the above-mentioned embodiments can still be modified, or some of the technical features thereof can be replaced by equivalents; and these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be included in the protection scope of the present invention.

Claims

1. A static page integration and resource management method, characterized in that: The following steps are involved: Start the static service module and Vite page service in the server-side development environment; Processing static resources of old projects through the static service module; Develop and debug front-end pages through the Vite page service, and handle page construction for single-page and multi-page applications; Through the proxy function of the static service module, the client's page request is forwarded to the Vite page service, and the Vite page service processes the resources in the page request and performs the page jump operation; Configure the page proxy mechanism of the Vite page service, and process the jump and resource management between sub-application pages through the page proxy mechanism; The static middleware and proxy middleware of the static service module process the static resources and API requests of multiple sub-applications, and control the resource interaction between the sub-application pages.

2. The static page integration and resource management method according to claim 1, characterized in that: After the static resources of the old project are processed by the static service module, it also includes: Configure the proxy function in the static service module, install and enable the proxy middleware; Capturing resource requests from the client through the proxy middleware, including static resource requests for images, CSS files or JavaScript files; Detecting whether the resource request is a cross-domain request through the proxy middleware; If it is detected that the resource request is a cross-domain request, the cross-domain response is processed by the proxy middleware, and a cross-domain response header is set in the resource file response returned by the server; Forward cross-domain resource requests to the server of the old project through the proxy middleware; The server of the old project searches for the corresponding resource file based on the resource request and returns the resource file to the proxy middleware; Receive resource files from the server of the old project through the proxy middleware and return the resource files to the client.

3. The static page integration and resource management method according to claim 1, characterized in that: Configure the page proxy mechanism of the Vite page service, and use the page proxy mechanism to handle the jump and resource management between sub-application pages, including: Configure the page proxy mechanism of the Vite page service in the Vite configuration file, define the proxy path, target server address, cross-domain processing options and request header configuration, and forward the client's page request; Capture the client's sub-application page request and determine whether the request is a jump request that needs to be forwarded to other services or modules; If it is a jump request that needs to be forwarded, the page request is forwarded to the corresponding sub-application page; When processing the sub-application page jump, manage the loading and state synchronization of resources during the jump process; A unified loading path is set through the page proxy mechanism to forward resource requests of sub-application pages.

4. The static page integration and resource management method according to claim 1, characterized in that: The static service module is used to process the static resources of the old project, including: Configure the static middleware of the static service module and define the static resource directory for hosting static resources of old projects; Receiving a static resource request from a client, and matching a corresponding static resource according to a request path in the static resource request; Returns matching static resource files through the hosted static resource directory; When the static resource is not found, an error message is returned.

5. The static page integration and resource management method according to claim 1, characterized in that: Develop and debug front-end pages through the Vite page service, and handle page construction for single-page and multi-page applications, including: Develop front-end pages through the Vite page service and use the routing mechanism of the front-end framework to process single-page applications; Define an independent entry point for each page, build a multi-page application through the Vite page service, and generate independent resource files and loading paths for each page; During the development process, the code is updated through the module hot replacement function of the Vite page service; When the development is completed, the Vite page service is used to build the page and package and generate page resources for deployment.

6. The static page integration and resource management method as claimed in claim 1, characterized in that: Start the static service module and Vite page service in the server-side development environment, including: In the server-side development environment, install the static service module and Vite dependencies, and configure the static service module and Vite parameters according to project requirements; Configure and start the static service module, and define the static resource directory for hosting static resources; Write and run the startup script to start the static service module, listen to the port and provide static resource services; Configure Vite page service and define resource paths and entry files for front-end development; Start the Vite page service, provide page building and development functions, load the specified entry file, and update the page code module through module hot replacement during the development process.

7. The static page integration and resource management method according to claim 1, characterized in that: The static middleware and proxy middleware of the static service module process the static resources and API requests of multiple sub-applications and control the resource interaction between sub-application pages, including: Configure the static middleware of the static service module, define a static resource directory for each sub-application, and host the static resources of each sub-application; Configure the proxy middleware of the static service module to receive API requests from sub-applications and forward them to the corresponding backend services; Processing the sub-application's static resource request through the static middleware, and returning the corresponding static resource file according to the request path; Process the API request of the sub-application through the proxy middleware, and return the response result of the backend service to the client; The static resource request of the sub-application is processed through the static middleware, and the API request and response of the sub-application is forwarded through the proxy middleware.

8. A static page integration and resource management device, characterized in that: The static page integration and resource management device comprises: Service initialization module, used to start static service modules and Vite page services in the server-side development environment; An old project static resource processing module, used to process the static resources of the old project through the static service module; The front-end page development and construction module is used to develop and debug the front-end page through the Vite page service, and handle the page construction of single-page and multi-page applications; The request proxy and page jump module is used to forward the client's page request to the Vite page service through the proxy function of the static service module, process the resources in the page request through the Vite page service and perform the page jump operation; A resource management module, used to configure the page proxy mechanism of the Vite page service, and to process the jump and resource management between sub-application pages through the page proxy mechanism; The static resource and API request management module is used to process the static resources and API requests of multiple sub-applications through the static middleware and proxy middleware of the static service module, and control the resource interaction between the sub-application pages.

9. A computer device, characterized in that: The computer device includes a memory, a processor, and a static page integration and resource management program stored in the memory and executable on the processor. When the static page integration and resource management program is executed by the processor, the steps of the static page integration and resource management method as described in any one of claims 1 to 7 are implemented.

10. A computer-readable storage medium, characterized in that: The storage medium stores a static page integration and resource management program, which, when executed by a processor, implements the steps of the static page integration and resource management method according to any one of claims 1 to 7.

Images