Axios を使用して Vue プロジェクトでページ分割されたデータをリクエストおよび表示する方法

Axios を使用して Vue プロジェクトでページ分割されたデータをリクエストおよび表示する方法

Vue プロジェクトでは、ページ分割されたデータをリクエストおよび表示する必要がよく発生します。データのリクエストと処理を容易にするために、Axios ライブラリを使用して実装できます。 Axios は、ブラウザーと Node.js 環境で使用できる Promise ベースの HTTP ライブラリです。

まず、Vue プロジェクトに Axios ライブラリをインストールします。 npm コマンドを使用して Axios をインストールし、ターミナルを開いて次のコマンドを入力します。

npm install axios

インストールが完了したら、Axios を使用する必要があるコンポーネントに Axios を導入します。

import axios from 'axios'

次に、ページング データを表示し、データ要求を行うためのページング コンポーネントを作成できます。コンポーネントのデータ オプションで、一般的に使用されるページング関連のデータを定義します。

data() {
  return {
    currentPage: 1, // 当前页码
    pageSize: 10, // 每页显示的数量
    total: 0, // 数据总条数
    dataList: [] // 分页数据列表
  }
},

コンポーネントの作成されたフック関数で、ページを初期化するデータを要求する関数を呼び出すことができます。

created() {
  this.getDataList()
},

次に、データを要求するメソッド getDataList を定義します。このメソッドでは、Axios を使用して GET リクエストを送信し、バックエンド インターフェイスにページ分割されたデータを取得するようリクエストします。

methods: {
  getDataList() {
    const apiUrl = 'http://example.com/api/dataList' // 请求接口的URL
    const params = { 
      page: this.currentPage, 
      limit: this.pageSize 
    } // 请求参数，包括当前页码和每页显示的数量
    axios.get(apiUrl, { params })
      .then(response => {
        this.dataList = response.data.list // 获取返回的数据列表
        this.total = response.data.total // 获取返回的数据总条数
      })
      .catch(error => {
        console.log(error)
      })
  }
}

まず、リクエスト インターフェイスの URL を定義します。次に、Axios の get メソッドを使用して GET リクエストを送信し、インターフェイスの URL とリクエスト パラメータの params を渡します。リクエストが成功すると、返されたデータリストresponse.data.listとデータ項目の総数response.data.totalが取得され、コンポーネントのdataList変数とtotal変数に代入されます。

次に、ページ分割されたデータをページ上に表示できます。テンプレートで v-for 命令を使用して、dataList 配列をループし、各ループのデータの内容を表示します。

<div v-for="item in dataList" :key="item.id">
  <!-- 显示数据的内容 -->
</div>

ページング機能を実装するには、ユーザーが別のページ番号を選択できるように、ページにページネータを表示する必要もあります。ヘルパー関数を使用して、ポケットベルのページ番号のリストを生成できます。

computed: {
  pageList() {
    const pages = Math.ceil(this.total / this.pageSize) // 计算页码总数
    const pageList = []
    
    for (let i = 1; i <= pages; i++) {
      pageList.push(i) // 将页码加入数组
    }
    
    return pageList
  }
}

テンプレートでは、v-for 命令を通じて pageList 配列をトラバースし、v-bind を使用してクラス名と現在のページ番号を動的にバインドできます。

<ul class="pagination">
  <li v-for="page in pageList" :key="page" :class="{ active: page === currentPage }">
    <a @click="setCurrentPage(page)">{{ page }}</a>
  </li>
</ul>

class 属性を active に設定すると、現在のページ番号に選択スタイルを追加して、ユーザーの識別を容易にすることができます。

最後に、現在のページ番号を切り替えてデータを再リクエストするために、setCurrentPage メソッドを実装する必要もあります。

methods: {
  // ...
  setCurrentPage(page) {
    this.currentPage = page
    this.getDataList()
  }
}

setCurrentPage メソッドでは、現在のページ番号を受信ページの値に設定し、getDataList メソッドを呼び出してデータを再度リクエストします。

ここまでで、Vue プロジェクトで Axios を使用してページング データを要求して表示する機能が完成しました。 Axios ライブラリを使用することで、データの要求と処理がより便利になり、開発効率が向上します。

上記は、Axios を使用して Vue プロジェクトでページ分割されたデータをリクエストおよび表示する方法の詳細な手順です。

以上がAxios を使用して Vue プロジェクトでページ分割されたデータをリクエストおよび表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。