vue-element-ui前后端交互实现分页查询

大体思路：

①添加element-ui分页组件

②在data里定义几个参数用来存放当前页，每页条数，条目总数以及存放后端分页查询的结果

③后端使用分页查询，controller层接收当前页以及每页条数的参数

④前端编写方法发送请求到controller层调用分页查询的方法，并传参当前页及每页条数

⑤接收查询结果并存放进之前定义好的参数中

⑥给前端点击上下页等功能绑定事件，事件调用分页查询的方法并传参

前端：

①添加element-ui分页组件

②在data里定义几个参数用来存放当前页，每页条数，条目总数以及存放后端分页查询的结果

newsData:[], //存放接收后端的数据
pageNum: 1, // 当前页 默认设值1
pageSize: 5, // 每页显示条目 默认设置5
total: '' ,// 条目总数

 

 ③后端使用分页查询，controller层接收当前页以及每页条数的参数

 controller层

 

service层

 

 ④前端编写方法发送请求到controller层调用分页查询的方法，并传参当前页及每页条数

⑤接收查询结果并存放进之前定义好的参数中

                loadPage(pageNum,pageSize) {
                    let url = '/news/page';
                    axios.get(url,{
                        params:{
                            // pageNum:this.pageNum,
                            // pageSize:this.pageSize
                            pageNum,
                            pageSize
                        }
                    }).then(resp => {
                        resp.data.list.get
                        this.newsData = resp.data.list;
                        this.total = resp.data.total;
                        // this.total = resp.data.list.total;
                        console.log(resp.data);
                    });
                }

⑥给前端点击上下页等功能绑定事件，事件调用分页查询的方法并传参

                handleSizeChange(val) {
                    this.pageSize = val;
                    this.loadPage(this.pageNum,this.pageSize);
                    console.log(`每页 ${val} 条`);
                },
                handleCurrentChange(val) {
                    this.pageNum = val;
                    this.loadPage(this.pageNum,this.pageSize);
                    console.log(`当前页: ${val}`);
                },

功能展示：

 

我的前端代码：

    
    
    
    
    
    
    
    


    

        发布新闻