前端接口
数据分页加载数据通常需要以下步骤：
1. 在后端编写
分页查询接口，接口需要接收当前页码和每页显示的
数据条数作为参数，并返回对应页码的
数据。
2. 在前端编写
分页组件，组件需要显示当前页码和总页数，并且需要绑定点击事件，当用户点击某一页码时，组件需要向后端发送请求获取对应页码的
数据。
3. 在前端编写
数据渲染逻辑，当获取到后端返回的
数据时，需要将
数据渲染到页面上。
以下是一个简单的示例代码：
```javascript
// 后端接口示例：
// GET /api/data?
page=2&
pageSize=10
// 返回对应页码的
数据
// 前端
分页组件示例：
Vue.component('
pagination', {
props: {
total: {
type: Number,
required: true
},
pageSize: {
type: Number,
default: 10
},
current: {
type: Number,
default: 1
}
},
computed: {
pageCount() {
return Math.ceil(this.total / this.
pageSize);
},
pages() {
const
pages = [];
for (let i = 1; i <= this.
pageCount; i++) {
pages.push(i);
}
return
pages;
}
},
methods: {
handleClick(
page) {
this.$emit('change',
page);
}
},
template: `
<ul>
<li v-if="current > 1" @click="handleClick(current - 1)">上一页</li>
<li v-for="
page in
pages" :class="{ active:
page === current }" @click="handleClick(
page)">{{
page }}</li>
<li v-if="current <
pageCount" @click="handleClick(current + 1)">下一页</li>
</ul>
`
});
// 前端
数据渲染逻辑示例：
new Vue({
el: '#app',
data: {
data: [],
total: 0,
current: 1
},
methods: {
async fetchData() {
const res = await axios.get('/api/data', {
params: {
page: this.current,
pageSize: 10
}
});
this.data = res.data.list;
this.total = res.data.total;
},
handle
PageChange(
page) {
this.current =
page;
this.fetchData();
}
},
mounted() {
this.fetchData();
},
template: `
<div>
<ul>
<li v-for="item in data">{{ item }}</li>
</ul>
<
pagination :total="total" :current="current" @change="handle
PageChange"></
pagination>
</div>
`
});
```
在以上示例代码
中，
分页组件 `
pagination` 接收三个 props：`total` 表示
数据总条数，`
pageSize` 表示每页显示的
数据条数，默认为 10，`current` 表示当前页码，默认为 1。组件通过计算属性 `
pageCount` 计算总页数，通过循环生成每一页码，并且绑定点击事件。当用户点击某一页码时，组件会触发 `handleClick` 方法，该方法会通过 `$emit` 触发 `change` 事件，向父组件传递当前点击的页码。
在父组件
中，通过调用 `fetchData` 方法获取
数据，并将
数据渲染到页面上。当用户点击
分页组件
中的页码时，会触发 `handle
PageChange` 方法，该方法会更新当前页码并重新调用 `fetchData` 方法获取对应页码的
数据。
800
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
