vue分页+Pagehelper插件的使用

1.环境准备

（1）SpringBoot入门，快速搭建简单Web应用环境

（2）SpringBoot入门，整合Mybatis并使用Mybatis-Generator自动生成所需代码

2.在pom文件中引入Pagehelper分页插件

<!-- 分页插件 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.5</version>
        </dependency>

3.配置分页插件
打开application.properties，添加如下几行配置信息

#分页插件
pagehelper.helper-dialect=mysql
pagehelper.params=count=countSql
pagehelper.reasonable=true
pagehelper.support-methods-arguments=true

或

pagehelper:
	  helperDialect: mysql
	  reasonable: true
	  supportMethodsArguments: true
	  params: count=countSql

4.测试

public PageInfo<?> userList(Map<String,String> map) {

        int currentPage = Integer.parseInt(map.get("currentPage"));
        int pagesize = Integer.parseInt(map.get("pagesize"));
        PageHelper.startPage(currentPage,pagesize);
        List<?> list = userMapper.listUser();
        PageInfo<?> pageInfo = new PageInfo<>(list);
        return pageInfo;
    }

或

@Override public Page getCheckList(String page, String
pageSize,Map map) { Page pageInfo =null;
if(null != page && !"".equals(page)){
PageHelper.startPage(Integer.parseInt(page),10);
safeMapper.getCheckList(map); pageInfo = PageHelper.endPage();
return pageInfo; } return null;
}

或

@GetMapping("/getAllPerson")
public String getAllPerson(Model model,@RequestParam(defaultValue = “1”,value = “pageNum”) Integer pageNum){
PageHelper.startPage(pageNum,5);
List list = personService.getAllPerson();
PageInfo pageInfo = new PageInfo(list);
model.addAttribute(“pageInfo”,pageInfo);
return “list”;
}

5.页面

data () {
    return {
      tableData: []
      total: 0, //数据总数
      pagesize: 2, //每页的数据条数
      currentPage: 1, //默认开始页面
    }

methods:{
		    initData(){
		      this.$axios({
		        method: 'post',
		        url: this.HOST + "/listUser",
		        data: {currentPage:this.currentPage,pagesize:this.pagesize}
		      }).then((result) => {
		        this.total = result.data.total;
		        this.tableData = result.data.list;
		        console.log(result)
		      });
		    },
		    handleSizeChange(val) {
		      console.log(`每页 ${val} 条`);
		      this.pagesize=val;
		      this.initData();
		    },
		    handleCurrentChange(val) {
		      console.log(`当前页: ${val}`);
		      this.currentPage=val;
		      this.initData();
		    }
  }

6.效果