Laravel+Vue.js在线商城产品筛选及分页功能失效求助

一、产品筛选功能失效排查 #

• 确认前端请求参数传递：打开浏览器DevTools的Network面板，查看API请求的query参数/请求体，检查brand_id、category_id、sort_by、keyword等参数是否正确传递，参数名是否与后端约定一致，避免出现空值或默认值覆盖的情况。
• 检查后端参数接收与逻辑：在Laravel控制器中，确认用$request->query('参数名')或$request->input('参数名')正确获取前端参数；核对查询构建器的条件：
  • 品牌/分类筛选：是否正确添加where('brand_id', $request->query('brand_id'))这类条件，注意参数为空时需跳过判断（比如if($brandId) { $query->where(...) }）
  • 搜索功能：是否用了where('name', 'like', "%{$keyword}%")或whereRaw("name like ?", ["%{$keyword}%"])，避免SQL注入同时确保模糊查询生效
  • 排序功能：是否正确使用orderBy($sortBy, $sortDirection)，确认$sortBy是数据库表存在的字段（如price、created_at），$sortDirection为asc或desc
• 输出SQL验证：在控制器中加入dd($query->toSql())或Log::info($query->toSql(), $query->getBindings())，查看最终执行的SQL是否包含筛选条件，绑定的参数是否匹配传入值，排查是否存在条件被覆盖或未添加的情况。

二、前端分页功能异常排查 #

• 核对分页数据结构：Laravel默认分页响应包含data（列表数据）、current_page（当前页）、last_page（总页数）、per_page（每页条数）等字段，确认Vue组件中是否正确解析，比如渲染response.data.data作为产品列表，而非整个响应对象。
• 检查分页事件处理：点击分页按钮时，确认前端是否发起了带page参数的请求（如/api/products?page=2）；请求成功后，是否更新了列表数据和分页状态（比如替换products数组，更新currentPage值）。
• 确认后端分页逻辑：控制器中需在筛选条件添加完成后调用paginate()/simplePaginate()方法，比如$products = $query->paginate($request->query('per_page', 10))，避免先分页后筛选导致数据异常；检查per_page参数是否正确接收，确保后端返回的分页数据符合前端预期。

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