Development assistance system and method based on full-front-end isolation packaging

Abstract

The invention discloses a development assistance system and method based on full-front-end isolation packaging. The development assistance system comprises an application server module, a configuration client interface module, a debugging plug-in overlay interface module and a middleware core library module. The method and the system have the advantages that the method and the system are constructed on the basis of a plug-in system, interface service is separated from a front-end interface according to the design principle of strong cohesion and loose coupling, and the method and the system are capable of embedding expansion capacity through a vitite plug-in, quick in starting, light in weight and close to developers. According to the method and the system, overlay debugging and independent interface configuration during development are supported, the method and the system are fused to a development process of developers, atomicity, portability and integrity of front-end service development are embodied, front-end secondary development experience and efficiency can be effectively improved, and front-end and rear-end joint debugging difficulty is reduced.

Description

Technical Field

[0001] The present invention relates to the field of computer software development, and in particular to a development assistance system and method based on full front-end isolation encapsulation. Background Art

[0002] The omnichannel system design is based on the separation of front-end and back-end and micro-front-end architecture. When developing the front-end, the front-end needs to interact with the back-end to achieve complete functions, which will further involve a complex and changeable back-end development environment. At the same time, since the front-end and back-end development are often not completely synchronized, the dynamic and stable back-end environment cannot be continuously provided when the front-end is developed, resulting in the front-end development being constrained by the progress of the back-end development. Therefore, in the current development, the demand for lightweight and front-end-friendly front-end development environments and development aids - customized static services and reverse proxy services, readily available back-end message simulation, and simulation services that can provide consistent capabilities as the development environment and demonstration environment change has become increasingly urgent. Summary of the invention

[0003] In order to solve the current technical problem that front-end development is restricted by the progress of back-end development, the present invention provides a system and method for development assistance based on full front-end isolation encapsulation, which can completely solve the problem of excessive dependencies between the front-end environment and the back-end environment from the front-end level, modularize the front-end, and reduce the environmental complexity of front-end and back-end separation and micro-front-end application development.

[0004] In order to achieve the above technical purpose, the technical solution of the present invention is: A development assistance system based on full front-end isolation and encapsulation, including an application server module, a configuration client interface module, a debugging plug-in overlay interface module and a middleware core library module; The application server module is used to provide a service interface to receive the request message of the front-end page to be debugged, and to intercept and record the request message by calling the corresponding functional components in the middleware core library module, and to generate a returned simulation message according to the request message, thereby realizing the proxy service and configuration service; The configuration client interface module is used to provide a graphical parameter configuration adjustment function to adjust the specific settings of the application server module and the middleware core library module, and to change the received request message and the simulation message content; The debugging plug-in overlay interface module is used to provide a floating display window that can be hidden or visible at any time, and is used to communicate with modules including the application server module and the middleware core library module, and display data information including the running status and error information of each module; The middleware core library module is used to provide functions including data processing and storage, so as to process request messages and generate simulation messages.

[0005] The development assistance system based on full front-end isolation encapsulation also includes a vite plug-in module. The vite plug-in module is based on the vite framework to quickly start each module including the application server module and the middleware core library module, and inject pre-set proxy information and configuration information into each module.

[0006] The described development assistance system based on full front-end isolation and encapsulation, the described application server module is implemented based on a multi-layer architecture including a presentation layer, a business logic layer and a data access layer, the described presentation layer is used to interact with the front-end page to be debugged to parse and encapsulate request messages and simulation messages; the described business logic layer interacts with the middleware core library module to realize calling functional components and performing data processing; the described data access layer is connected to the database to perform data reading and writing operations.

[0007] The development assistance system based on full front-end isolation and encapsulation, the configuration client interface module adjusts the configuration of the application server module through graphical interface elements including text boxes, drop-down menus and buttons, and starts and stops related services and adjusts parameters of the middleware core library module.

[0008] The described development assistance system based on full front-end isolation encapsulation, the described debugging plug-in overlay interface module displays data based on visual elements including charts and lists, obtains operating status data from the application server module, and obtains operating data of various services from the middleware core library module.

[0009] The development assistance system based on full front-end isolation and encapsulation, the middleware core library module includes multiple functional modules with independent interfaces and implementation logic, and cooperates with the application server through interface calls.

[0010] A method for development assistance based on full front-end isolation encapsulation, based on the system for development assistance based on full front-end isolation encapsulation, comprises the following steps: Step 1: Start the debugging service for the front-end page to be debugged based on the vite plug-in. At the same time, the vite plug-in injects the preset proxy information and configuration information at startup, thereby starting the proxy service and configuration service on the application server; Step 2: The developer initiates access to the page to be debugged on the front end, so that the page to be debugged sends a request message to the back end; Step 3: The proxy service intercepts the request message, and the application server calls the function module in the middleware core library module according to the request message to simulate the backend to process the request message and return the simulated message; Step 4: The page to be debugged receives the simulated message and gives corresponding feedback. At the same time, the debugging plug-in overlay interface module displays the running status data and the running data of various services in real time. The developer debugs and develops the page to be debugged according to the feedback of the page to be debugged and the display of the debugging plug-in overlay interface module; then returns to step 2 and executes in a loop until the page to be debugged completes debugging and development.

[0011] The method for development assistance based on full front-end isolation and encapsulation, in step 2, before initiating access, also includes a step in which the developer modifies and adjusts the configuration information and proxy information by configuring the client interface module according to current needs.

[0012] The method of development assistance based on full front-end isolation encapsulation, in the step 3, the proxy service intercepts the request message while recording the request message, so that the developer can adjust the content of the request message by configuring the client interface module, and send it after the adjustment is completed.

[0013] The method of development assistance based on full front-end isolation encapsulation, in the step 3, when returning the simulated message, also includes the step of the developer adjusting the content of the simulated message by configuring the client interface module, and returning to the page to be debugged after the adjustment is completed.

[0014] The technical effect of the present invention is that the present invention is built on the basis of a plug-in system, following the design principle of strong cohesion and loose coupling, separating the interface service from the front-end interface, embedding the expansion capability through the vite plug-in, and quickly starting. Lightweight and close to developers are a major feature of the present method and system. Quick startup, support for overlay debugging and independent configuration interface during development, and integration into the developer development process embody the atomicity, lightness and integrity of front-end business development, which can effectively improve the front-end secondary development experience and efficiency, and reduce the difficulty of front-end and back-end joint debugging. The present invention fits the front-end development debugging process, can assist, and can also completely take over the front-end process development, lightweight vite plug-in development experience, does not need to start other independent system services, conforms to the mainstream development experience of front-end development, and cooperates with the engineering characteristics of the new generation of channel business platforms, and can run through the front-end and back-end interaction points in the entire business process. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] Figure 1 A schematic diagram of a module of a development assistance system based on full front-end isolation encapsulation according to the present invention; Figure 2 The present invention is a flowchart of a development assistance method based on full front-end isolation packaging. DETAILED DESCRIPTION

[0016] See also Figure 1 The embodiment provides a development assistance system based on full front-end isolation encapsulation, including an application server module, a configuration client interface module, a debugging plug-in overlay interface module and a middleware core library module.

[0017] The application server module is used to provide a service interface to receive the request message of the front-end page to be debugged, and to intercept and record the request message by calling the corresponding functional components in the middleware core library module, and to generate the returned simulation message according to the request message, so as to realize the proxy service and configuration service. The application server module is implemented based on a multi-layer architecture including a presentation layer, a business logic layer and a data access layer. The presentation layer is used to interact with the front-end page to be debugged to parse and encapsulate the request message and the simulation message. The business logic layer interacts with the middleware core library module to call the functional components and perform data processing. The data access layer connects to the database to perform data read and write operations.

[0018] As the core hub of the entire system, the application server module is responsible for receiving various requests from the client, processing them according to the internal business logic, and then feeding back the corresponding processing results to the client. It carries the operating environment of many business applications and ensures the stable provision of the overall system service. For example, when the client initiates a request to obtain specific data, the application server module will call the relevant data processing program, extract accurate data from the database or cache, and send it to the client after necessary operations such as format conversion. The application server module in this embodiment adopts an advanced multi-layer architecture design, including a presentation layer, a business logic layer, and a data access layer. The presentation layer is responsible for interacting with the client, parsing and encapsulating request and response information; the business logic layer carries the core business rules of the system, such as user authority verification, data calculation, etc.; the data access layer is responsible for establishing a connection with the underlying database and performing data read and write operations. At the same time, in order to ensure performance in high-concurrency scenarios, the application server module is equipped with an efficient thread pool management mechanism and a load balancing strategy, which can reasonably allocate system resources and avoid single point failures and performance bottlenecks. The application server module works closely with the configuration client interface module, receives configuration parameter requests from the client interface, and adjusts its own operating status and business logic according to these parameters. At the same time, it also communicates with the middleware core library module through standard interfaces and calls the common services provided by the middleware, such as message queue services for asynchronous task processing, to enhance the overall scalability and flexibility of the system.

[0019] The configuration client interface module is used to provide graphical parameter configuration adjustment functions to adjust the specific settings of the application server module and the middleware core library module, and to change the received request message and the simulated message content. The configuration client interface module uses graphical interface elements including text boxes, drop-down menus and buttons to adjust the configuration of the application server module, and to start and stop related services and adjust parameters of the middleware core library module.

[0020] The configuration client interface module is designed to provide users with an intuitive and convenient visual operation platform, so that users can easily configure various parameters of the system. Users do not need to have a deep understanding of the underlying code of the system and the complex configuration file format. Through graphical interface elements such as text boxes, drop-down menus, buttons, etc., they can complete operations such as server connection parameter settings, business function switch control, and display style adjustment. For example, in an enterprise-level application, administrators can use this interface to configure the permission levels of users in different departments and implement permission management conveniently and quickly. The configuration client interface module follows the user-friendly design principle and adopts a modular layout. Different functional configuration areas are clearly divided, which is convenient for users to quickly locate and operate. In terms of interaction, it provides real-time input prompts and verification functions. When the user enters a parameter value that does not meet the requirements, a prompt box can pop up in time to inform the error message. At the same time, the configuration changes can take effect in real time or provide a clear save confirmation mechanism, so that users can clearly know the results of the configuration changes. There is frequent data interaction between the configuration client interface module and the application server module. The parameters configured by the user on the interface will be sent to the application server module in a specific data format, so that the server can run according to the new configuration. The interaction with the middleware core library module lies in that some configurations may involve the enabling or not of middleware-related services or parameter adjustments, thereby coordinating the middleware to provide more demand-oriented support for the entire system.

[0021] The debug plug-in overlay interface module is used to provide a floating display window that can be hidden or visible at any time, and is used to communicate with modules including the application server module and the middleware core library module, and display data information including the running status and error information of each module. The debug plug-in overlay interface module displays data based on visual elements including charts and lists, and obtains running status data from the application server module, and the running data of various services from the middleware core library module.

[0022] The debugging plug-in overlay interface module is a tool for system debugging and monitoring designed for developers and operation and maintenance personnel. It can display key operating data, status information, potential error prompts, etc. in a visual way when the system is running. For example, when troubleshooting system performance problems, the interface can present the resource usage of each module in real time, such as CPU usage, memory consumption, etc., to help technicians quickly locate modules that may have performance bottlenecks. At the same time, for abnormal situations, the error stack information can be displayed in detail to facilitate tracking the root cause of the problem. The interface is presented in the form of an overlay, which can be flexibly displayed or hidden on the system operation interface as needed without causing too much interference to normal system operations. It uses a variety of visual elements such as charts and lists to display data, making the information more intuitive and easy to understand. In terms of interaction, it supports operations such as clicking and filtering, allowing technicians to deeply view detailed data in a specific module or time period, which is convenient for targeted problem analysis and debugging. The debugging plug-in overlay interface module obtains real-time operating status data from the application server module, and continuously updates the displayed information through the data monitoring channel established with the application server module. At the same time, it will also interact with the middleware core library module to obtain the operating details related to the middleware service, so as to comprehensively monitor the operating status of the entire system and provide a strong basis for solving various problems that arise in the system.

[0023] The middleware core library module is used to provide functions including data processing and storage to process request messages and generate simulation messages. The middleware core library module includes multiple functional modules with independent interfaces and implementation logic, and cooperates with the application server through interface calls.

[0024] The middleware core library module plays a key role in providing general services and enhancing system integration capabilities in the entire system. It encapsulates common functional components such as message passing, transaction processing, and cache management. Different business modules can easily call these components to avoid repeated development and improve code reusability and development efficiency. For example, in a distributed system, if multiple subsystems need to communicate with each other reliably, the message queue middleware in the middleware core library module can be used to implement asynchronous and reliable message transmission to ensure smooth data interaction between systems. The middleware core library module contains multiple functional modules, each of which has its own independent interface and implementation logic. Taking the cache management module as an example, it uses efficient cache algorithms such as the LRU (least recently used) algorithm to manage cache space, automatically eliminate infrequently used data, improve cache hit rate, and reduce access pressure on the backend database. In terms of technical implementation, based on the object-oriented design concept, a unified API is provided to the outside world to facilitate calls from other modules while ensuring internal maintainability and scalability. The middleware core library module works closely with the application server through interface calls to provide necessary middleware service support for the business logic processing of the application server. For the configuration client interface, it responds to the middleware-related parameter adjustment request from the interface configuration and dynamically optimizes its own service status. It also interacts with the debugging plug-in overlay interface, such as providing relevant runtime data for debugging plug-ins to monitor and troubleshoot problems at the middleware service level.

[0025] The middleware core library modules specifically include: The data storage unit includes multiple data storage structure definitions, including: Basic data storage: The base class of all data storage, other data storage inherits it.

[0026] Recording record alias data storage: Stores recording record alias data, which is displayed in the Alias ​​column of the message recording interface.

[0027] Simulation data storage: stores simulation data, which is displayed in the interface simulation interface.

[0028] Proxy data storage: Stores proxy data, which is displayed in the proxy configuration interface.

[0029] Recording data storage: Stores recording data, which is displayed in the message recording interface.

[0030] URL alias data storage: stores URL alias data, which is displayed in the interface alias interface.

[0031] Web data storage: This data is the http server startup parameter configuration.

[0032] The transaction simulation unit includes: transaction simulation API plug-in - defines the message simulation add, delete, modify and query API interface and the simulation data acquisition API.

[0033] The transaction recording unit includes: the transaction recording API plug-in - defines the API interface for adding, deleting, modifying and checking message recording.

[0034] The address alias unit includes: Address alias API plug-in - defines the API interface for adding, deleting, modifying and checking address aliases.

[0035] The proxy unit includes: proxy configuration API plug-in - defines the API interface for adding, deleting, modifying and checking proxy configuration, and proxy server plug-in.

[0036] The vite plug-in module in this embodiment is based on the vite framework to quickly start each module including the application server module and the middleware core library module, and inject pre-set proxy information and configuration information into each module.

[0037] The vite plug-in is mainly used in the front-end development and construction process, aiming to optimize the development experience and performance of front-end projects. It takes advantage of the advanced features of the vite framework, such as fast cold start and instant module hot replacement, and further expands and customizes these features through plug-ins. For example, in a large front-end project, the vite plug-in can automatically optimize and compress the code, remove redundant code, reduce the project's packaging size, and speed up page loading; it can also assist in handling the dependencies between front-end modules to ensure the correct loading and updating of modules during the development process. Based on the vite plug-in mechanism, various events and tasks in the front-end construction process are intercepted and processed by writing specific code logic. For example, in the code conversion stage, the vite plug-in can use AST (abstract syntax tree) parsing technology to analyze and convert JavaScript, CSS and other codes to achieve code optimization. At the same time, it has good compatibility with other front-end development tools and frameworks, and can be easily integrated into the existing front-end development process, seamlessly connecting various project configurations and development specifications.

[0038] Although the vite plug-in mainly focuses on the front-end development part, it is also related to other modules of the entire system. When configuring the client interface involves updating the front-end display style and interaction logic, the vite plug-in can help optimize the construction and deployment of the front-end code to ensure that the interface updates can be presented to users quickly and stably. And in different stages of the overall system development, testing, and online deployment, cooperate with other modules to jointly ensure the performance and user experience of the front-end part.

[0039] This embodiment also provides a method for development assistance based on full front-end isolation encapsulation. The method is based on the system for development assistance based on full front-end isolation encapsulation, and includes the following steps: Step 1: Start the debugging service for the front-end page to be debugged based on the vite plug-in. At the same time, the vite plug-in injects the preset proxy information and configuration information at startup, thereby starting the proxy service and configuration service on the application server; Step 2: The developer initiates access to the page to be debugged on the front end, so that the page to be debugged sends a request message to the back end; Step 3: The proxy service intercepts the request message, and the application server calls the function module in the middleware core library module according to the request message to simulate the backend to process the request message and return the simulated message; Step 4: The page to be debugged receives the simulated message and gives corresponding feedback. At the same time, the debugging plug-in overlay interface module displays the running status data and the running data of various services in real time. The developer debugs and develops the page to be debugged according to the feedback of the page to be debugged and the display of the debugging plug-in overlay interface module; then returns to step 2 and executes in a loop until the page to be debugged completes debugging and development.

[0040] In step 2, before initiating access, this embodiment also includes a step in which the developer modifies and adjusts the configuration information and proxy information by configuring the client interface module according to current needs, so that the configuration service and proxy service can be set as needed.

[0041] In step 3, the proxy service not only intercepts the request message, but also records the request message, so that the developer can adjust the content of the request message by configuring the client interface module, and send it after the adjustment is completed, thereby simplifying the debugging process. When minor adjustments need to be made to the message, it is no longer necessary to resend the message by operating the page to be debugged, but the message can be adjusted directly.

[0042] At the same time, in step 3, when returning the simulated message, the embodiment also includes a step in which the developer adjusts the content of the simulated message by configuring the client interface module, and returns to the page to be debugged after the adjustment is completed. This can also effectively simplify the debugging process, and there is no need to wait for the simulated message to be regenerated after sending the message from the page to be debugged.

Claims

1. A development-assisted system based on full front-end isolation encapsulation, characterized in that: Includes application server module, configuration client interface module, debugging plug-in overlay interface module and middleware core library module; The application server module is used to provide a service interface to receive the request message of the front-end page to be debugged, and to intercept and record the request message by calling the corresponding functional components in the middleware core library module, and to generate a returned simulation message according to the request message, thereby realizing the proxy service and configuration service; The configuration client interface module is used to provide a graphical parameter configuration adjustment function to adjust the specific settings of the application server module and the middleware core library module, and to change the received request message and the simulation message content; The debugging plug-in overlay interface module is used to provide a floating display window that can be hidden or visible at any time, and is used to communicate with modules including the application server module and the middleware core library module, and display data information including the running status and error information of each module; The middleware core library module is used to provide functions including data processing and storage, so as to process request messages and generate simulation messages.

2. A development assistance system based on full front-end isolation encapsulation according to claim 1, characterized in that: It also includes a vite plug-in module, which is based on the vite framework to quickly start various modules including the application server module and the middleware core library module, and inject pre-set proxy information and configuration information into each module.

3. A development assistance system based on full front-end isolation encapsulation according to claim 1, characterized in that: The application server module is implemented based on a multi-layer architecture including a presentation layer, a business logic layer and a data access layer. The presentation layer is used to interact with the front-end page to be debugged to parse and encapsulate request messages and simulation messages; the business logic layer interacts with the middleware core library module to call functional components and perform data processing; The data access layer is connected to the database to perform data reading and writing operations.

4. A development assistance system based on full front-end isolation encapsulation according to claim 1, characterized in that: The configuration client interface module adjusts the configuration of the application server module through graphical interface elements including text boxes, drop-down menus and buttons, and starts and stops related services and adjusts parameters of the middleware core library module.

5. The development assistance system based on full front-end isolation encapsulation according to claim 1, characterized in that: The debugging plug-in overlay interface module displays data based on visual elements including charts and lists, obtains running status data from the application server module, and obtains running data of various services from the middleware core library module.

6. A development assistance system based on full front-end isolation encapsulation according to claim 1, characterized in that: The middleware core library module includes a plurality of functional modules with independent interfaces and implementation logics, and cooperates with the application server through interface calls.

7. A development assistance method based on full front-end isolation encapsulation, characterized in that: A development assistance system based on full front-end isolation encapsulation according to any one of claims 1 to 6 comprises the following steps: Step 1: Start the debugging service for the front-end page to be debugged based on the vite plug-in. At the same time, the vite plug-in injects the preset proxy information and configuration information at startup, thereby starting the proxy service and configuration service on the application server; Step 2: The developer initiates access to the page to be debugged on the front end, so that the page to be debugged sends a request message to the back end; Step 3: The proxy service intercepts the request message, and the application server calls the function module in the middleware core library module according to the request message to simulate the backend to process the request message and return the simulated message; Step 4: The page to be debugged receives the simulated message and gives corresponding feedback. At the same time, the debugging plug-in overlay interface module displays the running status data and the running data of various services in real time. The developer debugs and develops the page to be debugged according to the feedback of the page to be debugged and the display of the debugging plug-in overlay interface module; then returns to step 2 and executes in a loop until the page to be debugged completes debugging and development.

8. A development assistance method based on full front-end isolation encapsulation according to claim 7, characterized in that: In the step 2, before initiating access, it also includes a step in which the developer modifies and adjusts the configuration information and proxy information by configuring the client interface module according to current needs.

9. A development assistance method based on full front-end isolation encapsulation according to claim 7, characterized in that: In step 3, the proxy service not only intercepts the request message, but also records the request message, so that the developer can adjust the content of the request message by configuring the client interface module and send it after the adjustment is completed.

10. A development assistance method based on full front-end isolation encapsulation according to claim 7, characterized in that: In the step 3, when returning the simulation message, it also includes the step that the developer adjusts the content of the simulation message by configuring the client interface module, and returns to the page to be debugged after the adjustment is completed.

Images