springboot+vue+elementUI实现分页功能

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

springboot+vue+elementUI做分页还是非常简单的，这里简单写个demo。

一、前端

<template>
  <div class="father">
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="username"
          label="用户名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="password"
          label="密码"
          width="180">
      </el-table-column>
    </el-table>
    <el-pagination
        background
        @current-change="pageNoChange"
        :current-page.sync="currentPage.pageNo"
        :page-size="5"
        layout="total, prev, pager, next"
        :total='currentPage.total'>
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: "Father",
  data(){
    return {
      tableData: [],
      currentPage: {
        pageNo: 1,
        total: 0
      }
    }
  },
  mounted() {
    this.search();
  },
  methods:{
    pageNoChange(){
      let that = this;
      that.search();
    },
    search(){
      let that = this;
      that.$axios.defaults.baseURL='http://localhost:8081'
      that.$axios({
        method: 'get',
        url: '/test/search?pageNo='+that.currentPage.pageNo,
      }).then((result) => {
        that.tableData = result.data.data;
        that.currentPage.total = result.data.count;
      });
    }
  }
}
</script>

二、后端

controller代码：

import com.example.myblog.service.TestService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.Map;

@RestController
@RequestMapping("/test")
public class TestController {

    @Autowired
    private TestService testService;

    @RequestMapping(value="/search",method={RequestMethod.GET})
    @ResponseBody
    public Map<String, Object> search(Integer pageNo){
        return testService.search(pageNo);
    }
}

service代码：

import java.util.Map;

public interface TestService {
    Map<String,Object> search(Integer pageNo);
}

serviceImpl

import com.example.myblog.mapper.TestMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.HashMap;
import java.util.Map;

@Service
public class TestServiceImpl implements TestService{

    @Autowired
    private TestMapper testMapper;

    @Override
    public Map<String,Object> search(Integer pageNo) {
        Integer pageSize = 5;
        Integer startIndex = pageSize * (pageNo-1);
        Map map = new HashMap();
        map.put("data",testMapper.search(startIndex,pageSize));
        map.put("count",testMapper.searchCount());
        return map;
    }
}

mapper代码：

import com.example.myblog.pojo.Test;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;


import java.util.List;
@Mapper
public interface TestMapper {
    @Select("select * from test limit #{startIndex},#{pageSize}")
    List<Test> search(Integer startIndex,Integer pageSize);
    @Select("select count(*) from test")
    Integer searchCount();
}

数据库数据：

效果图：

总结

利用element-UI做分页还是很简单的，查询时，得到分页数据和总数据量，传到前端赋值即可。