Laravel 如何实现点击项目卡片展示其关联的issues列表

1. 确认路由配置 #

在routes/web.php中确保已经定义项目详情页的路由，示例代码如下：

use App\Http\Controllers\ProjectController;

Route::get('/projects/{project}', [ProjectController::class, 'show'])->name('projects.show');

2. 编写ProjectController的show方法 #

先确保你已经创建了ProjectController，在show方法中查询对应项目并关联加载它的所有issues，同时做权限校验避免用户越权访问其他公司的项目：

// App/Http/Controllers/ProjectController.php
public function show(Project $project)
{
    // 权限校验：确保当前用户所属公司包含该项目所属公司
    $userCompanies = auth()->user()->companies->pluck('id');
    abort_if(!in_array($project->company_id, $userCompanies->toArray()), 403);
    
    // 预加载项目下的所有issues
    $project->load('issues');
    return view('projects.show', compact('project'));
}

注意：上述代码默认你已经在Project模型中定义了和Issue的一对多关联，如果还没定义，需要在App/Models/Project.php中添加如下关联方法：

public function issues()
{
    return $this->hasMany(Issue::class);
}

3. 优化Home页面的点击体验（可选：实现整卡点击） #

如果需要整个项目卡片都可以点击，而不是只有标题可以点击，修改home.blade.php的代码如下：

@forelse($projects as $project)
    <div class="bg-pink-700 h-32 rounded-md p-5 transition duration-500 ease-in-out hover:bg-black transform hover:-translate-y-1 hover:scale-110 relative cursor-pointer">
        <a href="{{ route('projects.show', $project->id) }}" class="absolute inset-0 z-10" aria-label="查看{{$project->title}}的详情"></a>
        <div class="text-xl font-bold m-5 text-white">{{$project->title}}</div>
        <p>{{$project->description}}</p>
    </div>
@empty
    <p>暂无分配给你的项目</p>
@endforelse

4. 编写项目详情页视图 #

创建resources/views/projects/show.blade.php文件，用于展示项目下的所有issues，示例代码如下：

<h1>{{ $project->title }}</h1>
<p>{{ $project->description }}</p>

<h2>该项目下的所有Issue</h2>
<div class="issues-list">
    @forelse($project->issues as $issue)
        <div class="issue-item border p-3 my-2 rounded">
            <h3>{{ $issue->title }}</h3>
            <p>状态：{{ $issue->status }}</p>
            <p>{{ $issue->content }}</p>
        </div>
    @empty
        <p>该项目下暂无Issue</p>
    @endforelse
</div>

内容的提问来源于stack exchange，提问作者Gabriel Paulo Romero