CN109388425B - Interface switching method, system, device and storage medium for front-end engineering - Google Patents
Interface switching method, system, device and storage medium for front-end engineering Download PDFInfo
- Publication number
- CN109388425B CN109388425B CN201810941512.6A CN201810941512A CN109388425B CN 109388425 B CN109388425 B CN 109388425B CN 201810941512 A CN201810941512 A CN 201810941512A CN 109388425 B CN109388425 B CN 109388425B
- Authority
- CN
- China
- Prior art keywords
- parameters
- configuring
- requests
- http proxy
- forwarding
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Computer Security & Cryptography (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention discloses a method, a system, a device and a storage medium for switching interfaces of front-end engineering, wherein the method comprises the following steps: acquiring parameters carried in a command input by a user in a development environment; judging whether a simulation data server is used or not according to the parameters, if so, configuring a forwarding path and a forwarding rule of the http proxy middleware, and configuring URLs of all requests of the front-end engineering; otherwise, the http proxy middleware is not configured, and the URLs of all the requests of the front-end project are configured to the URL of the back-end project according to the set value. According to the invention, parameters in the command input by the user are acquired in the development environment, and the URLs of all requests of the http proxy middleware and the front-end engineering are automatically configured according to the parameters. The invention can be widely applied to the field of software development.
Description
Technical Field
The invention relates to the field of software development, in particular to a method, a system, a device and a storage medium for switching interfaces of front-end engineering.
Background
In recent years, the idea of complete separation of the front end and the back end and the characteristics of high efficiency, multi-end support and strong interaction are gradually recognized, and more front-end developers use different frames to construct front-end engineering so as to realize complete separation development of the front end and the back end. The development mode negotiates the path and json data format of the interface between developers at the beginning of development, the front end uses a simulation data server/tool to start development work independent of the back end, and after the development of the back end interface is completed, the real butt joint debugging can be realized only by changing the original path of the front end simulation data server into a real server path of the back end. In the development process, the front end is concentrated on display and page flow, the rear end is concentrated on data and interfaces, and the front end and the rear end are developed in parallel and efficiently.
The scheme of the front-end simulation data server is also various, and the schemes include mock. The solution of adopting json-server and json file server is realized by http proxy middleware http-proxy-middleware forwarding request, but the solution needs to be realized by manually changing the configuration in the development environment and the configuration of front-end engineering, and the method needs to frequently switch between the analog data server and the back-end interface in the development process, and the efficiency is particularly low.
Disclosure of Invention
To solve the above technical problems, the present invention aims to: an efficient interface switching method, system, device and storage medium for front-end engineering are provided.
The first technical scheme adopted by the invention is as follows:
a method for switching interfaces of front-end engineering comprises the following steps:
acquiring parameters carried in a command input by a user in a development environment of a front-end project;
judging whether to use the simulation data server according to the parameters,
if yes, configuring a forwarding path and a forwarding rule of the http proxy middleware according to the parameters, and then configuring URLs of all requests of the front-end engineering according to the parameters;
otherwise, the http proxy middleware is not configured, and then the URLs of all the requests of the front-end project are configured to the URL of the back-end project according to the set value.
Further, the configuring, according to the parameter, URLs of all requests of the front-end engineering, specifically includes:
and adding forwarding identifiers in the URLs of all the requests of the front-end engineering according to the parameters so that the http proxy middleware forwards the requests of the front-end engineering according to the forwarding identifiers.
Further, the simulation data server comprises a json file server and a json-server.
Further, the configuring a forwarding path and a forwarding rule of the http proxy middleware according to the parameter specifically includes:
configuring a forwarding path of the http proxy middleware into a path of a json file server or a path of a json-server according to the parameters;
and configuring a forwarding rule of the http proxy middleware according to the parameters.
Further, the development environment is a webpack development environment.
The second technical scheme adopted by the invention is as follows:
an interface switching system of front end engineering, comprising:
the parameter acquisition module is used for acquiring parameters carried in a command input by a user in a development environment of a front-end project;
the parameter judgment module is used for judging whether the simulation data server is used or not according to the parameters, if so, the simulation data server is switched to the first configuration module for processing, and otherwise, the simulation data server is switched to the second configuration module for processing;
the first configuration module is used for configuring the forwarding path and the forwarding rule of the http proxy middleware according to the parameters and then configuring the URLs of all requests of the front-end engineering according to the parameters;
the second configuration module is used for configuring the URLs of all the requests of the front-end project into the URL of the back-end project according to the set value;
the parameter acquisition module is connected with the parameter judgment module, and the parameter judgment module is respectively connected with the first configuration module and the second configuration module.
Further, the simulation data server comprises a json file server and a json-server.
Further, the first configuration module comprises:
the first configuration unit is used for configuring a forwarding path of the http proxy middleware into a path of a json file server or a path of a json-server according to the parameters;
the second configuration unit is used for configuring the forwarding rule of the http proxy middleware according to the parameter;
and the parameter transmission unit is used for adding forwarding identifiers in the URLs of all the requests of the front-end engineering according to the parameters so that the http proxy middleware forwards the requests of the front-end engineering according to the forwarding identifiers.
The third technical scheme adopted by the invention is as follows:
an interface switching device of front end engineering, comprising:
a memory for storing a program;
and the processor is used for loading the program to execute the interface switching method of the front-end engineering.
The fourth technical scheme adopted by the invention is as follows:
a storage medium having a program stored thereon, the program, when executed by a processor, implementing a front-end engineering interface switching method.
The invention has the beneficial effects that: the parameters in the command input by the user are obtained in the development environment, and the URLs of all requests of the http proxy middleware and the front-end engineering are automatically configured according to the parameters, so that the user only needs to carry the set parameters in the operation command of the development environment when switching the interface.
Drawings
Fig. 1 is a flowchart of an interface switching method of front-end engineering according to the present invention;
fig. 2 is a block diagram of an interface switching system of a front-end engineering according to the present invention.
Detailed Description
The invention is further described with reference to the drawings and the specific examples.
Referring to fig. 1, a method for switching interfaces of front-end engineering includes the following steps:
acquiring parameters carried in a command input by a user in a development environment of a front-end project; the arguments refer to arguments attached to the command, such as, for example, arguments attached to the command in the command line, e.g., "rm-r", where "rm" is the command and "r" is the argument attached to the command.
The determination of whether to use the simulation data server is based on the parameters, and those skilled in the art can set some parameter values to make the determination, for example, setting characters a and B to indicate that the simulation data server is used, and setting other characters to indicate that the simulation data server is not used.
If yes, configuring a forwarding path and a forwarding rule of the http proxy middleware according to the parameters, and then configuring URLs of all requests of the front-end engineering according to the parameters; after the configuration of the http proxy middleware and the front-end engineering is completed, the http proxy middleware and the request sent by the front-end engineering are all forwarded to the configured forwarding paths, wherein the forwarding paths are paths of the simulation data server.
Otherwise, the http proxy middleware is not configured, and then the URLs of all the requests of the front-end project are configured to the URL of the back-end project according to the set value. The set value can be a URL of the back-end project, or a corresponding number of the URL of the back-end project in a database, and when the command input by the user does not have parameters or the parameters do not accord with the rules, the URL of the front-end project is configured as the URL of the back-end project, and the http proxy middleware can directly send the request to the URL of the back-end project.
Further as a preferred embodiment, the configuring, according to the parameter, URLs of all requests of the front-end engineering, specifically includes:
and adding forwarding identifiers in the URLs of all the requests of the front-end engineering according to the parameters so that the http proxy middleware forwards the requests of the front-end engineering according to the forwarding identifiers. And the http proxy middleware identifies the forwarding identifier according to the forwarding rule of the http proxy middleware, and all the requests with the forwarding identifier are sent to the analog data server.
Further, as a preferred embodiment, this embodiment provides a plurality of options for the simulation data server, and those skilled in the art can develop more simulation data servers according to actual needs. The simulation data server comprises a json file server and a json-server.
Further as a preferred embodiment, the configuring a forwarding path and a forwarding rule of the http proxy middleware according to the parameter specifically includes:
configuring a forwarding path of the http proxy middleware into a path of a json file server or a path of a json-server according to the parameters; for example, when the parameter is "json", a forwarding path of the http proxy middleware is configured as a path of the json file server; and when the parameter is 'json-server', configuring a forwarding path of the http proxy middleware into a json-server path.
And configuring a forwarding rule of the http proxy middleware according to the parameters.
Further as a preferred embodiment, the development environment is a webpack development environment.
Referring to fig. 2, an interface switching system of front end engineering includes:
the parameter acquisition module is used for acquiring parameters carried in a command input by a user in a development environment of a front-end project;
the parameter judgment module is used for judging whether the simulation data server is used or not according to the parameters, if so, the simulation data server is switched to the first configuration module for processing, and otherwise, the simulation data server is switched to the second configuration module for processing;
the first configuration module is used for configuring the forwarding path and the forwarding rule of the http proxy middleware according to the parameters and then configuring the URLs of all requests of the front-end engineering according to the parameters;
the second configuration module is used for configuring the URLs of all the requests of the front-end project into the URL of the back-end project according to the set value;
the parameter acquisition module is connected with the parameter judgment module, and the parameter judgment module is respectively connected with the first configuration module and the second configuration module.
Further in a preferred embodiment, the simulation data server includes a json file server and a json-server.
Further as a preferred embodiment, the first configuration module includes:
the first configuration unit is used for configuring a forwarding path of the http proxy middleware into a path of a json file server or a path of a json-server according to the parameters;
the second configuration unit is used for configuring the forwarding rule of the http proxy middleware according to the parameter;
and the parameter transmission unit is used for adding forwarding identifiers in the URLs of all the requests of the front-end engineering according to the parameters so that the http proxy middleware forwards the requests of the front-end engineering according to the forwarding identifiers.
An interface switching device of front end engineering, comprising:
a memory for storing a program;
and the processor is used for loading the program to execute the interface switching method of the front-end engineering corresponding to the figure 1. The apparatus may be a computer.
A storage medium, wherein a program is stored on the storage medium, and when the program is executed by a processor, the program implements an interface switching method of a front-end project corresponding to fig. 1.
The embodiment provides an interface switching method for front-end engineering, and in the method, a user selects json-server as a simulation data server. Some of the steps of the method are shown as exemplary code containing a variety of different operators, including "/", "\", "? ",", "! "and" $ ", etc.
The method comprises the following steps:
s101, acquiring a command input by a user in a cmd command line: "npm run start-mock" is an operation command, and "mock" is a parameter carried in this embodiment, so as to operate the front-end engineering webpack development environment.
S102, calling the following functions in webpack to acquire the address of the simulation data server. The function mockServer stores the URL of the simulation data server.
S103, using node. js to acquire the command input in step S1, and acquiring a value of process. argv index greater than 1: the mock is treated into { mock: "json-server" }, and the obtained parameters are assigned to global.
And initializing the configuration of json and json-server simulation data by using the parameters transmitted in the step S2, namely, rewriting the URL of the ajax request to the corresponding path according to the original path. The value of mock is json-server, and the http proxy middleware http-proxy-midleware is configured by returning the configuration of json-server, so that the http proxy middleware can forward all requests with mock API to the json-server with the address of http:// localhost: 26080/.
The following is an exemplary code for implementing the present step, wherein the variable name and function structure of the code can be modified by those skilled in the art according to actual needs:
s104, inject global. argv. mock into the front-end project using webpack plug-in, which can be implemented with the following code.
new webpack.DefinePlugin({
'process.mock':JSON.stringify(global.argv.mock)
}),
S105, initializing all requests in the interface configuration file of the project according to the value of the process.mock in the front-end project, which can be implemented by using the following codes:
and leading all the requests to carry the mock API, namely a forwarding identifier, by the front-end engineering according to the input mock value.
When the ajax request initiated by the front-end engineering is provided with a mockAPI, the http proxy middleware http-proxy-midleware forwards the request to http:// localhost:26080/users, and obtains a response.
If the interface needs to be switched, the current development environment is stopped, and then the corresponding command is operated, so that the interface can be switched.
This embodiment shows an interface switching method for front-end engineering, in which a user selects to send a request directly to a URL of a back-end engineering. The method comprises the following steps:
s201, obtaining parameters of a command when a user runs a front-end engineering webpack development environment.
S202, the returned result of the parameter is a null value 'none', and http-proxy-midleware of the http proxy middleware is not configured.
S203, injecting the null value into front-end engineering through the components of the webpack.
And S204, after the value injected into the interface configuration file in the front-end engineering is judged to be a null value 'none', all the requests in the front-end engineering are configured by using the URL of the back-end engineering.
After the configuration is completed, the ajax requests in the front-end project all obtain responses from the back-end server.
The method has the advantages that the relevant parameters of the front-end engineering and the http proxy middleware can be automatically configured by inputting the command with the parameters in the development environment of the front-end engineering, so that the request of the front-end engineering can be switched to the corresponding interface, the interface switching is more convenient, and the error rate is lower compared with the manual modification of the configuration file.
The step numbers in the present embodiment are set for convenience of illustration only, the order between the steps is not limited at all, and the execution order of each step in the embodiment can be adaptively adjusted according to the understanding of those skilled in the art.
While the preferred embodiments of the present invention have been illustrated and described, it will be understood by those skilled in the art that various changes in form and details may be made therein without departing from the spirit and scope of the invention as defined by the appended claims.
Claims (10)
1. A method for switching interfaces of front-end engineering is characterized in that: the method comprises the following steps:
acquiring parameters carried in a command input by a user in a development environment of a front-end project;
judging whether to use the simulation data server according to the parameters,
if yes, configuring a forwarding path and a forwarding rule of the http proxy middleware according to the parameters, and then configuring URLs of all requests of the front-end engineering according to the parameters;
otherwise, the http proxy middleware is not configured, and then the URLs of all the requests of the front-end project are configured as the URLs of the back-end project.
2. The method of claim 1, wherein the method comprises: configuring the URLs of all requests of the front-end engineering according to the parameters, wherein the step specifically comprises the following steps:
and adding forwarding identifiers in the URLs of all the requests of the front-end engineering according to the parameters so that the http proxy middleware forwards the requests of the front-end engineering according to the forwarding identifiers.
3. The method of claim 1, wherein the method comprises: the simulation data server comprises a json file server and a json-server.
4. The method of claim 3, wherein the method comprises: the configuring of the forwarding path and the forwarding rule of the http proxy middleware according to the parameters specifically includes:
configuring a forwarding path of the http proxy middleware into a path of a json file server or a path of a json-server according to the parameters;
and configuring a forwarding rule of the http proxy middleware according to the parameters.
5. The method of claim 1, wherein the method comprises: the development environment is a webpack development environment.
6. The utility model provides an interface switching system of front end engineering which characterized in that: the method comprises the following steps:
the parameter acquisition module is used for acquiring parameters carried in a command input by a user in a development environment of a front-end project;
the parameter judgment module is used for judging whether the simulation data server is used or not according to the parameters, if so, the simulation data server is switched to the first configuration module for processing, and otherwise, the simulation data server is switched to the second configuration module for processing;
the first configuration module is used for configuring the forwarding path and the forwarding rule of the http proxy middleware according to the parameters and then configuring the URLs of all requests of the front-end engineering according to the parameters;
the second configuration module is used for configuring the URLs of all the requests of the front-end project into the URL of the back-end project;
the parameter acquisition module is connected with the parameter judgment module, and the parameter judgment module is respectively connected with the first configuration module and the second configuration module.
7. The interface switching system of the front end engineering according to claim 6, wherein: the simulation data server comprises a json file server and a json-server.
8. The interface switching system of the front end engineering according to claim 7, wherein: the first configuration module comprises:
the first configuration unit is used for configuring a forwarding path of the http proxy middleware into a path of a json file server or a path of a json-server according to the parameters;
the second configuration unit is used for configuring the forwarding rule of the http proxy middleware according to the parameter;
and the parameter transmission unit is used for adding forwarding identifiers in the URLs of all the requests of the front-end engineering according to the parameters so that the http proxy middleware forwards the requests of the front-end engineering according to the forwarding identifiers.
9. The utility model provides an interface auto-change over device of front end engineering which characterized in that: the method comprises the following steps:
a memory for storing a program;
a processor for loading the program to perform the interface switching method of the front-end engineering according to any one of claims 1 to 5.
10. A storage medium having a program stored thereon, characterized in that: the program, when executed by a processor, implements the interface switching method of the front-end engineering of any of claims 1 to 5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810941512.6A CN109388425B (en) | 2018-08-17 | 2018-08-17 | Interface switching method, system, device and storage medium for front-end engineering |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810941512.6A CN109388425B (en) | 2018-08-17 | 2018-08-17 | Interface switching method, system, device and storage medium for front-end engineering |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109388425A CN109388425A (en) | 2019-02-26 |
| CN109388425B true CN109388425B (en) | 2021-08-31 |
Family
ID=65417598
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810941512.6A Active CN109388425B (en) | 2018-08-17 | 2018-08-17 | Interface switching method, system, device and storage medium for front-end engineering |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109388425B (en) |
Families Citing this family (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110069735A (en) * | 2019-03-20 | 2019-07-30 | 平安普惠企业管理有限公司 | JS code is anti-to be repeatedly injected method, apparatus, computer equipment and storage medium |
| CN113050923B (en) * | 2021-04-21 | 2024-06-14 | 中国工商银行股份有限公司 | Front-end interface data simulation method, device and system |
| CN115396343B (en) * | 2022-09-09 | 2023-11-10 | 深圳复临科技有限公司 | Front-end page performance detection method and device, computer equipment and storage medium |
| CN116760811B (en) * | 2023-08-16 | 2023-11-03 | 中移(苏州)软件技术有限公司 | HTTP data processing method, device and readable storage medium |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1968101A (en) * | 2006-11-23 | 2007-05-23 | 杭州华为三康技术有限公司 | Method, system and administrative server for front-end equipment control |
| CN104199725A (en) * | 2014-09-27 | 2014-12-10 | 上海瀚之友信息技术服务有限公司 | Service interface data simulation method and system |
| CN106055383A (en) * | 2016-05-26 | 2016-10-26 | 北京京东尚科信息技术有限公司 | Request processing method and device |
| CN106528400A (en) * | 2016-09-22 | 2017-03-22 | 深圳峰创智诚科技有限公司 | MOCK testing method and device |
| CN106961469A (en) * | 2017-02-28 | 2017-07-18 | 北京致远互联软件股份有限公司 | Unaware orientation Proxy Method and system based on http proxy servers |
| CN107766532A (en) * | 2017-10-27 | 2018-03-06 | 深圳市行云易通科技有限公司 | A kind of front end Node.js automates positive static method |
| CN107807841A (en) * | 2017-10-18 | 2018-03-16 | 中国平安人寿保险股份有限公司 | Server analogy method, device, equipment and readable storage medium storing program for executing |
| WO2018128738A1 (en) * | 2017-01-04 | 2018-07-12 | Visa International Service Association | Testing software code in a production environment |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20180077259A1 (en) * | 2016-09-09 | 2018-03-15 | Linkedin Corporation | Unified data rendering for multiple upstream services |
-
2018
- 2018-08-17 CN CN201810941512.6A patent/CN109388425B/en active Active
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1968101A (en) * | 2006-11-23 | 2007-05-23 | 杭州华为三康技术有限公司 | Method, system and administrative server for front-end equipment control |
| CN104199725A (en) * | 2014-09-27 | 2014-12-10 | 上海瀚之友信息技术服务有限公司 | Service interface data simulation method and system |
| CN106055383A (en) * | 2016-05-26 | 2016-10-26 | 北京京东尚科信息技术有限公司 | Request processing method and device |
| CN106528400A (en) * | 2016-09-22 | 2017-03-22 | 深圳峰创智诚科技有限公司 | MOCK testing method and device |
| WO2018128738A1 (en) * | 2017-01-04 | 2018-07-12 | Visa International Service Association | Testing software code in a production environment |
| CN106961469A (en) * | 2017-02-28 | 2017-07-18 | 北京致远互联软件股份有限公司 | Unaware orientation Proxy Method and system based on http proxy servers |
| CN107807841A (en) * | 2017-10-18 | 2018-03-16 | 中国平安人寿保险股份有限公司 | Server analogy method, device, equipment and readable storage medium storing program for executing |
| CN107766532A (en) * | 2017-10-27 | 2018-03-06 | 深圳市行云易通科技有限公司 | A kind of front end Node.js automates positive static method |
Non-Patent Citations (2)
| Title |
|---|
| Automatic generation of web client interfaces for remote execution of Matlab simulations;Christian Kreiter;《 2017 4th Experiment@International Conference (exp.at"17)》;20170720;37-42 * |
| 基于Node.js的Web前端框架的研究与实现;温馨;《中国优秀硕士学位论文全文数据库 信息科技辑》;20180415;I138-421 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109388425A (en) | 2019-02-26 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109388425B (en) | Interface switching method, system, device and storage medium for front-end engineering | |
| CN108427631B (en) | Application test system, method, electronic equipment and readable storage medium | |
| CN111984356B (en) | Page jump method, device, computer equipment and storage medium | |
| CN106649630A (en) | Data query method and device | |
| CN110806934A (en) | RPA technology-based intelligent all-in-one machine development and multi-service rapid processing method | |
| JP7087121B2 (en) | Landing page processing methods, equipment, equipment and media | |
| US20170289243A1 (en) | Domain name resolution method and electronic device | |
| CN106357814B (en) | A kind of document handling method, agency service end and client | |
| CN112491617B (en) | Link tracking method, device, electronic equipment and medium | |
| CN105760289A (en) | Debugging method and device of embedded system | |
| CN113722020A (en) | Interface calling method, device and computer readable storage medium | |
| CN114090672A (en) | Business data import and export method, system, computer equipment and medium | |
| CN114466047B (en) | Method, platform, equipment and medium for conveniently accessing Internet of things equipment to Internet of things platform | |
| CN109561165A (en) | Domain name system configuration method and relevant apparatus | |
| CN103944961A (en) | Application sharing method, device and system | |
| CN110222046B (en) | List data processing method, device, server and storage medium | |
| CN113495723B (en) | Method, device and storage medium for calling functional component | |
| CN104376056A (en) | Data processing method and device | |
| CN107438097B (en) | Network request processing method and device | |
| CN106844467B (en) | Data display method and device | |
| CN110209565A (en) | A kind of metadata schema adjustment method and its device | |
| CN114756211B (en) | Model training method and device, electronic equipment and storage medium | |
| CN114253441B (en) | Method and device for enabling target function, storage medium and electronic device | |
| CN107357853B (en) | Method and device for operating REDIS console and computer system | |
| CN111177558B (en) | Channel service construction method and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |