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>
    <ul class="list-group mb-4" id="category-{{ Str::slug($category) }}">
        @foreach ($services as $service)
            <!-- 类别标题项 -->
            <li class="list-group-item d-flex justify-content-between align-items-center border border-danger">
                <span style="font-size:24px; color:red">
                    <i class="bi bi-check-circle"></i>
                </span>
                <span style="font-weight:bold">{{ $category }}</span>
                <span><u><i class="bi bi-magic"></i></u></span>
            </li>
            <!-- 具体服务项 -->
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <span class="product_name" style="font-size:24px; color:#870FD1">
                    <i class="bi bi-plus-circle"></i>
                </span>
                <span class="product_name"
                      data-price="{{ $service->service_price }}"
                      data-category="{{ $category }}"
                      data-id="{{ $service->id }}">
                    {{ $service->service_name }}
                </span>
                <span class="text-success"><u>Available</u></span>
            </li>
        @endforeach
    </ul>
@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 加载等增强功能，此结构也天然友好。