(12)发明专利申请

(10)申请公布号 (43)申请公布日 (21)申请号 202010750088.4

(22)申请日 2020.07.30

(71)申请人 山东超越数控电子股份有限公司

地址 250104 山东省济南市高新区孙村镇

科航路2877号

(72)发明人 黄刚　陈乃阔　杨梦云　刘毅枫　

(74)专利代理机构 北京连和连知识产权代理有

限公司 11278

代理人 刘小峰

(51)Int.Cl.

G06F 9/54(2006.01)

(54)发明名称

一种基于vue和axios的Restful API请求方

法及装置

(57)摘要

本发明提出了一种基于v u e 和a x i o s的

Restful API请求方法及装置，其中，所述方法包

括：利用vue框架中的@click命令发起事件，并利

用axios数据库中的this.axios命令结合操作命

令通过vue框架向后台发起请求；响应于请求成

功，利用vue框架中的then命令获取response中

的返回数据；响应于请求不成功，利用vue框架中

的c a t c h 命令捕捉回调函数，并校验错误。

RESTful API本质是一套协议，用于规范多种形

式的前端和同一个后台服务系统的交互方式。通

过本发明实现的前后端交互，即不用在前端交互

程序中编写jstl，el表达式和jsp表达式，而仅使

用html即可；允许前后端交互使用ajax+json的

形式，从而使得项目分工更加明确、实现前后端

解耦以及能够将前端和后端程序部署到不同的

服务器上来减轻服务器的压力并提高安全性。权利要求书2页 说明书4页 附图1页CN 111858102 A 2020.10.30

C N 111858102

A

利用vue框架中的@click命令发起事件，并利用axios数据库中的this.axios命令结合操作命令通过vue框架向后台发起请求；

响应于请求成功，利用vue框架中的then命令获取response中的返回数据；

响应于请求不成功，利用vue框架中的catch命令捕捉回调函数，并校验错误。

2.如权利要求1所述的方法，其特征在于，所述操作命令为针对axios数据库的操作命令，所述操作命令包括：

get获取数据、post新增数据、put全字段更新数据、patch局部字段更新数据或delete 删除数据。

3.如权利要求1所述的方法，其特征在于，所述Restful API请求方法具有与以下操作平台交互的能力，所述操作平台包括：

网页、Android和IOS。

4.如权利要求1所述的方法，其特征在于，所述Restful API请求的方法还包括构建基于vue框架和axios数据库的Restful API，构建方法包括：

利用npm工具将axios数据库、qs数据库和js数据库下载到vue项目中；

利用import命令在main.js中引入axios数据库以及qs数据库；

定义全局变量路径。

5.如权利要求4所述的方法，其特征在于，所述定义全局变量路径，包括：

在main.js下，通过Vue.prototype.baseURL命令定义全局变量路径，或者

在config下，通过dev.env和prod.env配置全局变量路径。

6.一种基于vue和axios的Restful API请求装置，所述装置包括：

请求模块，配置用于利用vue框架中的@click命令发起事件，并利用axios数据库中的this.axios命令结合操作命令通过vue框架向后台系统发起请求；

第一处理模块，配置用于响应于请求成功，利用vue框架中的then命令获取response中的返回数据；

第二处理模块，配置用于响应于请求不成功，利用vue框架中的catch命令捕捉回调函数，并校验错误。

7.如权利要求6所述的装置，其特征在于，所述操作命令为axios数据库操作命令，包括：get获取数据、post新增数据、put全字段更新数据、patch局部字段更新数据或delete删除数据。

8.如权利要求6所述的装置，其特征在于，所述Restful API请求装置支持与以下操作平台进行交互，所述操作平台包括：

网页、Android和IOS。

9.如权利要求6所述的装置，其特征在于，所述装置还包括：

Restful API构建模块，配置用于利用npm工具将axios数据库、qs数据库和js数据库下载到vue项目中；利用import命令在main.js中引入axios数据库以及qs数据库；定义全局变量路径。

10.如权利要求9所述的装置，其特征在于，所述Restful API构建模块还配置用于：

在main.js下，通过Vue.prototype.baseURL命令定义全局变量路径，或者在config下，通过dev.env和prod.env配置全局变量路径。

一种基于vue和axios的Restful API请求方法及装置

技术领域

[0001]本发明涉及前后端交互技术领域，尤其涉及一种基于vue和axios的Restful API 请求方法及装置，用于实现一个后端系统与多平台前端的交互。

背景技术

[0002]当今的互联网应用的前端展示媒介很丰富，如手机、有平板电脑和PC等，其大多具有Android或ios等操作平台，并且无论哪种平台都支持浏览器功能。为了实现前后端的交互，后端服务器的系统需要针对前端的不同操作平台以及不同浏览器编写相适应的交互程序，从而对后端系统的开发造成了极大负担。

发明内容

[0003]为解决上述问题，本发明提出了利用具有R E ST风格的A PI(A p pl i ca ti o n Programming Interface应用程序接口)——Restful API请求，用于构建一个与编程语言无关、与平台无关的请求、访问方法，以实现多平台前端与同一个后端服务系统的交互。具体的，在本发明的一个方面，提出了一种基于vue和axios的Restful API请求方法，所述Restful API请求方法包括：利用vue框架中的@click命令发起事件，并利用axios数据库中的this.axios命令结合操作命令通过vue框架向后台发起请求；响应于请求成功，利用vue 框架中的then命令获取response中的返回数据；响应于请求不成功，利用vue框架中的catch命令捕捉回调函数，并校验错误。

[0004]在一个或多个实施例中，所述操作命令为针对axios数据库的操作命令，所述操作命令包括：get获取数据、post新增数据、put全字段更新数据、patch局部字段更新数据或delete删除数据。

[0005]在一个或多个实施例中，所述方法具有与以下操作平台交互的能力，所述操作平台包括：网页、Android和IOS。

[0006]在一个或多个实施例中，所述方法还包括构建基于vue框架和axios数据库的Restful API，构建方法包括：利用npm工具将axios数据库、qs数据库和js数据库下载到vue 项目中；利用import命令在main.js中引入axios数据库以及qs数据库；定义全局变量路径。[0007]在一个或多个实施例中，所述定义全局变量路径，包括：在main.js下，通过Vue.prototype.baseURL命令定义全局变量路径，或者在config下，通过dev.env和prod.env配置全局变量路径。

[0008]在本发明的另一个方面，提出了一种基于vue和axios的Restful API请求装置，所述装置包括：请求模块，配置用于利用vue框架中的@click命令发起事件，并利用axios数据库中的this.axios命令结合操作命令通过vue框架向后台系统发起请求；第一处理模块，配置用于响应于请求成功，利用vue框架中的then命令获取response中的返回数据；第二处理模块，配置用于响应于请求不成功，利用vue框架中的catch命令捕捉回调函数，并校验错误。

[0009]在一个或多个实施例中，所述操作命令为axios数据库操作命令，包括：get获取数据、post新增数据、put全字段更新数据、patch局部字段更新数据或delete删除数据。[0010]在一个或多个实施例中，所述装置支持与以下操作平台进行交互，所述操作平台包括：网页、Android和IOS。

[0011]在一个或多个实施例中，所述装置还包括：Restful API构建模块，配置用于利用npm工具将axios数据库、qs数据库和js数据库下载到vue项目中；利用import命令在main.js中引入axios数据库以及qs数据库；定义全局变量路径。

[0012]在一个或多个实施例中，所述Restful API构建模块还配置用于：在main.js下，通过Vue.prototype.baseURL命令定义全局变量路径，或者在config下，通过dev.env和prod.env配置全局变量路径。

[0013]本发明的有益效果包括：RESTful API本质是一套协议，用于规范多种形式的前端和同一个后台服务系统的交互方式。通过本发明实现的前后端交互，在前后端分离之后，对于前后端的交互程序的编写，即不用在前端交互程序中写jstl，el表达式和jsp表达式，而仅使用html即可；允许前后端交互过程使用ajax+json的形式，其好处包括：使得项目分工更加明确、实现前后端解耦、能够将前端和后端部署到不同的服务器上来减轻服务器的压力并提高安全性。

附图说明

[0014]为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的实施例。

[0015]图1为本发明的一种基于vue和axios的Restful API请求方法的工作流程图；[0016]图2为本发明的一种基于vue和axios的Restful API请求装置的结构示意图；[0017]图3为本发明的Restful API后端服务系统与前端平台的交互示意图。

具体实施方式

[0018]为使本发明的目的、技术方案和优点更加清楚明白，以下结合具体实施例，并参照附图，对本发明实施例进一步详细说明。

[0019]需要说明的是，本发明实施例中所有使用“第一”和“第二”的表述均是为了区分两个相同名称非相同的实体或者非相同的参量，可见“第一”“第二”仅为了表述的方便，不应理解为对本发明实施例的限定，后续实施例对此不再一一说明。

[0020]RESTful API就是rest风格的API(Application Programming Interface应用程序接口)，rest是一种架构风格，其跟编程语言及平台无关，具体采用HTTP做传输协议。RESTful API能够使得一个后台服务系统提供rest风格的URL(Uniform Resource Locator 统一资源定位符)，以实现多平台前端与同一个后端服务系统的交互。本发明提出了一种基于vue和axios的Restful API请求方法，下面将结合具体附图进行说明。

[0021]图1为本发明的一种基于vue和axios的Restful API请求方法的工作流程图。在本实施例中，Restful API请求方法的工作流程包括：步骤S1、利用vue框架中的@click命令发起事件，并利用axios数据库中的this.axios命令结合操作命令通过vue框架向后台系统发起请求；步骤S2、响应于请求成功，利用vue框架中的then命令获取response中的返回数据；步骤S3、响应于请求不成功，利用vue框架中的catch命令捕捉回调函数，并校验错误。[0022]具体的，RESTful API本质是一套协议，用于规范多种形式的前端和同一个后台服务系统的交互方式。通过本发明，在前后端分离之后，对于前后端的交互程序的编写，即不用在前端交互程序中写jstl，el表达式和jsp表达式，而仅使用html即可；并且允许前后端交互使用ajax+json的形式。通过本发明方法，能够使得项目分工更加明确、实现前后端解耦、能够将前端和后端部署到不同的服务器上来减轻服务器的压力并提高安全性。[0023]在进一步的实施例中，操作命令为axios数据库操作命令，包括：get、post、put、patch或delete。具体的，get操作命令用于获取数据；post操作命令用于新增数据；put操作命令用于修改数据(需要传递所有字段，相当于全部更新)；patch操作命令用于修改数据，具体方式是在put的基础上新增改进的；其适用于局部更新，例如，仅修改用户名，利用patch操作命令上传传用户名的字段即可，而不需要像put操作命令一样需要上传所有字段；delete操作命令用于删除数据。

[0024]在进一步的实施例中，Restful API请求方法具有与以下操作平台交互的能力，操作平台包括：网页、Android和IOS。

[0025]具体的，对于网页，由不同的浏览器提供的网页其访问或请求方式是不同的。而本发明的访问、请求过程与编程语言及平台无关，因此，能够通过一个后端服务系统实现与不同浏览器提供的网页之间的交互。

[0026]在进一步的实施例中，Restful API请求的方法还包括构建基于vue框架和axios 数据库的Restful API，构建方法包括：利用npm工具将axios数据库、qs数据库和js数据库下载到vue项目中；利用import命令在main.js中引入axios数据库以及qs数据库；定义全局变量路径。

[0027]具体的，定义全局变量路径包括：在main.js下，通过Vue.prototype.ba seURL命令定义全局变量路径，或者在config下，通过dev.env和prod.env配置全局变量路径。[0028]为了能够更加清楚的说明利用本发明方法实现的前后端交互过程，以下将通过一个用户登录实施例进行说明。

[0029]实施例一(用户登录操作)

[0030]通过vue框架中的@click命令发起事件，如点击登录按钮；使用this.a xios发起登录请求；利用post新增操作命令提供用户名和密码的输入，并利用qs数据库中的序列化参数，将输入的用户名和密码转换为字符串的形式发送；然后利用then命令获取response 中的返回数据；其中then命令是请求成功后的回调函数，response包含着后返回的端响应数据；若请求失败后，利用.catch操作命令捕捉回调函数，并校验错误。

[0031]在上述一种基于vue和axios的Restful API请求方法的基础上，本申请还公开了一种基于vue和axios的Restful API请求装置，具体如下图所示。

[0032]图2为本发明的一种基于vue和axios的Restful API请求装置的结构示意图。图2所示的装置包括：请求模块，配置用于利用vue框架中的@cl ick命令发起事件，并利用axios数据库中的this.axios命令结合操作命令通过vue框架向后台系统发起请求；第一处理模块，配置用于响应于请求成功，利用vue框架中的then命令获取response中的返回数

据；第二处理模块，配置用于响应于请求不成功，利用vue框架中的catch命令捕捉回调函数，并校验错误。

[0033]具体的，请求模块中控制的操作命令为axios数据库操作命令包括：ge t获取数据、post新增数据、put全字段更新数据、patch局部字段更新数据或delete删除数据。本发明的Restful API请求装置支持与以下操作平台进行交互，操作平台包括：网页、Android和IOS。

[0034]在进一步的实施例中，Restful API请求装置还包括：Restful API构建模块，配置用于利用npm工具将axios数据库、qs数据库和js数据库下载到vue项目中；利用import命令在main.js中引入axios数据库以及qs数据库；定义全局变量路径。

[0035]具体的，所述Restful API构建模块还配置用于通过以下步骤定义全局变量路径，所述步骤包括：在main.js下，通过Vue.prototype.baseURL命令定义全局变量路径，或者在config下，通过dev.env和prod.env配置全局变量路径。

[0036]利用本发明Restful API请求方法或装置实现的后端服务系统与前端设备的交互过程如图3所示，图3为本发明的Restful API后端服务系统与前端平台的交互示意图。[0037]以上是本发明公开的示例性实施例，但是应当注意，在不背离权利要求限定的本发明实施例公开的范围的前提下，可以进行多种改变和修改。根据这里描述的公开实施例的方法权利要求的功能、步骤和/或动作不需以任何特定顺序执行。此外，尽管本发明实施例公开的元素可以以个体形式描述或要求，但除非明确为单数，也可以理解为多个。[0038]应当理解的是，在本文中使用的，除非上下文清楚地支持例外情况，单数形式“一个”旨在也包括复数形式。还应当理解的是，在本文中使用的“和/或”是指包括一个或者一个以上相关联地列出的项目的任意和所有可能组合。

[0039]上述本发明实施例公开实施例序号仅仅为了描述，不代表实施例的优劣。[0040]所属领域的普通技术人员应当理解：以上任何实施例的讨论仅为示例性的，并非旨在暗示本发明实施例公开的范围(包括权利要求)被限于这些例子；在本发明实施例的思路下，以上实施例或者不同实施例中的技术特征之间也可以进行组合，并存在如上的本发明实施例的不同方面的许多其它变化，为了简明它们没有在细节中提供。因此，凡在本发明实施例的精神和原则之内，所做的任何省略、修改、等同替换、改进等，均应包含在本发明实施例的保护范围之内。

图1

图2

图3下载本文