[发明专利]一种基于vue和axios的Restful API请求方法及装置

说明书

本发明提出了一种基于vue和axios的Restful API请求方法及装置，其中，所述方法包括：利用vue框架中的@click命令发起事件，并利用axios数据库中的this.axios命令结合操作命令通过vue框架向后台发起请求；响应于请求成功，利用vue框架中的then命令获取response中的返回数据；响应于请求不成功，利用vue框架中的catch命令捕捉回调函数，并校验错误。RESTful API本质是一套协议，用于规范多种形式的前端和同一个后台服务系统的交互方式。通过本发明实现的前后端交互，即不用在前端交互程序中编写jstl，el表达式和jsp表达式，而仅使用html即可；允许前后端交互使用ajax+json的形式，从而使得项目分工更加明确、实现前后端解耦以及能够将前端和后端程序部署到不同的服务器上来减轻服务器的压力并提高安全性。

技术领域

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

背景技术

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

发明内容

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

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

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

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

在一个或多个实施例中，所述定义全局变量路径，包括：在main.js下，通过Vue.prototype.baseURL命令定义全局变量路径，或者在config下，通过dev.env和prod.env配置全局变量路径。

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

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