前端Vant list列表采用分页查询,怎么将查询条件及page,pageSize发送给后端
时间: 2024-05-11 18:15:26 浏览: 183
电子书网站。前端采用vue3+vant-ui开发,后端采用python3开发.zip
可以使用axios库中的get方法,在请求中指定查询条件及分页参数。代码示例如下:
```javascript
// 获取列表数据
getList() {
axios.get('/api/list', {
params: {
keyword: this.keyword, // 查询条件
page: this.page, // 当前页码
pageSize: this.pageSize // 每页数据条数
}
}).then(res => {
// 处理返回的数据
console.log(res.data);
}).catch(err => {
console.error(err);
});
}
```
在后端接口中,可以从请求的query参数中获取查询条件及分页参数,然后根据这些参数查询相应的数据,代码示例如下:
```javascript
// 列表数据接口
router.get('/api/list', async ctx => {
// 获取查询条件及分页参数
const { keyword, page, pageSize } = ctx.query;
// 根据参数查询数据
const data = await getListData(keyword, page, pageSize);
// 返回数据
ctx.body = {
code: 0,
data
};
});
```
这样就可以实现前端Vant list列表采用分页查询,并将查询条件及分页参数发送给后端。
阅读全文