iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

Laravel Livewire:不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ?! 系列

Livewire 根本全端工程師的救星啊啊啊。幾年前想要做 MVVM 架構即時更新頁面上資料,不用繁雜的 ajax、jQuery 去調整各個 DOM 的話,那就只能改用 Vue、React ...等 SPA 前端框架透過前後端分離的方式來實現。我在體驗了 Livewire 後立馬從寫了三年的 Vue 轉回 PHP,因為 Router 跟 Model 終於不用前後端都各寫一次啦,在前後端都自己寫的情況下體驗直接滿分。也不用再花時間處理前後端的 token、CORS 等等一堆奇奇怪怪麻煩的問題 XD

鐵人鍊成 | 共 34 篇文章 | 14 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day 11 | 嵌套元件(二)

本來是沒打算分成兩天的。但第一天放入了程式碼讓文章看起來比較冗長,所以只好拆兩天啦!今天一樣也是 嵌套元件 Nesting Components 的部分。昨天在...

2021-09-13 ‧ 由 RenZhou 分享
DAY 12

Day 12 | 元件狀態:讀取 Loading States

在 Livewire 上的操作都會透過 AJAX 將資料往返與前後端之間,有些較長的請求可能不會即時反映在頁面上,像是上傳檔案...等等。因次為了給使用者更好的...

2021-09-14 ‧ 由 RenZhou 分享
DAY 13

Day 13 | 元件狀態:輪詢 Polling

今天要介紹的功能 Polling ,用Google 翻譯出來是「輪詢」,不過這個詞並不常見就是了,大致上可以想像成是每一段時間執行一次,像是 JavaScrip...

2021-09-15 ‧ 由 RenZhou 分享
DAY 14

Day14 | 元件狀態:離線 Offline

Livewire 可以讓在網頁離線的時候,顯示或是更改相對應的元素,雖然內容比較輕鬆,但有需要處理網站離線/斷線時也是可以省下不少手動處理的功夫。 官方文件 D...

2021-09-16 ‧ 由 RenZhou 分享
DAY 15

Day 15 | 元件狀態:污染(被更改) Dirty

如果想在資料被「污染」也就是被更改過時,想要透過新增 Class 來做特別的顯示,就可以使用 wire:dirty 來達成。這個功能比較常用在對資料的更改,例如...

2021-09-17 ‧ 由 RenZhou 分享
DAY 16

Day 16 | 元件狀態:預載 及 延遲載入 Prefetch & Defer Loading

今天因為這兩個功能都比較簡單,因此合在一起講。分別是 預載(Prefetching) 與 延遲載入(Defer Loading),那就來看看這兩個的功用是什麼吧...

2021-09-18 ‧ 由 RenZhou 分享
DAY 17

Day 17 | 常用範例:前後端共用的表單輸入驗證 Validate

Livewire 大致上功能都已經介紹完了,接下來就是一些常用的實作時間啦!!今天要來做最常會遇到的 表單驗證 功能!!以往這個功能在使用者輸入了格式錯誤的資料...

2021-09-19 ‧ 由 RenZhou 分享
DAY 18

Day 18 | 常用範例:表格分頁 Pagination 前後端做好只需三分鐘!?

今天的範例是超級無敵常用,有用到表格就一定會有的 分頁(Pagination),從零到有不用三分鐘!!! 如果原本是寫 Vue 的夥伴,Livewire 可以讓...

2021-09-20 ‧ 由 RenZhou 分享
DAY 19

Day 19 | Livewire 實作 Todo List(一): 新增待辦事項

先祝各位中秋節快樂~連假過後該收心了所以今天就來做一個待辦清單吧!順便熟悉一下 Livewire 的使用方法,這裡會依照功能拆成三天來做。 需求規劃 首先先預想...

2021-09-21 ‧ 由 RenZhou 分享
DAY 20

Day 20 | Livewire 實作 Todo List(二): 完成/刪除待辦事項

接續昨天的內容。昨天做完了 新增待辦事項 ,今天就來把 修改 跟 刪除 的功能給做出來吧!! 功能三、完成待辦事項 我的規劃是 點擊 待辦事項文字就能讓這個待辦...

2021-09-22 ‧ 由 RenZhou 分享