Laravel列表详情页动态加载：基于ID的数据传递与路由实现

// routes/web.php

use App\Http\Controllers\ListingController; // 假设你的控制器名为ListingController
use App\Models\Post; // 假设你的模型名为Post

// 显示所有列表项
Route::get('/listings', [ListingController::class, 'index'])->name('listings.index');

// 显示单个列表项的详情页，使用路由模型绑定
Route::get('/listings/{post}', [ListingController::class, 'show'])->name('listings.show');

// app/Http/Controllers/ListingController.php

namespace App\Http\Controllers;

use App\Models\Post; // 确保引入了Post模型
use Illuminate\Http\Request;

class ListingController extends Controller
{
    // ... 其他方法，如index

    /**
     * 显示单个列表项的详情。
     *
     * @param  \App\Models\Post  $post  由路由模型绑定注入的Post实例
     * @return \Illuminate\View\View
     */
    public function show(Post $post)
    {
        // $post 变量现在包含了对应ID的Post模型实例
        // 我们可以直接将其传递给视图
        return view('listings.show', compact('post'));
    }
}

<button type="submit" class="text-white px-4 py-3 rounded text-base font-medium
bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100">Details!</button>

<!-- 在你的 @foreach($posts as $post) 循环内部 -->
<a href="{{ route('listings.show', $post->id) }}"
   class="text-white px-4 py-3 rounded text-base font-medium
          bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition
          duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100">
    Details!
</a>

<!-- resources/views/listings/show.blade.php -->

@extends('layouts.app')

@section('content')
    <div class="flex justify-center">
        <div class="w-11/12 bg-gray-400 p-6 rounded-lg font-serif text-4xl font-bold bg-opacity-70 subpixel-antialiased tracking-wide not-italic">
            <h1 class="flex justify-center mb-10"> {{ $post->Titel }} Details </h1>

            <div class="p-10 shadow-2xl mb-10 bg-gradient-to-r from-green-400 to-blue-500 border-solid border-2 border-black rounded-lg">
                <div class="overflow-hidden bg-gray-100 shadow-2xl border-solid border-2 border-gray-500 rounded-lg">
                    <div class="pt-2 pl-6 mt-3 text-2xl font-bold"> {{ $post->Titel }}</div>
                    <div class="px-6 py-4 mt-2 ring-4 ring-opacity-90">
                        <div class="pt-2 pl-4 font-medium text-base font-bold font-serif"> Standort: {{ $post->Standort }}</div>
                        <div class="pt-2 pl-4 font-medium text-base font-bold font-serif"> Kontakt: {{ $post->Kontakt }}</div>
                        <div class="pt-2 pl-4 font-medium text-base font-bold font-serif"> Startdatum: {{ $post->startdate }}</div>
                        <div class="pt-2 pl-4 font-medium text-base font-bold font-serif"> Enddatum: {{ $post->enddate }}</div>
                        <!-- 这里可以添加更多详情内容，例如 $post->Beschreibung 等 -->
                    </div>
                </div>
            </div>

            <div class="flex justify-center mt-6">
                <a href="{{ route('listings.index') }}" class="text-white px-6 py-3 rounded text-lg font-medium
                bg-gradient-to-r from-blue-500 to-green-400 shadow transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100">
                    返回列表
                </a>
            </div>
        </div>
    </div>
@endsection

// routes/api.php

use App\Http\Controllers\ListingController;
use App\Models\Post;

// 获取单个列表项的JSON详情
Route::get('/listings/{post}', [ListingController::class, 'getDetails']);

// app/Http/Controllers/ListingController.php

namespace App\Http\Controllers;

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

class ListingController extends Controller
{
    // ... show 方法 和 index 方法

    /**
     * 返回单个列表项的JSON详情。
     *
     * @param  \App\Models\Post  $post
     * @return \Illuminate\Http\JsonResponse
     */
    public function getDetails(Post $post)
    {
        // Laravel会自动将模型转换为JSON格式
        return response()->json($post);
    }
}

<!-- 在你的 @foreach($posts as $post) 循环内部 -->
<button type="button"
        onclick="showListingDetails('{{ $post->id }}')"
        class="text-white px-4 py-3 rounded text-base font-medium
               bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition
               duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100">
    Details!
</button>

<!-- 添加一个用于显示详情的容器，例如一个模态框 -->
<div id="listingDetailsModal" style="display:none; /* 初始隐藏 */">
    <h2><span id="detailTitle"></span></h2>
    <p>地点: <span id="detailLocation"></span></p>
    <p>联系方式: <span id="detailContact"></span></p>
    <p>开始日期: <span id="detailStartDate"></span></p>
    <p>结束日期: <span id="detailEndDate"></span></p>
    <button onclick="document.getElementById('listingDetailsModal').style.display='none'">关闭</button>
</div>

<script>
    async function showListingDetails(listingId) {
        try {
            const response = await fetch(`/api/listings/${listingId}`);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const data = await response.json();

            // 将数据填充到模态框或指定区域
            document.getElementById('detailTitle').innerText = data.Titel;
            document.getElementById('detailLocation').innerText = data.Standort;
            document.getElementById('detailContact').innerText = data.Kontakt;
            document.getElementById('detailStartDate').innerText = data.startdate;
            document.getElementById('detailEndDate').innerText = data.enddate;

            // 显示模态框
            document.getElementById('listingDetailsModal').style.display = 'block';

        } catch (error) {
            console.error('获取详情失败:', error);
            alert('无法加载详情，请稍后再试。');
        }
    }
</script>