CN111858102A

CN111858102A - Vue and axios-based Restful API (application program interface) request method and device

Info

Publication number: CN111858102A
Application number: CN202010750088.4A
Authority: CN
Inventors: 黄刚; 陈乃阔; 杨梦云; 刘毅枫
Original assignee: Shandong Chaoyue CNC Electronics Co Ltd
Current assignee: Shandong Chaoyue CNC Electronics Co Ltd
Priority date: 2020-07-30
Filing date: 2020-07-30
Publication date: 2020-10-30

Abstract

The invention provides a Restful API (application program interface) request method and device based on vue and axios, wherein the method comprises the following steps: initiating an event with the @ click command in the vue framework and initiating a request to the background through the vue framework with the this. axios command in the axios database in conjunction with the operation command; in response to the request being successful, obtaining the return data in response with the then command in the vue framework; in response to the request being unsuccessful, the callback function is captured using the catch command in the vue framework and the error is checked. The RESTful API is essentially a set of protocols for standardizing the interaction modes of a front end and the same background service system in various forms. Front-end and back-end interaction is realized by the method, namely jstl, el expressions and jsp expressions are not required to be written in a front-end interaction program, and only html is used; the front-end and back-end interaction is allowed to use the form of ajax + json, so that project division is more definite, front-end and back-end decoupling is realized, and front-end and back-end programs can be deployed on different servers to relieve the pressure of the servers and improve the safety.

Description

Vue and axios-based Restful API (application program interface) request method and device

Technical Field

The invention relates to the technical field of front-end and back-end interaction, in particular to a Restful API (application program interface) request method and a Restful API request device based on vue and axios, which are used for realizing the interaction between a back-end system and a multi-platform front end.

Background

The current internet application has rich front-end display media, such as mobile phones, tablet computers, PCs and the like, most of which have Android, ios and other operation platforms, and any platform supports the browser function. In order to realize the interaction between the front end and the back end, the system of the back end server needs to write adaptive interaction programs aiming at different operation platforms and different browsers of the front end, thereby causing great burden on the development of the back end system.

Disclosure of Invention

In order to solve the above problems, the present invention proposes to use an Application Programming Interface (API) with REST style-Restful API request for constructing a request and access method unrelated to programming language and platform, so as to implement interaction between a multi-platform front end and the same back end service system. Specifically, in one aspect of the present invention, a Restful API request method based on vue and axios is provided, where the Restful API request method includes: initiating an event with the @ click command in the vue framework and initiating a request to the background through the vue framework with the this. axios command in the axios database in conjunction with the operation command; in response to the request being successful, obtaining the return data in response with the then command in the vue framework; in response to the request being unsuccessful, the callback function is captured using the catch command in the vue framework and the error is checked.

In one or more embodiments, the operation command is an operation command for an axios database, and the operation command includes: get data, post add data, put full field update data, patch local field update data, or delete data.

In one or more embodiments, the method has the capability to interact with an operating platform comprising: web pages, Android, and IOS.

In one or more embodiments, the method further comprises constructing a Restful API based on the vue framework and the axios database, the constructing method comprising: downloading axios, qs and js databases into vue projects using the npm tool; introducing an axios database and a qs database in main.js by using an import command; a global variable path is defined.

In one or more embodiments, the defining a global variable path includes: the global variable path is defined by vue.prototypebaseurl command under main.js, or configured by dev.env and prod.env under config.

In another aspect of the present invention, a Restful API request device based on vue and axios is provided, the device comprising: a request module configured to initiate an event using the @ click command in the vue framework, and initiate a request to the backend system through the vue framework using the this. axios command in the axios database in combination with the operation command; a first processing module, configured to, in response to the request being successful, obtain the return data in response using the then command in the vue framework; and the second processing module is used for capturing the callback function by using the catch command in the vue framework and checking errors in response to unsuccessful request.

In one or more embodiments, the operation command is an axios database operation command, including: get data, post add data, put full field update data, patch local field update data, or delete data.

In one or more embodiments, the apparatus supports interaction with an operating platform comprising: web pages, Android, and IOS.

In one or more embodiments, the apparatus further comprises: a Restful API build module configured to download the axios database, qs database and js database into the vue project using the npm tool; introducing an axios database and a qs database in main.js by using an import command; a global variable path is defined.

In one or more embodiments, the Restful API build module is further configured to: the global variable path is defined by vue.prototypebaseurl command under main.js, or configured by dev.env and prod.env under config.

The beneficial effects of the invention include: the RESTful API is essentially a set of protocols for standardizing the interaction modes of a front end and the same background service system in various forms. Through the front-end and back-end interaction realized by the invention, after the front end and the back end are separated, the interactive program of the front end and the back end is written, i.e. jstl, el expression and jsp expression are not written in the front-end interactive program, but only html is used; allowing the front-end and back-end interaction processes to use the form ajax + json has benefits including: the project division is more definite, the decoupling of the front end and the back end is realized, and the front end and the back end can be deployed on different servers to relieve the pressure of the servers and improve the safety.

Drawings

In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art that other embodiments can be obtained by using the drawings without creative efforts.

FIG. 1 is a flowchart of the operation of a Restful API request method based on vue and axios according to the present invention;

FIG. 2 is a schematic structural diagram of an vue and axios based Restful API request device according to the present invention;

FIG. 3 is a schematic diagram of the interaction between the Restful API backend service system and the front-end platform according to the present invention.

Detailed Description

In order to make the objects, technical solutions and advantages of the present invention more apparent, the following embodiments of the present invention are described in further detail with reference to the accompanying drawings.

It should be noted that all expressions using "first" and "second" in the embodiments of the present invention are used for distinguishing two entities with the same name but different names or different parameters, and it should be noted that "first" and "second" are merely for convenience of description and should not be construed as limitations of the embodiments of the present invention, and they are not described in any more detail in the following embodiments.

The RESTful API is an API (Application Programming Interface) in a rest style, and rest is an architecture style, which is independent of Programming language and platform, and specifically adopts HTTP as a transmission protocol. The RESTful API can enable a background service system to provide a URL (Uniform Resource Locator) of a rest style so as to realize interaction between a multi-platform front end and the same back end service system. The invention provides a Restful API request method based on vue and axios, which is described in the following with reference to the specific drawings.

FIG. 1 is a flowchart of the operation of a Restful API request method based on vue and axios according to the present invention. In this embodiment, the workflow of the Restful API request method includes: step S1, initiating an event by using an @ click command in a vue framework, and initiating a request to a background system through a vue framework by using a this. Step S2, responding to the request success, acquiring the return data in response by using the then command in the vue framework; step S3, in response to the request being unsuccessful, capturing the callback function using the catch command in the vue framework, and checking for errors.

Specifically, the RESTful API is essentially a set of protocols for standardizing the interaction modes of multiple forms of front ends and the same background service system. According to the invention, after the front end and the rear end are separated, the interactive program of the front end and the rear end is written, i.e. jstl, el expression and jsp expression are not written in the interactive program of the front end, but only html is used; and allows front-end and back-end interactions to use the form ajax + json. By the method, project division is more definite, front-end and back-end decoupling is realized, and the front end and the back end can be deployed on different servers to relieve the pressure of the servers and improve the safety.

In a further embodiment, the operation command is an axios database operation command, including: get, post, put, patch, or delete. Specifically, the get operation command is used for acquiring data; the post operation command is used for newly adding data; put operation commands are used to modify data (all fields need to be passed, equivalent to a full update); the patch operation command is used for modifying data, and the specific mode is that new improvement is added on the basis of put; the method is suitable for local updating, for example, only the user name is modified, and the fields of the user name are uploaded by using a patch operation command without uploading all the fields like a put operation command; the delete operation command is used to delete data.

In a further embodiment, the Restful API request method has the capability to interact with the following operating platforms, including: web pages, Android, and IOS.

Specifically, for web pages, the access or request modes of web pages provided by different browsers are different. The access and request processes of the invention are irrelevant to programming language and platform, so that the interaction between the web pages provided by different browsers can be realized through a back-end service system.

In a further embodiment, the method of Restful API request further comprises constructing a Restful API based on the vue framework and axios database, the constructing method comprising: downloading axios, qs and js databases into vue projects using the npm tool; introducing an axios database and a qs database in main.js by using an import command; a global variable path is defined.

Specifically, defining the global variable path includes: the global variable path is defined by the vue.prototype.ba setrl command under main.js, or is configured by dev.env and prod.env under config.

In order to more clearly illustrate the front-end and back-end interaction process implemented by the method of the present invention, a user login embodiment will be described below.

Embodiment one (user login operation)

Initiating an event, such as clicking a login button, via the @ click command in the vue framework; initiate a login request using this.a xios; providing input of a user name and a password by using a post new operation command, converting the input user name and the input password into a character string and transmitting the character string by using serialization parameters in a qs database; then, acquiring return data in response by using the command; the then command is a callback function after the request is successful, and the response contains later returned end response data; and if the request fails, capturing the callback function by using the catch operation command, and checking errors.

On the basis of the above Restful API request method based on vue and axios, the present application also discloses a Restful API request device based on vue and axios, as shown in the following figures.

Fig. 2 is a schematic structural diagram of a Restful API request device based on vue and axios according to the present invention. The apparatus shown in fig. 2 comprises: a request module configured to initiate an event using the @ click command in the vue framework and initiate a request to the background system through the vue framework using the this. axios command in the axios database in combination with the operation command; a first processing module, configured to, in response to the request being successful, obtain the return data in response using the then command in the vue framework; and the second processing module is used for capturing the callback function by using the catch command in the vue framework and checking errors in response to unsuccessful request.

Specifically, the operation command controlled in the request module is an axios database operation command, and the operation command includes: the step t acquires data, post newly-added data, put full-field updating data, patch local-field updating data or delete data. The Restful API request device of the invention supports the interaction with the following operation platform, and the operation platform comprises: web pages, Android, and IOS.

In a further embodiment, the Restful API requesting means further comprises: a Restful API build module configured to download the axios database, qs database and js database into the vue project using the npm tool; introducing an axios database and a qs database in main.js by using an import command; a global variable path is defined.

Specifically, the Restful API building module is further configured to define a global variable path through the following steps: the global variable path is defined by vue.prototypebaseurl command under main.js, or configured by dev.env and prod.env under config.

Fig. 3 shows an interaction process between a back-end service system and a front-end device, which is implemented by using the Restful API request method or apparatus of the present invention, and fig. 3 is an interaction diagram between the Restful API back-end service system and a front-end platform according to the present invention.

The foregoing is an exemplary embodiment of the present disclosure, but it should be noted that various changes and modifications could be made herein without departing from the scope of the present disclosure as defined by the appended claims. The functions, steps and/or actions of the method claims in accordance with the disclosed embodiments described herein need not be performed in any particular order. Furthermore, although elements of the disclosed embodiments of the invention may be described or claimed in the singular, the plural is contemplated unless limitation to the singular is explicitly stated.

It should be understood that, as used herein, the singular forms "a", "an" and "the" are intended to include the plural forms as well, unless the context clearly supports the exception. It should also be understood that "and/or" as used herein is meant to include any and all possible combinations of one or more of the associated listed items.

The numbers of the embodiments disclosed in the embodiments of the present invention are merely for description, and do not represent the merits of the embodiments.

Those of ordinary skill in the art will understand that: the discussion of any embodiment above is meant to be exemplary only, and is not intended to intimate that the scope of the disclosure, including the claims, of embodiments of the invention is limited to these examples; within the idea of an embodiment of the invention, also technical features in the above embodiment or in different embodiments may be combined and there are many other variations of the different aspects of the embodiments of the invention as described above, which are not provided in detail for the sake of brevity. Therefore, any omissions, modifications, substitutions, improvements, and the like that may be made without departing from the spirit and principles of the embodiments of the present invention are intended to be included within the scope of the embodiments of the present invention.

Claims

1. A Restful API request method based on vue and axios, the method comprising:

initiating an event with the @ click command in the vue framework and initiating a request to the background through the vue framework with the this. axios command in the axios database in conjunction with the operation command;

in response to the request being successful, obtaining the return data in response with the then command in the vue framework;

in response to the request being unsuccessful, the callback function is captured using the catch command in the vue framework and the error is checked.

2. The method of claim 1, wherein the operation command is an operation command for an axios database, the operation command comprising:

get data, post add data, put full field update data, patch local field update data, or delete data.

3. The method of claim 1, wherein the Restful API request method has the capability to interact with an operating platform comprising:

web pages, Android, and IOS.

4. The method of claim 1 wherein the Restful API request method further comprises building a Restful API based on an vue framework and an axios database, the building method comprising:

downloading axios, qs and js databases into vue projects using the npm tool;

introducing an axios database and a qs database in main.js by using an import command;

a global variable path is defined.

5. The method of claim 4, wherein the defining a global variable path comprises:

js, a global variable path is defined by vue

Under config, a global variable path is configured through dev.

6. An vue and axios based Restful API request device, the device comprising:

a request module configured to initiate an event using the @ click command in the vue framework, and initiate a request to the backend system through the vue framework using the this. axios command in the axios database in combination with the operation command;

a first processing module, configured to, in response to the request being successful, obtain the return data in response using the then command in the vue framework;

and the second processing module is used for capturing the callback function by using the catch command in the vue framework and checking errors in response to unsuccessful request.

7. The apparatus of claim 6, wherein the operation command is an axios database operation command comprising: get data, post add data, put full field update data, patch local field update data, or delete data.

8. The apparatus of claim 6, wherein the Restful API request means supports interaction with an operating platform comprising:

web pages, Android, and IOS.

9. The apparatus of claim 6, wherein the apparatus further comprises:

a Restful API build module configured to download the axios database, qs database and js database into the vue project using the npm tool; introducing an axios database and a qs database in main.js by using an import command; a global variable path is defined.

10. The apparatus of claim 9, wherein the Restful API build module is further configured for:

js, a global variable path is defined by vue

Under config, a global variable path is configured through dev.