Laravel 8.*中如何将数据库数据传递到公共layout并获取循环参数

一、公共布局传递数据的实现 #

你不需要为公共布局创建单独的控制器，Laravel提供了两种原生方案实现全局/指定视图的数据共享：

方案1：全局视图共享（适合数据需要在所有视图中使用的场景） #

在app/Providers/AppServiceProvider.php的boot方法中添加以下代码：

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\View;
use App\Models\City;

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        // 所有视图都可以拿到$cities变量
        View::share('cities', City::all());
    }
}

之后你在app.blade.php里可以直接使用$cities变量，不需要每次在控制器中传值，也不用在Blade里直接写模型查询逻辑。

方案2：视图合成器（仅给指定布局传值，性能更优） #

如果城市数据只在公共布局里用到，用视图合成器可以避免全局共享带来的不必要开销，同样在AppServiceProvider的boot方法中添加：

View::composer('layouts.app', function ($view) {
    $view->with('cities', City::all());
});

只需要把第一个参数改成你布局文件的实际路径即可。

二、表单action参数传递问题 #

你当前代码的问题是：$city变量只在select标签内部的foreach循环中有效，form标签的action位置无法访问到该变量，直接写会报错。推荐两种解决方式：

方案1：后端接收POST参数（最简便，优先推荐） #

你select标签已经设置了name="city_id"，提交表单时该值会自动POST到后端，完全不需要把城市ID拼在action的URL中，修改表单代码如下即可：

<form method="POST" action="{{ route('cityView') }}" class="form-inline">
    @csrf {{-- 必须加，Laravel POST请求默认需要csrf校验 --}}
    <div class="form-group">
        <select name="city_id" class="form-control">
            <option value="">请选择城市</option>
            @foreach($cities as $city)
                <option value="{{ $city->id }}">{{ $city->name }}</option>
            @endforeach
        </select>
    </div>
    <button type="submit" class="btn btn-info">Search</button>
</form>

后端控制器中直接通过请求对象获取城市ID：

public function cityView(Request $request)
{
    $cityId = $request->input('city_id');
    // 后续业务逻辑
}

方案2：动态修改action（如果你的路由必须要求ID放在URL参数中） #

如果cityView路由规定必须携带id参数，可以写JS监听select的变化事件，动态修改form的action属性：

<form id="cityForm" method="POST" action="" class="form-inline">
    @csrf
    <div class="form-group">
        <select name="city_id" id="citySelect" class="form-control">
            <option value="">请选择城市</option>
            @foreach($cities as $city)
                <option value="{{ $city->id }}">{{ $city->name }}</option>
            @endforeach
        </select>
    </div>
    <button type="submit" class="btn btn-info">Search</button>
</form>

<script>
const citySelect = document.getElementById('citySelect');
const cityForm = document.getElementById('cityForm');
citySelect.addEventListener('change', function() {
    const cityId = this.value;
    if (cityId) {
        // 动态生成路由
        cityForm.action = `/city/${cityId}`; // 也可以匹配你自己的路由规则拼接
    } else {
        cityForm.action = '';
    }
});
</script>

内容的提问来源于stack exchange，提问作者MichalGrab