后端返回的分页数据的当前页有,pageNo,pageNum,currentPage,前端需要怎么兼容
时间: 2024-03-05 22:52:04 浏览: 20
这三个参数指的都是当前页码,不同的接口或框架可能使用不同的参数名。为了兼容不同的接口或框架,前端需要进行一些适配处理。可以编写一个通用的方法来进行处理,例如:
```
function getCurrentPage(data) {
let pageNo = data.pageNo || data.pageNum || data.currentPage;
return parseInt(pageNo);
}
```
这个方法接收一个包含分页数据的对象作为参数,根据不同的参数名获取当前页码,并且将其转换为整数类型后返回。在使用分页数据的时候,直接调用这个方法即可。这样就能够兼容不同的接口或框架了。
相关问题
当使用element-plus 分页组件时,因为后端返回的分页数据当前页字段有如下格式:1.pageNo,2.pageNum,3.current。问:前端怎么兼容这三种格式?
当使用 Element Plus 分页组件时,需要将后端返回的分页数据适配成组件需要的格式,即包含 `currentPage` 和 `pageSize` 两个字段的对象。可以编写一个通用的适配方法,例如:
```
function adaptPaginationData(data) {
let currentPage = data.pageNo || data.pageNum || data.current;
let pageSize = data.pageSize;
return {
currentPage: parseInt(currentPage),
pageSize: parseInt(pageSize),
};
}
```
这个方法接收一个包含分页数据的对象作为参数,根据不同的参数名获取当前页码和每页条数,并且将它们转换为整数类型后返回一个包含 `currentPage` 和 `pageSize` 两个字段的对象。在使用分页组件的时候,将适配后的分页数据传入即可。
例如:
```html
<el-pagination
:current-page="currentPage"
:page-size="pageSize"
:total="total"
@current-change="handleCurrentChange"
/>
```
```js
import { adaptPaginationData } from './utils';
// ...
data() {
return {
paginationData: {},
// ...
};
},
methods: {
async fetchData() {
// ...
this.paginationData = adaptPaginationData(response.data);
// ...
},
handleCurrentChange(currentPage) {
this.paginationData.currentPage = currentPage;
this.fetchData();
},
},
computed: {
currentPage() {
return this.paginationData.currentPage;
},
pageSize() {
return this.paginationData.pageSize;
},
},
```
这样就能够兼容不同的后端返回分页数据的格式了。
小程序下拉分页加载后端url分页的数据
在小程序中实现下拉分页加载数据可以通过以下步骤:
1. 定义一个变量 `pageNum` 用于记录当前页码,初始化为 1。
2. 在页面的 `onPullDownRefresh` 方法中将 `pageNum` 重置为 1,并且调用后端接口获取第一页的数据。
3. 在页面的 `onReachBottom` 方法中,将 `pageNum` 加 1,并且再次调用后端接口获取下一页的数据。
4. 在请求后端接口时,需要将 `pageNum` 作为参数传递给后端,用于指定获取哪一页的数据。
下面是一个示例代码:
```javascript
// 定义变量
var pageNum = 1;
// 下拉刷新事件
onPullDownRefresh: function() {
// 重置 pageNum 为 1
pageNum = 1;
// 调用后端接口获取第一页的数据
wx.request({
url: 'https://your-api.com/data',
data: {
pageNum: pageNum
},
success: function(res) {
// 处理返回的数据
console.log(res.data);
// 停止下拉刷新动画
wx.stopPullDownRefresh();
}
})
},
// 上拉加载更多事件
onReachBottom: function() {
// pageNum 加 1
pageNum++;
// 调用后端接口获取下一页的数据
wx.request({
url: 'https://your-api.com/data',
data: {
pageNum: pageNum
},
success: function(res) {
// 处理返回的数据
console.log(res.data);
}
})
}
```
需要注意的是,如果后端接口返回的数据不是按照页码分页的,而是按照其他方式(比如每次返回固定数量的数据),则需要在前端进行处理,将每次获取到的数据加入到已有的数据列表中。