分页功能的实现

分页功能的实现

当我们在前端显示的数据太多时，会导致响应的时间比较长,为了降低数据库压力我们可以使用分页功能

基于MySql数据库来实现分页功能

1.导入mybatis分页插件依赖

<!-- pagehelper依赖 -->
		<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper-spring-boot-starter</artifactId>
			<version>1.2.5</version>
		</dependency>

2.向model类中添加pageNum（当前页数）、pageSize（每页显示的数量）属性，get,set方法

3.在service层实现

@Service
@Transactional
public class AdminService {
    @Autowired
    AdminDao adminDao;
    
    //查询管理员信息
    public PageInfo<Admin> AdminList(Admin admin) {
        //自动生成limit,添加到sql后面
        PageHelper.startPage(admin.getPageNum(), admin.getPageSize());
        //查询数据，自动拼接limit并自动生成sql语句，生成总记录数
        List<Admin> list = adminDao.adminList( admin);
        PageInfo<Admin> pageInfo = new PageInfo<>(list);
        return  pageInfo;
    }

4.前端导入elementUI中的分页组件

<div class="block">
		    <el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
		      :current-page="form.pageNum"
		      :page-sizes="[2, 4, 6, 10]"
		      :page-size="2"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total">
		    </el-pagination>
		  </div>
<script>
	import Add from "./Add.vue";
	import Update from'./Update.vue';
	export default {
		components:{
			Add,
			Update
		},
		data() {
			return {
				adminList: [],
				total:0,
				form:{ //都是每次向后端发送的值
					account:"",//查询条件 ,
					pageNum:1,//默认是第一页
					pageSize:2//默认每一页显示2条数据
				}
			}
		},
		methods: {
			//当改变下拉框页数大小时触发
			 handleSizeChange(val) {
			     this.form.pageSize = val;
				 this.findAdmins();
			 },
			 //当改变当前页数时触发
			 handleCurrentChange(val) {
			     this.form.pageNum=val;
				 this.findAdmins();
			 },
			//查询管理员列表
			findAdmins(){
			this.$http.post("admin/admin/adminList",this.form).then((resp)=>{
			  this.adminList = resp.data.data.list; //resp.commonResult.pageInfo.list;
			  this.total = resp.data.data.total;//把总条数赋分页组件,组件就可以计算总页数...
			  });
			},
			
		},
		mounted() {
			//页面打开后向后端发送请求,获取数据,  请求头发送token
			this.findAdmins();
			
		}
	}
</script>