Vue2.0+Element-UI+SpringBoot+Mybatis实现分页查询

 

前端框架

<div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="width: 120px"
      >
      </el-pagination>
    </div>
data中初始化
 currentPage: 1,
      total: "",
      size: 5,

设置每页行数和页码

 //分页时修改每页的行数,这里会自动传入一个size
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      //修改当前每页的数据行数
      this.size = val;
      //数据重新分页
      this.queryByPage(this.currentPage, this.size);
    },
    //调整当前的页码
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      //修改当前的页码
      this.currentPage = val;
      //数据重新分页
      this.queryByPage(this.currentPage, this.size);
    },

分页查询方法

 //通过分页查询用户
    queryByPage(currentPage, size) {
      this.$axios({
        url: "/user/getUserAllByPage/" + currentPage + "/" + size,
        method: "post",
      }).then((res) => {
        console.log(res.data);
        //此页用户传值
        this.Users = res.data.userInfo;
        console.log(res.data.total);
        //用户数量
        this.total = res.data.total;
      });
    },

初始化查询方法

mounted() {
    this.queryByPage(this.currentPage, this.size);
  },

 

后端Mapper

<!--分页-->
    <select id="queryAll" resultMap="UserMapper">
        select user_id,city_name,car_name,date,linkman,phone,state
        from user,city,car
        where user.city_id=city.city_id and user.car_id=car.car_id
        order by user_id ASC
            LIMIT #{Page},#{size};
    </select>

因为此查询控制了每页查询数量所以不能查出所有数量 ，要想显示共几条信息，做数量统计

 <!--查询用户数-->
    <select id="selectCount" resultType="java.lang.Integer">
        SELECT count(*) from user
    </select>

Controller要接收当前页及当前页显示数量

 /**
     * 分页查询
     */
    @PostMapping("/queryAll/{currentPage}/{size}")
    public JSONObject getFlight(@PathVariable("currentPage") int currentPage,@PathVariable("size") int size) {
        return userService.queryAll(currentPage, size);
    }

后端要返回查询的信息数组+数量统计 故返回值应用JSONObject

public JSONObject queryAll(int currentPage, int size) {
        int Page=(currentPage-1)*size;
        JSONObject res=new JSONObject();
        List<User> users=userMapper.queryAll(Page,size);
        int total=userMapper.selectCount();
        res.put("userInfo",users);
        res.put("total",total);
        return res;
    }

 

posted @ 2022-05-29 18:03  快了星球  阅读(417)  评论(0)    收藏  举报