前端接口数据分页加载数据
时间: 2023-06-11 17:09:54 浏览: 119
前端接口数据分页加载数据通常需要以下步骤:
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;
},
handlePageChange(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="handlePageChange"></pagination>
</div>
`
});
```
在以上示例代码中,分页组件 `pagination` 接收三个 props:`total` 表示数据总条数,`pageSize` 表示每页显示的数据条数,默认为 10,`current` 表示当前页码,默认为 1。组件通过计算属性 `pageCount` 计算总页数,通过循环生成每一页码,并且绑定点击事件。当用户点击某一页码时,组件会触发 `handleClick` 方法,该方法会通过 `$emit` 触发 `change` 事件,向父组件传递当前点击的页码。
在父组件中,通过调用 `fetchData` 方法获取数据,并将数据渲染到页面上。当用户点击分页组件中的页码时,会触发 `handlePageChange` 方法,该方法会更新当前页码并重新调用 `fetchData` 方法获取对应页码的数据。