Vue と Axios はページとデータ間のシームレスな接続を実現します-Vue.js-php.cn

Vue と Axios はページとデータ間のシームレスな接続を実現します

王林

リリース： 2023-07-18 23:49:44

オリジナル

931 人が閲覧しました

Vue と Axios はページとデータのシームレスな接続を実現します

インターネット技術の継続的な発展に伴い、フロントエンドとバックエンドを分離する開発モデルが主流になってきました。フロントエンド開発では、Vue フレームワークは、動的でインタラクティブな単一ページアプリケーションを構築するために広く使用されています。 Axios は、ネットワークリクエストのフロントエンド開発で一般的に使用される Promise ベースの HTTP ライブラリです。

実際の開発では、バックエンドからデータを取得してフロントエンドに表示する必要があることがよくあります。このとき、Vue と Axios を組み合わせることで、ページとデータ間のシームレスな接続を実現できます。

以下では、簡単な例を使用して、Vue と Axios を使用してページとデータ間のシームレスな接続を実現する方法を示します。

まず、Vue CLI を使用して Vue プロジェクトを初期化する必要があります。コマンドラインに次のコマンドを入力します。

vue create vue-axios-demo

ログイン後にコピー

次に、コマンドラインプロンプトに従ってプロジェクト名と構成を選択し、プロジェクトの初期化が完了するまで待ちます。

次に、プロジェクトのルートディレクトリで src ディレクトリを見つけ、そのディレクトリに components という名前のフォルダーを作成します。 components フォルダーに、UserList.vue という名前のファイルを作成します。このファイルはユーザーリストを表示するために使用されます。

UserList.vue では、Vue のテンプレート構文を使用して、ユーザーリストの表示方法を定義できます。以下は簡単な例です。

<template>
  <div>
    <h1>User List</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],
    };
  },
  mounted() {
    // 在页面加载完成后，调用获取用户列表的函数
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      // 使用Axios发送HTTP请求获取用户列表数据
      axios
        .get("/api/users")
        .then((response) => {
          this.users = response.data;
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};
</script>

ログイン後にコピー

上記のコードでは、まずユーザーリストのタイトルと、ユーザーリストを表示するための ul タグを定義します。 v-for ディレクティブを使用すると、li タグ内の user 配列をループし、各ユーザーの名前を表示します。

mounted ライフサイクルフック関数では、fetchUsers 関数を呼び出します。この関数は、Axios を使用して HTTP リクエストを送信し、ユーザーリストデータを取得します。リクエストが成功すると、取得したデータを users 配列に割り当て、それをテンプレートにレンダリングします。

次に、ルートディレクトリの App.vue で、UserList コンポーネントをグローバルコンポーネントとしてインポートして登録する必要があります。 App.vue ファイルを次のように変更します。

<template>
  <div id="app">
    <UserList />
  </div>
</template>

<script>
import UserList from "./components/UserList.vue";

export default {
  components: {
    UserList,
  },
};
</script>

ログイン後にコピー

上記のコードでは、最初に UserList.vue コンポーネントをインポートし、それを に配置しました。コンポーネントオプションに登録します。

これで、ページとデータ間のシームレスな接続が完了しました。プロジェクトを実行すると、ページにユーザーリストのタイトルが表示され、ユーザーの名前はバックエンドから返されたデータに基づいて動的に表示されます。

この例では HTTP リクエストの送信に axios を使用しているため、最初にコマンドラインに axios ライブラリをインストールする必要があることに注意してください。プロジェクトのルートディレクトリで次のコマンドを実行します。