Laravel 中通过下拉选择框动态筛选文章年份的完整实现教程-php教程-PHP中文网

Laravel 中通过下拉选择框动态筛选文章年份的完整实现教程

本文详解如何在 Laravel 中通过 Blade 模板的下拉框提交年份参数，并在控制器中正确接收、过滤并展示对应年份的文章数据，涵盖路由配置、表单提交方式、请求参数获取及常见错误规避。

本文详解如何在 laravel 中通过 blade 模板的 `

在 Laravel 构建公告栏（Bulletin Board）类应用时，常需按年份动态筛选文章（如仅显示 2022 年发布的资讯）。但初学者易陷入「表单未提交」「请求参数为空」「路由不支持 POST」等典型问题。以下为经过验证的完整、可运行方案。

✅ 正确实现步骤

1. 路由定义：同时支持 GET（首次加载）和 POST（筛选提交）

// routes/web.php
Route::get('/', [HomeController::class, 'index'])->name('home');
Route::post('/', [HomeController::class, 'index']);

⚠️ 注意：必须显式注册 POST 路由，否则表单提交将返回 405 Method Not Allowed。

2. Blade 视图：使用标准

置顶文章（{{ request('article_year') ?? '全部年份' }}）

@foreach($news_pin as $item)

{{ $item->title }} ({{ $item->user_year }})

@endforeach

✅ 关键点：

Laravel Creem Agent

Creem 支付商店助理 — 查询订阅、客户、交易、产品，执行心跳检查，管理本地 Laravel支付商店。

下载

使用 method="POST" 显式声明；
添加 @csrf 指令（Laravel 5.7+ 强制要求）；
利用 request('article_year') 实现选项回显，提升用户体验。

3. 控制器：正确注入 Request，安全获取参数并构建查询

// app/Http/Controllers/HomeController.php
<?php namespace App\Http\Controllers;

use App\Article;
use App\Catalog;
use Illuminate\Http\Request; // ✅ 正确引入 Request 类
use App\Http\Controllers\Controller;

class HomeController extends Controller
{
    public function index(Request $request) // ✅ 正确类型提示与依赖注入
    {
        // 获取用户选择的年份，若未提交则设为 null（避免全表误筛）
        $selectedYear = $request->input('article_year');

        // 查询所有可用年份（用于下拉菜单）
        $years = Catalog::where('catalog_type_id', 3)
                        ->where('is_active', 1)
                        ->orderBy('sort_num', 'asc')
                        ->get();

        // 构建文章查询：注意空值处理 —— 若未选年份，应展示全部（或跳过 where 条件）
        $baseQuery = Article::orderBy('sort_num', 'desc');

        if ($selectedYear !== null) {
            $baseQuery->where('user_year', $selectedYear);
        }

        $newsPin = $baseQuery->where('is_active', 1)->get();
        $news = $baseQuery->where('is_active', 0)->get();

        return view('home', [
            'year' => $years,
            'news_pin' => $newsPin,
            'news' => $news,
        ]);
    }
}

✅ 关键优化：

使用 Request $request 依赖注入（而非过时的 Request::segment() 或全局 request() 辅助函数），更符合 Laravel 最佳实践；
用 $request->input() 安全取值（自动处理缺失键，返回 null）；
对 $selectedYear 做空值判断，避免 where('user_year', null) 导致无结果（应跳过该条件）；
使用模型门面（Article::）替代 (new Article())，更简洁、支持链式调用与查询缓存。

⚠️ 常见错误与修复对照表

错误现象	根本原因	解决方案
表单提交后页面空白或 405 错误	缺少 POST 路由定义	补充 Route::post('/', [...])
Undefined variable: request	控制器方法未声明 Request $request 参数	在 index() 方法签名中注入 Request
下拉框选中后刷新丢失状态	未在	使用 {{ request('article_year') == $item->name ? 'selected' : '' }}
筛选无结果（即使数据库存在匹配数据）	user_year 字段类型为整型，但传入字符串 '2022'	确保数据库字段类型与传入值一致（建议统一用字符串或整型），或使用 whereRaw('YEAR(created_at) = ?', [$year]) 基于时间戳筛选

✅ 进阶建议（可选）

使用 Eloquent 关系替代硬编码字段：若 user_year 实际表示发布年份，推荐从 created_at 自动提取：
```
Article::whereYear('created_at', $selectedYear)->get()
```
添加搜索重置功能：在表单中增加「全部」选项（），并在控制器中跳过 where 条件。
启用前端无刷新筛选：结合 Axios + Vue/Alpine.js 实现 onchange 触发异步请求，提升交互体验。

通过以上结构化实现，你将获得一个健壮、可维护且符合 Laravel 官方规范的年份动态筛选功能。