如何在 Blade 模板中按服务类别分组展示数据-php教程-PHP中文网

如何在 Blade 模板中按服务类别分组展示数据

本文介绍如何在 Laravel 中将数据库查询结果按 service_category 分类聚合，并在 Blade 模板中以「分类标题 + 子项列表」结构清晰呈现，既支持控制器预处理分组，也兼顾可读性与性能优化。

本文介绍如何在 laravel 中将数据库查询结果按 `service_category` 分类聚合，并在 blade 模板中以「分类标题 + 子项列表」结构清晰呈现，既支持控制器预处理分组，也兼顾可读性与性能优化。

在实际开发中，直接遍历扁平化的服务列表（如 $services）虽简单，但难以体现业务逻辑层级。若需按 service_category 分组展示（例如“设计服务”“开发服务”“运维服务”各自展开），强烈推荐在控制器中完成数据分组——这比在 Blade 中使用 @php 指令处理更符合 MVC 原则，也更利于测试、复用和维护。

✅ 推荐做法：控制器中预分组（清晰、高效、可测试）

首先优化控制器方法，使用 Laravel Query Builder 替代原始 SQL，并在返回视图前完成分组：

public function order_services()
{
    $services = DB::table('services')
        ->select('id', 'service_name', 'service_category', 'service_price')
        ->orderBy('service_category') // 确保同类别数据相邻（非必需但利于调试）
        ->get();

    // 按 service_category 键名分组，构建关联数组：['设计' => [$svc1, $svc2], '开发' => [...]]
    $groupedServices = $services->groupBy('service_category')->map(function ($items) {
        return $items->values(); // 重置索引，避免空键干扰
    })->all();

    return view('guests/services', ['servicesByCategory' => $groupedServices]);
}

? 提示：$services->groupBy() 是 Laravel Collection 的原生方法，比手动 foreach 更简洁安全，且自动处理空类别、重复键等边界情况。

?️ Blade 模板渲染：语义化结构 + 避免 ID 重复

在 resources/views/guests/services.blade.php 中，遍历分组数据并渲染：

@foreach ($servicesByCategory as $category => $services)
    <h3 class="mt-4 text-primary">{{ ucfirst($category) }}</h3>

{{ $category }}
{{ $service->service_name }} Available

@endforeach

⚠️ 关键注意事项

禁止重复 ID 属性：原代码中 id="service_category" 和 id="service_name" 在循环内多次出现，违反 HTML 规范（ID 必须唯一）。已改为使用 class 或 data-* 属性替代，确保前端 JS 交互（如点击添加服务）仍可通过 data-category 精准获取上下文。

样式解耦建议：将内联 style 移至 CSS 文件，例如：

.category-header { font-weight: bold; color: #e74c3c; }
.service-item { color: #870FD1; }

空类别兜底处理：若数据库存在空字符串或 NULL 类别，可在分组前过滤：
```
$services = $services->filter(fn($s) => !blank($s->service_category));
```

✅ 总结

分组展示不是 Blade 的职责，而是数据准备阶段的逻辑。通过控制器中使用 Collection::groupBy() 预处理，再配合语义化的 Blade 循环，既能保证模板简洁可读，又能提升整体架构的健壮性与可扩展性。后续如需支持搜索、折叠/展开、AJAX 加载等增强功能，此结构也天然友好。