java与vue实现分页

实现分页功能(笔记)

1.1、后端实现层，通过前端传入PageNum(第几页)以及PageSize(每页的大小)，计算出偏移量(Len)

public List<Staffs> qryStaffs(Staffs staffs) {
        staffs.setLen((staffs.getPageNum()-1)*staffs.getPageSize());
        return staffMapper.qryStaffs(staffs);
    }

1.2、 xml通过sql语法查询数据

select * from table1 limit 偏移量,每页大小

<select id="qryStaffs" parameterType="Staffs" resultType="Staffs" resultMap="StaffsMap">
        select * from  demo_test_staff where isdelete != '1'
        <if test="staffName != null and staffName != ''">
            and name like "%"#{staffName,jdbcType=VARCHAR}"%"
        </if>
        <if test="staffGender != null and staffGender != ''">
            and gender = #{staffGender}
        </if>
        <if test="beginTime != null">
            and join_day > #{beginTime}
        </if>
        <if test="endTime != null">
            and #{endTime} > join_day
        </if>
        limit #{len},#{pageSize}
    </select>

2.1前端组件

使用的是element-ui组件中的分页
模块如下：

      <el-pagination background
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="currentPage"
                     :page-sizes='[5, 10, 20, 50]'
                     :page-size="qryCondition.pageSize"
                     layout="total, sizes ,prev, pager, next, jumper"
                     prev-text="上一页" next-text="下一页"
                     :total="staffs.total">
      </el-pagination>

方法如下：

// 分页组件
    handleCurrentChange (pageNum) {
      this.qryCondition.pageNum = pageNum
      this.handleQuery()
    },
    handleSizeChange (pageSize) {
      this.qryCondition.pageSize = pageSize
      this.handleQuery()
    },
    handleQuery () {
      this.loading = true
      this.qryStaffs()
    }

不理解的欢迎提问交流，本人菜鸟可以改进博客