Laravel 9中/comic/search接口数据排序无效问题排查

我在Laravel 9中开发了/comic/search接口，返回的数据结构示例如下：

{"item_type":"b","key_issue":null,"run":null,"bodytext":"<p>Avengers Vs the Xmen<\/p>","damaged":null,"title":"A+X","publisher":"Marvel","tags":"avengers","published":"2012-01-12","id":18,"issue":6,"stock":0,"price":1.99,"variant":"1","url":"\/books\/ax-6","cover":"http:\/\/fantasy-road.local\/assets\/img\/uploads\/20221219-172717.jpg","front":"http:\/\/fantasy-road.local\/assets\/img\/resized\/comic_flip\/20221219-172717.jpg","rear":"http:\/\/fantasy-road.local\/assets\/img\/resized\/comic_flip\/20221219-172706.jpg","summary":"Avengers Vs the Xmen","type":"Stories","relevance_score":2,"created_at":"19th\u00a0December\u00a02022"}

后端ComicSearchController中编写了排序逻辑：

use Illuminate\Http\Request;
use App\Libraries\ComicSearch;

class ComicSearchController extends Controller
{
  const limit = 10;

  public function getComicData(Request $request)
  {
    $query = $request->input('query');
    $sort = $request->input('sort');
    $more = ($request->has('more')) ? true : false;
    $debug = ($request->has('debug')) ? true : false;
    $results = ComicSearch::search($query, $more, static::limit, $debug);

    // Sort the comics data if the sort parameter exists
    if ($sort) {
      if ($sort === 'price') {
        usort($results, function ($a, $b) {
          echo "Comparing " . $a['price'] . " and " . $b['price'] . "\n";
          return ($a['price'] < $b['price']) ? -1 : (($a['price'] > $b['price']) ? 1 : 0);
        });
      } elseif ($sort === 'title') {
        usort($results, function ($a, $b) {
          echo "Comparing " . $a['title'] . " and " . $b['title'] . "\n";
          return strcasecmp($a['title'], $b['title']);
        });
      }
    }

    return response()->json($results);
  }
}

前端Vue组件通过以下代码请求接口：

sortDirection(type) {
  if(type == 'alphabetUp') {
    this.loading = true
    this.alphabetisePlus = !this.alphabetisePlus;
    this.alphabetiseMinus = false;
    this.priceMinus = false;
    this.pricePlus = false;
    this.publishedMinus = false;
    this.publishedPlus = false;
    if(this.alphabetisePlus) {
      axios.get('comic/search?sort=title')
      .then(response => {
        console.log('Before sorting:', response.data);
        this.backstock = Array.from(response.data);
        this.backstock.sort((a, b) => {
          if(a.title < b.title) return -1;
          if(a.title > b.title) return 1;
          return 0;
        });
        console.log('After sorting:', this.backstock);
        this.loading = false;
      })
      .catch(error => console.log(error));
    }
  }
}

现在遇到的问题是：请求带sort参数后，接口返回的数据和排序前完全一致，未达到预期的排序效果。

1. 后端排序失效核心原因：ComicSearch::search()返回的大概率是Eloquent模型对象集合，而非普通数组。usort()仅对普通数组生效，直接对Eloquent集合使用不会产生排序效果，需要用集合专属的排序方法。
2. 调试无效：后端代码中的echo语句输出内容不会出现在JSON响应中，无法用来验证排序逻辑是否执行。
3. 前端冗余操作：前端在拿到接口数据后重复执行排序，虽不是后端失效的原因，但可能掩盖后端排序的问题。

后端修复（核心） #

根据$results的类型选择对应排序方式：

情况1：$results是Eloquent集合 #

替换usort()为Laravel集合的排序方法，代码修改如下：

public function getComicData(Request $request)
{
  $query = $request->input('query');
  $sort = $request->input('sort');
  $more = $request->has('more');
  $debug = $request->has('debug');
  $results = ComicSearch::search($query, $more, static::limit, $debug);

  if ($sort) {
    if ($sort === 'price') {
      // 价格升序，如需降序用sortByDesc('price')
      $results = $results->sortBy('price')->values();
    } elseif ($sort === 'title') {
      // 不区分大小写的标题排序
      $results = $results->sort(function ($a, $b) {
        return strcasecmp($a->title, $b->title);
      })->values();
    }
  }

  return response()->json($results);
}

调用values()是为了重置集合的键，避免返回的JSON出现非连续索引。

情况2：$results是普通数组 #

检查数组结构确保每个元素包含price/title键，同时替换echo为日志调试：

use Illuminate\Support\Facades\Log;

// ...
usort($results, function ($a, $b) {
  Log::info("Comparing {$a['title']} and {$b['title']}");
  return strcasecmp($a['title'], $b['title']);
});

前端优化（可选） #

既然后端已处理排序，可移除前端冗余排序逻辑：

axios.get('comic/search?sort=title')
.then(response => {
  console.log('Sorted data:', response.data);
  this.backstock = response.data;
  this.loading = false;
})

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