一种基于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的RestfulAPI请求方法及装置
本专利技术涉及前后端交互
，尤其涉及一种基于vue和axios的RestfulAPI请求方法及装置，用于实现一个后端系统与多平台前端的交互。
技术介绍
当今的互联网应用的前端展示媒介很丰富，如手机、有平板电脑和PC等，其大多具有Android或ios等操作平台，并且无论哪种平台都支持浏览器功能。为了实现前后端的交互，后端服务器的系统需要针对前端的不同操作平台以及不同浏览器编写相适应的交互程序，从而对后端系统的开发造成了极大负担。
技术实现思路
为解决上述问题，本专利技术提出了利用具有REST风格的API(ApplicationProgrammingInterface应用程序接口)——RestfulAPI请求，用于构建一个与编程语言无关、与平台无关的请求、访问方法，以实现多平台前端与同一个后端服务系统的交互。具体的，在本专利技术的一个方面，提出了一种基于vue和axios的RestfulAPI请求方法，所述RestfulAPI请求方法包括：利用vue框架中的@click命令发起事件，并利用axios数据库中的this.axios命令结合操作命令通过vue框架向后台发起请求；响应于请求成功，利用vue框架中的then命令获取response中的返回数据；响应于请求不成功，利用vue框架中的catch命令捕捉回调函数，并校验错误。在一个或多个实施例中，所述操作命令为针对axios数据库的操作命令，所述操作命令包括：get获取数据、post新增数据、put全字段更新数据、patch局部字段更新数据或delete删除数据。在一个或多个实施例中，所述方法具有与以下操作平台交互的能力，所述操作平台包括：网页、Android和IOS。在一个或多个实施例中，所述方法还包括构建基于vue框架和axios数据库的RestfulAPI，构建方法包括：利用npm工具将axios数据库、qs数据库和js数据库下载到vue项目中；利用import命令在main.js中引入axios数据库以及qs数据库；定义全局变量路径。在一个或多个实施例中，所述定义全局变量路径，包括：在main.js下，通过Vue.prototype.baseURL命令定义全局变量路径，或者在config下，通过dev.env和prod.env配置全局变量路径。在本专利技术的另一个方面，提出了一种基于vue和axios的RestfulAPI请求装置，所述装置包括：请求模块，配置用于利用vue框架中的@click命令发起事件，并利用axios数据库中的this.axios命令结合操作命令通过vue框架向后台系统发起请求；第一处理模块，配置用于响应于请求成功，利用vue框架中的then命令获取response中的返回数据；第二处理模块，配置用于响应于请求不成功，利用vue框架中的catch命令捕捉回调函数，并校验错误。在一个或多个实施例中，所述操作命令为axios数据库操作命令，包括：get获取数据、post新增数据、put全字段更新数据、patch局部字段更新数据或delete删除数据。在一个或多个实施例中，所述装置支持与以下操作平台进行交互，所述操作平台包括：网页、Android和IOS。在一个或多个实施例中，所述装置还包括：RestfulAPI构建模块，配置用于利用npm工具将axios数据库、qs数据库和js数据库下载到vue项目中；利用import命令在main.js中引入axios数据库以及qs数据库；定义全局变量路径。在一个或多个实施例中，所述RestfulAPI构建模块还配置用于：在main.js下，通过Vue.prototype.baseURL命令定义全局变量路径，或者在config下，通过dev.env和prod.env配置全局变量路径。本专利技术的有益效果包括：RESTfulAPI本质是一套协议，用于规范多种形式的前端和同一个后台服务系统的交互方式。通过本专利技术实现的前后端交互，在前后端分离之后，对于前后端的交互程序的编写，即不用在前端交互程序中写jstl，el表达式和jsp表达式，而仅使用html即可；允许前后端交互过程使用ajax+json的形式，其好处包括：使得项目分工更加明确、实现前后端解耦、能够将前端和后端部署到不同的服务器上来减轻服务器的压力并提高安全性。附图说明为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的实施例。图1为本专利技术的一种基于vue和axios的RestfulAPI请求方法的工作流程图；图2为本专利技术的一种基于vue和axios的RestfulAPI请求装置的结构示意图；图3为本专利技术的RestfulAPI后端服务系统与前端平台的交互示意图。具体实施方式为使本专利技术的目的、技术方案和优点更加清楚明白，以下结合具体实施例，并参照附图，对本专利技术实施例进一步详细说明。需要说明的是，本专利技术实施例中所有使用“第一”和“第二”的表述均是为了区分两个相同名称非相同的实体或者非相同的参量，可见“第一”“第二”仅为了表述的方便，不应理解为对本专利技术实施例的限定，后续实施例对此不再一一说明。RESTfulAPI就是rest风格的API(ApplicationProgrammingInterface应用程序接口)，rest是一种架构风格，其跟编程语言及平台无关，具体采用HTTP做传输协议。RESTfulAPI能够使得一个后台服务系统提供rest风格的URL(UniformResourceLocator统一资源定位符)，以实现多平台前端与同一个后端服务系统的交互。本专利技术提出了一种基于vue和axios的RestfulAPI请求方法，下面将结合具体附图进行说明。图1为本专利技术的一种基于vue和axios的RestfulAPI请求方法的工作流程图。在本实施例中，RestfulAPI请求方法的工作流程包括：步骤S1、利用vue框架中的@click命令发起事件，并利用axios数据库中的this.axios命令结合操作命令通过vue框架向后台系统发起请求；步骤S2、响应于请求成功，利用vue框架中的then命令获取response中的返回数据；步骤S3、响应于请求不成功，利用vue框架中的catch命令捕捉回调函数，并校验错误。具体的，RESTfulAPI本质是一套协议，用于规范多种形式的前端和同一个后台服务系统的交互方式。通过本专利技术，在前后端分离之后，对于前后端的交互程序的编写，即不用在前端交互程序中写jstl，el表达式和jsp表达式，而仅使用html即可；并且允许前后端交互使用ajax+json的形式。通过本专利技术方法，能够使得项目分工更加明确、实现前后端解本文档来自技高网...

【技术保护点】
1.一种基于vue和axios的Restful API请求方法，其特征在于，所述方法包括：/n利用vue框架中的@click命令发起事件，并利用axios数据库中的this.axios命令结合操作命令通过vue框架向后台发起请求；/n响应于请求成功，利用vue框架中的then命令获取response中的返回数据；/n响应于请求不成功，利用vue框架中的catch命令捕捉回调函数，并校验错误。/n

【技术特征摘要】
1.一种基于vue和axios的RestfulAPI请求方法，其特征在于，所述方法包括：
利用vue框架中的@click命令发起事件，并利用axios数据库中的this.axios命令结合操作命令通过vue框架向后台发起请求；
响应于请求成功，利用vue框架中的then命令获取response中的返回数据；
响应于请求不成功，利用vue框架中的catch命令捕捉回调函数，并校验错误。


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


3.如权利要求1所述的方法，其特征在于，所述RestfulAPI请求方法具有与以下操作平台交互的能力，所述操作平台包括：
网页、Android和IOS。


4.如权利要求1所述的方法，其特征在于，所述RestfulAPI请求的方法还包括构建基于vue框架和axios数据库的RestfulAPI，构建方法包括：
利用npm工具将axios数据库、qs数据库和js数据库下载到vue项目中；
利用import命令在main.js中引入axios数据库以及qs数据库；
定义全局变量路径。


5.如权利要求4所述的方法，其特征在于，所述定义全局变量路径，包括：
在main.js下，通过Vue.prototype.baseURL命令定义全局变量路径，或者
在config下，通过dev.env和prod.env配置全局变量路...

【专利技术属性】
技术研发人员：黄刚，陈乃阔，杨梦云，刘毅枫，
申请(专利权)人：山东超越数控电子股份有限公司，
类型：发明
国别省市：山东;37