vue-resource和axios,vue调用restful接口
本文主要介绍了vue与axios结合实现restful风格的四种请求方式，具有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
:
目录
1.npm下载axios到vue项目。2.引入main.js 3。定义全局变量路径(不是必需的，但建议使用)(1)。方法1 (2)。方法2 (4)。在特定的地方使用(1)，获取(2)，发布(3)，放置(4)。
Get:多用于获取数据post:多用于添加数据put:多用于修改数据(所有字段都需要传递，相当于所有更新)patch:多用于修改数据。它是基于put的新改进，适合本地更新。比如我只想修改我的用户名，只传用户名的字段就可以了。而不是像put一样传递所有字段进行删除：axios，大多用于删除数据，实际上类似于jquery中的原生ajax和$ajax，用于请求数据。不过axios是基于promise的，这也是vue官方推荐的。
所以我们来看看在vue中的具体使用。
1、npm下载axios到vue项目中
下面是你想下载qs的原因。qs的功能是序列化请求参数，比如对象到字符串和字符串到对象。不要小看它，它以后会大有用处的。
//npm将axios下载到项目中
npm安装axios -保存
//npm将qs下载到项目
npm安装qs.js -保存
2、main.js里引入
记住这里使用axios时定义的名称。我定义了axios，所以我也必须为后续请求使用axios。当然你也可以定义其他的，htpp，$axios。如果是你的名字也没关系。注意规范。
//介绍axios
从“axios”导入axios
//使用axios
vue . prototype . axios=axios；
//介绍qs
从“qs”导入qs
//使用qs
vue . prototype . QS=QS；
3、定义全局变量路径（不是必须的，但是推荐）
（1）、方法一
它可以在main.js中定义
//右边是你后端每个请求地址的公共部分。
//*:地址是我编的，涉及隐私。你所要做的就是提出每个请求地址的相同公共部分。
vue . prototype . base URL= http://127 . 0 . 0 . 1:9000/API ；
（2）、方法二
在dev.env和prod.env中进行配置，并在main.js中使用这两个文件的变量
dev.env：本地环境
使用严格
const merge=require( web pack-merge )
const prodEnv=require(。/prod.env )
module.exports=merge(prodEnv，{
NODE_ENV:“开发”，
//这里是本地环境的请求地址(请忽略地址，理解原理)
API _ ROOT:“”http://localhost:8080/web“”
})
prod.env：上线环境
使用严格
const merge=require( web pack-merge )
const prodEnv=require(。/prod.env )
module.exports=merge(prodEnv，{
NODE_ENV:“开发”，
//这里是本地环境的请求地址(请忽略地址，理解原理)
API _ ROOT:“”http://localhost:8080/web“”
})
main.js中使用此路径
vue . prototype . base URL=process . env . API _ ROOT；
4、在具体需求的地方使用
举个例子：
当我在登录页面@点击登录，那么我需要请求后台数据来确定登录是否可以验证，从而确定登录是否可以正常。我在方法中编写了请求方法。当点击登录按钮时，请求被发起，然后用户名和密码文本框的值被vue的v-model绑定，该v-model用于获取用户输入的值，以便获得发送参数。
我之前定义的变量是axios，所以这里我使用this.axios来发起请求。post是请求方法，我需要把我的用户名和密码作为字符串发送，所以我需要qs来序列化参数(qs不是必须的，只要把你请求发送的参数的格式和后端定义的匹配就可以了)。然后是请求成功后的回调函数，响应包含后端响应的数据，可以打印出来看。catch是请求失败后的捕获，用于检查错误login() {
this . axios . post( http://bt2 . XYZ:8083/log in/check admin ，qs.stringify({
用户名：this.userinfo .用户名，
密码：this.userinfo.password
}), {
标题：{
content-Type ":" application/x-www-form-urlencoded；charset=UTF-8
}
})。然后((响应)={
console.log(响应);
})。接住(错误)={
console.log(错误);
});
}
以上方法也可以这样写：
登录(){
this.axios({
方法： post ，
网址：“http://bt2。XYZ:8083/登录/查看管理员”，
数据：qs.stringify({
用户名：this.userinfo .用户名，
密码：this.userinfo.password
}),
标题：{
content-Type ":" application/x-www-form-urlencoded；charset=UTF-8
}
})。然后((响应)={
console.log(响应);
})。接住(错误)={
console.log(错误);
});
}
注 : get、delete请求的参数是params(特殊情况可以直接跟在地址后面)，而post、put、patch的参数是data
下面我们看看四种具体的请求方式吧（忽略地址，涉及隐私所以就输了假的地址):
这里的${this.baseURL}就是我们前面定义的全局路径，只要在后面跟上变化的地址即可
这里的头球和全国工业产品生产许可证不是必须的，因为我们业务需要传递这些数据，所以我才写的，大家只是参考格式即可
这里给出每种请求的两种写法，不尽相同，所以具体的请求还得看业务需求
放请求用的比较多，补丁我自己用的很少，但是原理都是一样的，这里就不多说了
使用箭头函数是为了不改变这指向，方便后期处理数据
（1）、get
this.axios({
方法：“得到”，
url:`${this.baseURL}/GetAll `，
标题：{
帐户："管理员",
密码："123456"
}
})。然后((响应)={
console.log(响应)
})。接住(错误)={
console.log(错误);
});
这个。axios。get( http://bt2。XYZ:8083/Solr/adminQuery ，{
参数：{
page: 1，
行:5
}
})。然后((响应)={
console.log(响应)
})。接住(错误)={
console.log(错误);
});
（2）、post
this.axios({
方法： post ，
url:`${this.baseURL}/Create `，
标题：{
帐户："管理员",
密码："123456"
},
数据：qs.stringify({
标题：this.addTitle，
Host: this.addHost，
Port: this.addPort，
帐户：this.addAccount，
密码：this.addPassword，
DbName: this.addDbName
})
})。然后((响应)={
console.log(响应);
})。接住(函数（错误){
console.log(错误);
});
登录(){
这个。axios。邮政( http://bt2。XYZ:8083/登录/检查admin ，qs.stringify({
用户名：this.userinfo .用户名，
密码：this.userinfo.password
}), {
标题：{
content-Type ":" application/x-www-form-urlencoded；charset=UTF-8
}
})。然后((响应)={
console.log(响应);
})。接住(错误)={
console.log(错误);
});
}
（3）、put
像这个请求，我就在地址栏后面追加了一个参数，id，只要后端格式允许，也可以这样做
this.axios({
方法：“放”，
URL:` $ { this。基本URL }/Update/`(this .数据[索引]。id)，
标题：{
帐户："管理员",
密码："123456"
},
数据：qs.stringify({
标题：输入[0]。值，
主机：输入[1]。值，
端口：输入[2]。值，
帐户：输入[3]。值，
密码：输入[4]。值，
数据库名：输入[5].价值
})
})。然后((响应)={
console.log(响应);
})。接住(函数（错误){
console.log(错误);
});
这个。axios。put( http://bt2。XYZ:8083/商品/更新,{
goodsId: goodsId，
商品名称：商品名称，
goodsPrice: goodsPrice，
goodsNum: goodsNum，
goodsKind: 1，
货物重量：货物重量
})。然后((响应)={
console.log(响应)
})。接住(错误)={
console.log(错误);
});
（4）、delete
this.axios({
方法："删除",
URL:` $ { this。基本URL }/Delete/`(this .数据[索引]。id)，
标题：{
帐户："管理员",
密码："123456"
}
})。然后((响应)={
console.log(错误)；
})。catch((错误)={
console.log(错误)；
});
this . axios . delete( http://bt2 . XYZ:8083/Goods/delete？goodsId=这个。ProductId)。然后((响应)={
console.log(响应)
})。catch((错误)={
console.log(错误)；
});
以上是四种常用的restful风格的请求，都是博主自己开发中请求的数据，都没问题。但是，具体的请求还取决于后端数据格式的规范和对业务的熟悉程度，这里只提供一些想法。如有错误或不足之处，请不吝赐教。希望大家多多支持。
切记跨域问题，记得让后端处理，如果是本地的话，可以参考vue的代理
这里附上axios的官方文档，供大家参考。Axios官方中文文档
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。