iT邦幫忙

鐵人檔案

第 12 屆 iT 邦幫忙鐵人賽
回列表
Modern Web

關於我用 Laravel 寫 SPA 卻不寫 API 的那檔事 系列

當前網頁架構分別是 MPA 和 SPA,但這兩種各有其利弊。為了要將 MPA 轉成 SPA,還需要維護前後端兩個專案。這時 Inertia.js 出現了,成功解決了這個問題。Inertia.js 是建構經典後端驅動 SPA 的新方法,不需要寫前端路由和後端 API。這個系列會使用和 Laravel + Vue.js + Inertia.js + Tailwind CSS 這套現代網站的絕佳組合,來建構一個簡易的部落格平台 Lightning,從中一步步了解 Inertia.js 的使用方式~~

鐵人鍊成 | 共 30 篇文章 | 39 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 01 為什麼我用 Laravel 寫 SPA 卻可以不寫 API?

在回答這個問題之前,我們先回來看看網頁前後端的區別吧! 以後端為基礎的網頁應用,優點是天生SEO良好,缺點是載入速度較慢。後來以AJAX為基礎,誕生了前端的網...

2020-09-03 ‧ 由 Lucas Yang 分享
DAY 2

Day 02 Inertia.js 是什麼?

Inertia.js 不是框架,也不是要來取代現有的框架。Inertia.js 的本質是個前端的路由套件,透過銜接既有的「前端框架」和「後端框架」,來達到用...

2020-09-04 ‧ 由 Lucas Yang 分享
DAY 3

Day 03 初始化 Lightning - 安裝 Laravel & Vue.js & Inertia.js

準備好 Laravel 的開發環境後,就可以開始初始化專案了。 安裝 Laravel 說到 Laravel 最近的大事件,就是 Laravel 8 準備要發布...

2020-09-05 ‧ 由 Lucas Yang 分享
DAY 4

Day 04 Inertia.js 的 Hello world

裝完 Laravel 後,我們就要開開心心地開始開發啦!首先第一步就是熟悉的 Laravel Router,把預設的 Welcome 視圖換成 Inertia...

2020-09-06 ‧ 由 Lucas Yang 分享
DAY 5

Day 05 安裝 Tailwind CSS

上一篇的範例因為沒有用 CSS 調教過,還不大能見人。本篇將來簡單介紹 Tailwind CSS 這個 Utility-First 的 CSS 框架。 Tai...

2020-09-07 ‧ 由 Lucas Yang 分享
DAY 6

Day 06 Iconify 和 Heroicons

本篇要來講在網頁很常見的元素 icon。常見的 icon 套件包括 Material Design Icons、Font Awesome、Octicon,而且...

2020-09-08 ‧ 由 Lucas Yang 分享
DAY 7

Day 07 Layout 和組件

只要是同一個網站,就會有同樣的部分,例如導覽列、頁尾、側邊欄等,需要有 Layout 來統一管理整個網頁的佈局。 網頁內元素開始多了起來,總不可能一直都要複製...

2020-09-09 ‧ 由 Lucas Yang 分享
DAY 8

Day 08 Lightning 用戶功能

熬了好久,終於要開始做用戶相關的功能啦!雖然 Laravel 預設有幫我們做了一些相關的功能,但沒有完全滿足這個 Lightning 的需求,先來做一些調整。...

2020-09-10 ‧ 由 Lucas Yang 分享
DAY 9

Day 09 Lightning 用戶登入

調好了用戶 Model,現在可以來做登入/登出了。上篇已經在後端安裝 Laravel UI 有了現成的登入邏輯,但前端就需要做比較多事情...,像用 Tail...

2020-09-11 ‧ 由 Lucas Yang 分享
DAY 10

Day 10 Inertia.js 和 Presenter - Flexible Presenter

有做過 API 應該都知道,要有 Presenter 層管資料呈現。Laravel 其實已經內建有 Resource 了。不過有個 (我認為) 更適合 Ine...

2020-09-12 ‧ 由 Lucas Yang 分享