統合パッケージ的なものを探して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やらを考えずに作れるのは面白いですね。