How to use Axios to request and display paginated data in Vue projects

How to use Axios to request and display paginated data in the Vue project

In the Vue project, we often encounter the need to request and display paginated data. In order to facilitate data request and processing, we can use the Axios library to implement it. Axios is a Promise-based HTTP library that can be used in browsers and Node.js environments.

First, install the Axios library in the Vue project. Use the npm command to install Axios, open a terminal and enter the following command:

npm install axios

After the installation is complete, introduce Axios into the components that need to use Axios.

import axios from 'axios'

Next, we can create a paging component to display paging data and make data requests. In the data option of the component, we will define some commonly used paging-related data.

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

In the component's created hook function, we can call the function that requests data to initialize the page.

created() {
  this.getDataList()
},

Next, we define a method getDataList to request data. In this method, we use Axios to send a GET request and request the backend interface to obtain paginated data.

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

First, we define the URL of the request interface. Then, we use the get method of Axios to send a GET request, passing in the URL of the interface and the request parameter params. After the request is successful, the returned data list response.data.list and the total number of data items response.data.total are obtained, and assigned to the dataList and total variables of the component.

Next, we can display paginated data on the page. Use the v-for instruction in the template to loop through the dataList array and display the content of the data in each loop.

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

In order to implement the paging function, we also need to display a paginator on the page so that users can select different page numbers. A helper function can be used to generate a list of page numbers for the pager.

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

In the template, we can traverse the pageList array through the v-for instruction and use v-bind to dynamically bind the class name and the current page number.

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

By setting the class attribute to active, you can add a selection style to the current page number to facilitate user identification.

Finally, we also need to implement the setCurrentPage method to switch the current page number and re-request data.

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

In the setCurrentPage method, we set the current page number to the incoming page value and call the getDataList method to request data again.

So far, we have completed the function of requesting and displaying paging data using Axios in the Vue project. By using the Axios library, we can more conveniently request and process data and improve development efficiency.

The above are the detailed steps on how to use Axios to request and display paginated data in the Vue project. I hope it will be helpful to you!

The above is the detailed content of How to use Axios to request and display paginated data in Vue projects. For more information, please follow other related articles on the PHP Chinese website!