Skip to content

Latest commit

 

History

History
64 lines (42 loc) · 2.94 KB

File metadata and controls

64 lines (42 loc) · 2.94 KB

🎨 Front-end

前端開發(Front-end Development)是指建構使用者在瀏覽器中所見與互動的部分,包含畫面排版、樣式設計、按鈕點擊反應、資料顯示等。前端的主要目的是讓使用者能夠順暢地與後端系統互動。

1. 前端技術核心

HTML(HyperText Markup Language)

負責網頁內容的結構,如標題、段落、表格、表單等。

CSS(Cascading Style Sheets)

負責美化網頁,包含顏色、排版、動態效果、響應式設計等。

JavaScript

負責網頁邏輯與互動,例如表單驗證、按鈕點擊、動畫、API 資料載入等。


2. 現代前端框架與函式庫

隨著前端需求日益複雜,出現了許多強大的框架與函式庫,協助開發大型應用、提升維護效率。

名稱 開發者 特性簡述
React Meta (Facebook) 元件化設計、虛擬 DOM、JSX 語法、單向資料流
Vue 尤雨溪 模板語法簡潔、雙向綁定、單檔元件、易於上手
Angular Google 全家桶框架(內建路由、HTTP、表單)、學習曲線高
Svelte 獨立開發者群體 編譯時轉換為原生 JS、效能高、語法簡單

這些框架皆可搭配工具如 Vite, Webpack, ESLint, Prettier 等進行建構與開發。


3. 前端常見架構模式

  • SPA(Single Page Application):單頁應用,頁面不重新載入。
  • MPA(Multi Page Application):傳統網站,每次跳轉皆為新頁面。
  • CSR(Client-side Rendering):由瀏覽器動態渲染內容。
  • SSR(Server-side Rendering):由伺服器回傳渲染後 HTML,提高 SEO 效果。

4. 常見 HTTP 狀態碼(Status Codes)

前端開發中常會與伺服器進行資料交換,伺服器回應的 HTTP 狀態碼可協助開發者理解請求的結果。

狀態碼 類別說明 意義
200 成功 請求成功並回傳資料
201 成功 成功建立新資源(例如 POST 創建)
204 成功 請求成功但無回應內容
400 用戶錯誤 請求格式錯誤、參數錯誤等
401 未授權 使用者尚未通過身份驗證
403 禁止存取 使用者無權存取該資源
404 找不到 資源不存在
500 伺服器錯誤 伺服器內部錯誤
502 錯誤閘道 通常為伺服器之間溝通問題
503 服務不可用 伺服器暫時超載或維護中

前端開發是建構現代網站與應用程式不可或缺的技能。選擇合適的框架與工具,能大幅提升開發效率與使用者體驗。