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

原创

已于 2022-11-12 23:32:08 修改 · 7.6k 阅读

标签

#vue.js #ui #前端 #交互 #elementui

于 2022-11-12 23:31:43 首次发布

大体思路：

①添加element-ui分页组件

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

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

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

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

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

前端：

①添加element-ui分页组件

<!--
            @size-change，pageSize 改变时会触发
            @current-change ， currentPage 改变时会触发
            :current-page 当前页码
            :page-sizes  选择每页显示个数
            :page-size  默认每页显示条目个数，支持 .sync 修饰符
            layout 组件布局，
            :total 总条目数
            -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

②在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}`);
                },

功能展示：