前后端分离的分页查询，基于Springboot + vue + Element Ui 实现过程附源码

分页查询
在前端中分页查询的出现是为了让有一定数据量的页面能够更合理的展示出来，同时结合Element Ui提供的分页组件，能够对前端展示的数据做更多的操作。

前端代码

  <!--分页组件-->
 <div style="display:inline-block;">
          <el-pagination
            style="padding-top: 15px"
            @size-change="findSizeChange"
            @current-change="findPage"
            :current-page.sync="pageNow"
            :page-sizes="[2,4,6,8,10]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>

 export default {
    
    
    name: "Users",
    data() {
    
    
      return {
    
    
       //每页显示的条数
        size: 4,
        //总条数
        total: 0,
        //当前页码
        pageNow: 1,
        },
        methods: {
    
    
      //用来处理每页显示记录发生变化的方法
      findSizeChange(size) {
    
    
        console.log("当每页条数改变的时候" + size);
        //将val赋值给size
        this.size = size;
        //重新去后台查询数据
        this.findAll()
      },
      //当前页码改变的时候
      findPage() {
    
    
        console.log(this.pageNow)
        this.findAll(this.pageNow, this.size)
      },
        //查询所有用户信息
      findAll(page, size) {
    
    
        var that = this
        //首次进入该页面时会是created调用这个方法，是不会进行传参的
        page = page ? page : this.pageNow;
        size = size ? size : this.size;
        // this.$http.get("http://localhost:8989/zs/user/findByPage?pageNow="+page+"&pageSize="+size).then(response => {
    
    
        this.$http.get("http://localhost:8989/zs/user/findByPage",{
    
    
          params:{
    
    
            pageNow:page,
            pageSize:size
          }}
        ).then(response => {
    
    
          that.userList = response.data.users;
          that.total = response.data.total;
        }).catch(err => {
    
    
          console.log(err )
        })
        // console.log("显示用户所有信息" + response.data.users);
      },

后端代码（这里以Springboot为例）

dao层

//分页查询
    List<UserInfo> findByPage(@Param("start") Integer start,@Param("rows") Integer rows);

mapper文件

<!--分页查询-->
    <select id="findByPage" resultType="UserInfo">
        select id,  username, sex, dept,   birth, email,  phoneNumber, status, address,  name
        from vue.zs_userinfo limit #{start},#{rows}
    </select>

Service

public interface UserInfoService {
    
    
//分页查询
  List<UserInfo> findByPage(Integer start, Integer rows);
}
@Service
@Transactional
public class UserInfoServiceImpl implements UserInfoService {
    
    
 @Override
	public List<UserInfo> findByPage(Integer pageNow, Integer rows) {
    
    
    	int start = (pageNow-1)*rows;
    	return userInfoDao.findByPage(start,rows);
  }

Controller

  /**
  * 分页查询方法
  */
 @GetMapping("findByPage")
 public Map<String, Object> findByPage(String pageNow,String pageSize) {
    
    
   Map<String, Object> result = new HashMap<>();
   int page = 0;
   int size = 0;
   try {
    
    
     page = Integer.parseInt(pageNow);
     size = Integer.parseInt(pageSize);
   } catch (NumberFormatException e) {
    
    
     e.printStackTrace();
     /*result("error","类型转换错误！".);*/
   }

   //这里我们做一个初始化页面定义，防止空指针错误
   page = page <= 0 ? 1 : page;
   size = size <= 0 ? 4 : size;
   List<UserInfo> users = userInfoService.findByPage(page, size);
   Long totals = userInfoService.findTotals();
   result.put("users", users);
   result.put("total", totals);
   return result;
 }

效果图