Quasar服务端分页与筛选失效：参数无法传递至Laravel API

我在Quasar应用中搭建基于Laravel API的服务端分页与筛选系统，目前遇到的问题是筛选条件、分页信息等参数无法传递至后端服务器。以下是相关代码：

Vue端请求代码 #

function onRequest (props) {
  const { page, rowsPerPage, sortBy, descending } = props.pagination
  const filter = props.filter
  console.log(rowsPerPage)

  loading.value = true

  // emulate server
  setTimeout(() => {
    const fetchCount = rowsPerPage === 0 ? pagination.value.rowsNumber : rowsPerPage

    // fetch data from "server"
    axios.get('https://api.bdshsystem.com/public/api/v1/branch-list',
    {query: {
      page: page,
      limit: fetchCount,
      keyword: filter,
    }}).then(response => {
      // clear out existing data and add new
      rows.value.splice(0, rows.value.length, ...response.data.data)

      // don't forget to update local pagination object
      pagination.value.page = response.data.meta.current_page
      pagination.value.rowsPerPage = response.data.meta.per_page
      pagination.value.rowsNumber = response.data.meta.total
    })
    loading.value = false
  }, 1500)
}

Laravel控制器代码 #

public function index(Request $request)
{
    $searchParams   = $request->all();
    $wardQuery    = Ward::query();
    $limit          = Arr::get($searchParams, 'limit', static::ITEM_PER_PAGE);
    $keyword        = Arr::get($searchParams, 'keyword', '');
    try{
        if (!empty($keyword)) {
            $wardQuery->where('name', 'LIKE', '%' . $keyword . '%');
            $wardQuery->orWhere('short_code', 'LIKE', '%' . $keyword . '%');
        }
        return WardResource::collection($wardQuery->paginate($limit));
   }catch (\Exception $ex) {
        $response = [
            'status' => 'Failed',
            'msg' =>  (env('APP_ENV') != 'production')?$ex->getMessage():'Server error' . ' , 
             Please try again.',
            'errdetailed' => (env('APP_ENV') != 'production')? $ex:'',
            'code' => 400
        ];
        return response()->json($response);
   }
}

问题排查与修复方案 #

1. 修正Axios请求参数格式 #

Axios的GET请求参数需要放在params字段中，而非你代码里的query字段，这是参数无法传递的核心原因。修改Vue端请求代码：

axios.get('https://api.bdshsystem.com/public/api/v1/branch-list',
{
  params: { // 替换query为params
    page: page,
    limit: fetchCount,
    keyword: filter,
  }
})

2. 修复异步逻辑错误 #

你当前把loading.value = false放在了setTimeout的同步代码块中，会导致加载状态提前结束，且请求失败时无法正确处理。调整为：

setTimeout(() => {
  const fetchCount = rowsPerPage === 0 ? pagination.value.rowsNumber : rowsPerPage

  axios.get('https://api.bdshsystem.com/public/api/v1/branch-list',
  {
    params: {
      page: page,
      limit: fetchCount,
      keyword: filter,
    }
  }).then(response => {
    rows.value.splice(0, rows.value.length, ...response.data.data)

    pagination.value.page = response.data.meta.current_page
    pagination.value.rowsPerPage = response.data.meta.per_page
    pagination.value.rowsNumber = response.data.meta.total
  }).catch(error => {
    console.error('请求失败:', error) // 可选：添加用户提示
  }).finally(() => {
    loading.value = false // 无论请求成败都关闭加载状态
  })
}, 1500)

3. 可选：兼容Laravel默认分页参数 #

Laravel默认分页参数为page和per_page，你当前用的limit虽然能通过控制器处理，但可以调整为默认参数以简化代码：

• Vue端修改：

params: {
  page: page,
  per_page: fetchCount, // 替换limit为per_page
  keyword: filter,
}

• Laravel控制器修改：

$limit = Arr::get($searchParams, 'per_page', static::ITEM_PER_PAGE);

4. 调试技巧 #

• Vue端打印请求URL，确认参数拼接是否正确：

const url = new URL('https://api.bdshsystem.com/public/api/v1/branch-list')
url.searchParams.set('page', page)
url.searchParams.set('limit', fetchCount)
url.searchParams.set('keyword', filter)
console.log('请求URL:', url.toString())

• Laravel端打印接收的参数，确认是否正常获取：

// 在index方法开头添加
Log::info('Received params:', $request->all());
// 或临时返回参数测试
// return response()->json($request->all());

内容的提问来源于stack exchange，提问作者Azim