如何使用Laravel Livewire实现项目详情页展示

1. 定义匹配的路由 #

首先在routes/web.php中添加详情页路由，确保路由名称和你Livewire方法里的show-project.details一致：

// 选项一：用Livewire组件承载详情页（和你的技术栈适配）
Route::get('/projects/{slug}', \App\Http\Livewire\ShowProject::class)->name('show-project.details');

// 选项二：用普通控制器返回Blade视图
Route::get('/projects/{slug}', [\App\Http\Controllers\ProjectController::class, 'show'])->name('show-project.details');

2. 创建详情页的展示载体 #

选项一：使用Livewire组件（推荐） #

先生成Livewire组件：

php artisan make:livewire ShowProject

然后在app/Http/Livewire/ShowProject.php中编写逻辑，通过slug获取项目：

namespace App\Http\Livewire;

use App\Models\Project;
use Livewire\Component;

class ShowProject extends Component
{
    public $project;

    public function mount($slug)
    {
        // 查询对应项目，不存在则返回404
        $this->project = Project::where('slug', $slug)->firstOrFail();
    }

    public function render()
    {
        return view('livewire.show-project');
    }
}

接着创建对应的视图resources/views/livewire/show-project.blade.php，渲染项目详情：

<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 py-8">
    <div class="bg-white dark:bg-gray-800 p-6 rounded-sm shadow-md">
        <h1 class="text-3xl font-bold text-blue-500 dark:text-white mb-4">{{ $project->title }}</h1>
        <p class="text-gray-700 dark:text-gray-400 mb-6">{{ $project->description }}</p>
        <div class="mt-4">
            <p class="font-semibold">预算：Ghc{{ $project->min_budget }} - Ghc{{ $project->max_budget }}</p>
            <ul class="flex gap-4 text-blue-600 mt-3">
                <!-- 假设项目有tech_stack字段，按需渲染 -->
                @foreach(explode(',', $project->tech_stack) as $tech)
                    <li>{{ $tech }}</li>@if(!$loop->last)|@endif
                @endforeach
            </ul>
        </div>
    </div>
</div>

选项二：使用普通控制器+Blade视图 #

如果不用Livewire，创建控制器方法：

namespace App\Http\Controllers;

use App\Models\Project;
use Illuminate\Http\Request;

class ProjectController extends Controller
{
    public function show($slug)
    {
        $project = Project::where('slug', $slug)->firstOrFail();
        return view('show-project', compact('project'));
    }
}

再创建视图resources/views/show-project.blade.php，内容和上面的Livewire视图类似，直接用$project变量渲染即可。

3. 优化列表页的点击逻辑 #

你当前的Livewire重定向方法可以正常工作，但直接用HTML的href更高效，避免额外的Livewire请求：

<a href="{{ route('show-project.details', $project->slug) }}"
   class="block p-6 bg-white border border-gray-200 rounded-sm shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
    <!-- 原有内容保持不变 -->
</a>

4. 处理异常情况 #

firstOrFail()方法会在slug对应的项目不存在时自动抛出404异常，Laravel会返回默认的404页面，你也可以在resources/views/errors/404.blade.php自定义404页面样式。

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