Front-end project agency method and device, equipment and medium

Abstract

The embodiment of the invention provides a front-end project proxy method and device, equipment and a medium, relates to the technical field of Internet, is applied to a local proxy service on electronic equipment, and is connected with a client on the electronic equipment, and the method comprises the following steps: obtaining a relative address sent by the client; accessing a static resource file under the static directory by using the static directory and the relative address, and returning a resource page corresponding to the static resource file to the client; receiving a first request message sent by the client based on the resource page; and calling the proxy middleware, obtaining the interface data from the back-end service, and returning a first response message corresponding to the first request message to the client, so that the client displays a resource page including the interface data. By applying the technical scheme provided by the embodiment of the invention, the original project can be agented to the back-end server, and the separation of the front end and the back end is realized.

Description

Technical Field

[0001] This application relates to the field of Internet technologies, and in particular, to a method, apparatus, device, and medium for proxying a front-end project. Background Art

[0002] With the rapid development of Internet applications, the development mode of separating the front end from the back end has become increasingly popular in the development of applications on the World Wide Web (Web). In the prior art, front-end developers use scaffolding such as the Vue.js Command Line Interface (Vue CLI) based on the Vue.js framework to develop front-end projects in a local development environment, and proxy the front-end projects to a back-end server through a development server. That is, the client interacts with the back-end server through the development server, and the page of the developed front-end project is displayed on the client, realizing the separation of the front end and the back end.

[0003] In this front-end project proxy method, the front-end projects proxied by the development server must be projects created and developed using scaffolding such as Vue CLI. For existing projects created and developed in other ways, they cannot be proxied by the development server, nor can the separation of the front end and the back end be achieved. Therefore, a method for proxying existing projects to a back-end server is needed to realize the separation of the front end and the back end. Summary of the Invention

[0004] The purpose of the embodiments of this application is to provide a method, apparatus, device, and medium for proxying a front-end project to proxy an existing project to a back-end server and realize the separation of the front end and the back end. The specific technical solutions are as follows:

[0005] In a first aspect, the embodiments of this application provide a method for proxying a front-end project, which is applied to a local proxy service on an electronic device, and the local proxy service is connected to a client on the electronic device. The method includes:

[0006] Obtain a relative address sent by the client, where the relative address is the address of a static resource file of a front-end project in a static directory;

[0007] Use the static directory and the relative address to access the static resource file in the static directory and return the resource page corresponding to the static resource file to the client;

[0008] Receive a first request message sent by the client based on the resource page, where the first request message indicates obtaining interface data to be displayed on the resource page;

[0009] Call the proxy middleware to obtain the interface data from the backend service and return a first response message corresponding to the first request message to the client, so that the client displays a resource page including the interface data, and the first response message includes the interface data.

[0010] In some embodiments, the step of calling the proxy middleware to obtain the interface data from the backend service includes:

[0011] Call the proxy middleware to send a second request message to the backend service, and the second request message includes an access token;

[0012] Receive a second response message corresponding to the second request message returned by the backend service after verifying that the access token is passed, and the second response message includes the interface data.

[0013] In some embodiments, the second request message further includes a data type, and the second response message includes the interface data corresponding to the data type.

[0014] In some embodiments, the local proxy service is connected to the client through a local service address of the local proxy service, and the local service address is obtained by concatenating a preset type of Internet Protocol (IP) address included in a local network interface list and a port number listened by the local proxy service.

[0015] In a second aspect, an embodiment of the present application provides a front-end project proxy method, which is applied to a client on an electronic device, and the client is connected to a local proxy service on the electronic device. The method includes:

[0016] Send a relative address to the local proxy service, so that the local proxy service uses the static directory and the relative address to access a static resource file of a front-end project under the static directory and return a resource page corresponding to the static resource file to the client, and the relative address is the address of the static resource file under the static directory;

[0017] Based on the resource page, send a first request message to the local proxy service, so that the local proxy service calls the proxy middleware to obtain the interface data to be displayed on the resource page from the backend service and return a first response message corresponding to the first request message to the client. The first request message instructs to obtain the interface data, and the first response message includes the interface data;

[0018] Display a resource page including the interface data.

[0019] In some embodiments, the method further includes:

[0020] Obtain the local service address of the local proxy service, where the local service address is obtained by concatenating a preset type of IP address included in the local network interface list and the port number listened by the local proxy service;

[0021] Based on the local service address, establish a connection with the local proxy service.

[0022] In a third aspect, an embodiment of the present application provides a front-end project proxy method, which is applied to an execution environment service on an electronic device. The method includes:

[0023] Create a local proxy service and a proxy middleware corresponding to the front-end project, so that the local proxy service executes any method described in the first aspect above.

[0024] In some embodiments, the method further includes:

[0025] According to the address information of the back-end service in the configuration file of the front-end project, send a third request message to the back-end service, where the third request message includes the user name and password of the back-end service;

[0026] Receive a third response message corresponding to the third request message returned by the back-end service after authenticating the user name and password, where the third response message includes an access token of the back-end service;

[0027] Add the access token to the proxy middleware.

[0028] In some embodiments, the method further includes:

[0029] Obtain a local network interface list, where the local network interface list includes IP addresses of a preset type;

[0030] Concatenate the IP address and the port number listened by the local proxy service to obtain a local service address, so that a client on the electronic device establishes a connection with the local proxy service based on the local service address.

[0031] In a fourth aspect, an embodiment of the present application provides a front-end project proxy device, which is applied to a local proxy service on an electronic device. The local proxy service is connected to a client on the electronic device. The device includes:

[0032] An obtaining module, configured to obtain a relative address sent by the client, where the relative address is the address of a static resource file of the front-end project in a static directory;

[0033] An access module, configured to access a static resource file under the static directory by using the static directory and the relative address, and return a resource page corresponding to the static resource file to the client;

[0034] A receiving module, configured to receive a first request message sent by the client based on the resource page, where the first request message indicates to obtain interface data to be displayed on the resource page;

[0035] An invocation module, configured to invoke a proxy middleware to obtain the interface data from a backend service, and return a first response message corresponding to the first request message to the client, so that the client displays a resource page including the interface data, where the first response message includes the interface data.

[0036] In some embodiments, the invocation module is specifically configured to: invoke a proxy middleware, send a second request message to the backend service, where the second request message includes an access token; receive a second response message corresponding to the second request message returned by the backend service after verifying that the access token is passed, where the second response message includes the interface data.

[0037] In some embodiments, the second request message further includes a data type, and the second response message includes the interface data corresponding to the data type.

[0038] In some embodiments, the local proxy service is connected to the client through a local service address of the local proxy service, where the local service address is obtained by splicing a preset type of IP address included in a local network interface list and a port number listened by the local proxy service.

[0039] In a fifth aspect, an embodiment of the present application provides a front-end project proxy device, which is applied to a client on an electronic device, where the client is connected to a local proxy service on the electronic device, and the device includes:

[0040] A first sending module, configured to send a relative address to the local proxy service, so that the local proxy service accesses a static resource file of a front-end project under the static directory by using the static directory and the relative address, and returns a resource page corresponding to the static resource file to the client, where the relative address is an address of the static resource file under the static directory;

[0041] A second sending module, configured to send a first request message to the local proxy service based on the resource page, so that the local proxy service invokes a proxy middleware to obtain interface data to be displayed on the resource page from a backend service, and return a first response message corresponding to the first request message to the client, where the first request message indicates obtaining the interface data, and the first response message includes the interface data;

[0042] A display module, configured to display a resource page including the interface data.

[0043] In some embodiments, the apparatus further includes: a establishing module, configured to obtain a local service address of the local proxy service, where the local service address is obtained by concatenating a preset type of IP address included in a local network interface list and a port number listened by the local proxy service; and establish a connection with the local proxy service based on the local service address.

[0044] In a sixth aspect, an embodiment of the present application provides a front-end project proxy apparatus, which is applied to an execution environment service on an electronic device. The apparatus includes:

[0045] A creating module, configured to create a local proxy service and a proxy middleware corresponding to a front-end project, so that the local proxy service executes the method according to any one of the first aspects.

[0046] In some embodiments, the apparatus further includes: a verifying module, configured to send a third request message to the backend service according to address information of the backend service in a configuration file of the front-end project, where the third request message includes a username and a password of the backend service; receive a third response message corresponding to the third request message returned by the backend service after authenticating the username and password, where the third response message includes an access token of the backend service; and add the access token to the proxy middleware.

[0047] In a seventh aspect, an embodiment of the present application provides an electronic device, including a processor, a communication interface, a memory, and a communication bus. The processor, the communication interface, and the memory communicate with each other through the communication bus;

[0048] The memory is configured to store a computer program;

[0049] The processor is configured to implement the method according to any one of the first aspect, the second aspect, or the third aspect when executing the program stored in the memory.

[0050] In an eighth aspect, an embodiment of the present application provides a computer-readable storage medium, in which a computer program is stored, and when the computer program is executed by a processor, the method described in any one of the above first, second, or third aspects is implemented.

[0051] In a ninth aspect, an embodiment of the present application provides a computer program product containing instructions, which when running on a computer, causes the computer to execute the method described in any one of the above first, second, or third aspects.

[0052] Advantageous effects of the embodiments of the present application:

[0053] In the technical solution provided by the embodiment of the present application, the local proxy service accesses the static resource files of the front-end project in the static directory according to the relative address sent by the client, and returns the resource page corresponding to the static resource files to the client. The local proxy service then receives the request message sent by the client, calls the proxy middleware, and obtains the interface data to be displayed on the resource page from the back-end service. The client receives the interface data returned by the local proxy service and displays the resource page of the front-end project including the interface data, realizing that the local proxy service proxies the front-end project to the back-end service. By applying the technical solution provided by the embodiment of the present application, the interaction with the back-end service can be realized by using the local proxy service. In this way, the original project can also be proxied to the back-end service, realizing the separation of the front end and the back end.

[0054] Of course, when implementing any product or method of the present application, it is not necessarily required to achieve all the above-mentioned advantages simultaneously. Description of the Drawings

[0055] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the following will briefly introduce the drawings required for use in the description of the embodiments or the prior art. Obviously, the following-described drawings are only some embodiments of the present application, and those of ordinary skill in the art can also obtain other embodiments based on these drawings.

[0056] Figure 1 It is the first flowchart of the front-end project proxy method provided by the embodiment of the present application;

[0057] Figure 2 It is the second flowchart of the front-end project proxy method provided by the embodiment of the present application;

[0058] Figure 3 It is a flowchart of obtaining an access token provided by the embodiment of the present application;

[0059] Figure 4 It is a schematic diagram of the front-end project in the local host provided by the embodiment of the present application;

[0060] Figure 5 A schematic diagram of the command line interface provided by an embodiment of the present application;

[0061] Figure 6 A schematic diagram of the front-end project proxy provided by an embodiment of the present application;

[0062] Figure 7 A schematic diagram of the project page provided by an embodiment of the present application;

[0063] Figure 8 The first structural schematic diagram of the front-end project proxy device provided by an embodiment of the present application;

[0064] Figure 9 The second structural schematic diagram of the front-end project proxy device provided by an embodiment of the present application;

[0065] Figure 10 The third structural schematic diagram of the front-end project proxy device provided by an embodiment of the present application;

[0066] Figure 11 A structural schematic diagram of an electronic device provided by an embodiment of the present application. Detailed implementation manners

[0067] Next, the technical solutions in the embodiments of the present application will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art based on the present application belong to the scope of protection of the present application.

[0068] With the rapid development of Internet applications, the development mode of separating the front end and the back end has become increasingly popular in the development of global wide area network (World Wide Web, Web) applications. In the prior art, front-end developers use scaffolding such as the Vue.js Command Line Interface (Vue CLI) based on the Vue.js framework to develop front-end projects in a local development environment, and proxy the front-end projects to the back-end server through a development server. That is, the client interacts with the back-end server through the development server, and the page of the developed front-end project is displayed on the client to achieve the separation of the front end and the back end. The basic principle of starting a front-end project using scaffolding such as Vue CLI is briefly described below.

[0069] 1) Project initialization.

[0070] First, front-end developers can use Vue CLI to create a basic Vue project structure, including the files and directory structure required for the front-end project. For example, the source code (src) directory is used to store the source code of the front-end project, the public directory is used to store static resource files, and the configuration file (such as package.json) is used to store the configuration information and dependent packages of the front-end project, etc.

[0071] 2) Install dependencies.

[0072] Vue CLI will automatically install the corresponding dependent packages for the front-end project during initialization. These dependent packages include: the Vue.js framework itself, build tools for building the front-end project, packaging tools, development servers, etc.

[0073] 3) Configure the build tool.

[0074] Vue CLI uses the Webpack (a global wide area network packager) as the default build tool. Webpack can package, compile, and compress the code of the front-end project, as well as process various static resource files. Vue CLI will generate a Webpack configuration file during initialization to guide Webpack on how to process the files in the front-end project.

[0075] 4) Start the project.

[0076] When front-end developers execute commands (such as npm run serve or yarn serve) to run the front-end project created by Vue CLI, Vue CLI will start a local development server.

[0077] 5) Real-time compilation and packaging.

[0078] When the development server is running, it will monitor changes to the front-end project files (such as static resource files), detect changes to the front-end project files in real time, and perform real-time compilation and packaging of the code when the files change to achieve hot reloading of the code. In this way, front-end developers can see the effects of the modifications in real time during the development process. That is, projects created and developed using scaffolding such as Vue CLI are written in a compiled language. During the operation of the front-end project, the development server needs to detect in real time and perform compilation.

[0079] In addition, in the front-end project proxy method, the front-end project proxied by the development server must be a project created and developed using a scaffolding such as Vue CLI. For existing projects created and developed in other ways, they cannot be proxied by the development server, and the separation of the front-end and back-end cannot be achieved, and a relatively large number of dependent packages are used. Therefore, a method for proxying an existing project to a back-end server is needed to achieve the separation of the front-end and back-end.

[0080] To solve the above problems, an embodiment of the present application provides a front-end project proxy method, which is applied to a local proxy service on an electronic device, and the local proxy service is connected to a client on the electronic device. The electronic device can be a computer, a server, etc., and no limitation is imposed thereon. The local proxy service is pre-created by an execution environment service on the electronic device and can be a local server, etc. No limitation is imposed on the form of the local proxy service here. The client is an application or software that interacts with the local proxy service on the electronic device, and the client can be a browser, etc. No limitation is imposed on the form of the client here. The execution environment service is a development environment on the electronic device, such as a JavaScript (js) runtime environment (node.js), etc. No limitation is imposed on the form of the execution environment service here. The process of the execution environment service creating the local proxy service and the process of the client establishing a connection with the local proxy service will be described in detail below and will not be elaborated here for the time being.

[0081] See Figure 1 , Figure 1 FIG. is a first process schematic diagram of the front-end project proxy method provided by an embodiment of the present application, which is applied to a local proxy service on an electronic device, and the local proxy service is connected to a client on the electronic device. The front-end project proxy includes the following steps.

[0082] Step S11, obtain the relative address sent by the client. The relative address is the address of the static resource file of the front-end project in the static directory.

[0083] Step S12, use the static directory and the relative address to access the static resource file in the static directory and return the resource page corresponding to the static resource file to the client.

[0084] Step S13, receive the first request message sent by the client based on the resource page. The first request message indicates to obtain the interface data to be displayed on the resource page.

[0085] Step S14, call the proxy middleware, obtain the interface data from the back-end service, and return the first response message corresponding to the first request message to the client, so that the client can display the resource page including the interface data. The first response message includes the interface data.

[0086] In the technical solution provided by the embodiment of the present application, the local proxy service accesses the static resource files of the front-end project in the static directory according to the relative address sent by the client, and returns the resource page corresponding to the static resource file to the client. The local proxy service then receives the request message sent by the client, calls the proxy middleware, and obtains the interface data to be displayed on the resource page from the back-end service. The client receives the interface data returned by the local proxy service and displays the resource page of the front-end project including the interface data, realizing that the local proxy service proxies the front-end project to the back-end service. By applying the technical solution provided by the embodiment of the present application, the interaction with the back-end service can be realized by using the local proxy service. In this way, the original project can also be proxied to the back-end service, realizing the separation of the front end and the back end.

[0087] In the above step S11, the front-end project is any project that is created and developed locally on the electronic device and needs to be proxied to the back-end service. The front-end project runs on the client and interacts with the user through the page of the front-end project displayed on the client.

[0088] The front-end project includes static resource files. The static resource files can be files written in an interpreted language. For example, HyperText Markup Language (HTML), Cascading Style Sheets (CSS) files, JavaScript files, or Image files, etc. The static resource files are not limited here. The front-end project can include one or more static resource files. The number of static resource files included in the front-end project is not limited here.

[0089] In the embodiment of the present application, the front-end project may also include other files such as Yaml (YAML Ain't a Markup Language) source files (i.e.,.yml files), Structured Query Language (SQL) source files (i.e.,.sql files), text files (i.e.,.txt files), etc., which are not limited here.

[0090] The static directory is the directory of the folder where all the static resource files in the front-end project are located, and the relative address is the address of a static resource file under the static directory. For example, for a front-end project, the name of the folder where all the static resource files are located is "static". For a static resource file (such as appListView.html) in this front-end project, its address in the front-end project is static / view / apm / listview / appListView.html (the root directory of the front-end project is omitted). Then the static directory of this static resource file is static, and the relative address is view / apm / listview / appListView.html.

[0091] In the embodiments of the present application, the client can obtain the relative address of the static resource file. For example, when the client is a browser, the client can receive the address entered by the user in the address bar of the browser and parse the relative address from the received address. The manner in which the client obtains the relative address is not limited herein.

[0092] After obtaining the relative address, the client can send the obtained relative address to the local proxy service. The local proxy service receives the relative address sent by the client and executes step S12.

[0093] In the above step S12, the static directory has been pre-set in the local proxy service. After obtaining the relative address, the local proxy service can splice the obtained relative address with the pre-set static directory to obtain the complete address of the static resource file, and search for the static resource file at the complete address to obtain the resource page corresponding to the static resource file. The process of setting the static directory will be described in detail below and will not be elaborated herein.

[0094] The local proxy service can send the obtained resource page to the client. The client receives the resource page sent by the local proxy service and executes step S13.

[0095] In the above step S13, the interface data is the dynamic application data generated by the back-end service. The back-end service can be a computer or a server that executes the back-end project, and the back-end project is used to generate dynamic application data. The form of the back-end service is not limited herein.

[0096] The client parses the received resource page, obtains the interface data to be displayed in the resource page, and generates a request message indicating the acquisition of the interface data. This request message is the first request message.

[0097] The client sends the first request message to the local proxy service. The local proxy service receives the first request message sent by the client, parses the first request message, determines that the interface data needs to be obtained, and executes step S14.

[0098] In the above step S14, the proxy middleware is middleware under the local proxy service pre-created by the execution environment service on the electronic device. The proxy middleware is used to interact with the backend service. For example, the proxy middleware can send requests other than accessing static resource files to the backend service and receive responses corresponding to the requests returned by the backend service. The process of the execution environment service creating the proxy middleware will be described in detail below and will not be elaborated here for the time being.

[0099] The local proxy service can call the proxy middleware to send a second request message including request information for obtaining interface data to the backend service. The backend service obtains the interface data according to the second request message and returns a second response message including the interface data to the local proxy service. The local proxy service receives the second response message sent by the backend service and parses the second response message to obtain the interface data.

[0100] The local proxy service can generate a first response message including the interface data and send it to the client. The client receives the first response message sent by the local proxy service, parses the first response message, obtains the interface data, and displays a resource page including the interface data.

[0101] In the embodiments of the present application, the local proxy service can execute the above steps S11 to S14 multiple times to display resource pages of multiple static resource files. Or, the user can click a jump button on the resource page displayed on the client. In response to the user's click operation, the client requests to access the static resource file after the jump from the local proxy service. The local proxy service can return the resource page of the static resource file after the jump to the client. After that, the local proxy service can execute steps S13 to S14 to obtain the interface data. In this way, a resource page after the jump including the interface data can be displayed on the client.

[0102] In the technical solution provided by the embodiments of the present application, when the front-end project is an original project, since the front-end project is not written in a compiled language, compared with a front-end project created and developed using a scaffolding such as Vue CLI, it is not necessary to detect static resource files in real time, nor is it necessary to compile the static resource files.

[0103] In some embodiments, an access token can be carried in the second request message, and the backend service can use the access token for verification, which improves security. The local proxy service can call the proxy middleware to obtain interface data from the backend service through the following steps: call the proxy middleware and send a second request message to the backend service, the second request message includes an access token; receive the second response message corresponding to the second request message returned by the backend service after verifying the access token, and the second response message includes the interface data.

[0104] In the embodiments of the present application, the access token is the authentication information obtained by the execution environment service and used by the local proxy service to interact with the backend service. The access token indicates that the local proxy service has passed the verification at the backend service. After obtaining the access token, the execution environment service carries the access token in the proxy middleware. The process of the execution environment service obtaining the access token will be described in detail below and will not be elaborated here for the time being.

[0105] The local proxy service calls the proxy middleware to generate a second request message with the request header carrying the access token and including the request information for obtaining the interface data, and sends it to the backend service.

[0106] After receiving the second request message sent by the local proxy service, the backend service can parse the second request message, extract the access token carried in the second request message, and verify the access token.

[0107] If the backend service passes the verification of the access token, the backend service can extract the request information in the second request message, obtain the interface data, generate a second response message including the interface data, and send it to the local proxy service.

[0108] If the backend service fails to pass the verification of the access token, the backend service can generate a message indicating the verification failure and return the message to the local proxy service, or the backend service may also not return any message, and this is not limited.

[0109] In the case where the local proxy service fails to obtain the interface data, the above steps can be re-executed, the proxy middleware can be called again, and the backend service can be requested to obtain the interface data. The execution environment service can also re-obtain the access token, and this is not limited.

[0110] In some embodiments, the second request message may further include a data type, and the second response message may further include the interface data corresponding to the data type.

[0111] In the embodiments of the present application, in order to obtain the corresponding type of data to be displayed on the resource page, the execution environment service (or the local proxy service) may further configure the data type information of the interface data. For example, the data type information may include the language (Language) used by the data, the style (such as the picture background style), etc., and this is not limited.

[0112] When the local proxy service calls the proxy middleware to generate the second request message, it can intercept the second request message sent to the backend service through the configuration item function (such as the onProxyReq function) in the proxy middleware, and insert the configured data type information into the request header of the second request message, generating a second request message whose request header carries the access token and data type information and includes the request information for obtaining interface data, and then send it to the backend service.

[0113] After the backend service successfully validates the access token in the second request message, it can extract the request information and data type information included in the second request message, obtain the interface data corresponding to the data type, generate a second response message including the corresponding interface data, and send it to the local proxy service. For example, if the data type information is that the picture background style is black, the backend service can obtain a picture with a black background style as the interface data and generate a second response message including this picture.

[0114] The local proxy service receives the second response message sent by the backend service and parses the second response message to obtain the interface data corresponding to the data type.

[0115] In the technical solution provided by the embodiments of the present application, through the second request message carrying the data type information, the electronic device can obtain the interface data of the corresponding type to obtain the corresponding interface data as needed.

[0116] In some embodiments, the local proxy service is connected to the client through the local service address of the local proxy service. The local service address is obtained by concatenating a preset type of IP address included in the local network interface list and the port number listened by the local proxy service.

[0117] The local service address is the address pre-configured for the local proxy service by the execution environment service. The execution environment service can concatenate the preset type of IP address in the local network interface list with the port number listened by the local proxy service to obtain the local service address, and configure the local proxy service to listen on the corresponding port number. The process of the execution environment service concatenating the local service address will be described in detail below and will not be elaborated here for the time being.

[0118] In the embodiments of the present application, the client can obtain the local service address of the local proxy service. For example, when the client is a browser, the client can receive the address entered by the user in the address bar of the browser. This address is composed of the local service address and the relative address, and the client can parse the local service address and the relative address from the received address. The method for the client to obtain the local service address is not limited herein.

[0119] The client can initiate a connection request to the local proxy service according to the local service address and establish a connection with the local proxy service. For example, the client can perform a three-way handshake through the Transmission Control Protocol (TCP) to establish a reliable two-way communication channel. After establishing the connection, the client and the local proxy service can interact through Hypertext Transfer Protocol (HTTP) requests and HTTP responses, which is not limited herein.

[0120] Corresponding to the above front-end project proxy method for the local proxy service applied to an electronic device, an embodiment of the present application further provides a front-end project proxy method. Refer to Figure 2 , Figure 2 which is the second process schematic diagram of the front-end project proxy method provided by the embodiment of the present application and is applied to the client on the electronic device. The client is connected to the local proxy service on the electronic device. The front-end project proxy includes the following steps.

[0121] Step S21: Send a relative address to the local proxy service, so that the local proxy service can use the static directory and the relative address to access the static resource file of the front-end project under the static directory and return the resource page corresponding to the static resource file to the client. The relative address is the address of the static resource file under the static directory.

[0122] Step S22: Based on the resource page, send a first request message to the local proxy service, so that the local proxy service can call the proxy middleware to obtain the interface data to be displayed on the resource page from the back-end service and return the first response message corresponding to the first request message to the client. The first request message indicates obtaining the interface data, and the first response message includes the interface data.

[0123] Step S23: Display the resource page including the interface data.

[0124] In the embodiment of the present application, for the process of the client, the local proxy service, and the front-end project proxy between the client and the local proxy service, specific reference can be made to the relevant description in the part of the front-end project proxy method for the local proxy service applied to the electronic device above, which will not be elaborated herein.

[0125] In the technical solution provided by the embodiment of the present application, the local proxy service accesses the static resource files of the front-end project in the static directory according to the relative address sent by the client, and returns the resource page corresponding to the static resource file to the client. The local proxy service then receives the request message sent by the client, calls the proxy middleware, and obtains the interface data to be displayed on the resource page from the back-end service. The client receives the interface data returned by the local proxy service and displays the resource page of the front-end project including the interface data, realizing that the local proxy service proxies the front-end project to the back-end service. By applying the technical solution provided by the embodiment of the present application, the interaction with the back-end service can be realized by using the local proxy service. In this way, the original project can also be proxied to the back-end service, realizing the separation of the front end and the back end.

[0126] In some embodiments, before the client executes the above step S21, the connection with the local proxy service can be established through the following steps: obtaining the local service address of the local proxy service, which is obtained by splicing the IP address of the preset type included in the local network interface list and the port number listened by the local proxy service; establishing a connection with the local proxy service based on the local service address. For specific reference, please see the relevant description in the part of the front-end project proxy method of the local proxy service applied to the electronic device above, and details will not be repeated here.

[0127] Corresponding to the above front-end project proxy method of the local proxy service applied to the electronic device, the embodiment of the present application also provides a front-end project proxy method, which is applied to the execution environment service on the electronic device. The front-end project proxy includes: creating a local proxy service and a proxy middleware corresponding to the front-end project, so that the local proxy service executes the above front-end project proxy method of the local proxy service applied to the electronic device. For specific reference to the front-end project, the local proxy service and the proxy middleware, please see the relevant description in the part of the front-end project proxy method of the local proxy service applied to the electronic device above, and details will not be repeated here.

[0128] In the embodiment of the present application, the execution environment service can use the createProxyMiddleware function to create a server, and this server is the local proxy service. The execution environment service can also use the http-proxy-middleware method to create the proxy middleware, and the creation method of the proxy middleware is not limited here.

[0129] In the embodiment of the present application, the execution environment service can also execute the configuration file of the front-end project, and in the process of executing the configuration file, create the local proxy service and the proxy middleware in the above manner.

[0130] During the execution of the execution environment service for the execution configuration file, before creating the local proxy service and the proxy middleware, it can first query whether the required dependency packages for the execution configuration file are installed. In the embodiments of the present application, the required dependency packages for the execution configuration file may include the expression (experss), http-proxy-middleware, and js dependency packages (i.e., jsdom and jsencrypt), and the required dependency packages are not limited herein. Compared with the front-end projects created and developed using scaffolding such as Vue CLI, which also require installing the dependency packages required by the framework itself, the dependency packages required for building the front-end project, the dependency packages required for packaging and compilation, etc., the dependency packages required in the embodiments of the present application are fewer, and a lightweight front-end project proxy can be implemented.

[0131] The execution environment service can execute a query command (such as npm ls --depth=0 --json) through the exec method to obtain the current dependency package list of the package manager (npm) of the front-end project, obtain the currently installed dependency packages, and determine whether the required dependency packages are included in the installed dependency packages.

[0132] If the required dependency packages are included in the installed dependency packages and the execution environment service determines that the required dependency packages are installed, it can continue to execute the configuration file and use the startNodeProject method to start the front-end project proxy.

[0133] If the required dependency packages are not included in the installed dependency packages and the execution environment service determines that the required dependency packages are not installed, it can install the required dependency packages. In the embodiments of the present application, the required dependency packages are defined in the installDependencies method, and the execution environment service can call the installDependencies method and automatically install the dependency packages using an install command (such as npm install). After installing the required dependency packages, the execution environment service can execute a callback function and use the startNodeProject method to start the front-end project proxy, realizing the automatic proxy of the front-end project.

[0134] In the embodiments of the present application, after the execution environment service determines that the required dependency packages are installed, it can also display prompt messages such as indicating that the dependency packages are installed, the dependency packages have been checked, and the front-end project is starting to the user through the command-line interface of the execution environment service.

[0135] In some embodiments, after installing the dependency packages, the execution environment service can continue to execute the configuration file to obtain an access token. See Figure 3 , Figure 3 which is a schematic flowchart of a process for obtaining an access token provided by the embodiments of the present application and may include the following steps.

[0136] Step S31: Send a third request message to the backend service according to the address information of the backend service in the configuration file of the front-end project. The third request message includes the username and password of the backend service.

[0137] Step S32: Receive the third response message corresponding to the third request message returned by the backend service after the authentication of the username and password is passed. The third response message includes the access token of the backend service.

[0138] Step S33: Add the access token to the proxy middleware.

[0139] In the technical solution provided by the embodiment of the present application, the execution environment service first obtains the access token. When the subsequent local proxy service obtains the interface data from the backend service, the backend service can use the access token for verification, which improves the security.

[0140] In the above step S31, the address information of the backend service may include the IP address and port number of the backend service. For the convenience of description, the IP address of the backend service will be abbreviated as the first IP address, and the port number of the backend service will be abbreviated as the first port number hereinafter. In the embodiment of the present application, the address information of the backend service can be configured in the configuration file of the front-end project. When the execution environment service executes the configuration file, it can parse the configuration file and extract the address information of the backend service from the configuration file.

[0141] The third request message is a request message sent by the execution environment service to the backend service for verification. The username and password of the backend service are the verification information required to access the backend service. In the embodiment of the present application, the username and password of the backend service can also be configured in the configuration file of the front-end project. The execution environment service can parse the configuration file and extract the username and password of the backend service from the configuration file. Here, the method for the execution environment service to obtain the address information, username and password of the backend service is not limited.

[0142] After obtaining the username and password of the backend service, the execution environment service can generate a request message including the username and password of the backend service, and this request message is the third request message. In the embodiment of the present application, the execution environment service can also encrypt the password to generate a third request message including the username of the backend service and the encrypted password. For example, the execution environment service can use a js library for encryption and decryption based on the public key cryptosystem (Rivest Shamir Adlemanrsa, RSA) (i.e., the jsencrypt library) to encrypt the password.

[0143] After generating the third request message, the execution environment service may send the third request message to the backend service according to the address information of the backend service. For example, the execution environment service may use the http module to send the third request message (i.e., post) to the backend service.

[0144] After receiving the third request message sent by the execution environment service, the backend service may parse the third request message, extract the username and password carried in the third request message, and authenticate the username and password.

[0145] If the backend service authenticates the username and password successfully, the backend service may generate an access token, generate a response message corresponding to the third request message including the access token, and send the response message to the electronic device. This response message is the third response message.

[0146] If the backend service fails to authenticate the username and password, the backend service may generate a message indicating authentication failure and return the message to the execution environment service, or, the backend service may also not return any message, which is not limited herein.

[0147] In step S32, the execution environment service may receive the third response message sent by the backend service and parse the third response message to obtain the access token carried in the third response message.

[0148] In the case where the execution environment service fails to obtain the access token, it may re-execute step S31 to generate the third request message, and send the third request message to the backend service again according to the address information of the backend service to obtain the access token, until the number of acquisition times reaches the preset number of times. Then, the execution environment service confirms that the access token acquisition fails, which is not limited herein.

[0149] The execution environment service may obtain the access token before creating the local proxy service and the proxy middleware, and after creating the local proxy service and the proxy middleware, execute step S33 to carry the access token in the proxy middleware, that is, carry the access token in the request header of the request message to obtain the request header carrying the access token. The execution environment service may also obtain the access token after creating the local proxy service and the proxy middleware, and execute step S33 to carry the access token in the proxy middleware, which is not limited herein.

[0150] In the embodiments of the present application, the execution environment service may also display prompt information such as "obtaining access token" and the obtained access token to the user through the command line interface of the execution environment service.

[0151] In the technical solution provided by the embodiment of the present application, the execution environment service authenticates by sending the username and password to the backend service, and obtains the access token after successful authentication. In this way, during the subsequent proxy process of the front-end project, the local proxy service created by the execution environment service does not need to authenticate again based on the username and password, improving the interaction efficiency between the local proxy service and the backend service, and thus reducing the complexity of the front-end project proxy.

[0152] After creating the local proxy service and the proxy middleware, the execution environment service can continue to execute the configuration file and use the local proxy service to set the static directory of the front-end project. For example, the electronic device can use a Web development framework such as the Express framework and use the built-in static middleware (such as express.static) of the Express framework to set the static directory.

[0153] In some embodiments, the execution environment service can obtain the local service address through the following steps: obtain the local network interface list, where the local network interface list includes IP addresses of a preset type; concatenate the IP address and the port number listened by the local proxy service to obtain the local service address, so that the client on the electronic device can establish a connection with the local proxy service based on the local service address.

[0154] In the embodiment of the present application, the preset type can be the Internet Protocol Version 4 (IPv4) type, the Internet Protocol Version 6 (IPv6) type, etc., and is not limited thereto. The execution environment service can obtain the local network interface list from the device configuration information of the electronic device and find the IP address of the preset type from the local network interface list. For the convenience of description, the IP address of the local proxy service will be abbreviated as the second IP address hereinafter. After finding the IP address of the preset type, the execution environment service can also exclude the loopback address, that is, exclude the same IP address, and obtain the second IP address after exclusion. The number of the second IP addresses is not limited herein.

[0155] For example, the execution environment service can obtain the local network interface list of the current electronic device through the os module of Node.js; when the preset type is the IPv4 type, the execution environment service can find the IPv4 type IP address from the local network interface list and exclude the loopback address.

[0156] In the embodiments of the present application, the execution environment service can select a port number from the local free port numbers as the port number listened by the local proxy service. For the convenience of description, the port number will be abbreviated as the second port number hereinafter. The execution environment service can also extract the local port number from the configuration file of the front-end project as the second port number, or receive the port number input by the front-end developer as the second port number, and there is no limitation in this regard.

[0157] After obtaining the second IP address and the second port number, the execution environment service can splice the second IP address and the second port number to obtain the local service address. For example, when the second IP address is 1.1.1.1 and the second port number is 3001, the execution environment service can obtain the local service address as: 1.1.1.1:3001.

[0158] When there are multiple second IP addresses, the execution environment service can splice to obtain multiple local service addresses. For example, when the second IP addresses are 1.1.1.1 and 1.1.1.2, and the second port number is 3001, the execution environment service can obtain the local service addresses as: 1.1.1.1:3001 and 1.1.1.2:3001.

[0159] In the embodiments of the present application, after obtaining the local service address, the local proxy service listens on the configured second port number. Then, the process of establishing a connection between the client and the local proxy service based on the local service address can be specifically referred to the relevant description in the above-mentioned front-end project proxy method part of the local proxy service applied to the electronic device, and will not be elaborated here.

[0160] In the embodiments of the present application, the execution environment service can also display the obtained local service address to the user through the command line interface of the execution environment service.

[0161] In the technical solution provided by the embodiments of the present application, the execution environment service obtains the local IP address and port number for splicing to obtain an address array for accessing the service, and then obtains the local service address, so as to allocate the IP address and port number for the local proxy service. The client and the local proxy service can establish a connection based on the local service address to implement the proxy of the front-end project.

[0162] In the embodiments of the present application, the execution environment service only needs to execute the steps of installing the dependency package, obtaining the access token, creating the local proxy service and the proxy middleware, setting the static directory, and obtaining the local service address once, and the above steps do not need to be executed multiple times.

[0163] The following combines Figures 4 to 7The front - end project proxy method provided by the embodiments of the present application is described in detail, taking an electronic device as the local host (localhost), the execution environment service as node.js on the local host, the client as the browser, the local proxy service as the proxy server, and the back - end service as the back - end server as an example.

[0164] As Figure 4 A schematic diagram of a front - end project file as shown. Under the root directory of the front - end project (such as D:>project>apm - xc, which can also be expressed as D: / project / apm - xc), there are folders (such as access, static, etc.), Yaml source files (such as application - dev.yml, application.yml, etc.), text documents (such as banner.txt, etc.), SQL source files (such as schema.sql, etc.), and JavaScript source files (such as fmsServer.js), etc. Among them, the static folder is the folder where the static resource files are located, and the static directory of this front - end project is project / apm - xc / static.

[0165] The configuration file of this front - end project is the fmsServer.js file, which can also be called the plugin for proxying the front - end project. The configuration file may include the protocol type required by the target environment (i.e., the environment where the back - end server is located) (such as type: 'http'), the address information of the target environment (i.e., the first IP address and the first port number) (such as target: "1.1.1.3:30000"), the user name and password of the target environment (i.e., the user name and password of the back - end service) (such as userName: "admin", userPassword: "Pwd@12345"), the port number of the proxy server (i.e., the second port number) (such as port: 3001), and the filter content (including data type information for inserting data type information into the request header) (such as filter: (proxyRes, req, res) => {}), etc.

[0166] The local host can receive the execution command (such as node fmsServer) input by the front - end developer in the command - line interface of node.js, and execute the pre - configured plugin for proxying the front - end project under the root directory of the front - end project, such as Figure 5 The command - line interface shown. Node.js on the local host executes the plugin for proxying the front - end project, that is, executes Figure 6 The steps S61 to S68 shown.

[0167] Step S61, node.js determines whether the dependency packages are installed.

[0168] In the embodiment of the present application, node.js can execute the npm ls --depth=0 --json command through the exec method to obtain the list of npm dependency packages required for the proxy front-end project, and determine whether the required dependency packages have been installed in the front-end project.

[0169] If not, that is, node.js determines that the required dependency packages have not been installed in the front-end project, the command line interface can display "No dependency packages are installed and will be automatically installed", as Figure 5 shown. Node.js can execute step S62, and after executing step S62, continue to execute step S63.

[0170] If so, that is, node.js determines that the required dependency packages have been installed in the front-end project, the command line interface can display "All dependency packages have been installed", as Figure 5 shown. Node.js can start the front-end project by using the startNodeProject method. At this time, the command line interface can display "Dependency package check completed, starting..." and execute step S63.

[0171] In step S62, node.js installs the dependency packages using the installation command.

[0172] In the embodiment of the present application, node.js can call the installDependencies method and use the npm install command to automatically install the dependency packages required for the proxy front-end project. At this time, the command line interface can display "Starting to install dependency packages", as Figure 5 shown. After installing the dependency packages, the command line interface can display "Dependency packages installed successfully". Node.js can execute the callback function and start the front-end project by using the startNodeProject method. At this time, the command line interface can display "Dependency package check completed, starting...".

[0173] In step S63, node.js requests the target environment token.

[0174] In the embodiments of the present application, the target environment is the environment where the backend server is located. Node.js can use the jsencrypt library to encrypt the password of the backend server. According to the configured IP address and port number of the target environment (i.e., the first IP address and the first port number in the configuration file of the front-end project), and then use the http module to send a POST request (i.e., the third request message) carrying the username and the encrypted password to the backend server, requesting any interface of the target environment. Node.js can receive the response message (i.e., the third response message) carrying the token (i.e., the access token) returned by the backend server to obtain the request header carrying the access token and forward it to be set locally. At this time, messages such as "Obtaining environment Token" and "Token obtained: Token =..." can be displayed on the command line interface of Node.js, as Figure 5 shown.

[0175] Step S64, Node.js creates a proxy server.

[0176] In the embodiments of the present application, Node.js can use the http module, the jsdom library, and the createProxyMiddleware function to create an HTTP proxy server, and can set the access token in the headers of the request message (i.e., the request header) and the response message.

[0177] Step S65, Node.js creates a proxy middleware.

[0178] In the embodiments of the present application, Node.js can use the http-proxy-middleware method to execute a creation command (such as app.use(" / ", proxy)) to create a proxy middleware proxy. Node.js can configure the headers of the request message carrying the access token in the proxy. Additionally, in the proxy, Node.js can create and execute filter content by configuring the onProxyReq function, and insert the additional logic to be executed into the request header before the subsequent proxy server sends a request to the backend server to obtain interface data of the corresponding type.

[0179] In this way, the proxy server can implement the proxy function and conveniently handle the requests for the front-end engineering pages (i.e., resource pages) and the backend interface data, that is, handle the interaction between the front-end project and the backend project.

[0180] Step S66, Node.js sets the directory of the static resource files.

[0181] In the embodiments of the present application, node.js can utilize the express.static middleware to execute a setting command (such as app.use(express.static(path.join(__dirname, "static")))) to set the directory of static resource files as the static folder (i.e., the static directory project / apm-xc / static) under the root directory of the front-end project, so as to access local resources (i.e., static resource files) in the local environment (i.e., the environment where the local browser is located).

[0182] Here, the order of node.js executing step S64, step S65, and step S66 is not limited.

[0183] Step S67, node.js obtains print information such as the local address and starts the proxy server.

[0184] In the embodiments of the present application, the local address is the local service address. Node.js obtains the network interface list of node.js (i.e., the local network interface list) through the os module, finds the address of the IPv4 type (taking the preset type as the IPv4 type as an example) (i.e., the second address), and concatenates the address of the IPv4 type with the local port number (i.e., the second port number in the configuration file of the front-end project) to obtain an address array for accessing the service (such as the local address 1.1.1.1:3001), and displays the address array for accessing the service to the front-end developers.

[0185] Node.js can start the proxy service (i.e., start the proxy server), and output the start information and prompt information. The proxy server listens to the local port number, such as Figure 5 shown on the command-line interface of node.js: "The project has started successfully. Access the service address: [Proxy server: 3001, 1.1.1.1, 1.1.1.2]", "

Note

[0186] Among them, the prompt information can be: "

Note

[0187] After step S67 is executed, the browser can continue to execute step S68 to access the project page using the local address.

[0188] In the embodiments of the present application, the browser can receive the content input by the user in the address bar, such as Figure 7The engineering page shown is parsed for the content in the address bar (such as 1.1.1.1:3001 / view / apm / listview / appListView.html). The browser can obtain the local address of the proxy server (such as 1.1.1.1:3001) and the relative address of the static resource file (such as / view / apm / listview / appListView.html), and establish a connection with the proxy server based on the local address. After establishing the connection, the relative address is sent to the proxy server.

[0189] The proxy server can splice the pre-configured static directory (such as project / apm-xc / static) with the relative address to obtain the actual path of the static resource file (project / apm-xc / static / view / apm / listview / appListView.html). The proxy server accesses the static resource file according to the actual path and returns the engineering page of the static resource file to the browser.

[0190] The browser parses the engineering page and requests the interface data to be displayed on the engineering page from the proxy server. The proxy server obtains the interface data from the backend server and returns it to the browser. The browser displays the engineering page including the interface data.

[0191] Such as Figure 7 The engineering page shown. The engineering page of this static resource file represents a server list, including server attributes such as availability, name, manufacturer, host IP, type, and management station. The server list indicates that 1 server is in an available state, the name is server_1.1.1.4, the manufacturer is xxx, the host IP is 1.1.1.4, the type is server, and the management station is local. Below the engineering page, there are also the result quantity, page number, the number of servers displayed per page, and the jump page number. Figure 7 The engineering page shown is only an example and does not serve as a limitation. The IP addresses and port numbers in the embodiments of this application are only examples and do not serve as a limitation.

[0192] In the technical solution provided by the embodiment of the present application, the front-end and back-end separation plug-in is adopted to effectively solve the problems of resource mounting and proxy in the local development process of front-end developers. Using this plug-in, the original project written in an interpreted language can no longer depend on the background startup; it solves the problem that resources or interfaces cannot be accessed due to the existence of tokens in the target environment; it reduces the cumbersome configuration and manual installation of dependencies; the configuration is simple, and front-end developers only need to run a configuration file to debug and synchronize front-end resources in real time, quickly get started, and have no learning cost. Applying the technical solution provided by the embodiment of the present application realizes the separation of the front end and the back end, speeds up the development cycle, reduces the error probability, improves the development efficiency, and has obvious application prospects and practical value.

[0193] Corresponding to the above front-end project proxy method, the embodiment of the present application also provides a front-end project proxy device, which is applied to the local proxy service on the electronic device, and the local proxy service is connected to the client on the electronic device, as Figure 8 shown, the device includes:

[0194] An obtaining module 81, configured to obtain a relative address sent by the client, where the relative address is the address of the static resource file of the front-end project in the static directory;

[0195] An access module 82, configured to use the static directory and the relative address to access the static resource file in the static directory, and return the resource page corresponding to the static resource file to the client;

[0196] A receiving module 83, configured to receive a first request message sent by the client based on the resource page, where the first request message indicates to obtain interface data to be displayed on the resource page;

[0197] A calling module 84, configured to call a proxy middleware, obtain interface data from the back-end service, and return a first response message corresponding to the first request message to the client, so that the client displays a resource page including the interface data, and the first response message includes the interface data.

[0198] In the technical solution provided by the embodiment of the present application, the local proxy service accesses the static resource file of the front-end project in the static directory according to the relative address sent by the client, and returns the resource page corresponding to the static resource file to the client. The local proxy service then receives the request message sent by the client, calls the proxy middleware, and obtains the interface data to be displayed on the resource page from the back-end service. The client receives the interface data returned by the local proxy service and displays the resource page of the front-end project including the interface data, realizing that the local proxy service proxies the front-end project to the back-end service. Applying the technical solution provided by the embodiment of the present application can use the local proxy service to realize the interaction with the back-end service. In this way, the original project can also be proxied to the back-end service, realizing the separation of the front end and the back end.

[0199] In some embodiments, the invocation module 84 is specifically configured to: invoke the proxy middleware to send a second request message to the backend service, where the second request message includes an access token; receive a second response message corresponding to the second request message returned after the backend service verifies that the access token is passed, and the second response message includes interface data.

[0200] In some embodiments, the second request message further includes a data type, and the second response message includes interface data corresponding to the data type.

[0201] In some embodiments, the local proxy service is connected to the client through the local service address of the local proxy service, and the local service address is obtained by concatenating a preset type of IP address included in the local network interface list and the port number listened by the local proxy service.

[0202] Corresponding to the above front-end project proxy method, an embodiment of the present application further provides a front-end project proxy device, which is applied to a client on an electronic device, and the client is connected to the local proxy service on the electronic device, as Figure 9 shown, the device includes:

[0203] A first sending module 91, configured to send a relative address to the local proxy service, so that the local proxy service uses the static directory and the relative address to access the static resource file of the front-end project under the static directory, and return a resource page corresponding to the static resource file to the client, where the relative address is the address of the static resource file under the static directory;

[0204] A second sending module 92, configured to send a first request message to the local proxy service based on the resource page, so that the local proxy service invokes the proxy middleware to obtain the interface data to be displayed on the resource page from the backend service, and return a first response message corresponding to the first request message to the client, the first request message indicates to obtain interface data, and the first response message includes interface data;

[0205] A display module 93, configured to display a resource page including interface data.

[0206] In the technical solution provided by the embodiments of the present application, the local proxy service accesses the static resource files of the front-end project in the static directory according to the relative address sent by the client, and returns the resource page corresponding to the static resource file to the client. The local proxy service then receives the request message sent by the client, calls the proxy middleware, and obtains the interface data to be displayed on the resource page from the back-end service. The client receives the interface data returned by the local proxy service and displays the resource page of the front-end project including the interface data, realizing that the local proxy service proxies the front-end project to the back-end service. By applying the technical solution provided by the embodiments of the present application, the interaction with the back-end service can be realized by using the local proxy service. In this way, the original project can also be proxied to the back-end service, realizing the separation of the front end and the back end.

[0207] In some embodiments, the apparatus further includes: a establishing module, configured to obtain the local service address of the local proxy service, where the local service address is obtained by concatenating a preset type of IP address included in the local network interface list and the port number listened by the local proxy service; and establish a connection with the local proxy service based on the local service address.

[0208] Corresponding to the above front-end project proxy method, the embodiments of the present application further provide a front-end project proxy apparatus, which is applied to an execution environment service on an electronic device, such as Figure 10 , and the apparatus includes:

[0209] A creating module 101, configured to create a local proxy service and a proxy middleware corresponding to the front-end project, so that the local proxy service executes any of the front-end project proxy methods applied to the local proxy service.

[0210] In some embodiments, the apparatus further includes: a verifying module, configured to send a third request message to the back-end service according to the address information of the back-end service in the configuration file of the front-end project, where the third request message includes the user name and password of the back-end service; receive a third response message corresponding to the third request message returned by the back-end service after authenticating the user name and password, where the third response message includes an access token of the back-end service; and add the access token to the proxy middleware.

[0211] The embodiments of the present application further provide an electronic device, such as Figure 11 shown, including a processor 111, a communication interface 112, a memory 113, and a communication bus 114, where the processor 111, the communication interface 112, and the memory 113 communicate with each other through the communication bus 114;

[0212] The memory 113 is used to store a computer program;

[0213] The processor 111, when executing the program stored in the memory 113, implements the steps of any of the above-mentioned front-end project proxy methods applied to the local proxy service, the client, or the execution environment service.

[0214] The communication bus mentioned in the above electronic device may be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. This communication bus can be divided into an address bus, a data bus, a control bus, etc. For the sake of representation, only a thick line is used in the figure, but it does not mean that there is only one bus or one type of bus.

[0215] The communication interface is used for communication between the above electronic device and other devices.

[0216] The memory may include a Random Access Memory (RAM), and may also include a Non-Volatile Memory (NVM), such as at least one disk memory. Optionally, the memory may also be at least one storage device located far from the aforementioned processor.

[0217] The above-mentioned processor may be a general-purpose processor, including a Central Processing Unit (CPU), a Network Processor (NP), etc.; it may also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field-Programmable Gate Array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components.

[0218] In another embodiment provided by the present application, there is also provided a computer-readable storage medium, in which a computer program is stored, and when the computer program is executed by a processor, it implements any of the above-mentioned front-end project proxy methods applied to the local proxy service, the client, or the execution environment service.

[0219] In another embodiment provided by the present application, there is also provided a computer program product including instructions, which when running on a computer, causes the computer to execute the steps of any of the front-end project proxy methods applied to the local proxy service, the client, or the execution environment service in the above embodiments.

[0220] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware, or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the processes or functions described in the embodiments of the present application are generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions can be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center by wire (such as coaxial cable, optical fiber, digital subscriber line (DSL)) or wirelessly (such as infrared, wireless, microwave, etc.). The computer-readable storage medium can be any available medium that the computer can access, or a data storage device such as a server or data center that includes one or more integrated available media. The available medium can be a magnetic medium (such as a floppy disk, hard disk, magnetic tape), an optical medium (such as a DVD), or a semiconductor medium (such as a solid state disk (SSD)).

[0221] It should be noted that in this document, relational terms such as first and second are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the term "comprising", "including", or any other variant thereof is intended to cover non-exclusive inclusion, so that a process, method, article, or device including a series of elements not only includes those elements, but also includes other elements not expressly listed, or elements inherent to such process, method, article, or device. Without further limitation, an element defined by the statement "including one..." does not exclude the presence of additional identical elements in the process, method, article, or device including the element.

[0222] Each embodiment in this specification is described in a related manner. For the same or similar parts among the embodiments, reference can be made to each other. Each embodiment focuses on the differences from other embodiments. In particular, for the embodiments of the device, electronic device, computer storage medium, and computer program product, since they are basically similar to the method embodiments, the description is relatively simple, and for the relevant parts, reference can be made to the partial description of the method embodiments.

[0223] The above are only the preferred embodiments of the present application and are not intended to limit the protection scope of the present application. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principle of the present application are all included in the protection scope of the present application.

Claims

1. A front-end project proxy method, characterized in that: A local proxy service applied to an electronic device, the local proxy service being connected to a client on the electronic device, the method comprising: Obtain the relative address sent by the client, where the relative address is the address of the static resource file of the front-end project in the static directory; Using the static directory and the relative address, access the static resource files in the static directory, and return the resource page corresponding to the static resource files to the client; Receiving a first request message sent by the client based on the resource page, wherein the first request message indicates obtaining interface data to be displayed on the resource page; The proxy middleware is called to obtain the interface data from the backend service, and a first response message corresponding to the first request message is returned to the client so that the client displays a resource page including the interface data, wherein the first response message includes the interface data.

2. The method according to claim 1, characterized in that The step of calling the proxy middleware to obtain the interface data from the backend service includes: Calling the proxy middleware to send a second request message to the backend service, where the second request message includes an access token; A second response message corresponding to the second request message is received and returned by the backend service after the backend service verifies the access token, wherein the second response message includes the interface data.

3. The method according to claim 2, characterized in that The second request message also includes a data type, and the second response message includes interface data corresponding to the data type.

4. The method according to claim 1, characterized in that: The local proxy service is connected to the client via the local service address of the local proxy service, where the local service address is obtained by combining an IP address of a preset type included in the local network interface list and a port number monitored by the local proxy service.

5. A front-end project proxy method, characterized in that: A client on an electronic device is connected to a local proxy service on the electronic device, and the method includes: Sending a relative address to the local proxy service, so that the local proxy service uses the static directory and the relative address to access the static resource files of the front-end project under the static directory, and returns a resource page corresponding to the static resource file to the client, wherein the relative address is the address of the static resource file under the static directory; Based on the resource page, sending a first request message to the local proxy service, so that the local proxy service calls the proxy middleware, obtains the interface data to be displayed on the resource page from the backend service, and returns a first response message corresponding to the first request message to the client, wherein the first request message indicates obtaining the interface data, and the first response message includes the interface data; A resource page including the interface data is displayed.

6. The method according to claim 5, characterized in that The method further comprises: Obtaining a local service address of the local proxy service, where the local service address is obtained by combining an IP address of a preset type included in the local network interface list and a port number monitored by the local proxy service; Based on the local service address, a connection is established with the local proxy service.

7. A front-end project proxy method, characterized in that: An execution environment service applied to an electronic device, the method comprising: Create a local proxy service and proxy middleware corresponding to the front-end project, so that the local proxy service executes any one of the methods described in claims 1-4.

8. The method according to claim 7, characterized in that The method further comprises: Sending a third request message to the backend service according to the address information of the backend service in the configuration file of the frontend project, wherein the third request message includes the user name and password of the backend service; Receiving a third response message corresponding to the third request message returned by the backend service after the user name and password are authenticated, wherein the third response message includes an access token of the backend service; Add the access token to the proxy middleware.

9. The method according to claim 7, characterized in that: The method further comprises: Obtaining a local network interface list, wherein the local network interface list includes IP addresses of a preset type; The IP address and the port number monitored by the local proxy service are concatenated to obtain a local service address, so that the client on the electronic device can establish a connection with the local proxy service based on the local service address.

10. A front-end project agent device, characterized in that: A local proxy service applied to an electronic device, the local proxy service being connected to a client on the electronic device, the device comprising: An acquisition module is used to acquire the relative address sent by the client, where the relative address is the address of the static resource file of the front-end project in the static directory; An access module, used to access the static resource files in the static directory by using the static directory and the relative address, and return a resource page corresponding to the static resource files to the client; A receiving module, configured to receive a first request message sent by the client based on the resource page, wherein the first request message indicates obtaining interface data to be displayed on the resource page; A calling module is used to call the proxy middleware, obtain the interface data from the backend service, and return a first response message corresponding to the first request message to the client, so that the client displays a resource page including the interface data, and the first response message includes the interface data.

11. A front-end project agent device, characterized in that: A client device applied to an electronic device, the client device being connected to a local proxy service on the electronic device, the device comprising: A first sending module is used to send a relative address to the local proxy service, so that the local proxy service uses the static directory and the relative address to access the static resource file of the front-end project under the static directory, and returns a resource page corresponding to the static resource file to the client, wherein the relative address is the address of the static resource file under the static directory; a second sending module, configured to send a first request message to the local proxy service based on the resource page, so that the local proxy service calls the proxy middleware, obtains the interface data to be displayed on the resource page from the backend service, and returns a first response message corresponding to the first request message to the client, wherein the first request message indicates obtaining the interface data, and the first response message includes the interface data; The display module is used to display a resource page including the interface data.

12. A front-end project agent device, characterized in that: An execution environment service applied to an electronic device, the device comprising: A creation module is used to create a local proxy service and proxy middleware corresponding to the front-end project, so that the local proxy service executes any method described in claims 1-4.

13. An electronic device, characterized in that: It includes a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory communicate with each other via the communication bus; Memory, used to store computer programs; A processor, for implementing any of the methods described in claims 1-4, 5-6 or 7-9 when executing a program stored in a memory.

14. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method described in any one of claims 1-4, 5-6, or 7-9 is implemented.

Images