@GetMapping(value = "/search/{currentPage}/{pageSize}")
@Override
public Result<PageInfo<T>> findByPage(@PathVariable(name = "currentPage") Integer currentPage,
@PathVariable(name = "pageSize") Integer pageSize) {
PageInfo<T> pageInfo = coreService.findByPage(currentPage, pageSize);
return new Result<PageInfo<T>>(true, StatusCode.OK, "分页查询成功", pageInfo);
}
前端是vue的,
var vue = new Vue({
el: '#app',
data: {
autoUpload: true,//自动上传
imageUrl: null,//模型数据,用于上传图片完成后图片预览
activeName: 'first',//添加/编辑窗口Tab标签名称
pagination: {//分页相关属性
currentPage: 1,
pageSize: 10,
total: 100,
queryString: null,
},
dataList: [],//列表数据
},
created() {
this.findPage();
},
methods: {
//分页查询
findPage() {
axios.post('/items/search.do', this.pagination).then(res => {
if (res.data.flag) {
this.dataList = res.data.data.rows;
this.pagination.total = res.data.data.total;
} else {
this.$message.error(res.data.message);
}
})
},
}
前端这里该怎么写才能完成将数据调出来?
1.@GetMapping(value = "/search/{currentPage}/{pageSize}")
value就是你调用get请求的url,currentPage和pageSize是你的分页数据,就是pagination里的。
譬如axios.get('/items/search/1/10')
2.也可以调整后端的路径直接value="/search",参数则不用@PathVariable注解就可以得到了
传入当前页,每页查询多少条等参数;
后端会返回总条数,总页数,当前页的数据信息;
后端返回总条数,前端解析获取
1.前段传递页数,后端根据页码计算出返回的数据,返回一整页的内容
2.在数据量不大的情况下,后端返回所有结果,前端缓存结果,并分页展示
3.在千万级-亿级数据量情况下,需要针对查询做优化,很多时候并不是用页数去做分页,更多的是用时间分区去查询,这个也需要根据实际分库分表的逻辑去优化
1.后端做分页,接口传入参数一般需要页码,以及页面限制条数
2.后端返回前段,返回总条数和data