Springboot+Pagehelper+Vue 完成分页显示操作

Springboot+Pagehelper+Vue 完成分页显示操作

在开发的过程最常用也是最常见的就是表格的分页查询了，在开发的时候碰到了这个需求，所以今天讲讲怎么把Pagehelper集成到SpringBoot并结合前端框架Vue，完成分页的操作！

1、后端Springboot

首先先在pom加上Pagehelper的依赖

 		<!-- pageHelper -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.3.0</version>
        </dependency>

然后就是后端的的Controller文件的编写

    @ApiOperation(value = "xxxxxxxx")
    @GetMapping("pageInfo")
    @ResponseBody
    public PageInfo<xxx_xxx> dataInfo(int pageNum, int pageSize ,String xxx,String xxxx){

        //1. 通过调用PageHelper的静态方法开始获取分页数据
        //指定当前是第几页，以及每页要显示的条数
        PageHelper.startPage(pageNum,pageSize);

        //2. 获取当前的所有的记录
        List<I_Family> list = i_familyService.getFamily(xxx, xxx);

        //3. 获取当前分页对象
        PageInfo<I_Family> pageInfo = new PageInfo<I_Family>(list);

        return pageInfo;
    }

那么现在后端就解决了，开始编写前端的部分的代码了…

2、Vue 前端编写

首先先加一下element-UI分页的组件
在这个地方引入Pagination组件

<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { scrollTo } from '@/utils/scroll-to'

export default {
  name: 'Pagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 20
    },
    pageSizes: {
      type: Array,
      default() {
        return [5,10, 20, 30, 50,100]
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { page: this.currentPage, limit: val })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    }
  }
}
</script>

<style scoped>
.pagination-container {
  background: #fff;
  padding: 32px 16px;
}
.pagination-container.hidden {
  display: none;
}
</style>

然后在index页面引入组件开始使用

<template>
<!--分页-->
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                @pagination="getList"/>
</template>
export default {
  components: { Pagination },
  data() {
    return {
		listQuery: {
        page: 1,
        limit: 20
      	},
	},
	methods:{
	fetchData(){
	 var vm = this
	 this.axios({
          method: 'GET',
          url: 'http://localhost:8070/xxx/xxxx?xxxID=' + id + '&pageNum=' + vm.listQuery.page + '&pageSize=' + vm.listQuery.limit
        }).then(function(resp) {
          console.log(resp.data)
          //得到一个PageInfo对象
          vm.total = resp.data.total//将pageInfo中的total对象给vm中的total
          vm.list = resp.data.list//当前页的所有数据
	}
	}
  }

到现在为止就可以实现分页功能！！！

3、结果

收工，跑路！！！！