Vueでバックエンドに接続する方法

Vue は、ユーザー インターフェイスを構築するための JavaScript フレームワークです。学習が簡単で、カスタマイズが可能で、複雑な単一ページのアプリケーションを簡単に作成できるなど、多くの利点があります。 Vue は通常、フロントエンド構築の観点から問題を検討しますが、データベースやサーバーなどのバックエンド アプリケーションと通信するには、多くのプロジェクトでバックエンドと統合する必要があります。この記事では、Vue を使用してバックエンドと対話する方法を紹介します。

1. バックエンド設定

開始する前に、バックエンド アプリケーションが Vue からのリクエストを受信できることを確認してください。これには通常、Vue にリクエストを送信し、レスポンスを受信するように API エンドポイントを設定する必要があります。バックエンド コードでは、Vue アプリケーションによって送信されるすべてのリクエストのルートを定義する必要があります。ルーティングは、アプリケーション内のどの関数が Vue リクエストに応答するかを決定します。

次のコードをルーティング ファイルに追加します:

app.get('/getdata', function(req, res) {

res.send（sampledata）;

});

上記のコードは、ブラウザーで「/getdata」エンドポイントが GET されたときに、コードで定義された応答が返されるように、アプリケーションのルーティングを定義します。

2. Vue アプリケーションからのリクエストの送信

Vue がバックエンド データをリクエストする主な方法は、Vue Resource プラグインを使用することです。 Vue リソースは、HTTP リクエストの送信に使用できる Vue のサービスを提供する HTTP ライブラリです。

次のコードを Vue コンポーネントに追加します:

import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource) ;

デフォルトのエクスポート {

name: 'my-component',
data () {
  return {
    results: {}
  }
},
created () {
    this.$http.get('/getdata')
        .then(response => {
            this.results = response.body;
        }, response => {
            console.log('Error fetching data');  
        });
    }

}

上記のコードでは、コンポーネントが作成されると、Vue の $http サービスを呼び出して、サーバーに GET リクエストを送信します。 、および will 応答がコンポーネントに返されます。リクエストがデータを正常に返した場合、そのデータを使用してコンポーネントのテンプレートがレンダリングされます。

3. バックエンド応答の処理

Vue リソースが応答を受信すると、Promise オブジェクトを返します。このオブジェクトを使用して、応答が成功したかどうかを確認し、成功した場合は応答のデータを使用できます。

上記のコードでは、応答が成功すると、応答本文のデータがコンポーネントの結果オブジェクトに保存されます。このオブジェクトは、Vue テンプレートをレンダリングするために使用されます。リクエストが失敗すると、エラー メッセージが出力されます。

これは、Vue を使用してバックエンドと対話する方法の基本的な方法です。 POST、PUT、DELETE メソッドを使用したリクエストの送信、フォーム データの送信と処理など、より高度な機能を使用するには、Vue リソースのドキュメントを参照してください。

概要

Vue は、最新の Web アプリケーションにとって重要なテクノロジです。 Vue Resource プラグインは、バックエンドと対話するための主要なツールです。 Vue アプリケーションを構築する場合、Vue リソースをアプリケーションに統合することが必須です。サーバーが Vue リクエストを受信し、アプリケーションに応答を返すように設定されていることを確認してください。 Vue リソースのドキュメントを見ると、Vue がより多くの機能を使用してバックエンドと対話する方法を知ることができます。

以上がVueでバックエンドに接続する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。