背景

Laravel 8 公布近一个月了,这次改变比拟吸引我的就是 Jetstream 全家桶。在没公布之前我没接触过 Livewire 以及前端的 Tailwindcss，alpinejs。然而我是一个比拟喜爱尝试新技术的人。在商业化的我的项目去实际显然是不可取的。所以我在国庆开始的时候就打算利用假期的工夫去折腾下博客试试，理解它的特点。再去我的项目中对应的去应用。通过一段时间的折腾我发现这玩意挺香的。当然也有一些坑,我也会分享进去。

Livewire-Blog

github 代码地址 喜爱的请star????下 ????

博客线上地址

PC端界面成果

挪动端界面成果

功能分析

搜寻案例

Livewire 最大的长处的就是跟前端界面动静交互，比方我搜寻 Laravel 的时候他能够配合前端监听我的输出。实时通过 api 调用后盾的数据返回给前端。而这些 api 是毋庸你在编写的。它的外围文件 LivewireServiceProvider 曾经注册。有趣味的同学能够看下这个外围文件。

php artisan make:livewire search 生成 search.blade.php Search.php 文件
  • search.blade.php

  • Search.php

  • 查看成果

评论案例

评论外面会用到 Livewire 的组件全局事件互相通信

  • 需要剖析

  • 代码实现
php artisan make:livewire AddComment
php artisan make:livewire ShowComment
  • AddComment
<?phpnamespace App\Http\Livewire;use App\Models\CommentModel;use Illuminate\Support\Carbon;use Illuminate\Support\Facades\Auth;use Illuminate\Support\Facades\Cache;use Illuminate\Support\MessageBag;use Illuminate\Support\Str;use Illuminate\View\View;use Livewire\Component;class AddComment extends Component{    /**     * @var string     */    public $content;    /**     * @var int     */    public $post_id;    /**     * @var int     */    public $parent_id;    /**     * @var string     */    public $comment_composing_box_id;    /**     * @var string     */    public $preview_box_id;    /**     * @var string     */    public $target_id;    /**     * @var array     */    protected $rules = [        'content' => 'required',    ];    /**     * @var array     */    protected $messages = [        'content.required' => '评论不能为空！',    ];    public function mount(int $postId, CommentModel $comment, int $time = 0): void    {        $this->post_id = $postId;        $this->parent_id = empty($comment->id) ? 0 : ($comment->parent_id ? $comment->parent_id : $comment->id);        $this->target_id = empty($comment->id) ? 0 : $comment->id;        $this->content = ($time > 0 && ! empty($comment->user)) ? '@'.$comment->user->name.'：' : '';        $this->comment_composing_box_id = 'comment-composing-box-'.Str::random(10);        $this->preview_box_id = 'preview-box'.Str::random(10);    }    public function submit(): void    {        if ($this->check()) {            $validatedData = $this->validate();            $data = [                'content'   => $validatedData['content'],                'user_id'   => Auth::user()->id,                'parent_id' => $this->parent_id,                'post_id'   => $this->post_id,                'target_id' => $this->target_id,            ];            CommentModel::create($data);            $this->reset('content');            $this->emitTo('show-comment', 'create', $this->post_id);            session()->flash('message', '增加评论胜利！');        }    }    public function userCommentLimit(MessageBag &$messageBag): void    {        $time = Cache::get(user_comment_limit_key()) ?? 0;        $limit_day_time = config('cache.user_comment_limit.day_time', 10);        if ($limit_day_time < $time) {            $messageBag->add('content', Str::replaceFirst('?', $limit_day_time, '用户每天最多只能回复 ? 评论'));        } else {            Cache::put(user_comment_limit_key(), $time + 1, Carbon::today()->addDay());        }    }    /**     * @param MessageBag $messageBag     */    public function mustLogin(MessageBag &$messageBag): void    {        Auth::guest() && $messageBag->add('content', '用户须要登陆！');    }    /**     * @return bool     */    public function check(): bool    {        $messageBag = $this->getErrorBag();        $this->userCommentLimit($messageBag);        $this->mustLogin($messageBag);        return $messageBag->count() === 0;    }    /**     * @return View     */    public function render(): View    {        return view('livewire.add-comment');    }}
  • ShowComment
<?phpnamespace App\Http\Livewire;use App\Models\PostModel;use App\Repositories\BlogRepository;use Illuminate\Support\Collection;use Illuminate\View\View;use Livewire\Component;class ShowComment extends Component{    /**     * @var int     */    public $postId;    /**     * @var Collection     */    public $comments;    /**     * @var int     */    public $comments_count = 0;    /**     * @var array     */    protected $listeners = ['create' => 'getCommens'];    /**     * @param $postIds     */    public function mount(PostModel $post): void    {        $this->postId = $post->id;        $this->comments = $post->comments;        $this->comments_count = $post->comments->count() ?? 0;    }    /**     * $params.     */    public function getCommens(int $postId): void    {        $post = BlogRepository::getPostById($postId);        $this->comments = $post->comments;        $this->comments_count = $post->comments->count() ?? 0;    }    /**     * @return View     */    public function render(): View    {        return view('livewire.show-comment');    }}
  • 剖析

外面比拟重要的是 emitTo 这个的意思,就是你这个组件解决实现了须要告诉到谁,比方告诉 ShowComment, 就是 $this->emitTo('show-comment', 'create', $this->post_id)；组件名称能够通过打印 ShowComment::getName()取得。

  • 我遇到的坑

    • 评论我是要循环嵌套的。如果每个show-comment.blade.php 去再嵌套本人，emitTo 就会告诉很多个 ShowComment，我临时没看到 组件能够依据 名字+id 去告诉同步的。前面我用的 include 嵌套循环模版。有趣味的大家能够看下我代码。
  • AddComment组件 我是要去验证用户是否登陆的，无奈通过中间件实现。我前面是在组件办法外面去验证的。如果大家有好的方法也能够通知我。