什麼是 Web 開發？前端、後端、全端入門 | Django 教學

2026/05/21
python django
什麼是 Web 開發？前端、後端、全端入門 | Django 教學

每天我們瀏覽網頁、查看社群動態、線上購物，這一切的背後都是 Web 開發（Web Development）的成果。但你是否好奇過，當你在瀏覽器輸入一個網址按下 Enter，到頁面出現在眼前的這短短幾秒內，究竟發生了什麼事？這篇文章是 Django 教學系列的第一篇，我們先不急著寫程式，而是從最基礎的概念開始——搞懂 Web 的運作原理、認識 前端 與 後端 的分工，以及為什麼我們選擇 Python + Django 作為這趟旅程的技術棧。

什麼是 Web？瀏覽器與伺服器的對話

Web（全名 World Wide Web，全球資訊網）是建構在網際網路（Internet）之上的一套資訊系統。簡單來說，Web 的運作就像是一場「你問我答」的對話，參與的兩個角色分別是：

  • 客戶端（Client）：通常就是你的瀏覽器（Browser），例如 Chrome、Firefox、Safari。
  • 伺服器（Server）：存放網站資料和程式的遠端電腦。

當你在瀏覽器輸入 https://www.example.com 並按下 Enter，瀏覽器會向伺服器「發出請求」，伺服器收到後「回傳回應」，瀏覽器再將回應的內容渲染（Render）成你看到的網頁畫面。

┌──────────────┐                        ┌──────────────┐
│              │   ① 發送 HTTP 請求      │              │
│   瀏覽器     │ ─────────────────────→  │    伺服器     │
│  (Client)    │                        │   (Server)   │
│              │   ② 回傳 HTTP 回應      │              │
│              │ ←─────────────────────  │              │
└──────────────┘                        └──────────────┘
      ↓
  ③ 瀏覽器渲染頁面
      ↓
  🖥️ 使用者看到網頁

這個「一問一答」的過程，就是 Web 運作的核心機制。

HTTP 請求與回應循環

瀏覽器和伺服器之間的對話遵循一套標準的溝通協定，叫做 HTTP（HyperText Transfer Protocol，超文本傳輸協定）。現代網站大多使用加密版本的 HTTPS（HTTP Secure）。

一次完整的 HTTP 請求/回應循環

讓我們拆解一次完整的流程：

第一步：瀏覽器發送請求（Request）

GET /articles/django-tutorial HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html

這段請求告訴伺服器：「我想用 GET 方法，取得 /articles/django-tutorial 這個資源。」

第二步：伺服器處理並回傳回應（Response）

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8

<!DOCTYPE html>
<html>
<head><title>Django 教學</title></head>
<body>
  <h1>歡迎來到 Django 教學</h1>
  <p>這是一篇入門文章。</p>
</body>
</html>

伺服器回覆狀態碼 200 OK，代表請求成功，同時附上 HTML 內容。

常見的 HTTP 方法

HTTP 方法 用途 範例場景
GET 取得資源 瀏覽網頁、搜尋結果
POST 提交資料 註冊帳號、送出表單
PUT 更新整個資源 修改個人資料
PATCH 部分更新資源 只修改使用者的暱稱
DELETE 刪除資源 刪除一篇文章

常見的 HTTP 狀態碼

狀態碼 含義 說明
200 OK 請求成功
301 Moved Permanently 資源永久搬家了
404 Not Found 找不到資源（網址打錯了）
500 Internal Server Error 伺服器內部出錯了

記住這些狀態碼，未來在開發和除錯時會經常遇到。

前端 vs 後端 vs 全端

Web 開發大致可以分為三個領域，就像蓋一棟房子需要不同工種的師傅一樣。

前端（Frontend）

前端 是使用者直接看到和互動的部分——也就是瀏覽器裡顯示的一切。前端開發者負責把設計稿變成活生生的網頁，核心技術有三：

  • HTML（HyperText Markup Language）：網頁的骨架結構。
  • CSS（Cascading Style Sheets）：網頁的外觀樣式，例如顏色、排版、動畫。
  • JavaScript：網頁的互動行為，例如按鈕點擊、表單驗證、動態載入內容。
<!-- HTML：定義結構 -->
<button id="greet-btn">點我打招呼</button>
<p id="message"></p>

<!-- CSS：定義樣式 -->
<style>
  #greet-btn {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
  }
</style>

<!-- JavaScript：定義互動行為 -->
<script>
  document.getElementById('greet-btn').addEventListener('click', function() {
    document.getElementById('message').textContent = '你好，歡迎來到 Django 教學！';
  });
</script>

現代前端還有很多流行的框架和工具，例如 React、Vue.js、Angular 等，但歸根究底都是建立在 HTML、CSS、JavaScript 之上。

後端（Backend）

後端 是在伺服器上運行的程式，使用者看不到、但卻是整個應用的「大腦」。後端負責的工作包括：

  • 處理商業邏輯：例如計算購物車總價、判斷使用者是否有權限查看某頁面。
  • 存取資料庫：讀取和儲存資料，例如使用者的帳號密碼、文章內容。
  • 身份驗證與授權：確認「你是誰」以及「你能做什麼」。
  • 回傳回應：將處理結果以 HTML、JSON 等格式回傳給前端。

後端可以用很多程式語言來開發：

語言 常用框架 代表性網站
Python Django, Flask, FastAPI Instagram, Pinterest
JavaScript Node.js, Express Netflix, LinkedIn
Java Spring Boot Amazon, eBay
Go Gin, Echo Google, Uber
Ruby Ruby on Rails GitHub, Shopify

全端（Full Stack）

全端開發者（Full Stack Developer）同時具備前端和後端的技能，能夠獨立完成一個 Web 應用的開發。在新創團隊或小型專案中，全端開發者非常吃香，因為一個人就能搞定從畫面到伺服器的所有工作。

不過「全端」不代表什麼都要精通，而是前後端都有一定的理解和實作能力，能夠有效地在兩端之間協作。

┌─────────────────────────────────────────────────┐
│                  全端（Full Stack）                │
│                                                   │
│  ┌─────────────────┐    ┌─────────────────────┐  │
│  │    前端           │    │       後端            │  │
│  │  (Frontend)      │    │    (Backend)         │  │
│  │                  │    │                      │  │
│  │  HTML            │    │  Python / Django     │  │
│  │  CSS             │ ←→ │  資料庫（Database）   │  │
│  │  JavaScript      │    │  API 設計            │  │
│  │  React / Vue     │    │  伺服器部署           │  │
│  └─────────────────┘    └─────────────────────┘  │
└─────────────────────────────────────────────────┘

為什麼選擇 Python + Django？

在眾多後端技術中，我們選擇 Python + Django 來展開這個教學系列，原因有以下幾點：

Python 的優勢

  1. 語法簡潔易讀：Python 被設計成「接近人類自然語言」的程式語言，同樣的功能用 Python 寫起來比其他語言更少程式碼。
  2. 全球最受歡迎：Python 連續多年蟬聯 TIOBE 程式語言排行榜冠軍，社群龐大、資源豐富。
  3. 應用廣泛：不只 Web 開發，Python 在資料科學（Data Science）、機器學習（Machine Learning）、自動化腳本等領域都是主流語言。

來看一個簡單的對比，同樣是在終端印出一行文字：

# Python — 一行搞定
print("Hello, Django!")

// Java — 需要完整的類別定義
public class Main {
    public static void main(String[] args) {
        System.out.println("Hello, Django!");
    }
}

Python 的簡潔讓你可以把更多精力放在「解決問題」而非「對付語法」上。

Django 的「電池全包」哲學

Django 是 Python 生態系中最成熟的 Web 框架，誕生於 2005 年，它的設計哲學是 “Batteries Included”（電池全包）——意思是開箱即用，不需要另外拼湊一堆第三方套件。

Django 內建了哪些功能？

內建功能 說明 自行組裝需要…
ORM（Object-Relational Mapping） 用 Python 程式碼操作資料庫，不用寫 SQL 自選 SQLAlchemy 等
Admin 管理後台 自動產生資料管理介面 自己建後台頁面
表單處理 自動驗證、CSRF 防護 手動處理每個欄位
使用者認證系統 登入、登出、權限管理 自選 Passport.js 等
URL 路由 將網址對應到處理函式 自選 Router 套件
模板引擎 動態產生 HTML 自選 Jinja2 等
安全防護 內建 CSRF、XSS、SQL Injection 防護 自行設定各項防護

用 Django 來寫一個最簡單的「Hello World」頁面：

# views.py — 定義視圖函式
from django.http import HttpResponse

def hello(request):
    """處理 HTTP 請求並回傳回應"""
    return HttpResponse("Hello, Django!")

# urls.py — 設定 URL 路由
from django.urls import path
from . import views

urlpatterns = [
    path('hello/', views.hello),  # 訪問 /hello/ 時執行 hello 函式
]

就這麼幾行程式碼，你就擁有了一個能回應 HTTP 請求的 Web 頁面。當使用者訪問 /hello/ 時，Django 會呼叫 hello 函式，回傳 “Hello, Django!” 這段文字。

誰在用 Django？

Django 不只是教學用的小框架，它經過了大型企業的實戰驗證：

  • Instagram：全球最大的圖片社群平台
  • Pinterest：視覺化書籤服務
  • Mozilla：Firefox 瀏覽器的開發組織
  • Disqus：全球最大的留言系統
  • Bitbucket：程式碼託管平台

這些網站每天處理數億次請求，證明了 Django 的可靠性和擴展性。

本系列教學路線圖

這個 Django 教學系列總共規劃了 44 篇文章，從完全零基礎開始，一步步帶你走到能夠獨立開發並部署一個完整 Web 應用的程度。以下是整體的學習路線：

第一階段：基礎觀念（第 1-5 篇）

  • 什麼是 Web 開發（本篇）
  • 開發環境建置（Python、pip、virtualenv）
  • 建立第一個 Django 專案
  • Django 專案結構解析
  • Django 的 MTV 架構模式

第二階段：核心功能（第 6-18 篇）

  • URL 路由與視圖（Views）
  • 模板引擎（Templates）與模板繼承
  • 模型（Models）與資料庫遷移（Migrations）
  • Django ORM 查詢語法
  • 表單（Forms）處理與驗證
  • Admin 管理後台客製化
  • 靜態檔案（Static Files）與媒體檔案
  • 使用者認證系統（登入、註冊、登出）

第三階段：進階技巧（第 19-32 篇）

  • Class-Based Views（CBV）
  • Middleware 中介層
  • Django REST Framework（DRF）
  • API 設計與序列化（Serialization）
  • 權限控制與節流（Throttling）
  • 資料庫關聯（一對多、多對多）
  • 查詢優化（select_related、prefetch_related）
  • 訊號（Signals）機制
  • 快取（Caching）策略
  • Celery 非同步任務

第四階段：實戰與部署（第 33-44 篇）

  • 完整專案實作（部落格 / 電商 / API）
  • 單元測試與整合測試
  • Docker 容器化
  • CI/CD 持續整合與部署
  • Nginx + Gunicorn 生產環境設定
  • 雲端部署（AWS / GCP / Heroku）
  • 效能監控與日誌管理
  • 安全性最佳實踐

每一篇文章都會有完整的程式碼範例，讓你能夠跟著動手實作。建議你按照順序閱讀，因為後面的內容會建立在前面的基礎之上。

總結

在這篇文章中，我們建立了幾個重要的基礎觀念：

  • Web 的運作原理：瀏覽器（Client）向伺服器（Server）發送 HTTP 請求，伺服器處理後回傳 HTTP 回應，瀏覽器再將回應渲染成網頁。
  • HTTP 協定：瀏覽器與伺服器溝通的標準語言，包含 GET、POST 等方法和 200、404 等狀態碼。
  • 前端 vs 後端：前端負責使用者看到的畫面（HTML、CSS、JavaScript），後端負責伺服器端的邏輯和資料處理。全端開發者則兼顧兩端。
  • 為什麼選 Django：Python 語法簡潔、Django 電池全包、經過大型網站實戰驗證，是後端入門的絕佳選擇。

下一篇文章，我們將開始動手建置開發環境，安裝 Python、設定虛擬環境，並建立你人生中的第一個 Django 專案。準備好了嗎？讓我們開始吧！

BenZ Software Developer

熱愛技術的軟體開發者，在這裡分享程式開發經驗與學習筆記。