Vue分页插件的前后端配置与使用

1. 前期准备

在使用Vue分页插件之前，需要准备好以下工具和环境：

• Vue.js：Vue分页插件是建立在Vue.js之上的。
• Axios：如果需要从后端获取数据，则需要使用Axios来发送HTTP请求。
• 一个后端接口：如果需要从后端获取数据，则需要先准备好相应的后端接口。

• 分页插件：Vue.js官方推荐的分页插件有Vue-Pagination和Vue2-Paginator，本文以Vue2-Paginator为例。

• 后端配置

如果需要从后端获取数据，则需要在后端准备好相应的接口。下面使用Node.js作为后端，介绍如何准备一个获取数据的接口。

2.1 安装依赖

在开始之前，需要全局安装express和cors依赖：

npm install -g express cors

2.2 编写接口

接下来创建一个server.js文件，该文件中包含了获取数据的接口：

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

const app = express();
app.use(cors()); // 跨域请求

const data = [];

// 生成测试数据
for (let i = 0; i < 100; i++) {
    data.push({
        id: i + 1,
        title: `第${i + 1}篇文章`,
        content: `第${i + 1}篇文章的内容`,
    });
}

app.get('/api/posts', (req, res) => {
    const page = parseInt(req.query.page) || 1; // 当前页码，默认为第一页
    const perPage = parseInt(req.query.perPage) || 10; // 每页显示数目，默认为10

    const start = (page - 1) * perPage; // 当前页的起始记录序号
    const end = start + perPage; // 当前页的终止记录序号

    const posts = data.slice(start, end); // 获取当前页的数据

    res.json({
        page,
        perPage,
        total: data.length,
        data: posts,
    });
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
    console.log(`Server is running on port ${port}.`);
});

该接口会返回一个包含文章列表的JSON数据。

1. 前端配置

接下来，在Vue.js项目中使用Vue2-Paginator插件进行分页。

3.1 安装插件

首先，需要安装Vue2-Paginator插件，可以通过npm安装：

npm install --save vue2-paginator

3.2 引入插件

在Vue.js项目中，需要引入Vue2-Paginator插件：

import Vue from 'vue';
import VuePaginator from 'vue2-paginator';

Vue.component('vue-paginator', VuePaginator);

3.3 使用插件

在Vue.js项目中使用Vue2-Paginator插件非常简单，只需要在模板中添加以下代码即可：

<vue-paginator
    :resource.sync="posts"
    :resource_url="'/api/posts'"
    :api_mode="true"
    :page_count.sync="pageCount"
    :options="{
        remote_data: 'data', // 数据列表字段
        page_param: 'page', // 当前页码字段
        per_page_param: 'perPage', // 每页显示数目字段
    }"
></vue-paginator>

上述代码中，resource、resource_url和page_count是Vue组件的属性，需要在Vue组件的data()方法中初始化。

export default {
    data() {
        return {
            posts: [], // 文章列表
            pageCount: 0, // 总页数，需要通过接口获取
        };
    },

1. 示例说明

下面分别给出了两个示例，分别是：

• 在不需要从后端获取数据时，如何使用Vue2-Paginator插件。
• 在需要从后端获取分页数据时，如何通过Axios从后端获取数据，并在Vue组件中使用Vue2-Paginator插件进行分页。

4.1 示例一

假设我们已经有了一份包含100篇文章的数据列表，想要在前端使用Vue2-Paginator对这份数据进行分页展示。可以在代码中添加如下代码：

<template>
    <div>
        <div v-for="post in posts" :key="post.id">{{ post.title }}</div>
        <vue-paginator
            :resource.sync="posts"
            :options="{
                remote_data: false, // 本地数据不需要使用远程API
            }"
        ></vue-paginator>
    </div>
</template>

<script>
import VuePaginator from 'vue2-paginator';

export default {
    components: {
        VuePaginator,
    },
    data() {
        return {
            posts: [], // 文章列表
        };
    },
    created() {
        // 生成测试数据
        for (let i = 0; i < 100; i++) {
            this.posts.push({
                id: i + 1,
                title: `第${i + 1}篇文章`,
                content: `第${i + 1}篇文章的内容`,
            });
        }
    },
};
</script>

上述代码中，remote_data属性设置为false，表示使用本地数据进行分页展示。

4.2 示例二

现在假设我们需要从后端获取文章列表，并在前端使用Vue2-Paginator插件进行分页展示。可以在代码中添加如下代码：

<template>
    <div>
        <div v-for="post in posts" :key="post.id">{{ post.title }}</div>
        <vue-paginator
            :resource.sync="posts"
            :resource_url="'/api/posts'"
            :page_count.sync="pageCount"
            :api_mode="true"
            :options="{
                remote_data: 'data', // 数据列表字段
                page_param: 'page', // 当前页码字段
                per_page_param: 'perPage', // 每页显示数目字段
            }"
        ></vue-paginator>
    </div>
</template>

<script>
import axios from 'axios';
import VuePaginator from 'vue2-paginator';

export default {
    components: {
        VuePaginator,
    },
    data() {
        return {
            posts: [], // 文章列表
            pageCount: 0, // 总页数，需要通过接口获取
        };
    },
    created() {
        this.getPageData();
    },
    methods: {
        getPageData(page = 1, perPage = 10) {
            axios.get('/api/posts', {
                params: {
                    page,
                    perPage,
                },
            })
                .then((response) => {
                    this.posts = response.data.data; // 设置文章列表数据
                    this.pageCount = Math.ceil(response.data.total / perPage); // 计算总页数
                })
                .catch((error) => {
                    console.error(error);
                });
        },
    },
};
</script>

上述代码中，getPageData()方法可以通过Axios从后端获取文章列表数据，并设置文章列表以及总页数。另外，remote_data属性设置为'data'，表示需要从远程API获取数据，并且数据列表字段为'data'。