vuejs はどのようにしてバックエンドインターフェイスをリクエストしますか?-Vue.js-php.cn

vuejs はどのようにしてバックエンドインターフェイスをリクエストしますか?

藏色散人

リリース： 2021-11-02 14:51:37

オリジナル

10298 人が閲覧しました

vuejs がバックグラウンドインターフェイスをリクエストする方法: 1. axios をインストールして導入します; 2. get または post リクエストを使用します; 3. vue-resource をインストールして導入します; 4. vue-resource を使用して送信しますクロスドメインリクエスト。

vuejs はどのようにしてバックエンドインターフェイスをリクエストしますか?

この記事の動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

vuejs はどのようにしてバックグラウンドインターフェイスをリクエストしますか?

vue リクエストのバックグラウンドインターフェイスメソッド:

ue は、AJAX リクエストの直接送信をサポートしていないため、vue-resource などのプラグインを使用して実装する必要があります。そしてアクシオス。

1. axios を使用して AJAX リクエストを送信します:

1. axios をインストールして導入します:

1) npm install axios -S (axios コンポーネントを直接ダウンロードします。ダウンロードが完了すると、axios .js はnode_modules\axios\dist に保存されます)、最初に main.js に axios を導入します。axios コマンドを他のコンポーネントで使用できない場合は、「axios」からインポート axios をこのファイルに追加します。 axios を Vue のプロトタイプ属性として書き換えることができます: Vue.prototype.$http=axios. これらの 2 行のコードを main.js に追加した後、コンポーネントのメソッドで this.$http コマンドを直接使用できます。

2) axios.min.js ファイルをインターネットから直接ダウンロードし、スクリプト src

2 を通じてファイルを導入します。リクエストを送信します:

1) リクエストの形式を取得します:

a: axios([options]) (この形式では、すべてのデータが直接オプションに書き込まれます。オプションは実際には辞書です)

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) 投稿リクエストの形式:

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

ログイン後にコピー

3) クロスドメインリクエストの送信:

a: 注: axios 自体はクロスドメインリクエストの送信をサポートしておらず、対応する API も提供していません。作者は axios でクロスドメインリクエストの送信のサポートを追加する予定はないため、3 番目のリクエストのみを使用できます。 -party library

b: vue-resource を使用してクロスドメインリクエストを送信する

c: vue-resource をインストールして

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

ログイン後にコピー

d を導入する: 基本的な使い方 (これを使用します。 $http でリクエストを送信します)

　　 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 がリクエストを送信します:

1. vue-resource メソッドをインストールして導入します:

1) npm install axios - S (axios コンポーネントを直接ダウンロードします。ダウンロードは完了します。その後、axios.js は、node_modules\axios\dist に格納されます)、ルーティングを変更することで導入されます。index.js: add import VueResource from 'vue-resource' と Vue. use(VueResource) toindex.js

2) axios.min.js ファイルをインターネットから直接ダウンロードし、スクリプト src

2 を通じてファイルを導入します。ポストリクエストメソッド:

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

ログイン後にコピー

2. Get リクエストのメソッドは post と同じで、上記の post を get

に変更するだけです。推奨: "最新の 5 vue.js ビデオチュートリアルセレクション "

以上がvuejs はどのようにしてバックエンドインターフェイスをリクエストしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。