最早的軟體都是執行在大型機上的，軟體使用者通過“啞終端”登陸到大型機上去執行軟體。後來隨著PC機的興起，軟體開始主要執行在桌面上，而資料庫這樣的軟體執行在伺服器端，這種Client/Server模式簡稱CS架構。

隨著網際網路的興起，人們發現，CS架構不適合Web，最大的原因是Web應用程式的修改和升級非常迅速，而CS架構需要每個客戶端逐個升級桌面App，因此，Browser/Server模式開始流行，簡稱BS架構。

在BS架構下，客戶端只需要瀏覽器，應用程式的邏輯和資料都儲存在伺服器端。瀏覽器只需要請求伺服器，獲取Web頁面，並把Web頁面展示給使用者即可。

當然，Web頁面也具有極強的互動性。由於Web頁面是用HTML編寫的，而HTML具備超強的表現力，並且，伺服器端升級後，客戶端無需任何部署就可以使用到新的版本，因此，BS架構迅速流行起來。

今天，除了重量級的軟體如Office，Photoshop等，大部分軟體都以Web形式提供。比如，新浪提供的新聞、部落格、微博等服務，均是Web應用。

Web應用開發可以說是目前軟體開發中最重要的部分。Web開發也經歷了好幾個階段：

1. 靜態Web頁面：由文字編輯器直接編輯並生成靜態的HTML頁面，如果要修改Web頁面的內容，就需要再次編輯HTML原始檔，早期的網際網路Web頁面就是靜態的；

2. CGI：由於靜態Web頁面無法與使用者互動，比如使用者填寫了一個登錄檔單，靜態Web頁面就無法處理。要處理使用者傳送的動態資料，出現了Common Gateway Interface，簡稱CGI，用C/C++編寫。

3. ASP/JSP/PHP：由於Web應用特點是修改頻繁，用C/C++這樣的低階語言非常不適合Web開發，而指令碼語言由於開發效率高，與HTML結合緊密，因此，迅速取代了CGI模式。ASP是微軟推出的用VBScript指令碼程式設計的Web開發技術，而JSP用Java來編寫指令碼，PHP本身則是開源的指令碼語言。

4. MVC：為了解決直接用指令碼語言嵌入HTML導致的可維護性差的問題，Web應用也引入了Model-View-Controller的模式，來簡化Web開發。ASP發展為ASP.Net，JSP和PHP也有一大堆MVC框架。

目前，Web開發技術仍在快速發展中，非同步開發、新的MVVM前端技術層出不窮。

Python的誕生歷史比Web還要早，由於Python是一種解釋型的指令碼語言，開發效率高，所以非常適合用來做Web開發。

Python有上百種Web開發框架，有很多成熟的模板技術，選擇Python開發Web應用，不但開發效率高，而且執行速度快。

本章我們會詳細討論Python Web開發技術。

一、HTTP協議簡介

在Web應用中，伺服器把網頁傳給瀏覽器，實際上就是把網頁的HTML程式碼傳送給瀏覽器，讓瀏覽器顯示出來。而瀏覽器和伺服器之間的傳輸協議是HTTP，所以：

• HTML是一種用來定義網頁的文字，會HTML，就可以編寫網頁；

• HTTP是在網路上傳輸HTML的協議，用於瀏覽器和伺服器的通訊。

在舉例子之前，我們需要安裝Google的Chrome瀏覽器。

為什麼要使用Chrome瀏覽器而不是IE呢？因為IE實在是太慢了，並且，IE對於開發和除錯Web應用程式完全是一點用也沒有。

我們需要在瀏覽器很方便地除錯我們的Web應用，而Chrome提供了一套完整地除錯工具，非常適合Web開發。

安裝好Chrome瀏覽器後，開啟Chrome，在選單中選擇“檢視”，“開發者”，“開發者工具”，就可以顯示開發者工具：

Elements顯示網頁的結構，Network顯示瀏覽器和伺服器的通訊。我們點Network，確保第一個小紅燈亮著，Chrome就會記錄所有瀏覽器和伺服器之間的通訊：

當我們在位址列輸入www.sina.com.cn時，瀏覽器將顯示新浪的首頁。在這個過程中，瀏覽器都幹了哪些事情呢？通過Network的記錄，我們就可以知道。在Network中，定位到第一條記錄，點選，右側將顯示Request Headers，點選右側的view source，我們就可以看到瀏覽器發給新浪伺服器的請求：

最主要的頭兩行分析如下，第一行：

GET / HTTP/1.1

GET表示一個讀取請求，將從伺服器獲得網頁資料，/表示URL的路徑，URL總是以/開頭，/就表示首頁，最後的HTTP/1.1指示採用的HTTP協議版本是1.1。目前HTTP協議的版本就是1.1，但是大部分伺服器也支援1.0版本，主要區別在於1.1版本允許多個HTTP請求複用一個TCP連線，以加快傳輸速度。

從第二行開始，每一行都類似於Xxx: abcdefg：

Host: www.sina.com.cn

表示請求的域名是www.sina.com.cn。如果一臺伺服器有多個網站，伺服器就需要通過Host來區分瀏覽器請求的是哪個網站。

繼續往下找到Response Headers，點選view source，顯示伺服器返回的原始響應資料：

HTTP響應分為Header和Body兩部分（Body是可選項），我們在Network中看到的Header最重要的幾行如下：

200 OK

200表示一個成功的響應，後面的OK是說明。失敗的響應有404 Not Found：網頁不存在，500 Internal Server Error：伺服器內部出錯，等等。

Content-Type: text/html

Content-Type指示響應的內容，這裡是text/html表示HTML網頁。請注意，瀏覽器就是依靠Content-Type來判斷響應的內容是網頁還是圖片，是視訊還是音樂。瀏覽器並不靠URL來判斷響應的內容，所以，即使URL是http://example.com/abc.jpg，它也不一定就是圖片。

HTTP響應的Body就是HTML原始碼，我們在選單欄選擇“檢視”，“開發者”，“檢視網頁原始碼”就可以在瀏覽器中直接檢視HTML原始碼：

當瀏覽器讀取到新浪首頁的HTML原始碼後，它會解析HTML，顯示頁面，然後，根據HTML裡面的各種連結，再發送HTTP請求給新浪伺服器，拿到相應的圖片、視訊、Flash、JavaScript指令碼、CSS等各種資源，最終顯示出一個完整的頁面。所以我們在Network下面能看到很多額外的HTTP請求。

HTTP請求

跟蹤了新浪的首頁，我們來總結一下HTTP請求的流程：

步驟1：瀏覽器首先向伺服器傳送HTTP請求，請求包括：

方法：GET還是POST，GET僅請求資源，POST會附帶使用者資料；

路徑：/full/url/path；

域名：由Host頭指定：Host: www.sina.com.cn

以及其他相關的Header；

如果是POST，那麼請求還包括一個Body，包含使用者資料。

步驟2：伺服器向瀏覽器返回HTTP響應，響應包括：

響應程式碼：200表示成功，3xx表示重定向，4xx表示客戶端傳送的請求有錯誤，5xx表示伺服器端處理時發生了錯誤；

響應型別：由Content-Type指定；

以及其他相關的Header；

通常伺服器的HTTP響應會攜帶內容，也就是有一個Body，包含響應的內容，網頁的HTML原始碼就在Body中。

步驟3：如果瀏覽器還需要繼續向伺服器請求其他資源，比如圖片，就再次發出HTTP請求，重複步驟1、2。

Web採用的HTTP協議採用了非常簡單的請求-響應模式，從而大大簡化了開發。當我們編寫一個頁面時，我們只需要在HTTP請求中把HTML傳送出去，不需要考慮如何附帶圖片、視訊等，瀏覽器如果需要請求圖片和視訊，它會發送另一個HTTP請求，因此，一個HTTP請求只處理一個資源。

HTTP協議同時具備極強的擴充套件性，雖然瀏覽器請求的是http://www.sina.com.cn/的首頁，但是新浪在HTML中可以鏈入其他伺服器的資源，比如<img src="http://i1.sinaimg.cn/home/2013/1008/U8455P30DT20131008135420.png">，從而將請求壓力分散到各個伺服器上，並且，一個站點可以連結到其他站點，無數個站點互相連結起來，就形成了World Wide Web，簡稱WWW。

HTTP格式

每個HTTP請求和響應都遵循相同的格式，一個HTTP包含Header和Body兩部分，其中Body是可選的。

HTTP協議是一種文字協議，所以，它的格式也非常簡單。HTTP GET請求的格式：

GET /path HTTP/1.1
Header1: Value1
Header2: Value2
Header3: Value3

每個Header一行一個，換行符是\r\n。

HTTP POST請求的格式：

POST /path HTTP/1.1
Header1: Value1
Header2: Value2
Header3: Value3

body data goes here...

當遇到連續兩個\r\n時，Header部分結束，後面的資料全部是Body。

HTTP響應的格式：

200 OK
Header1: Value1
Header2: Value2
Header3: Value3

body data goes here...

HTTP響應如果包含body，也是通過\r\n\r\n來分隔的。請再次注意，Body的資料型別由Content-Type頭來確定，如果是網頁，Body就是文字，如果是圖片，Body就是圖片的二進位制資料。

當存在Content-Encoding時，Body資料是被壓縮的，最常見的壓縮方式是gzip，所以，看到Content-Encoding: gzip時，需要將Body資料先解壓縮，才能得到真正的資料。壓縮的目的在於減少Body的大小，加快網路傳輸。

二、HTML簡介

網頁就是HTML？這麼理解大概沒錯。因為網頁中不但包含文字，還有圖片、視訊、Flash小遊戲，有複雜的排版、動畫效果，所以，HTML定義了一套語法規則，來告訴瀏覽器如何把一個豐富多彩的頁面顯示出來。

HTML長什麼樣？上次我們看了新浪首頁的HTML原始碼，如果仔細數數，竟然有6000多行！

所以，學HTML，就不要指望從新浪入手了。我們來看看最簡單的HTML長什麼樣：

<html>
<head>
  <title>Hello</title>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

可以用文字編輯器編寫HTML，然後儲存為hello.html，雙擊或者把檔案拖到瀏覽器中，就可以看到效果：

HTML文件就是一系列的Tag組成，最外層的Tag是<html>。規範的HTML也包含<head>...</head>和<body>...</body>（注意不要和HTTP的Header、Body搞混了），由於HTML是富文件模型，所以，還有一系列的Tag用來表示連結、圖片、表格、表單等等。

CSS簡介

CSS是Cascading Style Sheets（層疊樣式表）的簡稱，CSS用來控制HTML裡的所有元素如何展現，比如，給標題元素<h1>加一個樣式，變成48號字型，灰色，帶陰影：

<html>
<head>
  <title>Hello</title>
  <style>
    h1 {
      color: #333333;
      font-size: 48px;
      text-shadow: 3px 3px 3px #666666;
    }
  </style>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

效果如下：

JavaScript簡介

JavaScript雖然名稱有個Java，但它和Java真的一點關係沒有。JavaScript是為了讓HTML具有互動性而作為指令碼語言新增的，JavaScript既可以內嵌到HTML中，也可以從外部連結到HTML中。如果我們希望當用戶點選標題時把標題變成紅色，就必須通過JavaScript來實現：

<html>
<head>
  <title>Hello</title>
  <style>
    h1 {
      color: #333333;
      font-size: 48px;
      text-shadow: 3px 3px 3px #666666;
    }
  </style>
  <script>
    function change() {
      document.getElementsByTagName('h1')[0].style.color = '#ff0000';
    }
  </script>
</head>
<body>
  <h1 onclick="change()">Hello, world!</h1>
</body>
</html>

點選標題後效果如下：

小結

如果要學習Web開發，首先要對HTML、CSS和JavaScript作一定的瞭解。HTML定義了頁面的內容，CSS來控制頁面元素的樣式，而JavaScript負責頁面的互動邏輯。

講解HTML、CSS和JavaScript就可以寫3本書，對於優秀的Web開發人員來說，精通HTML、CSS和JavaScript是必須的，這裡推薦一個線上學習網站w3schools：

以及一個對應的中文版本：

當我們用Python或者其他語言開發Web應用時，我們就是要在伺服器端動態創建出HTML，這樣，瀏覽器就會向不同的使用者顯示出不同的Web頁面。

三、WSGI介面

瞭解了HTTP協議和HTML文件，我們其實就明白了一個Web應用的本質就是：

1. 瀏覽器傳送一個HTTP請求；

2. 伺服器收到請求，生成一個HTML文件；

3. 伺服器把HTML文件作為HTTP響應的Body傳送給瀏覽器；

4. 瀏覽器收到HTTP響應，從HTTP Body取出HTML文件並顯示。

所以，最簡單的Web應用就是先把HTML用檔案儲存好，用一個現成的HTTP伺服器軟體，接收使用者請求，從檔案中讀取HTML，返回。Apache、Nginx、Lighttpd等這些常見的靜態伺服器就是幹這件事情的。

如果要動態生成HTML，就需要把上述步驟自己來實現。不過，接受HTTP請求、解析HTTP請求、傳送HTTP響應都是苦力活，如果我們自己來寫這些底層程式碼，還沒開始寫動態HTML呢，就得花個把月去讀HTTP規範。

正確的做法是底層程式碼由專門的伺服器軟體實現，我們用Python專注於生成HTML文件。因為我們不希望接觸到TCP連線、HTTP原始請求和響應格式，所以，需要一個統一的介面，讓我們專心用Python編寫Web業務。

這個介面就是WSGI：Web Server Gateway Interface。

WSGI介面定義非常簡單，它只要求Web開發者實現一個函式，就可以響應HTTP請求。我們來看一個最簡單的Web版本的“Hello, web!”：

def application(environ, start_response):
    start_response('200 OK', [('Content-Type', 'text/html')])
    return [b'<h1>Hello, web!</h1>']

上面的application()函式就是符合WSGI標準的一個HTTP處理函式，它接收兩個引數：

• environ：一個包含所有HTTP請求資訊的dict物件；

• start_response：一個傳送HTTP響應的函式。

在application()函式中，呼叫：

start_response('200 OK', [('Content-Type', 'text/html')])

就傳送了HTTP響應的Header，注意Header只能傳送一次，也就是隻能呼叫一次start_response()函式。start_response()函式接收兩個引數，一個是HTTP響應碼，一個是一組list表示的HTTP Header，每個Header用一個包含兩個str的tuple表示。

通常情況下，都應該把Content-Type頭髮送給瀏覽器。其他很多常用的HTTP Header也應該傳送。

然後，函式的返回值b'<h1>Hello, web!</h1>'將作為HTTP響應的Body傳送給瀏覽器。

有了WSGI，我們關心的就是如何從environ這個dict物件拿到HTTP請求資訊，然後構造HTML，通過start_response()傳送Header，最後返回Body。

整個application()函式本身沒有涉及到任何解析HTTP的部分，也就是說，底層程式碼不需要我們自己編寫，我們只負責在更高層次上考慮如何響應請求就可以了。

不過，等等，這個application()函式怎麼呼叫？如果我們自己呼叫，兩個引數environ和start_response我們沒法提供，返回的bytes也沒法發給瀏覽器。

所以application()函式必須由WSGI伺服器來呼叫。有很多符合WSGI規範的伺服器，我們可以挑選一個來用。但是現在，我們只想儘快測試一下我們編寫的application()函式真的可以把HTML輸出到瀏覽器，所以，要趕緊找一個最簡單的WSGI伺服器，把我們的Web應用程式跑起來。

好訊息是Python內建了一個WSGI伺服器，這個模組叫wsgiref，它是用純Python編寫的WSGI伺服器的參考實現。所謂“參考實現”是指該實現完全符合WSGI標準，但是不考慮任何執行效率，僅供開發和測試使用。

執行WSGI服務

我們先編寫hello.py，實現Web應用程式的WSGI處理函式：

# hello.py

def application(environ, start_response):
    start_response('200 OK', [('Content-Type', 'text/html')])
    return [b'<h1>Hello, web!</h1>']

然後，再編寫一個server.py，負責啟動WSGI伺服器，載入application()函式：

# server.py
# 從wsgiref模組匯入:
from wsgiref.simple_server import make_server
# 匯入我們自己編寫的application函式:
from hello import application

# 建立一個伺服器，IP地址為空，埠是8000，處理函式是application:
httpd = make_server('', 8000, application)
print('Serving HTTP on port 8000...')
# 開始監聽HTTP請求:
httpd.serve_forever()

確保以上兩個檔案在同一個目錄下，然後在命令列輸入python server.py來啟動WSGI伺服器：

注意：如果8000埠已被其他程式佔用，啟動將失敗，請修改成其他埠。

啟動成功後，開啟瀏覽器，輸入http://localhost:8000/，就可以看到結果了：

在命令列可以看到wsgiref列印的log資訊：

按Ctrl+C終止伺服器。

如果你覺得這個Web應用太簡單了，可以稍微改造一下，從environ裡讀取PATH_INFO，這樣可以顯示更加動態的內容：

# hello.py

def application(environ, start_response):
    start_response('200 OK', [('Content-Type', 'text/html')])
    body = '<h1>Hello, %s!</h1>' % (environ['PATH_INFO'][1:] or 'web')
    return [body.encode('utf-8')]

你可以在位址列輸入使用者名稱作為URL的一部分，將返回Hello, xxx!：

是不是有點Web App的感覺了？

小結

無論多麼複雜的Web應用程式，入口都是一個WSGI處理函式。HTTP請求的所有輸入資訊都可以通過environ獲得，HTTP響應的輸出都可以通過start_response()加上函式返回值作為Body。

複雜的Web應用程式，光靠一個WSGI函式來處理還是太底層了，我們需要在WSGI之上再抽象出Web框架，進一步簡化Web開發。

四、使用Web框架

瞭解了WSGI框架，我們發現：其實一個Web App，就是寫一個WSGI的處理函式，針對每個HTTP請求進行響應。

但是如何處理HTTP請求不是問題，問題是如何處理100個不同的URL。

每一個URL可以對應GET和POST請求，當然還有PUT、DELETE等請求，但是我們通常只考慮最常見的GET和POST請求。

一個最簡單的想法是從environ變數裡取出HTTP請求的資訊，然後逐個判斷：

def application(environ, start_response):
    method = environ['REQUEST_METHOD']
    path = environ['PATH_INFO']
    if method=='GET' and path=='/':
        return handle_home(environ, start_response)
    if method=='POST' and path='/signin':
        return handle_signin(environ, start_response)
    ...

只是這麼寫下去程式碼是肯定沒法維護了。

程式碼這麼寫沒法維護的原因是因為WSGI提供的介面雖然比HTTP介面高階了不少，但和Web App的處理邏輯比，還是比較低階，我們需要在WSGI介面之上能進一步抽象，讓我們專注於用一個函式處理一個URL，至於URL到函式的對映，就交給Web框架來做。

由於用Python開發一個Web框架十分容易，所以Python有上百個開源的Web框架。這裡我們先不討論各種Web框架的優缺點，直接選擇一個比較流行的Web框架——Flask來使用。

用Flask編寫Web App比WSGI介面簡單（這不是廢話麼，要是比WSGI還複雜，用框架幹嘛？），我們先用pip安裝Flask：

$ pip install flask

然後寫一個app.py，處理3個URL，分別是：

• GET /：首頁，返回Home；

• GET /signin：登入頁，顯示登入表單；

• POST /signin：處理登入表單，顯示登入結果。

注意噢，同一個URL/signin分別有GET和POST兩種請求，對映到兩個處理函式中。

相關推薦