在Laravel项目开发中，按服务类别分组展示数据是非常常见的需求，比如服务列表页需要将不同类别的服务归类显示，提升用户浏览体验。实现这个功能可以从后端预处理数据，也可以在Blade模板中直接处理，两种方式各有适用场景。
方案一：后端预处理数据再传递给模板
这种方式的核心是在控制器中就把查询到的服务数据按类别分组，之后直接将分组后的数据传递给Blade模板渲染，模板逻辑会更简洁。
控制器中处理数据
首先假设我们有一个Service模型，关联了Category服务类别模型，先查询所有服务并预加载类别信息，再按类别名称分组。
<?php
namespace AppHttpControllers;
use AppModelsService;
use IlluminateHttpRequest;
class ServiceController extends Controller
{
public function index()
{
// 查询所有服务，预加载关联的类别信息
$services = Service::with('category')->get();
// 按服务类别名称分组，分组后键是类别名，值是该类别下的所有服务集合
$groupedServices = $services->groupBy(function ($service) {
return $service->category->name;
});
return view('services.index', compact('groupedServices'));
}
}
Blade模板中渲染分组数据
此时传递过来的groupedServices已经是按类别分组的集合，直接在模板中遍历即可。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>服务列表</title>
<style>
.category-group {
margin-bottom: 30px;
padding: 15px;
border: 1px solid #eee;
border-radius: 8px;
}
.category-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
color: #333;
}
.service-item {
padding: 10px 0;
border-bottom: 1px dashed #eee;
}
.service-item:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<div class="container">
<h1>所有服务列表</h1>
@if($groupedServices->isEmpty())
<p>暂无服务数据</p>
@else
@foreach($groupedServices as $categoryName => $services)
<div class="category-group">
<div class="category-title">{{ $categoryName }}</div>
@foreach($services as $service)
<div class="service-item">
<strong>{{ $service->name }}</strong>
<p>{{ $service->description }}</p>
<p>价格：{{ $service->price }}元</p>
</div>
@endforeach
</div>
@endforeach
@endif
</div>
</body>
</html>
方案二：Blade模板中直接处理未分组数据
如果后端已经传递了未分组的服务集合，也可以在Blade模板中通过内置的groupBy方法直接分组，不需要修改控制器逻辑。
控制器传递原始数据
<?php
namespace AppHttpControllers;
use AppModelsService;
use IlluminateHttpRequest;
class ServiceController extends Controller
{
public function index()
{
// 直接传递未分组的服务数据，预加载类别
$services = Service::with('category')->get();
return view('services.index', compact('services'));
}
}
Blade模板内部分组渲染
在模板中先对$services集合调用groupBy方法完成分组，再进行遍历展示。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>服务列表</title>
<style>
.category-group {
margin-bottom: 30px;
padding: 15px;
border: 1px solid #eee;
border-radius: 8px;
}
.category-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
color: #333;
}
.service-item {
padding: 10px 0;
border-bottom: 1px dashed #eee;
}
.service-item:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<div class="container">
<h1>所有服务列表</h1>
@if($services->isEmpty())
<p>暂无服务数据</p>
@else
@php
// 在模板中按类别名称分组
$groupedServices = $services->groupBy(function ($service) {
return $service->category->name;
});
@endphp
@foreach($groupedServices as $categoryName => $services)
<div class="category-group">
<div class="category-title">{{ $categoryName }}</div>
@foreach($services as $service)
<div class="service-item">
<strong>{{ $service->name }}</strong>
<p>{{ $service->description }}</p>
<p>价格：{{ $service->price }}元</p>
</div>
@endforeach
</div>
@endforeach
@endif
</div>
</body>
</html>
两种方案的选择建议
- 如果分组逻辑比较简单，且多个页面都需要用到分组后的数据，优先选择后端预处理方案，减少模板中的逻辑代码，符合MVC的职责划分。
- 如果只是单个页面需要分组展示，且不想修改控制器逻辑，可以选择模板内部分组的方案，灵活性更高。
- 如果数据量较大，建议在后端预处理时结合分页处理，避免一次性加载过多数据影响性能。
注意事项
使用groupBy方法时需要注意，如果部分服务没有关联类别，分组时会出现键为空的组，可以在分组前先过滤掉无类别的服务：
// 过滤掉没有类别的服务后再分组
$groupedServices = $services->filter(function ($service) {
return !empty($service->category);
})->groupBy(function ($service) {
return $service->category->name;
});
另外如果类别名称可能重复，建议使用类别ID作为分组的键，避免同名类别被合并到同一个组里。