vue分页+spring boot +分页插件pagehelper

后端代码

pom.xml中加入分页插件依赖

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

page工具类

@Data
public class PageBean implements Serializable {
    private long total;//总页数
    private List<ViewMaterial> rows;//记录数
    public PageBean(long total,List<ViewMaterial> rows){
        this.total = total;
        this.rows = rows;
    }
}

其中ViewMaterial是一个实体类

Mapper接口层:MaterialMapper.java

Page<ViewMaterial> findByPage();

实现接口:MaterialMapper.xml

<select id="findByPage" resultType="com.gzdh.shangchao.model.ViewMaterial">
    select * FROM ViewMaterial ORDER BY pkid
  </select>

服务接口层:MaterialServer.java

PageBean findByPage(int pageCode, int pageSize);

实现服务接口层:MaterialServerImpl.java

public PageBean findByPage(int pageCode,int pageSize){
        //使用Mybatis分页插件
        PageHelper.startPage(pageCode,pageSize);
        //调用分页查询方法，其实就是查询所有数据，mybatis自动帮我们进行分页计算
        Page<ViewMaterial> page = materialMapper.findByPage();
        return new PageBean(page.getTotal(),page.getResult());
    }

控制层:MaterialController.java

 //分页
    @RequestMapping(value ="/findByPage")
    public ResponseEntity<JsonResult> findByPage(@RequestParam("pageCode") int pageCode, @RequestParam("pageSize") int pageSize){
        logger.info("findByPage");
        JsonResult r = new JsonResult();
        try {
            PageBean pageBean = materialService.findByPage(pageCode,pageSize);
            r.setResult(pageBean);
            r.setStatus("ok");
        }catch (Exception e){
            r.setResult(e.getClass().getName()+":"+e.getMessage());
            r.setStatus("error");
        }
        return ResponseEntity.ok(r);
    }

JsonResult类的代码如下：

@Data
public class JsonResult {

    private String status = null;

    private Object result = null;

    public JsonResult status(String status) {
        this.status = status;
        return this;
    }
}

前端vue的代码

分页主键的代码

 <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageConf.pageCode"
        :page-sizes="pageConf.pageOption"
        :page-size="pageConf.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageConf.totalPage">
      </el-pagination>
    </div>
   <script>
   export default{
       data(){
        //定义分页Config
        pageConf: {
          //设置一些初始值(会被覆盖)
          pageCode: 1, //当前页
          pageSize: 4, //每页显示的记录数
          totalPage: 12, //总记录数
          pageOption: [4, 10, 20], //分页选项
          handleCurrentChange: function () {
            console.log("页码改变了");
          }
        },
       }
   }
  </script>
  methods:{
    //pageSize改变时触发的函数
      handleSizeChange(val) {
        if(this.pageId==1){
          this.findByPageByName(this.pageConf.pageCode, val);
        }
        else{
          this.findByPage(this.pageConf.pageCode, val);
        }

      },
      //当前页改变时触发的函数
      handleCurrentChange(val) {
        if(this.pageId==1){
          this.findByPageByName(val, this.pageConf.pageSize);
        }
        else{
          this.findByPage(val, this.pageConf.pageSize);
        }
      },
      //请求后端数据
  findByPage(pageCode, pageSize) {
        var _this = this;
        this.postRequest('/findByPage', {pageCode: pageCode, pageSize: pageSize}).then(resp => {
          this.pageConf.totalPage = resp.data.result.total;
          _this.emps = resp.data.result.rows;
          console.log(_this.emps);
        });
      },
  }

其中emps是一个集合，之后再通过emp遍历出来数据

<script>
   export default{
       data(){
       emps: [],
       emp: {
          lbname:'',
          pkid:'',
          yllb:'',
          ylbm: '',
          ylname: '',
          barCode: '',
          unit: '',
          purchasePrice: '',
          retailPrice: '',
          supplierName:'',
          supplierId:'',
          supplierID:'',
          miniNum:'',
          wholesalePrice:'',
          spellName:'',
          manufacturer:'',
          stockAmount:'',
          comments:''
          }
       }
   }
  </script>

到此一个vue结合spring boot的分页功能就完成了

戳下方图片关注公众号有更多惊喜哦