记一次前后端分离项目中---关于分页查询解决的思路

---

前言

项目模块为课程管理模块，课程需要分页展示数据，并且能够根据每页展示记录数进行自动分页，接下来说说如何处理分页展示的思路

---

一、首先了解一下ElementUI<el-pagination>中几个属性绑定的事件

@size-change当页面显示数据条数发生改变触发此事件

@current-change当页码改变触发此事件

---

二、前端

2.1 find All函数

• 发起请求，传三个重要参数给后端（currentPage）、（pageSize）、（search）查询课程表数据
• datableDate存放的就是后端返回的一个个课程对象（对象数组）
• totalCount存放的是后端返回的数据库课程表总记录条数

代码如下：

/*课程分页查询*/
			findAll() {
   
				axios.post(`http://localhost/course?method=findAll`,
				`currentPage=${
     this.currentPage}&pageSize=${
     this.pageSize}&search=${
     this.search}`)
				.then(resp=>{
   
					//console.log(resp.data.list);
					this.tableData = resp.data.list
					this.totalCount = resp.data.total
				})
			}

2.2 handleCurrentChange函数

• 当页码改变触发此事件
• 点击上一页或者下一页切换每页展示数据

代码如下：

/*当页码改变触发此事件*/
			handleCurrentChange: function (currentPage) {
   
				this.tableData = ''
    			this.currentPage = currentPage;
    			this.findAll()
			},

2.3 handleSizeChange函数

• 当页面显示数据条数发生改变触发此事件
• 切换每页展示数据的条数

代码如下：

handleSizeChange: function (size) {
   
				this.pageSize = size;
    			this.findAll()
			},

---

三、后端

3.1 servlet层

• 获取请求数据中的参数
• 将结果封装进集合
• 最后再利用工具将数据转换成json格式返回给前端

代码如下：

/**
     * 分页查询
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    protected void findAll(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException, SQLException {
   
        //获取请求数据中的参数
        int currentPage =Integer.parseInt(req.getParameter("currentPage"));
        int pageSize =Integer.parseInt(req.getParameter("pageSize"));
        String search