vuejs怎么请求后台接口-Vue.js-PHP中文网

vuejs怎么请求后台接口

藏色散人

发布： 2021-11-02 14:51:37

原创

10123人浏览过

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

<script>     
    new Vue({
             el:&#39;#itany&#39;,
             data:{
                user:{
                     name:&#39;alice&#39;,
                     age:19
                    },
                },
                methods:{
                    send(){
                        axios({//格式a
                            method:&#39;get&#39;,
                            url:&#39;http://www.baidu.com?name=tom&age=23&#39;
                        }).then(function(resp){
                            console.log(resp.data);
                        }).catch(resp => {
                            console.log(&#39;请求失败：&#39;+resp.status+&#39;,&#39;+resp.statusText);
                        });
                    },
                    sendGet(){//格式b
                        axios.get(&#39;server.php&#39;,{
                            params:{
                                name:&#39;alice&#39;,
                                age:19
                            }
                        })
                        .then(resp => {
                            console.log(resp.data);
                        }).catch(err => {             //
                            console.log(&#39;请求失败：&#39;+err.status+&#39;,&#39;+err.statusText);
                        });
                    },
                }
            });
    </script>

登录后复制

2）post请求格式：

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

new Vue({
                el:&#39;#itany&#39;,
                data:{
                    user:{
                        name:&#39;alice&#39;,
                        age:19
                    },
                },
                methods:{
                    sendPost(){
                        // axios.post(&#39;server.php&#39;,{
                        //         name:&#39;alice&#39;,
                        //         age:19
                        // }) //该方式发送数据是一个Request Payload的数据格式，一般的数据格式是Form Data格式，所有发送不出去数据
                        // axios.post(&#39;server.php&#39;,&#39;name=alice&age=20&&#39;) //方式1通过字符串的方式发送数据
                        axios.post(&#39;server.php&#39;,this.user,{  //方式2通过transformRequest方法发送数据，本质还是将数据拼接成字符串
                            transformRequest:[
                                function(data){
                                    let params=&#39;&#39;;
                                    for(let index in data){
                                        params+=index+&#39;=&#39;+data[index]+&#39;&&#39;;
                                    }
                                    return params;
                                }
                            ]
                        })
                        .then(resp => {
                            console.log(resp.data);
                        }).catch(err => {
                            console.log(&#39;请求失败：&#39;+err.status+&#39;,&#39;+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:&#39;POST&#39;,  
                        url:&#39;/a/b&#39;, //接口路径 data:{&#39;a&#39;:&#39;123124&#39;}, //参数 
                        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(&#39;../a/b/c&#39;, {}, {
                    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即可

推荐：《最新的5个vue.js视频教程精选》

以上就是vuejs怎么请求后台接口的详细内容，更多请关注php中文网其它相关文章！