Laravel初心者のワイ、VoragerにLaravel Livewireを入れて遊ぶ実験

3928 ワード
livewire Voyager laravel8 Laravel初心者 Voyager テキストリンク

統合パッケージ的なものを探してVoragerにたどり着いたんですが
さて、VoragerにはLaravel Livewireを入れて遊ぶことができるかのテストです。
やり方とか、ぇ？そのコードいじるのは阿呆のやることってのはありますが、
そこは見地に合わせて読み替えてくださいませ。

Voragerは普通にインストール（説明省略）

■Laravel Livewireを導入

Laravelのプロジェクトで

composer require livewire/livewire

■Laravel Livewireのコード雛形を作る
Laravel　livewireのコード雛形として、testlivewireという名前でmake:livewireする

# php artisan make:livewire testlivewire

 COMPONENT CREATED  🤙

CLASS: app/Http/Livewire/Ttestlivewire.php
VIEW:  resources/views/livewire/testlivewire.blade.php

  _._
/ /o\ \   || ()                ()  __         
|_\ /_|   || || \\// /_\ \\ // || |~~ /_\   
 |`|`|    || ||  \/  \\_  \^/  || ||  \\_   


Congratulations, you've created your first Livewire component! 🎉🎉🎉

 Would you like to show some love by starring the repo? (yes/no) [no]:

なにか聞かれるんですが、noのママでいいので「return」を押せばいいです。
２回目以降のmake:livewireでは聞かれないです

■Laravel Livewiteで動的に動くBlade部分の処理を書く
ボタンを押せば+1するというどっかに有ったサンプリです。
Laravel Livewire的にはbladeを丸々サーバサイドでHTMLを生成し直して、HTMLをJSで送って、その部分のHTMLを書き換えるってことをしているようですね。
publicな変数の値はJSで渡され、イベントが発生したら発生したイベントと値をサーバに渡して、渡ってきた値をpublicに当てはめて処理をする・・と。
よく出来た仕組みです。

vi app/Http/Livewire/Testlivewire.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Testlivewire extends Component
{
    public $count = 10;
    public function inc(){
        $this->count++;
    }

    public function render()
    {
        return view('livewire.testlivewire');
    }
}

vi resources/views/livewire/testlivewire.blade.php

<div>
    {{-- Knowing others is intelligence; knowing yourself is true wisdom. --}}

hello livewite<br>
<?php echo date("Y/m/d H:i:s");?>
<h2>{{ $count }}</h2>
<p><button wire:click="inc">+1</button></p>
</div>

■Live wireを動作させるためのスタイルとJSをテンプレbladeに仕込む

vi vendor/tcg/voyager/resources/views/master.blade.php 

〜〜〜〜
<title>@yield('page_title', setting('admin.title') . " - " . setting('admin.description'))</title>
    @livewireStyles
〜〜〜〜
    @livewireScripts
</body>

※vendor/tcg/voyagerをいじるのは頭おかしいのですが、とりあえずｗｗｗｗ
良い子は手元に移動させましょうね

■作ったLivewireパーツをとりあえずDashboardのbladeに埋め込む

vi vendor/tcg/voyager/resources/views/dashboard/navbar.blade.php 

<nav class="navbar navbar-default navbar-fixed-top navbar-top">
<hr>
<livewire:testlivewire>
<br>
〜〜〜〜

※またまたvendor/tcg/voyagerをいじるのは頭おかしいのですが、とりあえずｗｗｗｗ
良い子は手元に移動させましょうね

たぶん、Dashboardページを表示すると以下のような感じになってるんじゃないでしょうかね？
＋１ボタンを押せば動きます

以上、無事実験成功でした。
Laravel Livewireは調べれば奥深いですし、導入しどころはアイデアが必要かもですが、
Laravel Livewire自体は既存システムにも導入は楽ですし
エンジニア的にはAjaxやらを考えずに作れるのは面白いですね。