上一篇的範例因為沒有用 CSS 調教過,還不大能見人。本篇將來簡單介紹 Tailwind CSS 這個 Utility-First 的 CSS 框架。 Tai...
Inertia.js 不是框架,也不是要來取代現有的框架。Inertia.js 的本質是個前端的路由套件,透過銜接既有的「前端框架」和「後端框架」,來達到用...
準備好 Laravel 的開發環境後,就可以開始初始化專案了。 安裝 Laravel 說到 Laravel 最近的大事件,就是 Laravel 8 準備要發布...
2021/03/28: 前言 必須得承認,這個系列真是頻繁出事,用了 Laravel 7,寫到一半升到 8;Vue.js 2.6 升到 3;Tailwind...
裝完 Laravel 後,我們就要開開心心地開始開發啦!首先第一步就是熟悉的 Laravel Router,把預設的 Welcome 視圖換成 Inertia...
在原本 Laravel Blade 裡要使用分頁是非常簡單的,但現在我們前端是 Vue,需要做一(億)些些調整才能使用分頁功能。 調整 Laravel 分頁器...
總結篇就來談一下跟 Inertia.js 相關的事情吧! 系列總結 "Build single-page apps, without buildi...
只要是同一個網站,就會有同樣的部分,例如導覽列、頁尾、側邊欄等,需要有 Layout 來統一管理整個網頁的佈局。 網頁內元素開始多了起來,總不可能一直都要複製...
調好了用戶 Model,現在可以來做登入/登出了。上篇已經在後端安裝 Laravel UI 有了現成的登入邏輯,但前端就需要做比較多事情...,像用 Tail...
2021/03/19: Depictr 套件目前已停止維護,不建議使用。(哭...) SEO 問題一直都是 SPA 的問題點,不過後來出現了 SSR (S...
熬了好久,終於要開始做用戶相關的功能啦!雖然 Laravel 預設有幫我們做了一些相關的功能,但沒有完全滿足這個 Lightning 的需求,先來做一些調整。...
有做過 API 應該都知道,要有 Presenter 層管資料呈現。Laravel 其實已經內建有 Resource 了。不過有個 (我認為) 更適合 Ine...
說到寫文章,易讀易寫的 Markdown 怎麼可以少?本篇就來配置 Markdown 功能到 Lightning。 Markdown 編輯器 我們這回要使用一...
註冊完帳號後,本篇要來更新資料和上傳大頭照。 帳號設定頁面 首先先新增 Controller: php artisan make:controller Use...
撰寫文章頁面 在上篇中,新增 Model 附贈了 Resource Controller,這裡也要新增 Resource 路由: routes/web.php...
註冊基本上和登入差不多,我們要做的註冊頁面裡也只需要增加一點欄位。 註冊頁面 跟登入一樣,到 RegisterController 中替換掉註冊頁面: app...
文章的新增、顯示都有了,馬上來做剩下的修改和刪除吧! 編輯文章和刪除文章功能 app/Http/Controllers/Post/PostController...
列表組件已經完成,再來可以做用戶頁面的文章列表了。 用戶頁面的文章列表 首先先修改用戶頁面的 Controller 部分,因為之後這個頁面還要放用戶喜歡的文章...
文章留言功能的最後一步,來做留言列表和刪除留言,把上篇新增的留言秀出來! 文章留言列表 先來新增一個留言列表組件: resources/js/Lightnin...
看到一篇優秀的文章,總是會給它按個讚,也可以從點讚次數來了解這篇文章的受歡迎程度。本篇就來實作這個功能,不過我會叫它「喜歡文章」嘻! 喜歡功能 不要重複造輪子...
接續上篇,做刪除帳號和用戶頁面,一口氣完成用戶的功能! 刪除帳號 新增刪除帳號的路由: routes/web.php // User ... Route::d...
首先先新增一個輸入留言的組件,裡面會使用之前做的 Markdown 輸入框組件,enabled prop 為 true 時可正常輸入留言,為 false 時禁...
在上篇中已經做完了喜歡文章的功能,但還存在一些問題,本篇就來看這些問題。 預加載 likers()->count() 問題 首先看到的是重複的 Quer...
再來要做 Lightning 的文章頁面,上篇新增的文章終於可以看到了。 文章頁面 文章頁面比較複雜一點點,我們把它抽出一個單獨的 ShowPost Cont...
文章列表 文章列表的路由已經存在 Resource 裡,只要再加一個草稿列表的路由,而且一定要放在 ShowPost 上面: routes/web.php /...