Laravel Livewireの起動

5559 ワード
Laravel Livewire laravel テキストリンク

Laravel


PHP Web開発を行う際にフレームワークを一切使用せず、ある時点でPHPフレームワークとして人気のあるLaravelを発見しました.私はずっとこのフレームワークをうまく使えるかどうか考えていましたが、PHPをある程度開発できれば、Laravel自身の文法をマスターすれば使えます.

Laravel Livewire


JavaScriptを使用せず、LaravellとLaravellでフロントエンドを担当するBladeのみを使用してダイナミックページの作成を支援するツールである「LaravelLivewire」というフレームワークも見つかりました.つまり,Laravelの全スタックフレームといえる.

スタート


下図はLaravelLivewire公式ホームページのDocsページです.Docsの内容どおりに進めば、LaravelLivewireは簡単に使えるはずです.
DocsのQuickstartをプロセスすることでCounter(数世紀)を作成できます.LivewireはLaravelに属するプログラムであるため、まずLaravelプロジェクトを作成する必要があります.筆者はLaravel 7バージョンに詳しいので、Laravel 7バージョンで書くことにしました.Laravelプロジェクトを生成するコマンドは次のとおりです.
composer create-project --prefer-dist laravel/laravel:^7.0 counter
「counter」というLaravelプロジェクトを作成し、Laravel Livewireのインストールプロセスを行います.上図のように、プロジェクト作成が完了したら、端末に以下のコマンドを入力します.
cd counter
端末が「counter」フォルダに入る場合は、LaravelLivewireをインストールするには、次のコマンドを入力します.
composer require livewire/livewire
Laravel Livewireは動的Webページの作成に役立つため、Laravelプロジェクトのフロントエンドにコードを追加してLaravel Livewireをロードする必要があります.筆者は主にVisual Studioコードを使用しているので、VSコードを使用して作業しています.VSコードに、先ほど作成したLaravel Project、「resources/views/welcome」を読み込みます.blade.php'ファイルを開き、次のコードと画像を追加します.
...
    @livewireStyles
</head>
<body>
    @livewireScripts
...
上記の手順がすべて行われた場合は、LaravelLivewireのコンポーネントを追加する必要があります.LaravelLivewireの構成部品をインストールするには、次のコマンドを入力します.
php artisan make:livewire counter
上記のコマンドを入力して構成部品をインストールする場合は、「app/http/Livewire/counter.php"と"resources/views/livewire/counter.blade.php/'ファイルが追加されます.“resources/views/welcome.blade.php'ファイルを開き、下図に示すようにコードを追加します.
...
<body>
    <livewire:counter />
...
「現在進行中のLaravel Livewire Quickstart Docsでは、カウンタアイテムを作成する方法を説明しています.そのため、カウンタコンポーネントクラスを作成する必要があります.」app/Http/Livewire/Counter.php'ファイルを開き、次の図に示すようにコードを追加します.
...
	public $count = 0;

	public function increment()
	{
    		$this->count++;
	}
...
コードを追加した場合は、「resources/views/livewire/counter」です.blade.php'ファイルを開き、次のコードを追加します.
<div style="text-align: center">
    <button wire:click="increment">+</button>
    <h1>{{ $count }}</h1>
</div>
現在、LaravelLivewireのCounterプロジェクトはすべて作成されています.次のコマンドを入力して、社内開発サーバを開き、プロジェクトが正常に生成されているかどうかを確認します.
php artisan serve

以上のように、+キーを押すと数が増えることを確認すれば成功です.筆者の計画では,LaravelLivewireを掲示板などのデータベースを利用したプロジェクトに実際に適用し,プロジェクトがどれほど便利であるかを開発し理解することである.

リファレンス

  • Laravel v7 Docs
  • Laravel Livewire Docs
    • linuxでisoミラーをマウントする方法
    Linux構築phpldapadmin