Pagination分页组件在前端Vue与后端ssm使用

一、导入Pagination相关插件信息
1、导入Pagination组件(component)

.pagination-container {
  background: #fff;
  padding: 32px 16px;
}
.pagination-container.hidden {
  display: none;
}

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) }
})()


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
}


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（上面已经完成了准备工作）

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

methods:{
        getList() {
            var vm=this;
            this.axios({
                method:'get',
                url:'http://localhost:8099/store/product/list?pageNum='+vm.listQuery.page
                                        +'&pageSize='+vm.listQuery.limit
            }).then(function (response) {
                vm.total = response.data.total;
                vm.list = response.data.list;
            })
        }
    }

完成前端分页工作！！！！

一、准备工作
1、导入pagehelper的jar包（我导入的是maven依赖）

		
        
            com.github.pagehelper
            pagehelper
            5.3.0
        

2、在mybatis-config.xml(大家一定要放对地方！！mybatis mapper文件一些属性有按顺序的哦哦！！)

二、开始写后台
1、在controller中(这个地方大家就根据自己的项目写哦！！记得返回值是PageInfo<实体类>！！还要记得是RestController哦哦如果是Controller就是跳转页面咯。如果你想用@Controller，那记得在这个方法上写入@ResponseBody，其作用其实是将java对象转为json格式的数据)

@RequestMapping(value = "/product/list",method = {RequestMethod.GET})
    public PageInfo viewProductList(int pageNum, int pageSize) throws Exception {
        PageHelper.startPage(pageNum, pageSize);
        List list = productService.getProductList();  //不分页的查询结果
        PageInfo productList = new PageInfo<>(list);  //插件自动为你分页
        return productList;
    }

完成！！！！！！！！！！！！！！！！！！
心得：最近需要交个ssm课程项目，所以就自学了vue，感觉好一点！后面想使用分页，故就去自学了Pagination插件，写下来为了以后方便自己忘记回忆起来，也给大家分享一下，希望给各位有帮助嘻嘻嘻！2022第一篇CSDN，加油加油！！祝大家新的一年顺顺利利！！【2022-01-01】