分页实现

vue前端实现

导入Pagination相关插件信息

1、导入Pagination组件(component)

<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, 8, 10, 12]
      }
    },
    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>

2、导入scroll-to.js文件，可放在utils包下（注意：因为Pagination组件中引入了这个文件，所以路径一定要对上！！！！）

Math.easeInOutQuad = function(t, b, c, d) {
  t /= d / 2
  if (t < 1) {
    return c / 2 * t * t + b
  }
  t--
  return -c / 2 * (t * (t - 2) - 1) + b
}

// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
var requestAnimFrame = (function() {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
})()

/**
 * Because it's so fucking difficult to detect the scrolling element, just move them all
 * @param {number} amount
 */
function move(amount) {
  document.documentElement.scrollTop = amount
  document.body.parentNode.scrollTop = amount
  document.body.scrollTop = amount
}

function position() {
  return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
}

/**
 * @param {number} to
 * @param {number} duration
 * @param {Function} callback
 */
export function scrollTo(to, duration, callback) {
  const start = position()
  const change = to - start
  const increment = 20
  let currentTime = 0
  duration = (typeof (duration) === 'undefined') ? 500 : duration
  var animateScroll = function() {
    // increment the time
    currentTime += increment
    // find the value with the quadratic in-out easing function
    var val = Math.easeInOutQuad(currentTime, start, change, duration)
    // move the document.body
    move(val)
    // do the animation unless its over
    if (currentTime < duration) {
      requestAnimFrame(animateScroll)
    } else {
      if (callback && typeof (callback) === 'function') {
        // the animation is done so lets callback
        callback()
      }
    }
  }
  animateScroll()
}

在Vue文件中引入和使用Pagination

1、在你想使用这个分页组件的script中引用，因为前面的pagination组件我放在components下！大家根据自己的路径导入！！

import Pagination from '@/components/Pagination'

2、在export default{}中写入

components: { Pagination }

3、在data中输入

list: null,  //list集合
         total: 0,  //总共记录
         listQuery: {
             page: 1,   //当前第几页
             limit: 5,   //一页记录数
         }

4、在template中使用pagination（上面已经完成了准备工作）

<pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="load"
    ></pagination>

5、在查询方法中添加pageSize属性和pageNum属性

load() {
      this.request
        .get(
          "/user/findAll?pageNum=" +
            this.listQuery.page +
            "&pageSize=" +
            this.listQuery.limit
        )
        .then((resp) => {
          console.log(resp);
          this.tableData = resp.data.list;
          //得到一个PageInfo对象
          //将PageInfo中的total赋值给当前的total
          this.total = resp.data.total;
          //当前页显示的所有数据
          this.list = resp.data.list;
        });
    }

6、request.js

import axios from 'axios'
import router from "@/router";
import Cookies from 'js-cookie'

const request = axios.create({
    baseURL: 'http://localhost:9090/',
    timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

    // const adminJson = Cookies.get('admin')
    // if (adminJson) { 
    //     // 设置请求头
    //     config.headers['token'] = JSON.parse(adminJson).token
    // }
    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        // if (res.code === '401') {
        //     router.push('/login')
        // }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)


export default request

springboot实现

1、引入插件

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

2、配置yaml文件

spring:
  main:
    allow-circular-references: true
  pagehelper:
    # 分页插件会自动检测当前的数据库链接，自动选择合适的分页方式（可以不设置）
    helper-dialect: mysql
    # 上面数据库设置后，下面的设置为true不会改变上面的结果（默认为true）
    auto-dialect: true
    page-size-zero: false
    reasonable: true
    # 默认值为 false，该参数对使用 RowBounds 作为分页参数时有效。（一般用不着）
    offset-as-page-num: false
    # 默认值为 false，RowBounds是否进行count查询（一般用不着）
    row-bounds-with-count: false
    # 用于控制默认不带 count 查询的方法中，是否执行 count 查询，这里设置为true后，total会为-1
    default-count: false
    supportMethodsArguments: true
    params: count=countSql
    autoRuntimeDialect: true

3、在controller中实现

@GetMapping("/findAll")
    public Result<?> findAll(@RequestParam int pageNum, @RequestParam int pageSize){
        //1.通过调用 PageHelper 的静态方法开始获取分页数据
        //指定当前第几页以及每页显示的条数
        PageHelper.startPage(pageNum, pageSize);
        //2.获得所有的记录
        List<PersonalContact> all = personalService.findAll();
        //3.获得当前分页对象
        PageInfo<PersonalContact> pageInfo = new PageInfo<PersonalContact>(all);

        return Result.success(pageInfo);
    }

完工！！！