vuejs如何请求后台接口

这篇文章主要介绍“vuejs如何请求后台接口”,在日常操作中,相信很多人在vuejs如何请求后台接口问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vuejs如何请求后台接口”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

目前成都创新互联已为近1000家的企业提供了网站建设、域名、网站空间绵阳服务器托管、企业网站设计、竞秀网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

vuejs请求后台接口的方法:1、安装axios并引入;2、使用get或post请求;3、安装vue-resource并引入;4、使用vue-resource发送跨域请求。

vuejs如何请求后台接口

本文操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

vuejs怎么请求后台接口?

vue请求后台接口 方法:

ue不支持直接发送AJAX请求,需要使用vue-resource、axios等插件实现。

一.使用axios发送AJAX请求:

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]);

new Vue({
                el:'#itany',
                data:{
                    user:{
                        name:'alice',
                        age:19
                    },
                },
                methods:{
                    sendPost(){
                        // axios.post('server.php',{
                        //         name:'alice',
                        //         age:19
                        // }) //该方式发送数据是一个Request Payload的数据格式,一般的数据格式是Form Data格式,所有发送不出去数据
                        // axios.post('server.php','name=alice&age=20&') //方式1通过字符串的方式发送数据
                        axios.post('server.php',this.user,{  //方式2通过transformRequest方法发送数据,本质还是将数据拼接成字符串
                            transformRequest:[
                                function(data){
                                    let params='';
                                    for(let index in data){
                                        params+=index+'='+data[index]+'&';
                                    }
                                    return params;
                                }
                            ]
                        })
                        .then(resp => {
                            console.log(resp.data);
                        }).catch(err => {
                            console.log('请求失败:'+err.status+','+err.statusText);
                        });
                    },
                }
            });

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-resource发送请求:

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请求方式:

1)  this.$http({ method:'POST',  
                        url:'/a/b', //接口路径 data:{'a':'123124'}, //参数 
                        headers: {"X-Requested-With": "XMLHttpRequest"}, 
                        }).then((res) => { if(res.body.code == "0") {
                        this.data= res.body.result;
                    } else {
                        this.warnMessage = "获取班级失败";
                        this.colorMessage = "red"
                    }
                }).catch(err => {
                    this.warnMessage = "访问接口失败";
                    this.colorMessage = "red"
                })
2)this.$http.post('../a/b/c', {}, {
                    header: {},
                    emulateJSON: true
                }).then((res) => {
                    if(res.body.code == "0") {
                        this.data= res.body.result;
                    } else {
                        this.warnMessage = "获取班级失败";
                        this.colorMessage = "red"
                    }
                }).catch(err => {
                    this.warnMessage = "访问接口失败";
                    this.colorMessage = "red"
                })

2.get请求方式同post,直接将上面的post改为get即可

到此,关于“vuejs如何请求后台接口”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


网站栏目:vuejs如何请求后台接口
网址分享:http://scyanting.com/article/jsjhoj.html