文章目录
- 先看效果
- 1、要考虑的问题，对数据进行分页查询
- 2、前端和后台的交互
先看效果
1、要考虑的问题，对数据进行分页查询
mapper文件这样写
从每次开始查询的位置，到每页展示的条数，
<!-- 分页查询-->
<select id="queryBookList" parameterType="Map" resultType="com.zheng.pojo.Books">
select * from bookss limit #{startIndex},#{pageSize}
</select>
dao、service、serviceimpl略
看controller
关键在这边，传入的page和size是从前台改变页码到指定页
@GetMapping("/findAll/{page}/{size}")
public Map<String,Object> findAll(@PathVariable("page") Integer Page,@PathVariable("size") Integer size) {
//查询所有的书籍信息
@GetMapping("/findAll/{page}/{size}")
public Map<String,Object> findAll(@PathVariable("page") Integer Page,@PathVariable("size") Integer size) {
//准备数据 通过这两个参数，可以算出start 计算方法 start=size(page-1)
int currentPage = Page;//当前是第几页
int pageSize = size; //页面大小
Map<String, Integer> map = new HashMap<String, Integer>();
map.put("startIndex",(currentPage-1)*pageSize);
map.put("pageSize",pageSize);
List<Books> booklist = bookService.queryBookList(map);
HashMap<String,Object> result = new HashMap<>();
Long totals = bookService.findTotals();
result.put("books",booklist);
result.put("totals",totals);
return result;
}
此外还要向前台传输查询到的所有的数量的个数，目的是计算根据总条数和页面大小计算出分几页。
mapper
<select id="findTotals" resultType="Long">
select count(*) from bookss
</select>
dao中的方法
//查询总数
Long findTotals();
2、前端和后台的交互
关键部分代码：
- 这个是请求地址，页面首次加载展示的信息，默认从1开始，页面展示6条信息
const _this = this区分对象resp.data.books获取后台的数据resp.data.totals获取后台的数据_this.tableData，前台数据变量prop="address"和后台的属性一致，获取哪个属性的信息
created(){
const _this = this
axios.get('http://localhost:8181/book/findAll/1/6').then(function (resp) {
_this.tableData = resp.data.books
_this.total = resp.data.totals
})
}
分页
:page-size="6"：自定义页面展示几条数据:total="total"：查询到的数据总数
通过这两个数据就可以计数出有几个页面
<el-pagination
background
layout="prev, pager, next"
:page-size="6"
:total="total"
@current-change="page">
</el-pagination>
动态改变页面展示信息
page(currentPage){
const _this = this
axios.get('http://localhost:8181/book/findAll/'+currentPage+'/6').then(function (resp) {
_this.tableData = resp.data.books
_this.total = resp.data.totals
})
}
<template>
<div>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
fixed
prop="bookName"
label="书籍名称"
width="150">
</el-table-column>
<el-table-column
prop="bookAuthor"
label="书籍作者"
width="120">
</el-table-column>
<el-table-column
prop="price"
label="书籍价格"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="书籍出版社"
width="120">
</el-table-column>
<el-table-column
prop="impression"
label="印刷次数"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
layout="prev, pager, next"
:page-size="6"
:total="total"
@current-change="page">
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
handleClick(row) {
console.log(row);
},
page(currentPage){
const _this = this
axios.get('http://localhost:8181/book/findAll/'+currentPage+'/6').then(function (resp) {
_this.tableData = resp.data.books
_this.total = resp.data.totals
})
}
},
created(){
const _this = this
axios.get('http://localhost:8181/book/findAll/1/6').then(function (resp) {
_this.tableData = resp.data.books
_this.total = resp.data.totals
})
},
data() {
return {
total:null,
tableData: []
}
}
}
</script>
