vue+elementUi+axios实现分页(MyBatis、Servlet)

vue+elementUi+axios实现分页

注：此项目 前端为 html、 后端采用 mybatis、servlet实现

1.代码实现

【HTML】

1.在html部分编写表格：

<div id="Max"><el-row><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="16"><div class="grid-content bg-purple-light"><div id="xuanran"><template><el-table:data="newMsg"style="width: 100%"><el-table-columnlabel="学号"width="180"><template slot-scope="scope"><el-checkbox @change="DuoAdd(scope.row.id)">{{ scope.row.id }}</el-checkbox></template></el-table-column><el-table-columnlabel="姓名"width="180"><template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.name }}</span></template></el-table-column><el-table-columnlabel="工作"width="180"><template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.job }}</span></template></el-table-column><el-table-columnlabel="薪资"width="180"><template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.salary}}</span></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttonsize="mini"type="success" plain@click="SelectOne(scope.row.id);dialogFormVisible1 = true;"><iclass="el-icon-upload"></i>更新</el-button><el-button size="mini"type="danger" plain@click="DeleteDate(scope.row.id)"><i class="el-icon-delete-solid"></i>删除</el-button></template></el-table-column></el-table></template><!-- 分页组件 --><div class="pagination-container"><el-paginationsmalllayout="prev, pager, next":total="total":current-page="currentPage":page-size="pageSize"@current-change="handlePageChange"></el-pagination></div></div></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col></el-row></div>

2.在new Vue的data中加入分页所需要的属性：

total: 0, // 总数据量
currentPage: 1, // 当前页码
pageSize: 9 ,// 每页显示数量

3.在**method**部分编写分页实现方法：

//渲染数据
GetDate() {const start = (this.currentPage - 1) * this.pageSize;const loading = this.$loading({lock: true,text: '玩命加载中....',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});axios.get('/VueProject2_war_exploded/MyServlet?method=queryRecord',{params: {page: start,pageSize: this.pageSize}}).then(response => {loading.close();this.newMsg = response.data.list;this.total = response.data.total;}).catch(err => {console.log(err);});
},
// 处理页码变化
handlePageChange(newPage) {this.currentPage = newPage;this.GetDate();
},

【Servlet层】

/*** 分页** @param req* @param resp* @throws Exception*/
public void queryRecord(ServletRequest req, ServletResponse resp) throws Exception {req.setCharacterEncoding("utf-8");resp.setContentType("text/html;charset=utf-8");PrintWriter writer = resp.getWriter();int start = Integer.parseInt(req.getParameter("page"));int pageSize = Integer.parseInt(req.getParameter("pageSize"));MyService myService = new MyService();PageResult pageResult = myService.queryRecordFenye(start, pageSize);String s = JSON.toJSONString(pageResult);//集合转换成json字符串准备传回前端;writer.write(s);writer.flush();writer.close();
}

【Service层】

/*** 分页* @param start* @param pageSize* @return*/
public PageResult queryRecordFenye(int start, int pageSize) {SqlSession gc = GC();EmpDao mapper = gc.getMapper(EmpDao.class);List<Emp> list = new ArrayList<>();int total ;List<Emp> emps = mapper.selectAll();total = emps.size();List<Emp> emps1 = mapper.queryRecord(start, pageSize);list.addAll(emps1);return new PageResult(total, list);
}

【Dao层】

@Select("select * from emp limit #{start},#{pageSize}")
/*** 分页查询*/
List<Emp> queryRecord(@Param("start") int start, @Param("pageSize") int pageSize);

2.总结步骤

1. 前端添加分页组件，绑定相关变量和事件。
2. 前端调整数据获取方法，传递分页参数，处理分页数据。
3. 后端提供分页接口和总记录数接口。

这样，用户的分页功能就能正常工作了。

3.实现要点

• 使用el-pagination组件实现分页效果
• 通过axios发送GET请求获取分页数据
• 页码变化时自动重新加载数据
• 需要计算start参数（(当前页-1)*每页数量）
• 需要同时执行两个SQL查询：获取总数和获取分页数据
• 返回包含总数和分页数据的复合对象
• 注意数据库字段名与实体类属性的对应关系

4.注意事项

• 确保后端接口地址正确（示例中使用的是/VueProject2_war_exploded/）
• 需要添加JSON序列化支持（如Jackson）
• 页码变化时自动重新加载数据
• 需要计算start参数（(当前页-1)*每页数量）
• 需要同时执行两个SQL查询：获取总数和获取分页数据
• 返回包含总数和分页数据的复合对象
• 注意数据库字段名与实体类属性的对应关系

4.注意事项

• 确保后端接口地址正确（示例中使用的是/VueProject2_war_exploded/）
• 需要添加JSON序列化支持（如Jackson）
• 处理跨域问题（如果前后端分离部署）