vue如何调用后端接口

发布时间：2026-10-31 07:56:35 阅读量： 35 来源： 互联网转载

vue调用后端接口方式步骤为：1.使用axios发送AJAX请求；2.vue-resource发送请求。vue不支持直接发送AJAX请求，需要使用vue-resource、axios等插件实现。

一、使用axios：

1.安装axios并引入：

1）npm install axios -S （直接下载axios组件，下载完毕后axios.js就存放在node_modules\axios\dist中），首先在 main.js 中引入 axios：在此文件加入import axios from 'axios'，如果在其它的组件中无法使用 axios 命令。可以将 axios 改写为 Vue 的原型属性：Vue.prototype.$http=axios，在 main.js 中添加了这两行代码之后，就能直接在组件的 methods 中使用 this.$http命令。

2）网上直接下载axios.min.js文件,通过script src的方式进行文件的引入

2.发送请求：

1）get请求使用格式：

a：axios([options]) （这种格式直接将所有数据写在options里，options其实是个字典）

b：axios.get(url[,options]);

2）post请求格式：

a：axios.post(url,data,[options]);

3）发送跨域请求：

a:须知：axios本身并不支持发送跨域的请求，没有提供相应的API，作者也暂没计划在axios添加支持发送跨域请求，所以只能使用第三方库

b:使用vue-resource发送跨域请求

c: 安装vue-resource并引入

npm info vue-resource #查看vue-resource 版本信息
　　 cnpm install vue-resource -S #等同于cnpm install vue-resource -save

d: 基本使用方法（使用this.$http发送请求）

this.$http.get(url, [options])

this.$http.head(url, [options])

this.$http.delete(url, [options])

this.$http.jsonp(url, [options])

this.$http.post(url, [body], [options])

this.$http.put(url, [body], [options])

this.$http.patch(url, [body], [options])

二、vue发送请求：

1.安装引入vue-resource方式：

1）npm install axios -S （直接下载axios组件，下载完毕后axios.js就存放在node_modules\axios\dist中），通过改路由的index.js引入：在index.js加入import VueResource from 'vue-resource'和Vue.use(VueResource)即可

2）网上直接下载axios.min.js文件，通过script src的方式进行文件的引入

2.post请求方式：

最后，推荐我们的管理工具给大家

上一篇: 全方位网站外链建设规划指南：提升网站排名和权重

下一篇: dbo是什么项目管理模式的简称

vue如何调用后端接口

热门文章