因为之前一直是用Layui来显示数据和对表格进行分页，最近刚学了Vue和Element组件，那就把它们结合起来实现分页以及数据的显示吧。Element和Vue可到官网详细了解。
我们先来看一下我们完成的效果，如下：
首先我们创建一个SpringBoot或者Maven工程，要使用PageHelper的话需要在我们项目的pom文件中引入依赖，至于mybatis和mysql的相关依赖就不一一细说了，这些都是查询操作数据库必须的依赖，其中还有一个lombok的插件也需要引入依赖，在实体类中会用到
<!-- 分页查询 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.5</version>
</dependency>
<!--lombok-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
1、创建实体类，用来映射我们的数据库表数据
@Data//使用这个注解，就不用再去手写Getter,Setter,equals,canEqual,hasCode,toString等方法了，注解后在编译时会自动加进去
@NoArgsConstructor//顾名思义，@NoArgsConstructor 注解是针对无参数的构造函数，它会生成一个无参数的构造方法。使用后创建一个无参构造函数
@AllArgsConstructor//@AllArgsConstructor 顾名思义会生成一个包含所有变量的构造方法。使用后添加一个构造函数，该构造函数含有所有已声明字段属性参数
public class User {
private Integer id;//id
private String name;//名字
private String idnum;//身份证号
private String iphone;//手机号
private Boolean sex;//性别
private String adress;//地址
private Integer age;//年龄
//入参格式化
@DateTimeFormat(pattern = "yyyy-MM-dd")
//出参格式化
@JsonFormat(pattern = "yyyy-MM-dd" ,timezone = "GMT+8")
private Date birthday;//生日
}
2、DAO层、Service层、ServiceImpl实现层以及Sql语句，最后通过控制器返回数据
//分页查询
Page<User> selectUsers(@Param("name")String name, @Param("pageNum")int pageNum, @Param("pageSize")int pageSize);
@Override
public Page<User> selectUsers(String name, int pageNum, int pageSize) {
Page<User> page = PageHelper.startPage(pageNum, pageSize);
userDao.selectUsers(name,pageNum,pageSize);
return page;
}
<!-- pagehelper分页查询 -->
<select id="selectUsers" resultType="com.xgb.pojo.User">
select * from tb_usertwo
<where>
<if test="name != null and name != ''">
and tb_usertwo.name like CONCAT('%',#{name},'%')
</if>
</where>
</select>
//分页查询
@ResponseBody
@RequestMapping("/list")
public Map<String, Object> list(@RequestParam(value="name")String name,
@RequestParam(value="pageNum")int pageNum,
@RequestParam(value="pageSize")int pageSize) {
Page<User> page = userService.selectUsers(name,pageNum,pageSize);
Map<String, Object> map = new HashMap<String, Object>();
map.put("pagedata", page);
map.put("number", page.getTotal());
//System.out.println(map);
return map;
}
在Dao层和Service层编写分页查询方法，在Impl实现层使用PageHelper进行分页，不需要去管PageHelpers是如何实现的，它是人家已经封装好的接口，只需要这一句就可以实现物理分页。它会对跟在它后面的一个sql查询语句起作用。这里name是根据名字模糊查询的条件，最后通过控制器调用数据库返回数据到页面。以上就是后端，下面我们看一下前端。
前端页面首先我们需要引入相应的css和js，这里是本地文件引入，axios是发送请求后台数据需要用到的，axios下载地址：https://github.com/axios/axios#axios
这些css和js都可以通过cdn的方式在官网上直接引入，或者下载到本地再引入，element的话如果在本地引入的话它里面自带的图标你是用不了的，还需要下载一个fonts里面的两个文件，地址：https://unpkg.com/browse/[email protected]/lib/theme-chalk/fonts/
然后就是我们的html页面了，div样式以及用到的vue跟element组件的内容
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Vue+Element+PageHelper实现分页</title>
<link rel="stylesheet" href="/assets/element/index.css">
<script type="text/javascript" src="/vuejs/vue-2.6.12.js"></script>
<script type="text/javascript" src="/vuejs/axios-0.21.1.js"></script>
<script src="/assets/element/index.js"></script>
</head>
<body>
<div class="container-fluid" id="app">
<el-input
style="width:150px"
size="small"
placeholder="请输入姓名"
prefix-icon="el-icon-search"
v-model="search">
</el-input>
<el-button type="primary" size="small" icon="el-icon-search" @click="selSearch">搜索</el-button>
<el-button type="primary" size="small" icon="el-icon-plus">新增</el-button>
<template>
<el-table :data="tableData" border style="width: 100%;margin-top: 10px">
<el-table-column label="序号" width="100" type="index"></el-table-column>
<el-table-column prop="name" label="姓名" width="120"></el-table-column>
<el-table-column prop="birthday" label="生日" width="100"></el-table-column>
<el-table-column prop="iphone" label="电话" width="150"></el-table-column>
<el-table-column prop="age" label="年龄" width="80"></el-table-column>
<el-table-column prop="sex" label="性别" width="80"></el-table-column>
<el-table-column prop="idnum" label="身份证号" width="180"></el-table-column>
<el-table-column prop="adress" label="地址"></el-table-column>
<el-table-column label="操作">
<template scope="scope">
<el-button size="small" type="primary">编辑</el-button>
<el-button size="small" type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<div class="block" style="margin-top: 5px;margin-bottom: 10px">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 10, 15, 20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
我们在最外层的div给它定义一个id，用于我们实例化Vue，template里的就是我们的element里的表格组件，不知道如何使用可以到官网查看，prop属性对应实体类里的数据段，
el-pagination就是我们分页的样式了，里面的基本是固定的写法，page-sizes【每页显示个数选择器】我们可以根据自身需求修改
接着就是重要的js代码vue了，我们需要在这里实例化一个Vue，配置我们需要的数据参数，方法函数等
<script>
new Vue({
el:"#app",//实例化Vue
data:{
search: '',//搜索条件
total: 0,//默认总条数
pageNum:1,//默认当前页数
pageSize:5,//默认每页显示条数
tableData: [],//表格数据
dialogFormVisible: false,
title:"",//模态框标题
bool:true,//判断模态框的显示，true显示新增，false显示修改
user: {
name: '',
sex: true,
age: '',
idnum: '',
iphone: '',
adress: '',
birthday: '',
}
},
methods:{
//条件搜索
selSearch: function(){
this.loadData(this.search,this.pageNum, this.pageSize);
},
//分页查询
loadData(){
var _this = this;
axios.get('/user/list',{
params:{
name:_this.search,
pageNum:_this.pageNum,
pageSize:_this.pageSize,
}})
.then(function (response) {
//console.log(response);
_this.total=response.data.number;
_this.tableData=response.data.pagedata;
for (var i = 0;i<_this.tableData.length;i++){
if (_this.tableData[i].sex==0){
_this.tableData[i].sex="女"
}else {
_this.tableData[i].sex="男"
}
}
})
.catch(function (error) {
console.log(error);
})
},
//pageSize 默认每页显示条数改变时会触发
handleSizeChange(val) {
this.pageSize = val;
this.loadData(this.search,this.pageNum, this.pageSize);
//console.log(`每页 ${val} 条`);
},
//currentPage 默认当前页数改变时会触发
handleCurrentChange(val) {
this.pageNum = val;
this.loadData(this.search,this.pageNum, this.pageSize);
//console.log(`当前页: ${val}`);
},
//当我们页面加载的时候触发请求
created:function(){
this.loadData(this.search,this.pageNum, this.pageSize);
}
})
</script>
以上就是对Vue的基本使用，在data中定义变量（默认数据），使用vue的语法指令渲染到html页面上，在methods中定义方法函数（事件），在函数中使用axios向我们的后台发送请求，在请求成功的回调函数里
.then(function(response){
执行我们想要的操作
}）
.catch(function(err){
异常时想要执行的操作
}）
在Vue的生命周期函数中created（当我们页面加载的时候）自动调用分页查询的方法。
到这里，我们的分页就已经可以实现了。