vue+elementUi+axios实现分页
文章目录
注：此项目 前端 为 html 、 后端 采用 mybatis、servlet 实现
1.代码实现
【HTML】
1.在html部分编写表格：
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-column
label="学号"
width="180">
<template slot-scope="scope">
<el-checkbox @change="DuoAdd(scope.row.id)">{{ scope.row.id }}</el-checkbox>
</template>
</el-table-column>
<el-table-column
label="姓名"
width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column
label="工作"
width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.job }}</span>
</template>
</el-table-column>
<el-table-column
label="薪资"
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-button
size="mini"
type="success" plain
@click="SelectOne(scope.row.id);dialogFormVisible1 = true;"><i
class="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-pagination
small
layout="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中加入分页所需要的属性：
java
total: 0, // 总数据量
currentPage: 1, // 当前页码
pageSize: 9 ,// 每页显示数量3.在**method**部分编写分页实现方法：
java
//渲染数据
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层】
java
/**
* 分页
*
* @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层】
java
/**
* 分页
* @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层】
java
@Select("select * from emp limit #{start},#{pageSize}")
/**
* 分页查询
*/
List<Emp> queryRecord(@Param("start") int start, @Param("pageSize") int pageSize);2.总结步骤
- 前端添加分页组件，绑定相关变量和事件。
- 前端调整数据获取方法，传递分页参数，处理分页数据。
- 后端提供分页接口和总记录数接口。
这样，用户的分页功能就能正常工作了。
3.实现要点
- 使用el-pagination组件实现分页效果
- 通过axios发送GET请求获取分页数据
- 页码变化时自动重新加载数据
- 需要计算start参数（(当前页-1)*每页数量）
- 需要同时执行两个SQL查询：获取总数和获取分页数据
- 返回包含总数和分页数据的复合对象
- 注意数据库字段名与实体类属性的对应关系
4.注意事项
- 确保后端接口地址正确（示例中使用的是/VueProject2_war_exploded/）
- 需要添加JSON序列化支持（如Jackson）
- 页码变化时自动重新加载数据
- 需要计算start参数（(当前页-1)*每页数量）
- 需要同时执行两个SQL查询：获取总数和获取分页数据
- 返回包含总数和分页数据的复合对象
- 注意数据库字段名与实体类属性的对应关系
4.注意事项
- 确保后端接口地址正确（示例中使用的是/VueProject2_war_exploded/）
- 需要添加JSON序列化支持（如Jackson）
- 处理跨域问题（如果前后端分离部署）