前端開發(Front-end Development)是指建構使用者在瀏覽器中所見與互動的部分,包含畫面排版、樣式設計、按鈕點擊反應、資料顯示等。前端的主要目的是讓使用者能夠順暢地與後端系統互動。
負責網頁內容的結構,如標題、段落、表格、表單等。
負責美化網頁,包含顏色、排版、動態效果、響應式設計等。
負責網頁邏輯與互動,例如表單驗證、按鈕點擊、動畫、API 資料載入等。
隨著前端需求日益複雜,出現了許多強大的框架與函式庫,協助開發大型應用、提升維護效率。
| 名稱 | 開發者 | 特性簡述 |
|---|---|---|
| React | Meta (Facebook) | 元件化設計、虛擬 DOM、JSX 語法、單向資料流 |
| Vue | 尤雨溪 | 模板語法簡潔、雙向綁定、單檔元件、易於上手 |
| Angular | 全家桶框架(內建路由、HTTP、表單)、學習曲線高 | |
| Svelte | 獨立開發者群體 | 編譯時轉換為原生 JS、效能高、語法簡單 |
這些框架皆可搭配工具如 Vite, Webpack, ESLint, Prettier 等進行建構與開發。
- SPA(Single Page Application):單頁應用,頁面不重新載入。
- MPA(Multi Page Application):傳統網站,每次跳轉皆為新頁面。
- CSR(Client-side Rendering):由瀏覽器動態渲染內容。
- SSR(Server-side Rendering):由伺服器回傳渲染後 HTML,提高 SEO 效果。
前端開發中常會與伺服器進行資料交換,伺服器回應的 HTTP 狀態碼可協助開發者理解請求的結果。
| 狀態碼 | 類別說明 | 意義 |
|---|---|---|
| 200 | 成功 | 請求成功並回傳資料 |
| 201 | 成功 | 成功建立新資源(例如 POST 創建) |
| 204 | 成功 | 請求成功但無回應內容 |
| 400 | 用戶錯誤 | 請求格式錯誤、參數錯誤等 |
| 401 | 未授權 | 使用者尚未通過身份驗證 |
| 403 | 禁止存取 | 使用者無權存取該資源 |
| 404 | 找不到 | 資源不存在 |
| 500 | 伺服器錯誤 | 伺服器內部錯誤 |
| 502 | 錯誤閘道 | 通常為伺服器之間溝通問題 |
| 503 | 服務不可用 | 伺服器暫時超載或維護中 |
前端開發是建構現代網站與應用程式不可或缺的技能。選擇合適的框架與工具,能大幅提升開發效率與使用者體驗。