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;
    }

 

TRANSLATE with x

English

Arabic	Hebrew	Polish
Bulgarian	Hindi	Portuguese
Catalan	Hmong Daw	Romanian
Chinese Simplified	Hungarian	Russian
Chinese Traditional	Indonesian	Slovak
Czech	Italian	Slovenian
Danish	Japanese	Spanish
Dutch	Klingon	Swedish
English	Korean	Thai
Estonian	Latvian	Turkish
Finnish	Lithuanian	Ukrainian
French	Malay	Urdu
German	Maltese	Vietnamese
Greek	Norwegian	Welsh
Haitian Creole	Persian

 

TRANSLATE with

COPY THE URL BELOW

Back

EMBED THE SNIPPET BELOW IN YOUR SITE

Enable collaborative features and customize widget: Bing Webmaster Portal

Back