flask实现分页

前端

<template>
  <div class="container">
    <el-input
      v-model="search.username"
      style="width: 200px"
      placeholder="请输入搜索的用户名"
    ></el-input>

    <el-input
      v-model="search.mobile"
      style="width: 200px; margin-right: 10px"
      placeholder="请输入搜索手机号"
    ></el-input>
    <el-button @click="getUser">搜索</el-button><br />

    <!-- 实现分页 -->
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="size_change"
      >
      </el-pagination>
    </div>
    <!-- page_size 每页显示几条数据 -->
    <!-- page   当前页面-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      host: process.env.VUE_APP_BASE_HOST,
      search: {
        username: "",
        mobile: "",
      },
      total: "10", //总条数
      page_size: "10", // 每页显示几条数据，仅控制默认值，发送改变还要赋值
      page: "1", // 当前页面，仅控制默认值，发送改变还要赋值
    };
  },
  mounted() {
    this.getUser();
  },

  methods: {
    getUser() {
      this.$axios
        .get("/user/list", {
          params: {
            // 表示当前页码
            page: this.page,
            // 每页显示几条数据
            page_size: this.page_size,
            search: this.search,
          },
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 当每页显示几条数据的值；发生变化时 给默认值赋值
    // 并重新刷新页面
    size_change(val) {
      console.log(`每页 ${val} 条`);
      this.page_size = val;
      this.getUser();
    },
    // 当 当前页面的值；发生变化时 给默认值赋值
    // 并重新刷新页面
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.getUser();
    }
  },
};
</script>

<style scoped></style>

后端

class UserListView(BaseView):
    def get(self):
        # 获取当前页码
        req = reqparse.RequestParser()
        req.add_argument("page", type=int, default=1)
        req.add_argument("page_size", type=int, default=10)
        req.add_argument("search", default="{}")
        args = req.parse_args()

        print(args["search"])
        search = json.loads(args["search"])
        print(">>>>>>", search)

        # 分页用到两个接口 一个是offset偏移量 一个是limit限制偏移量
        # 偏移量 = 每页条数 * (当前页数 - 1)
        offset = args["page_size"] * (args["page"] - 1)
        sql = UserModel.query.filter(UserModel.delete_time == None) \
            .filter(UserModel.username.like("%" + search["username"] + "%")) \
            .filter(UserModel.mobile.like("%" + search["mobile"] + "%"))

        user_list = sql.offset(offset).limit(args["page_size"]).all()

        count = len(sql.all())

        # 获取所有数据的条数  符合查询 减少性能消耗
        # from sqlalchemy import func
        # count = db.session.query(func.count(UserModel.uid)).first()[0]
        # print(">>>", db.session.query(func.count(UserModel.uid)).first())

        user_all = []
        for item in user_list:
            d = {
                "uid": item.uid,
                "username": item.username,
                "mobile": item.mobile,
                "avatar": item.avatar,
                "status_text": "正常" if item.status else "冻结中",
                "status": item.status,
                "create_time": str(item.create_time),
            }
            user_all.append(d)
        return self.success(data={
            "list": user_all,
            "total": count
        })