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: [] // 分页数据列表
  }
},

컴포넌트에 생성된 Hook 함수에서 페이지 초기화를 위한 데이터를 요청하는 함수를 호출할 수 있습니다.

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>

클래스 속성을 활성으로 설정하면 현재 페이지 번호에 선택 스타일을 추가하여 사용자 식별을 용이하게 할 수 있습니다.

마지막으로 현재 페이지 번호를 전환하고 데이터를 다시 요청하려면 setCurrentPage 메서드도 구현해야 합니다.

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

setCurrentPage 메소드에서는 현재 페이지 번호를 들어오는 페이지 값으로 설정하고 getDataList 메소드를 호출하여 데이터를 다시 요청합니다.

지금까지 Vue 프로젝트에서 Axios를 사용하여 페이징 데이터를 요청하고 표시하는 기능을 완료했습니다. Axios 라이브러리를 사용하면 보다 편리하게 데이터를 요청하고 처리할 수 있으며 개발 효율성을 높일 수 있습니다.

위 내용은 Vue 프로젝트에서 Axios를 사용하여 페이지가 매겨진 데이터를 요청하고 표시하는 방법에 대한 자세한 단계입니다. 도움이 되길 바랍니다.

위 내용은 Axios를 사용하여 Vue 프로젝트에서 페이지가 매겨진 데이터를 요청하고 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!