Comment vuejs demande-t-il l'interface backend ?-Voir.js-php.cn

Comment vuejs demande-t-il l'interface backend ?

藏色散人

Libérer： 2021-11-02 14:51:37

original

10296 Les gens l'ont consulté

Comment demander l'interface d'arrière-plan de vuejs : 1. Installez axios et introduisez-le ; 2. Utilisez get ou post request ; 3. Installez vue-resource et introduisez-le 4. Utilisez vue-resource pour envoyer des requêtes inter-domaines.

Comment vuejs demande-t-il l'interface backend ?

L'environnement d'exploitation de cet article : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Comment vuejs demande-t-il l'interface backend ?

Méthode d'interface backend de requête Vue :

ue ne prend pas en charge l'envoi direct de requêtes AJAX et doit être implémenté à l'aide de plug-ins tels que vue-resource et axios.

1. Utilisez axios pour envoyer des requêtes AJAX :

1. Installez axios et introduisez :

1) npm install axios -S (téléchargez directement le composant axios, et axios.js sera d'abord stocké dans node_modulesaxiosdist après le téléchargement). dans main Introduisez axios dans .js : ajoutez import axios from 'axios' à ce fichier, si la commande axios ne peut pas être utilisée dans d'autres composants. Vous pouvez réécrire axios en tant qu'attribut prototype de Vue : Vue.prototype.$http=axios Après avoir ajouté ces deux lignes de code à main.js, vous pouvez utiliser la commande this.$http directement dans les méthodes du composant.

2) Téléchargez le fichier axios.min.js directement depuis Internet et introduisez le fichier via le script src

2 Envoyez une demande :

1) Obtenez le format de la demande :

a : axios([options]) ( Ce format écrit directement toutes les données dans options, qui est en fait un dictionnaire)

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>

Copier après la connexion

2) format de demande de publication :

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

Copier après la connexion

3) Envoyer des requêtes inter-domaines :

a : Remarque : axios lui-même ne prend pas en charge l'envoi de requêtes inter-domaines et ne fournit pas d'API correspondante. L'auteur n'a pas l'intention d'ajouter du support à. axios pour l'instant. Envoyez des requêtes inter-domaines, vous ne pouvez donc utiliser que des bibliothèques tierces

b : Utilisez vue-resource pour envoyer des requêtes inter-domaines

c : Installez vue-resource et introduisez

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

Copier après la connexion

d : Utilisation de base ( utilisez this.$http pour envoyer des requêtes)

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

Copier après la connexion

II. vue-resource envoie une requête :

1 Installez et introduisez la méthode vue-resource :

1) npm install axios -S (téléchargez directement le composant axios, et axios.js sera stocké dans node_modulesaxiosdist après le téléchargement), introduit en modifiant le routage index.js : ajoutez l'importation VueResource de 'vue-resource' et Vue.use(VueResource) vers index.js

2) Téléchargez le axios.min .js directement à partir d'Internet et utilisez la méthode script src pour introduire les fichiers

2.Méthode de demande de publication :

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

Copier après la connexion

2.La méthode de demande d'obtention est la même que la publication, modifiez simplement la publication ci-dessus pour obtenir

Recommandé : " Les 5 derniers tutoriels vidéo vue.js" Sélectionnez 》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!