glebred/laravel-vue-simple-comments

Vue Laravel Inertia 简单评论

v1.0.1 2023-05-25 17:08 UTC

This package is auto-updated.

Last update: 2024-09-25 19:57:33 UTC


README

Latest Version on Packagist Total Downloads

预览

preview

本软件包允许您为 Laravel Inertia Vue 栈应用程序添加评论。评论表单使用 TypeScript 和 Daisy UI 实现,Daisy UI 是一个 Tailwind CSS 的 UI 组件库。我制作它是因为我需要一个简单的评论表单来使用在我自己的项目中。我希望它对您也很有用。

要求

  • inertiajs/vue3
  • Daisy UI,
  • Tailwind
  • Vue-toastification
npm i @inertiajs/inertia-vue3
npm i tailwindcss
npm i vue-toastification
npm i daisyui

安装

您可以通过 composer 安装此包

composer require glebred/laravel-vue-simple-comments

发布视图

php artisan vendor:publish --provider="GlebRed\LaravelVueSimpleComments\LaravelVueSimpleCommentsServiceProvider"

这将创建一个

  • Vue 视图:resources/js/vendor/laravel-vue-simple-comments/Comments.vue
  • 以及迁移文件 database/migrations/create_comments_table.php
  • 模型 app/Models/Comment.php
  • 请求 app/Http/Requests/CommentRequest.php
  • 资源 app/Http/Resources/CommentResource.php

在您的 Vue 组件中调用评论部分

导入组件 import CommentForm from "@/vendor/laravel-vue-simple-comments/Comments.vue"; 并在模板中使用它,例如

<CommentForm :commentable="answer" :commentable_type="'answers'"></CommentForm>

其中 commentable 是您想要评论的对象,而 commentable_type 是模型名称。

用法

在您的控制器中实现抽象类 LaravelVueSimpleComments。以下是一个示例

use GlebRed\LaravelVueSimpleComments\Requests\CommentRequest;
use GlebRed\LaravelVueSimpleComments\LaravelVueSimpleComments;

class CommentsController extends LaravelVueSimpleComments
{

    public function store(CommentRequest $request)
    {
        $validated = $request->validated();

        $this->authorize('create', [Comment::class, $validated['commentable_id'], $validated['commentable_type']]);

        Comment::create([
            'commentable_id' => $validated['commentable_id'],
            'commentable_type' => $validated['commentable_type'],
            'user_id' => $request->user()->id,
            'body' => $validated['body'],
        ]);
        return back()->with('flash', [
            'message' => 'Comment added successfully!',
        ]);
    }

    public function destroy(Comment $comment)
    {
        $this->authorize('delete', $comment);

        $comment->delete();

        return back()->with('flash', [
            'message' => 'Comment deleted successfully!',
        ]);
    }
}

然后添加路由到您的 web.php 文件

<?php
use App\Http\Controllers\MyCommentsController;

Route::post('/comments', [MyCommentsController::class, 'store']);
Route::delete('/comments/{comment}', [MyCommentsController::class, 'destroy']);
?>

不要忘记在您的模型中使用此特质

use GlebRed\LaravelVueSimpleComments\Traits\HasComments;

class News extends Model
{
    use HasComments;
}

然后为您的内容资源添加评论,例如

class NewsResource extends JsonResource
{
    /**
     * Transform the resource into an array.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array|\Illuminate\Contracts\Support\Arrayable|\JsonSerializable
     */
    public function toArray($request)
    {
        return [
            //...
            //order by latest first
            'comments' => CommentResource::collection($this->comments()->orderBy('created_at', 'desc')->get()),
        ];
    }
}

测试

npm test

愿望清单

  • 点赞
  • 回复

变更日志

请参阅CHANGELOG 了解最近更改的更多信息。

贡献

请参阅CONTRIBUTING 了解详细信息。

安全

如果您发现任何安全相关的问题,请通过电子邮件 gleb.redko@gmail.com 而不是使用问题跟踪器。

致谢

许可

MIT 许可证 (MIT)。请参阅许可文件 了解更多信息。