How does vuejs request the backend interface?-Vue.js-php.cn

How does vuejs request the backend interface?

藏色散人

Release： 2021-11-02 14:51:37

Original

10297 people have browsed it

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.

How does vuejs request the backend interface?

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>

Copy after login

2) Post request format:

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);
                        });
                    },
                }
            });

Copy after login

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

Copy after login

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

Copy after login

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:&#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"
                })

Copy after login

2. Get request method is the same as post, Simply change the above post to get

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!