Wie fordert vuejs die Backend-Schnittstelle an?

So fordern Sie die Hintergrundschnittstelle von vuejs an: 1. Installieren Sie axios und stellen Sie sie vor. 3. Installieren Sie vue-resource und führen Sie sie ein. 4. Verwenden Sie vue-resource, um domänenübergreifende Anfragen zu senden.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Wie fordert VueJs die Backend-Schnittstelle an?

vue-Anfrage-Backend-Schnittstellenmethode:

ue unterstützt das direkte Senden von AJAX-Anfragen nicht und muss mithilfe von Plug-Ins wie vue-resource und axios implementiert werden.

1. Verwenden Sie Axios, um AJAX-Anfragen zu senden:

1. Installieren Sie Axios und führen Sie Folgendes ein:

1) npm install axios -S (laden Sie die Axios-Komponente direkt herunter, und axios.js wird nach dem Herunterladen in node_modulesaxiosdist gespeichert). in main Einführung von axios in .js: Fügen Sie import axios from 'axios' zu dieser Datei hinzu, wenn der axios-Befehl nicht in anderen Komponenten verwendet werden kann. Sie können Axios als Prototypattribut von Vue umschreiben: Vue.prototype.$http=axios Nachdem Sie diese beiden Codezeilen zu main.js hinzugefügt haben, können Sie den Befehl this.$http direkt in den Methoden der Komponente verwenden.

2) Laden Sie die Datei axios.min.js direkt aus dem Internet herunter und importieren Sie die Datei über das Skript src

2. Senden Sie eine Anfrage:

1) Holen Sie sich das Anfrageformat:

a: axios([Optionen]) ( Dieses Format schreibt alle Daten direkt in Optionen, was eigentlich ein Wörterbuch ist ,[Optionen]);

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

3) Domänenübergreifende Anfragen senden:

a: Hinweis: Axios selbst unterstützt das Senden domänenübergreifender Anfragen nicht und stellt keine entsprechende API bereit. Der Autor hat nicht vor, Unterstützung hinzuzufügen axios noch. Senden Sie domänenübergreifende Anfragen, sodass Sie nur Bibliotheken von Drittanbietern verwenden können.

b: Verwenden Sie vue-resource, um domänenübergreifende Anfragen zu senden. Verwenden Sie this.$http, um Anfragen zu senden.)

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

II axios.js wird nach dem Herunterladen in node_modulesaxiosdist gespeichert, eingeführt durch Ändern des Routings index.js: Import VueResource von 'vue-resource' und Vue.use(VueResource) zu index.js hinzufügen

2) Laden Sie axios.min herunter .js-Datei direkt online und verwenden Sie die Methode „script src“, um Dateien einzuführen

2 Die neuesten 5 vue.js-Video-Tutorials Wählen Sie

》

Das obige ist der detaillierte Inhalt vonWie fordert vuejs die Backend-Schnittstelle an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!