当前位置：首页 > news >正文

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

news 来源：原创 2025/5/30 12:49:07

vue+elementUi+axios实现分页

文章目录

vue+elementUi+axios实现分页
- - 1.代码实现
  - - - 【HTML】
      - **【Servlet层】**
      - **【Service层】**
      - **【Dao层】**
  - 2.总结步骤
  - 3.实现要点
  - 4.注意事项
  - 4.注意事项

注：此项目前端为 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);