How does vuejs request the backend interface?

The method for vuejs to request the background interface: 1. Install axios and introduce it; 2. Use get or post request; 3. Install vue-resource and introduce it; 4. Use vue-resource to send cross-domain requests.

The operating environment of this article: windows7 system, vue2.9.6 version, DELL G3 computer.

How does vuejs request the background interface?

vue request background interface method:

ue does not support sending AJAX requests directly, and needs to be implemented using plug-ins such as vue-resource and axios.

1. Use axios to send AJAX requests:

1. Install axios and introduce:

1) npm install axios -S (directly download the axios component, after the download is complete, axios .js is stored in node_modules\axios\dist), first introduce axios in main.js: add import axios from 'axios' to this file, if the axios command cannot be used in other components. You can rewrite axios as Vue's prototype attribute: Vue.prototype.$http=axios. After adding these two lines of code to main.js, you can use the this.$http command directly in the component's methods.

2) Download the axios.min.js file directly from the Internet and introduce the file through script src

2. Send a request:

1) Get request format :

a: axios([options]) (This format writes all data directly in options, options is actually a dictionary)

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 request format:

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) Send cross-domain request:

a: Note: axios itself does not support sending cross-domain requests and does not provide a corresponding API. The author has no plans to add support for sending cross-domain requests in axios, so you can only use third-party libraries

b: Use vue-resource to send cross-domain requests

c: Install vue-resource and introduce

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

d: Basic usage (use this.$http to send requests)

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

2. vue-resource sends a request:

1. Install and introduce vue-resource method:

1) npm install axios -S (directly download the axios component, download is complete After that, axios.js is stored in node_modules\axios\dist), and is introduced by changing the routing index.js: add import VueResource from 'vue-resource' and Vue.use(VueResource) to index.js

2) Download the axios.min.js file directly from the Internet and introduce the file through script src

2. Post request method:

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 request method is the same as post, Simply change the above post to get

Recommended: "The latest 5 vue.js video tutorial selections"

The above is the detailed content of How does vuejs request the backend interface?. For more information, please follow other related articles on the PHP Chinese website!