Laravel 8 中如何点击帖子通过 Bootstrap 模态框加载对应视图

完全可以实现，你遇到的报错是因为Blade的@include是服务端渲染阶段执行的，渲染列表页时没有传入$post变量，还没等用户点击就已经触发了报错，和前端模态框的交互无关。

具体实现步骤 #

步骤1：补全路由与控制器逻辑 #

首先在routes/web.php中新增单条帖子详情的接口路由：

Route::get('/posts/{id}', [PostController::class, 'show'])->name('posts.show');

接着补全PostController的show方法返回值，直接返回渲染好的帖子+评论视图片段：

public function show($id)
{
    $post = Post::with('channel')
        ->withCount('comments')
        ->with('likes')
        ->with('user')
        ->where('posts.id', '=', $id)
        ->first();

    $comments = Comment::where('postID', '=', $id)
        ->with('user')
        ->with('likes')
        ->orderBy('group', 'desc')
        ->orderBy('order', 'asc')
        ->orderBy('depth', 'asc')
        ->get();
    // 返回视图片段，不需要布局，直接渲染两个子视图
    return view('layouts.post-modal-content', compact('post', 'comments'));
}

新建resources/views/layouts/post-modal-content.blade.php，内容就是引入你现有的两个子视图：

@include('layouts.post')
@include('layouts.comment')

步骤2：修改列表页的帖子链接 #

把原来触发模态框的a标签调整，增加帖子ID的自定义属性，去掉原来直接触发模态框的属性：

<!-- 列表页循环输出的每个帖子标题 -->
<a href="javascript:void(0)" class="open-post-btn" data-post-id="{{ $post->id }}">
    {{ $post->title }}
</a>

步骤3：调整模态框结构 #

保留模态框基础结构，body只留占位内容：

<!-- 模态框全局只需要放一份，不要放在列表循环里 -->
<div class="modal fade" id="open_post_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">帖子详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="post-modal-body">
                <!-- 动态内容加载位置，默认放加载提示 -->
                <div class="text-center py-4">加载中...</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

步骤4：添加JS交互逻辑 #

在页面底部加JS代码，监听帖子点击事件，异步加载内容后再打开模态框：

// 引入了jQuery的写法，没引入可以换原生fetch实现
$('.open-post-btn').on('click', function() {
    const postId = $(this).data('post-id');
    // 重置加载状态
    $('#post-modal-body').html('<div class="text-center py-4">加载中...</div>');
    // 请求帖子内容
    $.get(`/posts/${postId}`, function(html) {
        $('#post-modal-body').html(html);
        $('#open_post_modal').modal('show');
    }).fail(function() {
        $('#post-modal-body').html('<div class="text-center text-danger py-4">加载失败，请刷新重试</div>');
    });
});

注意事项 #

• 确保你的layouts/post.blade.php和layouts/comment.blade.php是纯内容片段，不要带@extends、完整HTML结构、公共头尾之类的代码，否则模态框内会出现冗余内容
• 如果帖子内容里有需要初始化的交互（比如点赞按钮、评论提交），在AJAX加载完成后需要重新绑定对应事件

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