Method, system and device for simulating back-end API in front-end project based on Vite and medium

Abstract

The invention provides a method, system, device and medium for simulating a back-end API in a front-end project based on Vite, and belongs to the technical field of front-end tests.The method comprises the steps that a simulation plug-in is introduced into a Vite configuration file, and a storage directory and starting conditions of a simulation file are specified; creating a simulation file under the storage directory, compiling simulation logic corresponding to the API, defining a path, a method and response logic of the request, and generating a simulation rule set; loading the Vite configuration file, and loading a simulation rule set in the simulation file when a starting condition is met; intercepting an API request through a simulation plug-in, matching a request method and a path to a simulation rule set, dynamically generating simulation data according to a matched simulation rule, and returning the simulation data to the front-end application; and monitoring the change of the simulation file, and updating the loaded simulation rule set in real time. The method is deeply fused with a development environment, front and rear end decoupling is realized, hot update takes effect immediately, the development efficiency is improved, and the method is adaptive to various environments.

Description

Technical Field

[0001] The present application belongs to the field of front-end testing technology, and specifically relates to a method, system, device, and medium for simulating a back-end API in a front-end project based on Vite. Background Art

[0002] In the world of web development, where front-end and back-end development are separated, front-end development often relies on APIs provided by the back-end for data exchange and functionality implementation. However, in actual development, due to inconsistent development progress between the front-end and back-end, front-end development often needs to wait for back-end APIs to complete, severely impacting development efficiency and project progress. To address this issue, API simulation solutions are widely used in the industry. By simulating back-end API responses within the front-end project, front-end development can run independently.

[0003] Common API mocking solutions currently suffer from the following issues: First, public cloud mocking platforms require developers to mock data through external platforms, lacking deep integration with local development environments, resulting in frequent tool switching during development. Second, traditional mocking tools enhance API mocking capabilities by launching independent mocking services. This requires the maintenance of an additional service process, isolating the front-end development environment, and increases the complexity of development and debugging. Third, the hot update mechanism of mocking solutions integrated into build tools suffers from latency, meaning that modifications to mock data often don't take effect immediately. Finally, mocking solutions based on Service Workers suffer from poor performance.

[0004] In summary, existing mocking solutions commonly suffer from the following issues: First, they are disconnected from the development environment: they require additional services to be started or rely on external platforms, making seamless integration with front-end projects impossible. Second, hot updates are inefficient: Mock data modifications require manual refreshes or service restarts, impacting development flow. Third, environment switching is inflexible: it is difficult to dynamically enable or disable mocking functionality based on different environments, such as development, testing, and production. Fourth, protocol support is limited: most solutions only support RESTful APIs, with insufficient support for modern protocols like GraphQL. Summary of the Invention

[0005] In a first aspect, embodiments of the present application provide a method for simulating a backend API in a frontend project based on Vite, comprising the following steps: S1. Introduce the simulation plug-in into the front-end project's Vite configuration file and specify the simulation file storage directory and activation conditions. S2 creates a simulation file in the storage directory and writes the corresponding API simulation logic in each simulation file according to actual business needs, defines the request path, method and response logic, and generates a simulation rule set; S3. After the Vite development server is started, it loads the Vite configuration file and, if the enabling conditions are met, loads the simulation rule set in the simulation file. S4. When the front-end application initiates an API request, the simulation plug-in intercepts the API request, matches the request method and path to the simulation rule set, and dynamically generates simulation data based on the matched simulation rules and returns it to the front-end application; S5. Monitor the simulation file, and when a change in the simulation file is detected, update the loaded simulation rule set in real time.

[0006] Furthermore, the specific steps of step S1 are as follows: S11. Import the simulation plug-in using the import statement in the vite.config.js configuration file; S12. Configure the mockDir parameter to specify the directory path for storing simulation files; S13. Set the enableMock parameter as an enabling condition, and set the value of the enableMock parameter to be associated with the environment variable VITE_MOCK_MODE.

[0007] Furthermore, the specific steps of step S2 are as follows: S21. Create simulation files in the storage directory according to the needs of the business module; S22. Define API mocking rules using the defineMock method in each mock file. S23. Configure the url path, http method and response function for each simulation API rule; the parameters of the response function are used to obtain request data and dynamically generate a simulation response.

[0008] Furthermore, the specific steps of step S3 are as follows: S31. Load the Vite configuration file when the Vite development server starts; S32. Check the environment variable VITE_MOCK_MODE associated with the enableMock parameter; When the value of the VITE_MOCK_MODE environment variable is mock, go to step S35; When the value of the VITE_MOCK_MODE environment variable is proxy, go to step S33; When the value of the VITE_MOCK_MODE environment variable is record, go to step S34; S33 disables the simulation function and proceeds to step S4; S34 starts the recording function and proceeds to step S4; S35. Scan the simulation file directory, parse the simulation file content, and build a simulation rule mapping table in memory.

[0009] Furthermore, the specific steps of step S4 are as follows: S41. Respond to the API request initiated by the front-end application and determine the value of the VITE_MOCK_MODE environment variable; When the value of the VITE_MOCK_MODE environment variable is mock, go to step S43; When the value of the VITE_MOCK_MODE environment variable is proxy, proceed to step S42; S42. Intercept the API request and forward it to the real backend service environment, ending; S43. Register the request interceptor through the configureServer hook of the simulation plug-in; S44. After intercepting the HTTP request, extract the path and method, and search for a matching simulation rule in the mapping table of the simulation rule set; S45. Execute the response function of the matched simulation rule to generate response data, and package it into an HTTP response and return it to the front end, and enter step S5.

[0010] Furthermore, in step S41, when the value of the VITE_MOCK_MODE environment variable is record, the process proceeds to step S46; S46. Start file recording, intercept API requests and forward them to the real backend service environment; S47. Save the API request parameters and response data in real time as a JSON format recording file; S48. Convert the recording file into simulation rules, automatically generate a simulation rule file, add it to the simulation rule set, and return to step S41.

[0011] Furthermore, the specific steps of step S5 are as follows: S51. Monitor the changes of simulated file directories through the chokidar library; S52. When a simulation file modification is detected, reload the new simulation file simulation rule set in accordance with steps S2 and S3; S53. Update the simulation rule set in memory while maintaining the HTTP connection.

[0012] In a second aspect, embodiments of the present application further provide a system for simulating backend APIs in frontend projects based on Vite, including: The simulation plug-in configuration module introduces the simulation plug-in into the Vite configuration file of the front-end project and specifies the storage directory and activation conditions of the simulation file; The simulation rule generation module creates simulation files in the storage directory, and writes the simulation logic of the corresponding API in each simulation file according to actual business needs, defines the request path, method and response logic, and generates a simulation rule set; The simulation rule loading module loads the Vite configuration file after the Vite development server is started, and loads the simulation rule set in the simulation file when the activation conditions are met; The API request interception module intercepts API requests through the simulation plug-in when the front-end application initiates an API request, matches the request method and path to the simulation rule set, and dynamically generates simulation data based on the matched simulation rules and returns it to the front-end application; The simulation rule set hot update module monitors the simulation file and updates the loaded simulation rule set in real time when changes to the simulation file are detected.

[0013] In a third aspect, an embodiment of the present application further provides an electronic device, comprising a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the program, the steps of the method for simulating a backend API in a front-end project based on Vite as described in the first aspect are implemented.

[0014] In a fourth aspect, an embodiment of the present application further provides a storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the method for simulating a backend API in a front-end project based on Vite as described in the first aspect.

[0015] It can be seen from the above technical solutions that this application has the following advantages: This application provides a method, system, device, and medium for simulating backend APIs in front-end projects based on Vite. By introducing a simulation plug-in into the Vite configuration file and making relevant settings, backend API simulation can be quickly and easily implemented on the front-end. This frees front-end development from relying on back-end interfaces, improves development efficiency, shortens development cycles, and facilitates independent development and testing on the front-end. Furthermore, the system can flexibly switch between simulation mode and proxy mode based on different environment variables, adapting to various development scenarios. Simulation rule sets can also be updated dynamically, ensuring the timeliness and accuracy of simulation data, thereby improving the flexibility and convenience of front-end development projects. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0017] Figure 1 This is a flow chart of the method of simulating backend APIs in frontend projects based on Vite in the present invention.

[0018] Figure 2 This is a schematic diagram of a system for simulating backend APIs in frontend projects based on Vite according to the present invention. DETAILED DESCRIPTION

[0019] The following detailed description of the specific steps of the method for simulating a backend API in a front-end project based on Vite will further describe various embodiments of the present disclosure. The present disclosure can have various embodiments, and adjustments and changes can be made therein. However, it should be understood that there is no intention to limit the various embodiments of the present disclosure to the specific embodiments disclosed herein. Instead, the present disclosure should be construed to encompass all adjustments, equivalents, and / or alternatives falling within the spirit and scope of the various embodiments of the present disclosure.

[0020] For example, in the current web development model with separate front-end and back-end, the normal operation of the front-end often relies on the API interfaces provided by the back-end to complete various data interactions and functional implementations. However, in real-world development scenarios, it is difficult to maintain synchronization between the front-end and back-end development progress. Front-end development work often stalls while waiting for the back-end API to be completed, which seriously affects development efficiency and the overall progress of the project. In view of this, API simulation solutions are widely adopted in the industry. By simulating the response mode of the back-end API in the front-end project, the front-end can operate independently.

[0021] However, current common API simulation solutions have the following series of problems: On the one hand, public cloud mock platforms require developers to build mock data through external platforms, which makes it difficult to achieve deep integration with the local development environment, resulting in frequent tool switching during the development process, which brings many inconveniences to the development process. On the other hand, traditional mock tools often use the startup of independent mock services to implement API simulation functions. This not only requires the maintenance of an additional service process, but also the process is relatively independent and separated from the front-end development environment, which greatly increases the complexity of the development and debugging process. In addition, the mock solution integrated with the construction tool has a significant delay in the hot update mechanism. When the mock data is modified, it often fails to take effect in time, which has a certain impact on the smoothness of development. Furthermore, the performance of the mock solution based on Service Worker is also unsatisfactory.

[0022] Overall, existing mocking solutions have the following major problems: First, they are disconnected from the development environment, requiring either additional services to be started or excessive reliance on external platforms, making it difficult to achieve seamless integration with front-end projects. Second, hot updates are inefficient. When mock data is modified, it is often necessary to manually refresh the page or restart the service for the changes to take effect, which greatly affects the consistency and fluency of development. Third, environment switching is not flexible enough. When faced with different environments such as development, testing, and production, it is difficult to conveniently enable or disable mocking functions dynamically according to actual needs. Fourth, the scope of protocol support is limited. Most solutions only support RESTful APIs, and support for modern protocols such as GraphQL is relatively insufficient.

[0023] To address the above issues, this embodiment provides a method for simulating backend APIs in front-end projects based on Vite. This complete method flow covers configuring simulation plugins, creating simulation files, loading rule sets, intercepting requests and returning simulation data, and hot-updating simulation rule sets. This provides a complete and effective simulation solution for front-end projects, enabling front-end developers to develop and test business logic normally without back-end support, thereby improving project development efficiency and autonomy.

[0024] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of the present invention.

[0025] See also Figure 1 The figure shows a flowchart of a method for simulating a backend API in a frontend project based on Vite in a specific embodiment. The method includes the following steps: S1. Introduce the simulation plug-in into the front-end project's Vite configuration file and specify the simulation file storage directory and activation conditions. It should be noted that introducing the simulation plug-in into the Vite configuration file and specifying the simulation file storage directory and activation conditions are the basis for the subsequent implementation of the simulation function. This enables the simulation plug-in to correctly load and identify the simulation file. At the same time, by setting the activation conditions, developers can flexibly control the opening and closing of the simulation function, avoiding problems that may arise from the simulation function running in unnecessary scenarios. S2 creates a simulation file in the storage directory and writes the corresponding API simulation logic in each simulation file according to actual business needs, defines the request path, method and response logic, and generates a simulation rule set; It should be noted that creating simulation files in a specified directory, writing API simulation logic, and generating simulation rule sets are key steps in simulating backend APIs. Writing specific simulation logic based on business needs enables front-end applications to obtain simulation data that matches the actual business during development, thereby ensuring the normal development and testing of front-end business logic and providing strong data support for front-end development. S3. After the Vite development server is started, it loads the Vite configuration file and, if the enabling conditions are met, loads the simulation rule set in the simulation file. It should be noted that loading the configuration file and simulation rule set after the Vite development server is started ensures that the simulation rules can take effect immediately when the development server is running. This allows the front-end application to generate and return simulation data based on the latest simulation rule set when initiating a request, ensuring the normal operation and accuracy of the simulation function. S4. When the front-end application initiates an API request, the simulation plug-in intercepts the API request, matches the request method and path to the simulation rule set, and dynamically generates simulation data based on the matched simulation rules and returns it to the front-end application; It should be noted that by intercepting API requests through the simulation plug-in and matching the simulation rule set to return simulated data, the front-end application can obtain the required API response data without the need for back-end support. This allows front-end development and testing to be carried out independently, effectively improving development efficiency and reducing the time and cost of front-end and back-end joint debugging. It also facilitates rapid verification and optimization of front-end business logic. S5. Monitor the simulation file and update the loaded simulation rule set in real time when changes are detected in the simulation file; It should be noted that monitoring changes in simulation files and updating the simulation rule set in real time ensures the real-time and accuracy of the simulation rules. When the simulation file is modified due to changes in business requirements, the system can automatically update the simulation rules without manually restarting the server or reloading the rules, making the front-end development process smoother, ensuring that the simulation data can promptly reflect the latest business needs, and improving development flexibility and efficiency.

[0026] This embodiment is seamlessly integrated with the development environment, achieving front-end and back-end decoupling. The front-end can be developed independently without waiting for the back-end interface. The hot update mechanism can take effect immediately, improving development fluency. The mock function can be dynamically enabled or disabled according to different environments, and multiple protocols are supported, optimizing the development process, improving development efficiency, and reducing development complexity.

[0027] Furthermore, as a refinement and extension of the above-mentioned specific implementation, and to fully illustrate the specific implementation process of this embodiment, another method for simulating a backend API in a front-end project based on Vite is provided. The method includes the following steps: S1. Introduce the simulation plug-in into the front-end project's Vite configuration file and specify the simulation file storage directory and activation conditions. The specific steps of step S1 are as follows: S11. Import the simulation plug-in using the import statement in the vite.config.js configuration file; S12. Configure the mockDir parameter to specify the directory path for storing simulation files; S13. Set the enableMock parameter as the enabling condition, and set the value of the enableMock parameter to be associated with the environment variable VITE_MOCK_MODE; S2. Create a simulation file in the storage directory and write the simulation logic of the corresponding API in each simulation file according to actual business needs, define the request path, method and response logic, and generate a simulation rule set; the specific steps of step S2 are as follows: S21. Create simulation files in the storage directory according to the needs of the business module; S22. Define API mocking rules using the defineMock method in each mock file. S23 configures the URL path, http method, and response function for each simulation API rule; the response function parameters are used to obtain the request data and dynamically generate a simulation response; S3. After the Vite development server is started, the Vite configuration file is loaded. When the activation conditions are met, the simulation rule set in the simulation file is loaded. The specific steps of step S3 are as follows: S31. Load the Vite configuration file when the Vite development server starts; S32. Check the environment variable VITE_MOCK_MODE associated with the enableMock parameter; Specifically, the .env file in the project root directory is read through the dotenv tool to parse the value of the VITE_MOCK_MODE environment variable; When the value of the VITE_MOCK_MODE environment variable is mock, go to step S35; When the value of the VITE_MOCK_MODE environment variable is proxy, go to step S33; When the value of the VITE_MOCK_MODE environment variable is record, go to step S34; S33 disables the simulation function and proceeds to step S4; S34 starts the recording function and proceeds to step S4; S35. Scan the simulation file directory, parse the simulation file content, and build a simulation rule mapping table in memory; S4. When the front-end application initiates an API request, the simulation plug-in intercepts the API request, matches the request method and path to the simulation rule set, and dynamically generates simulation data based on the matched simulation rules and returns it to the front-end application; the specific steps of step S4 are as follows: S41. Respond to the API request initiated by the front-end application and determine the value of the VITE_MOCK_MODE environment variable; When the value of the VITE_MOCK_MODE environment variable is mock, go to step S43; When the value of the VITE_MOCK_MODE environment variable is proxy, proceed to step S42; When the value of the VITE_MOCK_MODE environment variable is record, go to step S46; S42. Intercept the API request and forward it to the real backend service environment, ending; S43. Register the request interceptor through the configureServer hook of the simulation plug-in; S44. After intercepting the HTTP request, extract the path and method, and search for a matching simulation rule in the mapping table of the simulation rule set; S45. Execute the response function of the matching simulation rule to generate response data, and package it as an HTTP response and return it to the front end, proceeding to step S5; S46. Start file recording, intercept API requests and forward them to the real backend service environment; S47. Save the API request parameters and response data in real time as a JSON format recording file; S48. Convert the recorded file into simulation rules, automatically generate simulation rule files, and add them to the simulation rule set; S5. Monitor the simulation file and update the loaded simulation rule set in real time when changes are detected in the simulation file; The specific steps of step S5 are as follows: S51. Monitor the changes of simulated file directories through the chokidar library; S52. When a simulation file modification is detected, reload the new simulation file simulation rule set in accordance with steps S2 and S3; S53. Update the simulation rule set in memory while maintaining the HTTP connection.

[0028] It should be understood that the size of the serial numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present invention.

[0029] like Figure 2 The following is an embodiment of a system for simulating a backend API in a front-end project based on Vite, provided by the present disclosure. This system and the methods for simulating a backend API in a front-end project based on Vite in the aforementioned embodiments are based on the same inventive concept. For details not fully described in the embodiments of the system for simulating a backend API in a front-end project based on Vite, please refer to the aforementioned embodiments of the methods for simulating a backend API in a front-end project based on Vite.

[0030] The system includes: The simulation plug-in configuration module introduces the simulation plug-in into the Vite configuration file of the front-end project and specifies the storage directory and activation conditions of the simulation file; The simulation rule generation module creates simulation files in the storage directory, and writes the simulation logic of the corresponding API in each simulation file according to actual business needs, defines the request path, method and response logic, and generates a simulation rule set; The simulation rule loading module loads the Vite configuration file after the Vite development server is started, and loads the simulation rule set in the simulation file when the activation conditions are met; The API request interception module intercepts API requests through the simulation plug-in when the front-end application initiates an API request, matches the request method and path to the simulation rule set, and dynamically generates simulation data based on the matched simulation rules and returns it to the front-end application; The simulation rule set hot update module monitors the simulation file and updates the loaded simulation rule set in real time when changes to the simulation file are detected.

[0031] This embodiment achieves deep integration with the development environment by simulating the interactive collaboration of the plug-in configuration module, the simulation rule generation module, and the API request interception module to simulate the hot update module of the rule set, realizes the decoupling of the front-end and back-end, and the hot update takes effect immediately, thereby improving development efficiency and flexibly adapting to various environments.

[0032] The method for simulating a backend API in a front-end project based on Vite provided in the embodiments of the present application can be applied to electronic devices. Those skilled in the art will understand that the electronic device structure involved in the embodiments of the present invention does not constitute a limitation of the electronic device. The electronic device may include more or fewer components than shown in the figure, or combine certain components, or arrange the components differently. In the embodiments of the present invention, the electronic device includes but is not limited to a laptop computer, a desktop computer, a workbench, a personal digital assistant, a server, a blade server, a mainframe computer, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital assistants, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the embodiments of the present application described and / or required herein.

[0033] The electronic device may include a processor, an external memory interface, an internal memory, a universal serial bus (USB) interface, a charging management module, a power management module, a battery, a wireless communication module, an audio module, a speaker, a microphone, a sensor module, a button, a camera, a display, and a SIM card interface, etc.

[0034] It is understood that the structures illustrated in the embodiments of the present application do not constitute specific limitations on the electronic device. In other embodiments of the present application, the electronic device may include more or fewer components than shown, or combine or separate certain components, or arrange the components differently. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0035] A processor may include one or more processing units, such as a central processing unit (CPU), an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU). Different processing units may be independent devices or integrated into one or more processors.

[0036] The processor can be the nerve center and command center of the electronic device. The controller can generate operation control signals based on the instruction opcode and timing signal to complete the control of instruction fetching and execution.

[0037] The processor may also include a memory for storing instructions and data. In some embodiments, the memory in the processor is a cache memory. This memory can store instructions or data that the processor has just used or is reusing. If the processor needs to use the instruction or data again, it can directly call it from the memory. This avoids repeated accesses, reduces processor latency, and thus improves system efficiency.

[0038] The electronic device implements the method of simulating a backend API in a front-end project based on Vite in this application, introducing a simulation plug-in into the Vite configuration file of the front-end project and specifying the storage directory and activation conditions of the simulation file; creating simulation files in the storage directory, and writing the simulation logic of the corresponding API in each simulation file according to actual business needs, defining the request path, method and response logic, and generating a simulation rule set; after the Vite development server is started, the Vite configuration file is loaded, and when the activation conditions are met, the simulation rule set in the simulation file is loaded; when the front-end application initiates an API request, the API request is intercepted by the simulation plug-in, the request method and path are matched to the simulation rule set, and simulation data is dynamically generated according to the matched simulation rules and returned to the front-end application; the technical solution of monitoring the simulation file and updating the loaded simulation rule set in real time when changes to the simulation file are detected achieves deep integration with the development environment, realizes decoupling of the front-end and back-end, hot updates take effect immediately, improves development efficiency, and flexibly adapts to various environments.

[0039] The storage medium provided in this application stores a program product that can implement a method for simulating a backend API in a front-end project based on Vite.

[0040] The method for simulating a backend API in a front-end project based on Vite includes: introducing a simulation plug-in into the front-end project's Vite configuration file and specifying the simulation file's storage directory and activation conditions; creating simulation files in the storage directory and writing the corresponding API simulation logic in each simulation file based on actual business needs, defining the request path, method, and response logic, and generating a simulation rule set; after starting the Vite development server, loading the Vite configuration file and, when the activation conditions are met, loading the simulation rule set in the simulation file; when the front-end application initiates an API request, intercepting the API request through the simulation plug-in, matching the request method and path to the simulation rule set, and dynamically generating simulation data based on the matched simulation rules and returning it to the front-end application; monitoring the simulation file and, when changes are detected in the simulation file, updating the loaded simulation rule set in real time.

[0041] In some possible implementations, the Vite-based method of simulating a backend API in a frontend project of the present disclosure may be implemented in the form of a program product, which includes program code. When the program product is run on a terminal device, the program code is used to cause the terminal device to execute the steps according to the various exemplary implementations of the present disclosure described in the "Exemplary Methods" section above.

[0042] The storage medium of the present disclosure can adopt any combination of one or more readable media. The readable medium can be a readable signal medium or a readable storage medium. The readable storage medium can be, for example, but not limited to, a system, device or component of electricity, magnetism, light, electromagnetic, infrared, or semiconductor, or any combination thereof. More specific examples (non-exhaustive list) of readable storage media include: an electrical connection with one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof.

[0043] The above description of the disclosed embodiments is intended to enable one skilled in the art to implement or use the present invention. Various modifications to these embodiments will be readily apparent to one skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present invention. Therefore, the present invention is not limited to the embodiments shown herein but is intended to conform to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for simulating backend APIs in frontend projects based on Vite, characterized in that: The steps include: S1. Introduce the simulation plug-in into the front-end project's Vite configuration file and specify the simulation file storage directory and activation conditions. S2 creates a simulation file in the storage directory and writes the corresponding API simulation logic in each simulation file according to actual business needs, defines the request path, method and response logic, and generates a simulation rule set; S3. After the Vite development server is started, it loads the Vite configuration file and, if the enabling conditions are met, loads the simulation rule set in the simulation file. S4. When the front-end application initiates an API request, the simulation plug-in intercepts the API request, matches the request method and path to the simulation rule set, and dynamically generates simulation data based on the matched simulation rules and returns it to the front-end application; S5. Monitor the simulation file, and when a change in the simulation file is detected, update the loaded simulation rule set in real time.

2. The method for simulating backend API in frontend project based on Vite according to claim 1 is characterized in that: The specific steps of step S1 are as follows: S11. Import the simulation plug-in using the import statement in the vite.config.js configuration file; S12. Configure the mockDir parameter to specify the directory path for storing simulation files; S13. Set the enableMock parameter as an enabling condition, and set the value of the enableMock parameter to be associated with the environment variable VITE_MOCK_MODE.

3. The method for simulating backend API in frontend project based on Vite according to claim 2 is characterized in that: The specific steps of step S2 are as follows: S21. Create simulation files in the storage directory according to the needs of the business module; S22. Define API mocking rules using the defineMock method in each mock file. S23. Configure the url path, http method and response function for each simulation API rule; the parameters of the response function are used to obtain request data and dynamically generate a simulation response.

4. The method for simulating backend API in frontend project based on Vite according to claim 3 is characterized in that: The specific steps of step S3 are as follows: S31. Load the Vite configuration file when the Vite development server starts; S32. Check the environment variable VITE_MOCK_MODE associated with the enableMock parameter; When the value of the VITE_MOCK_MODE environment variable is mock, go to step S35; When the value of the VITE_MOCK_MODE environment variable is proxy, go to step S33; When the value of the VITE_MOCK_MODE environment variable is record, go to step S34; S33 disables the simulation function and proceeds to step S4; S34 starts the recording function and proceeds to step S4; S35. Scan the simulation file directory, parse the simulation file content, and build a simulation rule mapping table in memory.

5. The method for simulating backend API in frontend project based on Vite according to claim 4 is characterized in that: The specific steps of step S4 are as follows: S41. Respond to the API request initiated by the front-end application and determine the value of the VITE_MOCK_MODE environment variable; When the value of the VITE_MOCK_MODE environment variable is mock, go to step S43; When the value of the VITE_MOCK_MODE environment variable is proxy, proceed to step S42; S42. Intercept the API request and forward it to the real backend service environment, ending; S43. Register the request interceptor through the configureServer hook of the simulation plug-in; S44. After intercepting the HTTP request, extract the path and method, and search for a matching simulation rule in the mapping table of the simulation rule set; S45. Execute the response function of the matched simulation rule to generate response data, and package it into an HTTP response and return it to the front end, and enter step S5.

6. The method for simulating backend API in frontend project based on Vite according to claim 5 is characterized in that: In step S41, when the value of the VITE_MOCK_MODE environment variable is record, proceed to step S46; S46. Start file recording, intercept API requests and forward them to the real backend service environment; S47. Save the API request parameters and response data in real time as a JSON format recording file; S48. Convert the recording file into simulation rules, automatically generate simulation rule files, and add them to the simulation rule set.

7. The method for simulating backend API in frontend project based on Vite according to claim 5 is characterized in that: The specific steps of step S5 are as follows: S51. Monitor the changes of simulated file directories through the chokidar library; S52. When a simulation file modification is detected, reload the new simulation file simulation rule set in accordance with steps S2 and S3; S53. Update the simulation rule set in memory while maintaining the HTTP connection.

8. A system based on Vite to simulate backend API in frontend project, characterized by: include: The simulation plug-in configuration module introduces the simulation plug-in into the Vite configuration file of the front-end project and specifies the storage directory and activation conditions of the simulation file; The simulation rule generation module creates simulation files in the storage directory, and writes the simulation logic of the corresponding API in each simulation file according to actual business needs, defines the request path, method and response logic, and generates a simulation rule set; The simulation rule loading module loads the Vite configuration file after the Vite development server is started, and loads the simulation rule set in the simulation file when the activation conditions are met; The API request interception module intercepts API requests through the simulation plug-in when the front-end application initiates an API request, matches the request method and path to the simulation rule set, and dynamically generates simulation data based on the matched simulation rules and returns it to the front-end application; The simulation rule set hot update module monitors the simulation file and updates the loaded simulation rule set in real time when changes to the simulation file are detected.

9. An electronic device, characterized in that: The method comprises a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, the method implements the steps of the method for simulating a backend API in a front-end project based on Vite according to any one of claims 1 to 7.

10. A storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method for simulating a backend API in a frontend project based on Vite are implemented as described in any one of claims 1 to 7.

Images