测试需求平台17-产品管理分页功能和样式优化

<template>*
  <a-pagination :total="50"/>
</template>

<template>
  <a-pagination :total="50" show-total show-jumper show-page-size/>
</template>

<a-pagination
    :total="50"
    :page-size="20"
    :current= "2"
    :page-size-options=[10,20,30]
    show-total
    show-jumper
    show-page-size
  />

@app_product.route("/api/product/searchPage",methods=['GET'])
def product_search_page():
    # 获取title和keyCode
    title = request.args.get('title')
    keyCode = request.args.get('keyCode')

    # 新增页数和每页个数参数，空时候做默认处理，并注意前端传过来可能是字符串，需要做个强制转换
    pageSize = 10 if request.args.get('pageSize') is None else int(request.args.get('pageSize'))
    currentPage = 1 if request.args.get('currentPage') is None else int(request.args.get('currentPage'))

    sql = "SELECT * FROM `products` WHERE `status`=0"
    # 增加基础全量个数统计
    sqlCount = "SELECT COUNT(*) as `count` FROM `products` WHERE `status`=0"

    # 条件拼接全量统计也需要同步

    if title is not None:
        sql = sql + " AND `title` LIKE '%{}%'".format(title)
        sqlCount = sqlCount + " AND `title` LIKE '%{}%'".format(title)
    if keyCode is not None:
        sql = sql + " AND `keyCode` LIKE '%{}%'".format(keyCode)
        sqlCount = sqlCount + " AND `keyCode` LIKE '%{}%'".format(keyCode)

    # 排序最后拼接带分页查询
    sql = sql + ' ORDER BY `update` DESC LIMIT {},{}'.format((currentPage - 1) * pageSize, pageSize)

    connection = connectDB()

    # 使用python的with..as控制流语句（相当于简化的try except finally）
    with connection:
        # 先查询总数
        with connection.cursor() as cursor:
            cursor.execute(sqlCount)
            total = cursor.fetchall()

        # 执行查询分页查询
        with connection.cursor() as cursor:
            # 按照条件进行查询
            cursor.execute(sql)
            data = cursor.fetchall()

    # 带着分页查询结果和总条数返回，total注意是list字段需要下角标key取值
    resp_data = {
        "code": 20000,
        "message": "success",
        "data": data,
        "total": total[0]['count']
    }

    return resp_data

// 定义列表总数变量ts语法
const productTotal = ref<number>();

// 增加页吗和每页个数，给定默认值
const productSearch = reactive({
  title: undefined,
  keyCode: undefined,
  pageSize: 5,
  currentPage: 1
})

// 优化搜索请求方法
const btnSearchClick = async () => {
  // const res = await apiProductSearch(productSearch);
  // 注意此处替换成的新的接口方法
  const res = await apiProductSearchPage(productSearch);
  if (res.code === 20000) {
    renderList.value = res.data
    // 增加总数量的赋值
    productTotal.value = res.total
  } else {
    console.log("产品搜索失败");
  }
};

// 页切换时候拿到点击页码并给赋值到请求参数，同时触发新的查询
const pageChange = (current: number) => {
    console.log(current)
    productSearch.currentPage=current
    btnSearchClick()
}

// 
const pageSizeChange = (pageSize: number) => {
  console.log(pageSize)
  productSearch.pageSize=pageSize
  btnSearchClick()
}

<a-pagination
   :total="productTotal"
   :page-size-options=[5,10,20,30,50]
    default-page-size="5"
    @change="pageChange"
    @pageSizeChange="pageSizeChange"
    show-total
    show-page-size          
  />