Bagaimanakah vuejs meminta antara muka bahagian belakang?

Kaedah vuejs meminta antara muka latar belakang: 1. Pasang axios dan perkenalkannya; -permintaan domain.

Persekitaran pengendalian artikel ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Bagaimanakah vuejs meminta antara muka bahagian belakang?

kaedah antara muka hujung belakang permintaan vue:

ue tidak menyokong penghantaran permintaan AJAX secara langsung dan perlu dilaksanakan menggunakan pemalam seperti vue-resource dan aksios.

1. Gunakan axios untuk menghantar permintaan AJAX:

1 Pasang axios dan perkenalkannya:

1) npm install axios -S (muat turun terus komponen axios, selepas memuat turun. axios .js disimpan dalam node_modulesaxiosdist), mula-mula memperkenalkan axios dalam main.js: tambah axios import daripada 'axios' ke fail ini, jika arahan axios tidak boleh digunakan dalam komponen lain. Anda boleh menulis semula axios sebagai atribut prototaip Vue: Vue.prototype.$http=axios Selepas menambah dua baris kod ini ke main.js, anda boleh menggunakan arahan this.$http secara langsung dalam kaedah komponen.

2) Muat turun fail axios.min.js terus dari Internet dan import fail melalui skrip src

2. Hantar permintaan:

1) Dapatkan format permintaan :

a: axios([options]) (Format ini menulis semua data terus dalam pilihan, pilihan sebenarnya kamus)

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) format permintaan siaran:

a: axios.post(url,data,[pilihan]);

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) Hantar Palang- permintaan domain:

a: Nota: axios sendiri tidak menyokong penghantaran permintaan merentas domain dan tidak menyediakan API yang sepadan Pengarang tidak bercadang untuk menambah sokongan untuk menghantar permintaan merentas domain dalam axios, jadi anda hanya boleh menggunakan pustaka pihak Ketiga

b: Gunakan vue-resource untuk menghantar permintaan merentas domain

c: Pasang vue-resource dan perkenalkannya

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

d: Penggunaan asas (gunakan ini. $http menghantar permintaan)

　　 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 menghantar permintaan:

1 🎜>1) npm install axios -S (Muat turun terus komponen axios. Selepas muat turun selesai, axios.js akan disimpan dalam node_modulesaxiosdist dengan menukar routing index.js: Tambah import VueResource daripada 'vue-resource). ' dan Vue.use(VueResource) ke index.js

2) Muat turun fail axios.min.js terus dari Internet dan perkenalkan fail melalui skrip src

2 kaedah:

2. Kaedah permintaan dapatkan adalah sama seperti siaran, cuma tukar siaran di atas untuk mendapatkan

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"
                })

Disyorkan: "

Tutorial video 5 vue.js yang terkini pilihan

"

Atas ialah kandungan terperinci Bagaimanakah vuejs meminta antara muka bahagian belakang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!