Laravel Spatie Query Builder：使用 Axios 使用 API 的正确方法

Posted 2023-03-14

【中文标题】Laravel Spatie Query Builder：使用 Axios 使用 API 的正确方法

【英文标题】：Laravel Spatie Query Builder: right way to consume API with Axios

【发布时间】：2020-08-09 00:42:24

【问题描述】：

在 Laravel 后端我有 customers.index 控制器方法：

$result = $department->Customers()->getQuery();

        $result = QueryBuilder::for($result)
            ->allowedFilters([
                'title',
                'description',
                'email',
                'phone'
            ])
            ->defaultSort('title')
            ->allowedSorts([
                'title',
                'email'
            ]);    

        $result = $result->paginate($request->per_page ?: 10)->appends(request()->query());

        return response()->json([
            'message' => '',
            'data' => $result
        ]);

现在在 Vuejs 前端我希望查询字符串像

 host/api/customer?page=2&per_page=15&filter[title]=foo

我试过这种方法：

const params = 
        page: this.page,
        per_page: 15,
        filter: 
          search: this.query
        
      ;    

      console.log(JSON.stringify(params));
      this.$axios
        .get(`/api/customer`, 
          params
        );

但是查询字符串变成了：

customer?0=%7B%22page%22:1,%22per_page%22:15,%22filter%22:%7B%22search%22:%221231%22%7D%7D

我还有其他选择：使用 template literal like ：

api/customer?filter[search]=$this.query&page=$this.page&per_page=$this.per_page

问题一：

如何从 params 对象中获取正确的查询字符串

问题 2：

有没有关于这种filter[title]=... 查询字符串方式的文档？我如何在 AND 或案例中使用它们？

【参考方案1】：

您的问题是您将查询字符串设置为选项。

this.$axios
    .get(`/api/customer`, 
        params
    );

应该是。

this.$axios
    .get(`/api/customer`, 
        params: params
);

他们有一个Documentation。如果您想做复杂的逻辑，我可能会研究它如何处理scopes。然后你是否在Laravel 范围内进行逻辑处理并让构建器处理它们。