前端按分类展示指定数量图片的实现方法

本文深入剖析了在 Laravel 中实现“按分类筛选并严格限制每类最多展示10张图片”的正确实践，直击开发中常见的逻辑陷阱——如误用全局循环计数、在Blade模板中嵌套条件判断导致某分类仅显示3张图等典型问题；通过控制器中为每个分类（如Fabrikasi、Konstruksi等）独立执行带`orderByDesc('created_at')`和`take(10)`的精准查询，并在视图中直接遍历对应变量，彻底规避N+1查询与数据污染，显著提升性能、可读性与可维护性，让作品集类网站的图片分类展示既稳定又优雅。

本文详解如何在 Laravel 中正确实现「按分类筛选并限制每类最多显示10张图片」的功能，解决因错误使用 `take(10)` 或 Blade 中未按预查询数据遍历导致的图片不显示问题。

在构建作品集（Portfolio）类网站时，常需按「Fabrikasi」「Konstruksi」「Repair」「Lainnya」等分类分别展示精选内容，且每类严格限制为 10 张图片。你当前遇到的问题——新增第 11 张图片后，某分类（如 Fabrikasi）仅显示 3 张——根本原因在于：Blade 模板中仍遍历全部 $portfolios，却用 $loop->iteration 做全局计数，而非按分类独立计数。这导致即使某分类只有 3 条数据，$loop->iteration <= 10 在首次匹配到该分类时可能已是第 25 次循环，从而跳过全部渲染。

✅ 正确解法是：控制器中预先按分类精准查询（已做对），Blade 中直接遍历对应变量，而非在全量集合中条件过滤。

✅ 推荐实现方式（清晰、高效、可维护）

1. 控制器保持优化查询（推荐使用 orderByDesc('created_at') 替代 latest() 避免隐式依赖）

public function landing()
{
    $numbers = Number::get();
    $testimonials = Testimonial::get();
    $clients = Client::get();

    // 每类精确取最新10条
    $fabrikasiPortfolios = Portfolio::where('category', 'fabrikasi')
        ->orderByDesc('created_at')
        ->take(10)
        ->get();

    $konstruksiPortfolios = Portfolio::where('category', 'konstruksi')
        ->orderByDesc('created_at')
        ->take(10)
        ->get();

    $repairPortfolios = Portfolio::where('category', 'repair')
        ->orderByDesc('created_at')
        ->take(10)
        ->get();

    $lainnyaPortfolios = Portfolio::where('category', 'lainnya')
        ->orderByDesc('created_at')
        ->take(10)
        ->get();

    return view('landing/landing', compact(
        'numbers', 'testimonials', 'clients',
        'fabrikasiPortfolios', 'konstruksiPortfolios',
        'repairPortfolios', 'lainnyaPortfolios'
    ));
}

⚠️ 注意：latest() 是 orderBy('created_at', 'desc') 的简写，但若模型未定义 CREATED_AT 常量或字段名非标准（如 date_posted），建议显式写 orderByDesc('created_at') 提高健壮性。

2. Blade 模板中 —— 只遍历对应变量，删除所有 @if($portfolio->category === ...) 分支逻辑

<!-- Fabrikasi Section -->
<div class="row portfolio-container" data-aos="fade-up" data-aos-delay="200">
    @foreach($fabrikasiPortfolios as $portfolio)
        <div class="col-lg-4 col-md-6 portfolio-item filter-fabrication">
            <img src="{{ asset('storage/' . $portfolio->image) }}" class="img-fluid" alt="{{ $portfolio->title }}">
            <div class="portfolio-info">
                <h4>{{ $portfolio->title }}</h4>
                <p>fabrikasi</p>
                <a href="{{ asset('storage/' . $portfolio->image) }}"
                   title="{{ $portfolio->title }}"
                   data-gallery="portfolio-gallery-fabrication"
                   class="glightbox preview-link">
                    <i class="bx bx-plus"></i>
                </a>
            </div>
        </div>
    @endforeach
</div>

<!-- Konstruksi Section -->
<div class="row portfolio-container" data-aos="fade-up" data-aos-delay="300">
    @foreach($konstruksiPortfolios as $portfolio)
        <div class="col-lg-4 col-md-6 portfolio-item filter-construction">
            <img src="{{ asset('storage/' . $portfolio->image) }}" class="img-fluid" alt="{{ $portfolio->title }}">
            <div class="portfolio-info">
                <h4>{{ $portfolio->title }}</h4>
                <p>konstruksi</p>
                <a href="{{ asset('storage/' . $portfolio->image) }}"
                   title="{{ $portfolio->title }}"
                   data-gallery="portfolio-gallery-construction"
                   class="glightbox preview-link">
                    <i class="bx bx-plus"></i>
                </a>
            </div>
        </div>
    @endforeach
</div>

<!-- Repair & Lainnya 同理... -->

✅ 关键优势：

• ✅ 性能优：避免 N+1 查询与全量遍历；
• ✅ 逻辑清：分类数据与视图结构一一对应，无嵌套判断；
• ✅ 可控强：每类严格 ≤10 条，不受其他分类数据量干扰；
• ✅ 易扩展：新增分类只需加一行查询 + 一个 Blade 区块。

❌ 避免的反模式：

• 不要在 Blade 中用 @foreach($portfolios) + 多层 @if($portfolio->category === ...) + $loop->iteration —— 这本质是「客户端分组」，既低效又易错；
• 不要省略 asset() 或 storage() 路径处理，确保图片 URL 可访问（示例中假设图片存于 storage/app/public/ 并已运行 php artisan storage:link）。

总结

要稳定实现「每类 10 图」，核心原则是：数据准备在控制器，渲染逻辑在 Blade 中扁平化。通过预查询分离数据，不仅修复了显示异常，更提升了代码可读性与后期维护效率。后续如需支持动态分类（如从数据库读取分类列表），可进一步抽象为循环查询，但基础模式不变。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~