SpringBoot+VUE+Element UI实现分页操作（附源码）

SpringBoot+VUE+Element UI实现分页操作

引言：

         本文主要分享了分页的实现案例，在SpringBoot+VUE环境中，利用Element UI和Mybatis的分页插件PageHelper实现的前后端分离的分页功能；

1. 效果展示

本文主要分享分页功能的实现过程

2. 后端实现

后端使用的技术是SpringBoot，运用Mybatis的分页插件实现

• 创建相应的SpringBoot项目

2.1 导入相应的依赖

<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.2.5</version>
    <exclusions>
        <exclusion>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
        </exclusion>
        <exclusion>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
        </exclusion>
    </exclusions>
</dependency>

2.2 mapper接口

首先全查出所需要分页的数据

/**
 * Created by Kak 
 */
public interface ClassInfoMapper {
    
    
    public List<ClassInfo> findAllClass();
}

2.3 mapping的实现

<select id="findAllClass" resultType="com.sx.kak.po.ClassInfo">
    SELECT * FROM tb_classinfo
</select>

3.3 service层的实现

/**
 * Created by Kak
 */
public interface ClassInfoService {
    
    

    public PageInfo<ClassInfo> findByPageService(int pageCode, int pageSize);

}

/**
 * Created by Kak 
 */
@Service
public class ClassInfoServiceImpl implements ClassInfoService{
    
    
    @Autowired(required = false)
    private ClassInfoMapper classInfoMapper;

    @Override
    public PageInfo<ClassInfo> findByPageService(int pageCode, int pageSize) {
    
    
        //使用Mybatis分页插件
        PageHelper.startPage(pageCode,pageSize);
        //调用分页查询方法，其实就是查询所有数据，mybatis自动帮我们进行分页计算
        List<ClassInfo> classInfos = classInfoMapper.findAllClass();
        return new PageInfo<>(classInfos);
    }
}

3.4 Controller层的实现

/**
 * @author by kak
 */
@RestController
public class ClassInfoController {
    
    

    @Autowired(required = false)
    private ClassInfoService classInfoService;
    
    @CrossOrigin
    @RequestMapping(value = "/pagehelper/{pageCode}/{pageSize}",method = RequestMethod.GET)
    //分页
    public PageInfo<ClassInfo> findByPage(@PathVariable(value = "pageCode") int pageCode, @PathVariable(value = "pageSize") int pageSize) {
    
    
        System.out.println(pageCode+"...."+pageSize);
        PageInfo<ClassInfo> pageInfo = classInfoService.findByPageService(pageCode, pageSize);
        return pageInfo;
    }
}

3. 前端实现

前端使用了Element UI的分页实现，代码如下：

<template>
  <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.params.page"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="this.params.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total"
      >
      </el-pagination>
  </div>
</template>

<script>
import Axios from "axios";
export default {
     
     
  data() {
     
     
    return {
     
     
      total:'',
      params: {
     
     
        page: 1,
        size: 6,
      },
    };
  },
  mounted() {
     
     
   this.pagehelper();
  },
 
  methods: {
     
     
    handleSizeChange(val) {
     
     
      console.log(`每页 ${
       
       val} 条`);
      this.params.size = val;
      this.pagehelper();
    },
    handleCurrentChange(val) {
     
     
      console.log(`当前页: ${
       
       val}`);
      this.params.page = val;
      this.pagehelper();
    },
    pagehelper:function(){
     
     
           this.$axios
      .get("/pagehelper/" + this.params.page + "/" + this.params.size)
      .then((res) => {
     
     
        console.log(res.data);
        this.datas = res.data.list;
        this.total = res.data.total;
      });
    }
  },
};
</script>

<style scoped>

</style>

自此分页功能实现！！！