效果展示
第一次加载到页面时会发送异步请求获取到默认第一页列数为5的数据集合
第二页
修改展示的列表数
具体实现
1.首先在ELEMENT组件库中获取分页的界面效果（完整功能）
ELEMENT组件库地址：组件 | Element
代码：（在显示代码中即可查看）
实现分页所需要的方法和数据：（也在显示代码中即可查看）：
复制到前端界面中。
数据库分页查询语句
分页查询主要依赖limit实现
语句格式为：select * from (数据库表) limit （开始的数据索引），（每页展示的条目数）
数据库的索引类似数组时从0开始所以查询第一条的数据就要从0开始；
查询第1条到第10条的数据的sql是：select * from table limit 0,10; ->对应我们的需求就是查询第一页的数据：select * from table limit 0,10;
查询第10条到第20条的数据的sql是：select * from table limit 10,20; ->对应我们的需求就是查询第二页的数据：select * from table limit 10,10;
查询第20条到第30条的数据的sql是：select * from table limit 20,30; ->对应我们的需求就是查询第三页的数据：select * from table limit 20,10;
参考学习：(14条消息) MySql实现分页查询的SQL，mysql实现分页查询的sql语句_迷彩的博客的博客-CSDN博客_mysql分页查询语句
前端需要传递到后端的数据
因此我们就需要获取到 开始的数据索引 和 每页展示的条目数 这两个条件就需要我们从前端获得
在前端我们可以自主选择的数据就是当前的页码数以及每页展示的条目数
后端需要传递到前端的数据
首先我们需要将查询出来的数据传递到前端进行展示进行展示
同时在复制的分页组件中我们可以看到有总页数这一项（如下图），索已我们就需要将总页数也传递到前端
所以我们就需要编写一个类对这两个数据进行封装；实现setter和getter方法和构造器方法
public class PageBean<T> {
private int totalPage;
private List<T> pageList;
public PageBean() {
}
public PageBean(int totalPage, List<T> pageList) {
this.totalPage = totalPage;
this.pageList = pageList;
}
/**
* 获取
* @return totalPage
*/
public int getTotalPage() {
return totalPage;
}
/**
* 设置
* @param totalPage
*/
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
/**
* 获取
* @return pageList
*/
public List<T> getPageList() {
return pageList;
}
/**
* 设置
* @param pageList
*/
public void setPageList(List<T> pageList) {
this.pageList = pageList;
}
public String toString() {
return "PageBean{totalPage = " + totalPage + ", pageList = " + pageList + "}";
}
}SQL语句编写
1.分页查询语句
--当我们查询第1页的10条/页的数据时也就是查询数据库中的前10条数据；
如何查询前10条数据就可以参考前面的查询语句：select * from table limit 0,10;
--当我们查询第2页的10条/页的数据时也就是查询数据库中的10-20条数据；
如何查询前10条数据就可以参考前面的查询语句：select * from table limit 10,10;
--当我们查询第3页的10条/页的数据时也就是查询数据库中的20-30条数据；
如何查询前10条数据就可以参考前面的查询语句：select * from table limit 20,10;
从案列中我们可以看到sql语句中 每页展示的条目数 = 前端传递回的每页展示的条目数；
而当前的页码和开始的数据索引的关系为开始的数据索引=(当前的页码-1)*每页展示的条目数；
因此查询语句就为：
select * from (数据库表) limit （(当前的页码-1)*每页展示的条目数），（每页展示的条目数）
2.总页数语句
select count(*) from (数据库表)
@Select("select * from tbl_book limit #{begin} , #{size}")
List<Book> selectByPage(@Param("begin") int begin, @Param("size") int size);
@Select("select count(*) from tbl_book")
int getTotalPage();service层中传递
Servie接口：
/**
* 分页查询
* @param begin
* @param size
* @return
*/
public List<Book> selectByPage(int begin,int size);
/**
* 查询所有页
* @return
*/
public int getTotalPage();Service的实现类：通过自动装配调用Dao层的查询语句
public List<Book> selectByPage(int begin, int size) {
return bookDao.selectByPage(begin,size);
}
public int getTotalPage() {
return bookDao.getTotalPage();
}Controller层
将总条数和数据列表封装到pageBean类中；
Result类为统一的输出便于前端的反馈包括code（状态码自定义）,data（传递到前端的数据）,msg(错误或相关描述)
统一分装到Result中
@RequestMapping("/page")
@ResponseBody
public Result getPageMsg(int currentPage,int pageSize){
// System.out.println(currentPage);
// System.out.println(pageSize);
int totalPage = bookService.getTotalPage();
int begin = (currentPage -1) * pageSize;
List<Book> bookList = bookService.selectByPage(begin, pageSize);
String msg = bookList != null ? "" : "查询失败请重试";
PageBean<Book> pageBean = new PageBean<Book>();
pageBean.setPageList(bookList);
pageBean.setTotalPage(totalPage);
return new Result(100,pageBean,msg);
}前端界面
首先将复制过来的组件代码进行修改将其中的静态数据修改为动态数据，通过Vue中的v-model动态的获取当前页，页面列表数，总页数，修改静态代码并命名（如下三个数据）
:current-page="currentPage"
:page-size="pageSize"
:total="totalPage"
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalPage">
</el-pagination>在Vue的data的属性中创建这三个类属性
data:{
pageSize: 5,
totalPage: 100,
currentPage: 1
}对异步的查询所有操作进行修改
将resp得到的返回数据及列表数据和总页数赋值到对应的动态数据中；
通过拼接字符串的方式将当前页和每页条数传递到Controller中；
getAll() {
// axios.get("../books").then((resp)=>{
// this.dataList = resp.data.data
// })
/**
* 获取当前页的页数以及
*/
axios.get("../books/page?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then((resp)=>{
// console.log(this.currentPage);
// console.log(this.pageSize);
// console.log(resp.data.data);
// console.log(resp.data.data.pageList);
this.dataList = resp.data.data.pageList;
this.totalPage = resp.data.data.totalPage;
})通过分页组件提供的方法根据用户选择的页数进行动态的赋值
并在每次操作后重新调用查询方法。
//分页
handleSizeChange(val) {
// console.log(`每页 ${val} 条`);
this.pageSize = val;
this.getAll();
},
handleCurrentChange(val) {
// console.log(`当前页: ${val}`);
this.currentPage = val;
this.getAll();
}HTML页面代码总：
<!DOCTYPE html>
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SpringMVC案例</title>
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<!-- 引入样式 -->
<link rel="stylesheet" href="../plugins/elementui/index.css">
<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body class="hold-transition">
<div id="app">
<div class="content-header">
<h1>图书管理</h1>
</div>
<div class="app-container">
<div class="box">
<div class="filter-container">
<el-input placeholder="图书名称" v-model="pagination.queryString" style="width: 200px;" class="filter-item"></el-input>
<el-button @click="getAll()" class="dalfBut">查询</el-button>
<el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
</div>
<el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
<el-table-column type="index" align="center" label="序号"></el-table-column>
<el-table-column prop="type" label="图书类别" align="center"></el-table-column>
<el-table-column prop="name" label="图书名称" align="center"></el-table-column>
<el-table-column prop="description" label="描述" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
<el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页-->
<!-- <div class="block">-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalPage">
</el-pagination>
<!-- </div>-->
<!-- 新增标签弹层 -->
<div class="add-form">
<el-dialog title="新增图书" :visible.sync="dialogFormVisible">
<el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
<el-row>
<el-col :span="12">
<el-form-item label="图书类别" prop="type">
<el-input v-model="formData.type"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="图书名称" prop="name">
<el-input v-model="formData.name"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="描述">
<el-input v-model="formData.description" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="handleAdd()">确定</el-button>
</div>
</el-dialog>
</div>
<!-- 编辑标签弹层 -->
<div class="add-form">
<el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">
<el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
<el-row>
<el-col :span="12">
<el-form-item label="图书类别" prop="type">
<el-input v-model="formData.type"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="图书名称" prop="name">
<el-input v-model="formData.name"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="描述">
<el-input v-model="formData.description" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible4Edit = false">取消</el-button>
<el-button type="primary" @click="handleEdit()">确定</el-button>
</div>
</el-dialog>
</div>
</div>
</div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
var vue = new Vue({
el: '#app',
data:{
pageSize: 5,
totalPage: 100,
currentPage: 1,
pagination: {},
dataList: [],//当前页要展示的列表数据
formData: {},//表单数据
dialogFormVisible: false,//控制表单是否可见
dialogFormVisible4Edit:false,//编辑表单是否可见
rules: {//校验规则
type: [{ required: true, message: '图书类别为必填项', trigger: 'blur' }],
name: [{ required: true, message: '图书名称为必填项', trigger: 'blur' }]
}
},
//钩子函数，VUE对象初始化完成后自动执行
mounted() {
this.getAll();
},
methods: {
//列表
getAll() {
// axios.get("../books").then((resp)=>{
// this.dataList = resp.data.data
// })
/**
* 获取当前页的页数以及
*/
axios.get("../books/page?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then((resp)=>{
// console.log(this.currentPage);
// console.log(this.pageSize);
// console.log(resp.data.data);
// console.log(resp.data.data.pageList);
this.dataList = resp.data.data.pageList;
this.totalPage = resp.data.data.totalPage;
})
},
//弹出添加窗口
handleCreate() {
this.dialogFormVisible = true;
this.resetForm();
},
//重置表单
resetForm() {
this.formData = {};
},
//添加
handleAdd () {
axios.post("../books",this.formData).then((resp)=>{
if(resp.data.code == 20011){
this.dialogFormVisible = false;
this.$message.success("添加成功");
}else if(resp.data.code == 20010){
this.$message.error("添加失败");
}else{
this.$message.error("系统繁忙请稍后再试！");
}
}).finally(()=>{
this.getAll();
})
},
//弹出编辑窗口
handleUpdate(row) {
axios.get("../books/"+row.id).then((resp)=>{
if(resp.data.code = 20041){
this.formData = resp.data.data;
this.dialogFormVisible4Edit = true;
}else {
this.$message.error("查询失败");
}
})
},
//编辑
handleEdit() {
axios.put("../books",this.formData).then((resp)=>{
if(resp.data.code == 20031){
this.dialogFormVisible4Edit = false;
this.$message.success("修改成功");
}else if(resp.data.code == 20030){
this.$message.error("修改失败");
}else{
this.$message.error("系统繁忙请稍后再试！");
}
}).finally(()=>{
this.getAll();
})
},
// 删除
handleDelete(row) {
this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
type:'info'
}).then(()=>{
axios.delete("../books/"+row.id).then((resp)=>{
if(resp.data.code == 20021){
this.$message.success("删除成功");
}else{
this.$message.error("删除失败");
}
}).finally(()=>{
this.getAll();
})
}).catch(()=>{
this.$message.info("取消操作");
})
},
//分页
handleSizeChange(val) {
// console.log(`每页 ${val} 条`);
this.pageSize = val;
this.getAll();
},
handleCurrentChange(val) {
// console.log(`当前页: ${val}`);
this.currentPage = val;
this.getAll();
}
}
})
</script>
</html>
7300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
