vue+springboot项目，使用vue的pagination+PageHelper实现分页

创建springboot项目

1. 首先创建一个maven项目，再将所需的依赖引入pom文件中

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
    	<!---springboot版本-->
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.2.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.xxx</groupId>
    <artifactId>freemakerproject</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>freemakerproject</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.8</version>
            <scope>runtime</scope>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.mybatis.spring.boot/mybatis-spring-boot-starter -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.2.0</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <!--pagehelper分页插件-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.3</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

你也可以采用STS的方式创建springboot项目，在创建的时候可以将项目的所需的模块引入即可。
在创建项目时要注意选择合适的版本，Springboot的版本要与PageHelper的版本相适应，否则启动时会报错，这里使用的SpringBoot版本为2.1.2，PageHelper与SpringBoot整合版本为1.2.3，运行时未出现错误

2. 创建实体类

package com.tyy.freemakerproject.model;

import java.io.Serializable;

public class User implements Serializable {
    private int id;//用户id
    private String name;//用户名
    private String password;//密码

    public int getId() {
        return this.id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

3. 创建controller请求方法

    /**
     * 分页请求
     * @param currentPage 当前页
     * @param pageSize  每页显示大小
     * @return
     */
    @ResponseBody
    @RequestMapping(value = "getUserList/{currentPage}/{pageSize}",method = RequestMethod.GET)
    public PageInfo<User> getUserByUserPage(@PathVariable(name = "currentPage") int currentPage, @PathVariable(name = "pageSize") int pageSize){
        return userService.getAllUsersByPage(currentPage,pageSize);
    }

4. service方法请求

  @Override
    public PageInfo<User> getAllUsersByPage(int pageNum,int pageSize) {
        PageHelper.startPage(pageNum,pageSize);//这行是重点，表示从pageNum页开始，每页pageSize条数据
        List<User> list = userDao.getAllUsers();
        PageInfo<User> pageInfo = new PageInfo<User>(list);
        return pageInfo;
    }

5. 数据库的访问
   dao层的操作

@Mapper
public interface UserDao {
    public List<User> getAllUsers();
}

对应的mapper请求

<select id="getAllUsers" resultType="com.tyy.freemakerproject.model.User">
        SELECT * FROM tb_user
    </select>

7. 对应的配置文件配置

server:
  port: 8088

spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/freemaker
    username: root
    password: 123456
mybatis:
  type-aliases-package: com.tyy.freemakerproject.model
  mapperLocations: classpath:mappers/*.xml
# 分页配置
pagehelper:
  helper-dialect: mysql
  reasonable: true
  support-methods-arguments: true
  params: count=countSql

8. 主启动类中注入PageHelper类

 @Bean
    public PageHelper pageHelper(){
        PageHelper pageHelper = new PageHelper();
       return pageHelper;
    }

创建vue项目

1. 使用vue create 创建一个普通的vue项目,要引入router
2. 项目创建成功后使用vue add添加axios和element-ui两个依赖

vue add axios --save
vue add element-ui --save

添加成功后，会给你的vue项目创建一个文件，plugins/axios.js,里面给我们封装好了axios的方法，我们可以直接在需要的地方调用即可。
跨域配置：在项目下创建一个vue.config.js文件，里面可以进行跨域配置

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8088',
                pathRewrite:{
                    '^/api':''
                },
                security:false,
                changeOrigin:true
            }
        }
    }
}

在axios.js中还需要将baseURL改成/api,或者你在发起请求时添加api前缀，这样就无需修改baseURL了，但是推荐使用的是修改baseURL的方式。
4. 创建userList.vue

<template>
    <div class="table">
            <el-table
                    :data="userList"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="用户名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="password"
                        label="密码">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="150">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small"><i class="el-icon-view">查看</i></el-button>
                        <el-button type="text" size="small"><i class="el-icon-edit">编辑</i></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
            </el-pagination>
    </div>
</template>
<script>

    export default {
        components: {},
        data() {
            return {
                currentPage:1, //初始页
                pageSize:5,    //    每页的数据
                total:1,
                userList: []
            };
        },  methods: {
           handleSizeChange(pageSize){
               this.pageSize = pageSize;
               // 点击每页显示的条数时，显示第一页
               this.showData(this.currentPage,this.pageSize)
            },
            showData(currentPage,pageSize){
                var _this = this;
                this.axios.get("/getUserList/"+currentPage+"/"+pageSize).then(res=>{
                    _this.userList = res.data.list;
                    _this.total = res.data.total;
                })
            },
            handleCurrentChange(currentPage){
                this.currentPage = currentPage;
                // 点击每页显示的条数时，显示第一页
                this.showData(this.currentPage,this.pageSize)
            }
        }, mounted(){
            this.showData(1,5)
        }
    }
</script>
<style scoped>
    .table{
        width:50%;
        margin: 0 auto;
    }
    .el-pagination{
        margin-top:10px;
    }
</style>

这里在页面加载时就像后台发起一次请求，可以请求到具体的数据。而当pageSize和currentPage发生改变时会发起请求获取数据，这是后台进行的分页，前台只需要发起请求请求进行显示即可。
也可以进行前台逻辑分页，可以详细参考https://www.jianshu.com/p/70facd19ec55

效果图