正文

Vue分页组件实战：轻松实现前后端数据交互，案例教学一步到位

/0 浏览量
0624

在开发Web应用时，分页功能是必不可少的。它可以帮助用户更方便地浏览大量数据。Vue.js作为一款流行的前端框架，提供了丰富的组件库，其中包括分页组件。本文将带你通过一个实战案例，学习如何使用Vue实现前后端数据交互的分页功能。

一、分页组件的基本概念

分页组件通常包含以下功能：

  • 显示总页数
  • 当前页码
  • 每页显示数量
  • 首页、上一页、下一页、尾页按钮
  • 输入页码跳转

二、Vue分页组件的实现

2.1 创建Vue项目

首先，我们需要创建一个Vue项目。可以使用Vue CLI命令行工具快速生成项目：

vue create vue-pagination-project

2.2 安装相关依赖

在项目中安装axios库，用于发送HTTP请求：

npm install axios --save

2.3 创建分页组件

在项目中创建一个名为Pagination.vue的组件：

<template>
  <div>
    <div>
      <span>共 {{ total }} 条数据</span>
      <span>每页显示</span>
      <select v-model="pageSize">
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="20">20</option>
      </select>
      <span>条</span>
    </div>
    <div>
      <button @click="goPage(1)" :disabled="currentPage <= 1">首页</button>
      <button @click="prevPage" :disabled="currentPage <= 1">上一页</button>
      <button @click="nextPage" :disabled="currentPage >= totalPages">下一页</button>
      <button @click="goPage(totalPages)" :disabled="currentPage >= totalPages">尾页</button>
      <input type="text" v-model="jumpPage" @keyup.enter="goPage(jumpPage)" />
      <span>跳转到</span>
      <span>{{ totalPages }}</span>
      <span>页</span>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      totalPages: 0,
      jumpPage: '',
    };
  },
  methods: {
    fetchData() {
      axios.get('/api/data', {
        params: {
          page: this.currentPage,
          size: this.pageSize,
        },
      }).then((response) => {
        this.total = response.data.total;
        this.totalPages = Math.ceil(this.total / this.pageSize);
        this.$emit('data', response.data.data);
      });
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.fetchData();
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.fetchData();
      }
    },
    goPage(page) {
      if (page > 0 && page <= this.totalPages) {
        this.currentPage = page;
        this.fetchData();
      }
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>

2.4 使用分页组件

在父组件中，引入并使用分页组件：

<template>
  <div>
    <pagination @data="handleData"></pagination>
    <ul>
      <li v-for="item in dataList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import Pagination from './Pagination.vue';

export default {
  components: {
    Pagination,
  },
  data() {
    return {
      dataList: [],
    };
  },
  methods: {
    handleData(data) {
      this.dataList = data;
    },
  },
};
</script>

2.5 后端接口

在后端，我们需要提供一个接口用于获取分页数据。以下是使用Node.js和Express框架实现的示例：

const express = require('express');
const app = express();

app.get('/api/data', (req, res) => {
  const page = parseInt(req.query.page, 10);
  const size = parseInt(req.query.size, 10);
  const total = 100; // 假设有100条数据
  const data = [];

  for (let i = (page - 1) * size; i < page * size; i++) {
    data.push({
      id: i,
      name: `Item ${i + 1}`,
    });
  }

  res.json({
    total,
    data,
  });
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

三、总结

通过本文的实战案例，我们学习了如何使用Vue实现前后端数据交互的分页功能。在实际开发中，可以根据需求对分页组件进行扩展和优化。希望本文能帮助你更好地掌握Vue分页组件的使用。

-- 展开阅读全文 --