Springboot+VUE+Element-ui实现分页

Springboot+VUE+Element-ui实现分页

在SpringBoot+VUE环境中，我们可以利用Element-UI和Mybatis的分页插件PageHelper实现的前后端分离的分页功能

具体步骤：

第一步在pom中导入依赖

<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.在Dao层创建方法

List<T> findAllClass();

3.编写xml文件

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

4.在Service层的接口里写方法

PageInfo<T> findByPageService(int pageCode, int pageSize);

5.编写Service接口里的实现方法

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

6.编写Controller层

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

前端页面

使用elemetui的el-pagination

<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>

这样分页就完成啦！！！！！