iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0

安裝並部署 Livewire 的步驟沒有很多,照著做不用三分鐘就能完成囉!今天一樣是照著官方文件帶大家做一次囉~

安裝 Livewire

官方文件

首先要先安裝 Livewire 套件,到 Laravel 專案的根目錄下指令:

composer require livewire/livewire

將 Livewire 加到 HTML 中

在 Laravel 專案中通常都會建立一個至多個 Layout.blade.php 的檔案當作最外層的頁面,並把 CSS、JavaScript、meta 等等都寫在這裡。由於後面版本的 Laravel 都沒有內建,所以這邊我們會在 resources/views 底下建一個 layouts 資料夾,並在裡面建立一個 app.blade.php 的檔案。建好之後分別在 <head><body> 加入 @livewireStyles@livewireScripts 這樣就引入完成囉。

以 Vue.js 來說的話,會比較像是 public/index.html

# 路徑 resources/views/layouts/app.blade.php
<html>
	<head>
	    ...
	    @livewireStyles
	</head>
	<body>
	    ...
	    @livewireScripts
	</body>
</html>

建立 Livewire Component

官方文件

回到終端機,這邊要使用指令來建立 Livewire 的元件。

php artisan make:livewire <元件名稱>

這裡我們就照著官方文件建立一個叫做 ShowPosts 的元件:

php artisan make:livewire ShowPosts

指令下完後會自動產生兩個檔案,分別是:

app/Http/Livewire/ShowPosts.php
resources/views/livewire/show-posts.blade.php

生成的 app/Http/Livewire/ShowPosts.php

這個檔案會取代原先 Laravel 中 Controller 的功能,之後該頁面會用到的後端邏輯都會寫在這個檔案之中。換句話說就是把原本 Controller 的功能分散至各個 Livewire 中。之後要直接呼叫 Controller 中的 Function 的話還要再透過 Router 才能實現,因此如果有其他地方會重複使用到的 Function 另外寫一個 Class 各別引入應該會比較方便。

以 Vue.js 來說的話,就是各個 vue 頁面底下的 script 區塊
像是 data、methods、computed、mount 都會寫在這裡

生成的 resources/views/livewire/show-posts.blade.php

這個檔案會放這個元件的 HTML 以及畫面的邏輯等等,跟一般的 Laravel 專案中的 blade 會放的內容是一樣的。

以 Vue.js 來說的話,就是 Vue 檔案上方的 template 部分


上一篇
Day 02 | Laravel Livewire 基本介紹
下一篇
Day 04 | 渲染元件
系列文
Laravel Livewire:不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ?!34
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言