在 Laravel 中实现文章评论及回复的层级展示-php教程-PHP中文网

在 Laravel 中实现文章评论及回复的层级展示

聖光之護

发布： 2025-09-24 11:45:20

原创

276人浏览过

在 Laravel 中实现文章评论及回复的层级展示

本教程详细阐述如何在 Laravel 应用中构建一个高效的评论与回复系统。通过定义 Eloquent 模型间的自引用 hasMany 关系，并结合预加载技术，我们能够一次性查询并层级化展示文章下的所有顶级评论及其回复。这不仅优化了数据库查询效率，也使得前端模板的渲染逻辑更加清晰和易于维护，有效避免了N+1查询问题。

1. 数据库结构设计

为了支持评论及其回复功能，我们需要一个能够自引用的评论表。以下是 article_comments 表的推荐结构，其中 comment_id 字段是实现回复功能的核心：

Schema::create('article_comments', function (Blueprint $table) {
   $table->bigIncrements('id');
   $table->unsignedBigInteger('article_id');
   $table->foreign('article_id')
         ->references('id')->on('articles')->onDelete('cascade');
   $table->string('name');
   $table->string('email');
   $table->text('text');
   $table->string('date'); // 建议使用 $table->timestamp('posted_at'); 或直接依赖 $table->timestamps()

   // comment_id 字段用于自引用，指向父评论的ID
   $table->unsignedBigInteger('comment_id')->nullable();
   $table->foreign('comment_id')
         ->references('id')->on('article_comments')->onDelete('set null'); // 父评论删除时，子评论的comment_id设为null

   $table->timestamps(); // Laravel 默认的 created_at 和 updated_at
});

登录后复制

在这个设计中：

article_id 关联到文章表，表示评论属于哪篇文章。
comment_id 是一个可空的 unsignedBigInteger 字段，它指向 article_comments 表自身的 id。如果 comment_id 为 null，则表示这是一条顶级评论；如果 comment_id 有值，则表示它是对 comment_id 所指向评论的回复。

2. Eloquent 模型关系定义

为了在 Laravel 中方便地操作评论及其回复，我们需要在 Article 和 ArticleComment 模型中定义相应的 Eloquent 关系。

2.1 ArticleComment 模型中的回复关系

在 app/Models/ArticleComment.php 模型中，定义一个自引用关系 answers 来获取当前评论的所有回复：

// app/Models/ArticleComment.php
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class ArticleComment extends Model
{
    use HasFactory;

    protected $fillable = [
        'article_id', 'name', 'email', 'text', 'date', 'comment_id'
    ];

    // 定义与父评论的自引用关系，获取当前评论的所有回复
    public function answers()
    {
        return $this->hasMany(ArticleComment::class, 'comment_id', 'id');
    }

    // 可选：定义与所属文章的关系
    public function article()
    {
        return $this->belongsTo(Article::class);
    }

    // 可选：定义与父评论的关系
    public function parentComment()
    {
        return $this->belongsTo(ArticleComment::class, 'comment_id', 'id');
    }
}

登录后复制

这里，answers() 方法使用 hasMany 关系，将 article_comments 表的 comment_id 字段与当前评论的 id 字段关联起来，从而获取所有直接回复当前评论的子评论。

2.2 Article 模型中的评论关系

在 app/Models/Article.php 模型中，定义一个 comments 关系来获取文章下的所有评论：

// app/Models/Article.php
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Article extends Model
{
    use HasFactory;

    protected $fillable = [
        'title', 'content' // 示例字段
    ];

    // 定义与评论的关系，获取文章下的所有评论
    public function comments()
    {
        return $this->hasMany(ArticleComment::class, 'article_id', 'id');
    }
}

登录后复制

3. 数据查询与加载

为了高效地获取文章及其所有顶级评论和对应的回复，我们应该利用 Eloquent 的预加载（Eager Loading）功能。这可以避免 N+1 查询问题，显著提升性能。

以下查询示例展示如何获取 ID 为 1 的文章，并预加载其所有顶级评论以及这些评论的回复：

文赋Ai论文

专业/高质量智能论文AI生成器-在线快速生成论文初稿

查看详情

use App\Models\Article;

$article = Article::where('id', 1)->with(['comments' => function($query) {
    // 筛选出顶级评论 (comment_id 为 null)
    $query->whereNull('comment_id')->with('answers');
}])->first();

// 如果需要获取所有评论（包括顶级和回复），并以层级结构呈现，上述方法是首选。
// 如果 $article 是一个集合，使用 get() 而不是 first()
// $articles = Article::with(['comments' => function($q) {
//             $q->whereNull('comment_id')->with('answers');
//         }])->get();

登录后复制

通过上述查询，$article 对象将包含一个 comments 集合，其中每个评论对象又可能包含一个 answers 集合。这种结构非常适合在前端进行层级展示。

查询结果示例（JSON 格式）：

{
  "id": 1,
  "title": "示例文章标题",
  "content": "这是文章内容...",
  "comments": [
    {
      "id": 1,
      "article_id": 1,
      "name": "用户A",
      "text": "这是一条顶级评论。",
      "comment_id": null,
      "answers": [
        {
          "id": 5,
          "article_id": 1,
          "name": "用户B",
          "text": "这是对评论1的回复1。",
          "comment_id": 1
        },
        {
          "id": 6,
          "article_id": 1,
          "name": "用户C",
          "text": "这是对评论1的回复2。",
          "comment_id": 1
        }
      ]
    },
    {
      "id": 2,
      "article_id": 1,
      "name": "用户D",
      "text": "这是另一条顶级评论。",
      "comment_id": null,
      "answers": [] // 没有回复的评论，answers 集合为空
    }
  ]
}

登录后复制

4. Blade 模板中的展示

在 Blade 模板中，我们可以遍历获取到的评论数据，并根据其是否包含 answers 来渲染不同层级的样式。

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

<div class="comments-section">
    <h3>评论</h3>

    @if($article && $article->comments->isNotEmpty())
        <div class="comment-list">
            @foreach($article->comments as $comment)
                {{-- 顶级评论 --}}
                <div class="comment-list__item">
                    <div class="item-card">
                        <div class="item-card__header">
                            <div class="item-card__title">
                                <div class="label">
                                    {{ $comment->name }}
                                </div>
                                <div class="data">
                                    {{ date('d F Y', strtotime($comment->date)) }}
                                </div>
                            </div>
                        </div>
                        <div class="item-card__content">
                            {{ $comment->text }}
                        </div>
                    </div>

                    {{-- 评论的回复 --}}
                    @if($comment->answers->isNotEmpty())
                        <div class="comment-sub-list">
                            @foreach($comment->answers as $reply)
                                <div class="comment-sub-list__item">
                                    <div class="item-card">
                                        <div class="item-card__header">
                                            <div class="item-card__title">
                                                <div class="label">
                                                    {{ $reply->name }}
                                                </div>
                                                <div class="data">
                                                    {{ date('d F Y', strtotime($reply->date)) }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="item-card__content">
                                            {{ $reply->text }}
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
    @else
        <p>暂无评论。</p>
    @endif
</div>

登录后复制

在这个 Blade 模板中：

我们首先遍历 $article->comments 集合，这会渲染所有顶级评论。
在每个顶级评论内部，我们检查 $comment->answers 集合是否为空。如果非空，则再次遍历 answers 集合，渲染回复内容。
通过使用不同的 CSS 类 (comment-list__item 和 comment-sub-list__item)，可以轻松地为顶级评论和回复应用不同的样式，实现视觉上的层级区分。

5. 独立查询回复的场景

在某些特定场景下，你可能需要单独查询某个评论的所有回复，或者某个评论及其所有回复，而不是通过文章一次性加载。

5.1 仅查询某个评论的所有回复

use App\Models\ArticleComment;

$parentCommentId = 1; // 假设要查询 ID 为 1 的评论的所有回复
$replies = ArticleComment::where('comment_id', $parentCommentId)->get();

// $replies 将包含所有直接回复 ID 为 1 的评论的子评论

登录后复制

5.2 查询某个评论及其所有回复

use App\Models\ArticleComment;

$commentId = 1; // 假设要查询 ID 为 1 的评论及其回复
$commentWithReplies = ArticleComment::where('id', $commentId)->with('answers')->first();

// $commentWithReplies 将包含 ID 为 1 的评论对象，其 answers 属性中包含所有直接回复

登录后复制

6. 注意事项与最佳实践

N+1 查询问题：务必使用 with() 方法进行预加载。如果直接在循环中访问关系（例如在 @foreach 中每次都去查询 $comment->answers 而不预加载），会导致大量的数据库查询，严重影响性能。
多级回复：当前方案支持一级回复（即顶级评论下的直接回复）。如果需要实现无限级回复，需要更复杂的递归关系定义和前端渲染逻辑，通常会使用递归视图组件或额外的包来处理。
数据验证：在接收用户提交的评论和回复时，务必进行严格的数据验证，确保数据的完整性和安全性。
安全性：在显示用户输入的内容时，使用 Laravel Blade 的 {{ $variable }} 语法（会自动进行 HTML 实体编码）来防止 XSS 攻击。避免使用 !! $variable !!，除非你明确知道内容是安全的 HTML。
日期格式化：建议在模型中定义 casts 属性或使用 accessor 来统一日期格式化，而不是每次在 Blade 模板中都调用 date() 函数。
用户体验：考虑添加评论分页、懒加载回复、以及回复表单的集成等功能，以提升用户体验。